Bài 5: Thiết kế giao diện - Giáo trình FPT

Bài 5:Thiết kế giao diện

Hiểu về mô hình dữ liệu mức khái niệmÔn lại kiến thức ERDXây dựng ERD

Xác định thực thểXác định bản sốXác định thuộc tính

Hệ thống bài cũ

Thiết kế giao diện 2

Thiết kế giao diện


Thiết kế biểu mẫu và báo cáoThiết kế biểu mẫu và báo cáo

Thiết kế giao diện và hội thoạiThiết kế giao diện và hội thoại

Mục tiêu chương



THIẾT KẾ BIỂU MẪUVÀ BÁO CÁO

Biểu mẫuLà tài liệu được dùng trong tổ chức mà một vài dữ liệu đãcó sẵn thông tin và có thể chứa những vùng để điền dữliệu cần điền vàoThông tin trên form dựa trên dữ liệu một hoặc nhiều bảnghi trong CSDL

Báo cáoLà một tài liệu được sử dụng trong tổ chức chỉ chứa dữliệu đã có sẵn thông tinLà tài liệu được sử dụng để đọc hoặc xem dữ liệuChứa dữ liệu của nhiều bản ghi

Định nghĩa


Quy trình lấy người dùng làm trung tâm

Xác định yêu cầuAi sẽ là người sử dụng biểu mẫu hay báo cáo này?Mục đích của biểu mẫu hay báo cáo này là gì?Khi nào thì biểu mẫu hay báo cáo này cần và được sử dụng?Biểu mẫu hay báo cáo này cần được chuyển đến đâu vàdùng ở đâu?Bao nhiêu người cần sử dụng hoặc xem biểu mẫu, báo cáonày?

Quy trình thiết kế


XĐ yêu cầu Thiết kế mẫu

Sản phẩm chuyển giao là bản đặc tả thiết kế cho mỗibiểu mẫu hoặc báo cáo gồm 3 phần chính

Mô tả khái quátMẫu thiết kếKiểm thử và đánh giá tính tiện dụng

Đối với những biểu mẫu hoặc báo cáo đơn giản có thểkhông cần đến phần kiểm thử, đánh giá tính tiện dụng(Xem bản đặc tả thiết kế ở trang bên)

Sản phẩm chuyển giao


Quy tắc định dạng biểu mẫu và báo cáo


• Quy tắc chung về định dạng1• Quy tắc làm nổi bật thông tin2• Quy tắc hiển thị văn bản3• Quy tắc hiển thị bảng và danh sách4

Quy tắc chung về cách định dạng


Sử dụng tiêu đề có ý nghĩa

Đưa vào những thông tin có ý nghĩa

Bố cục cân đối

Hệ thống điều hướng tiện dụng

So sánh hai cách định dạng


Mục đíchHướng người sử dụng đến thông tin mong muốn

Thông tin thường được làm nổi bật khiThông báo lỗi cho người dùng khi nhập liệuCảnh báo người dùngHướng sự chú ý đến các từ khóa, mệnh lệnh, thông báo

Phương pháp làm nổi bậtLàm nhấp nháy, sử dụng các giai điệu âm thanhDùng màu sắc, độ co dãn, kích thước, font chữĐảo ngược hình ảnh, đóng khung, gạch chân, viết hoa

Làm nổi bật thông tin


Ví dụ biểu mẫuđã được làm nổi bật thông tin


Lưu ýChỉ sử dụng kỹ thuật làm nổi bật thông tin khi cần thiếtSử dụng thống nhấtSự hỗ trợ khác nhau giữa các nền tảng, hệ điều hành…

Làm nổi bật thông tin


Quy tắc hiển thị văn bản


Kết hợp chữ hoa và chữ thường

Dãn dòng

Căn lề trái

Chỉ viết tắt các từ thông dụng

Quy tắc hiển thị bảng và danh sách


Tiêu đề có ý nghĩa

Định dạng cột, hàng, văn bản

Định dạng dữ liệu kiểu chữ, số

Ví dụ về báo cáo tuân theo nguyên tắc



THIẾT KẾ GIAO DIỆNVÀ HỘI THOẠI

Tập trung vào việc cung cấp thông tin cho người dùngvà thu nhận thông tin từ phía người dùngThiết giao diện và hội thoại liên quan đến cách thức conngười và máy tính trao đổi thông tinMột giao diện người – máy tốt cung cấp một cấu trúcthống nhất cho việc tìm kiếm, hiển thị và kích hoạt cácthành phần khác nhau của hệ thống

Thiết kế giao diện và hội thoại


Lấy người dùng làm trọng tâmQuy trình tương tự như thiết kế biểu mẫu và báo cáoThực hiện song song với thiết kế biểu mẫu và báo cáo

Quy trình thiết kế


Sản phẩm chuyển giao



THIẾT KẾ GIAO DIỆN

Thiết kế giao diện


• Thiết kế bố cục1• Thiết kế trường nhập liệu2• Kiểm soát dữ liệu nhập vào3• Cung cấp phản hồi4• Cung cấp trợ giúp5

Bố cục giống như biểu mẫu giấy có sẵnĐiều hướng từ trái sang phải, từ trên xuống dướiThiết kế bố cục tập trung vào tính mềm dẻo và nhấtquán của giao diện

Dễ dàng di chuyển giữa các trườngDữ liệu chưa được ghi cho đến khi được sự xác nhận củangười dùngMỗi phím hoặc lệnh (command) chỉ tương ứng với mộtchức năng duy nhất

Thiết kế bố cục


Biểu mẫu giấy và trên máy tính


Tiêu chí đánh giá tính tiện dụng


Khả năng điều khiển con trỏKhả năng điều khiển con trỏ

Khả năng chỉnh sửaKhả năng chỉnh sửa

Khả năng thoátKhả năng thoát

Khả năng trợ giúpKhả năng trợ giúp

• Không yêu cầu nhập liệu các trường có sẵn hoặccó thể tính toán1

• Luôn cung cấp giá trị mặc định2• Chỉ ra loại đơn vị cho dữ liệu nhập vào3• Luôn có tiêu đề cho các trường nhập liệu4• Định dạng, căn lề, trợ giúp5

Thiết kế trường nhập liệu


Kiểm soát dữ liệu nhập vào để giảm lỗi gây ra khi nhậpdữ liệuPTV phải dự đoán trước các lỗi có thể xẩy ra và thiết kếgiao diện để tránh, phát hiện và sửa lỗi

Kiểm soát nhập dữ liệu


Các lỗi thường gặp khi nhập dữ liệu


• Thêm thừa ký tự vào trường

Nối dữ liệu

• Làm mất ký tự trong trường

Cắt bớt dữ liệu

• Nhập dữ liệu không hợp lệ vào trường

Nhập dữ liệu

• Đảo ký tự trong trường

Đổi chỗ dữ liệu

Kỹ thuật kiểm tra lỗi nhập dữ liệu


Phân nhóm

Kết hợp• Kiểm tra kết hợp giá trị

của nhiều trường

Giá trị mong muốn

Thiếu sót dữ liệu

Định dạng

Kỹ thuật kiểm tra lỗi nhập dữ liệu


Phạm vi

Hợp lý

Số ký tự

Giá trị

Hướng dẫn cung cấp phản hồi


• Thông báo người dùng biết hệ thống đang làm gì• Hữu ích khi một thao tác xử lý mất nhiều thời gian

1. Thông tin trạng thái

• Đưa ra nhắc nhở cụ thể

2. Chỉ dẫn nhắc nhở

• Thông báo cụ thể, dễ hiểu

3. Cảnh báo và thông báo lỗi

Đặt vào vị trí của người sử dụngTrợ giúp cần phải

Đơn giảnCó tổ chứcTrực quan

Cung cấp các trợ giúp ngữ cảnhCần trả người dùng về lại vị trí cần trợ giúpMột số môi trường lập trình cung cấp công cụ để thiết kếtài liệu trợ giúp

SDK (Software Development Kit)

Hướng dẫn cung cấp trợ giúp



THIẾT KẾ HỘI THOẠI

Hội thoạiMột chuỗi hành động trong đó hiển thị thông tin cho ngườidùng và nhận thông tin từ người dùng

Nguyên tắc thiết kếSự nhất quán của trình tự các hành động, phím bấm, từngữ

Quy trình thiết kế gồm 3 bước

Thiết kế hội thoại


Thiết kế thứtự hội thoại

Xây dựngmẫu

Đánh giá tínhtiện dụng

Hiểu người dùng, công việc, kỹ thuật và các đặc tính củamôi trườngSử dụng biểu đồ hội thoại để biểu diễnBiểu đồi hội thoại gồm hộp và đường nối

HộpMã số hộp thoại hiện tạiTên hoặc nội dung hộp thoại hiện tạiMã số của hộp thoại có thể truy cập

đến từ hộp thoại hiện tại

B1. Thiết kế thứ tự hội thoại


Ví dụ về thứ tự hội thoại


Bước này thường không bắt buộcSử dụng các môi trường thiết kế đồ họa để xây dựngnguyên mẫu nhanh chóng

Visual Basic.NETChương trình tạo nguyên mẫuChương trình tạo bản chạy thử

B2. Xây dựng mẫuvà đánh giá tính tiện dụng



TỔNG KẾT BÀI HỌC

Thiết kế giao diện được phân thành hai công việc chínhThiết kế biểu mẫu và báo cáoThiết kế giao diện và hội thoại

Các quy trình thiết kế đều tuân theo nguyên tắc lấyngười dùng làm trọng tâm

Đầu tiên xác định yêu cầu người dùngSau đó thiết kế các mẫu

Sản phẩm của quá trình thiết kế biểu mẫu và báo cáo làtài liệu đặc tả thiết kế biểu mẫu và báo cáoSản phẩm của quá trình thiết kế giao diện và hội thoại làtài liệu đặc tả thiết kế giao diện và hội thoại

Tổng kết bài học


Quy trình thiết kế biểu mẫu và báo cáo? Sản phẩm?Nguyên tắc chung về định dạng biểu mẫu và báo cáo?Nguyên tắc thiết kế giao diện?Nhận xét về báo cáo sau, hãy sửa lại? (Dựa vào nguyên tắcthiết kế báo cáo)

Câu hỏi


Tai nguyen\Bao cao nhan vien.docx

Yêu cầu khách hàng:Jackie Judson

Tạo hồ sơ cá nhân khách hàng cho mỗi khách hàngGracie Breshers (Quản lý tiếp thị)

Báo cáo tổng kết sản phẩm theo đối tượng khách hàngTổng kết theo vùng miền, độ tuổi khách hàng của các mặthàng chủ đạo

Thi Hwang (Quản lý bán hàng)Báo cáo tần suất đặt hàng của khách hàng

(Xem câu hỏi tình huống trong SGK)

CaseStudy


Thiết kế biểu mẫu báo cáo chohệ thống theo dõi khách hàng Cty nội thất PVF

SV thực hiện các công việc sauThiết kễ mẫu hồ sơ khách hàngThiết kế báo cáo tổng kết sản phẩm theo đối tượng kháchhàngThiết kế báo cáo tần suất đặt hàngSửa lại sơ đồ trình tự hội thoại ở Slide 36

CaseStudy


Thiết kế biểu mẫu và báo cáoThiết kế giao diện và hội thoạiThiết kế menu

Workshop 4

Phân tích hệ thống về dữ liệu 46

HẾT BÀI !!!!


Bài 5: Thiết kế giao diện - Giáo trình FPT

Documents

Transcript of Bài 5: Thiết kế giao diện - Giáo trình FPT