Upload
hoc-lap-trinh-web
View
2.142
Download
4
Embed Size (px)
DESCRIPTION
Thiết kế biểu mẫu và báo cáo Thiết kế giao diện và hội thoại
Citation preview
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ế giao diện 3
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ế giao diện 4
Thiết kế giao diện 5
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
Thiết kế giao diện 6
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ế
Thiết kế giao diện 7
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
Thiết kế giao diện 8
Thiết kế giao diện 9
Quy tắc định dạng biểu mẫu và báo cáo
Thiết kế giao diện 10
• 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
Thiết kế giao diện 11
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
Thiết kế giao diện 12
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
Thiết kế giao diện 13
Ví dụ biểu mẫuđã được làm nổi bật thông tin
Thiết kế giao diện 14
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
Thiết kế giao diện 15
Quy tắc hiển thị văn bản
Thiết kế giao diện 16
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
Thiết kế giao diện 17
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ện 18
Thiết kế giao diện 19
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
Thiết kế giao diện 20
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ế
Thiết kế giao diện 21
Sản phẩm chuyển giao
Thiết kế giao diện 22
Thiết kế giao diện 23
THIẾT KẾ GIAO DIỆN
Thiết kế giao diện
Thiết kế giao diện 24
• 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
Thiết kế giao diện 25
Biểu mẫu giấy và trên máy tính
Thiết kế giao diện 26
Tiêu chí đánh giá tính tiện dụng
Thiết kế giao diện 27
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
Thiết kế giao diện 28
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
Thiết kế giao diện 29
Các lỗi thường gặp khi nhập dữ liệu
Thiết kế giao diện 30
• 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
Thiết kế giao diện 31
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
Thiết kế giao diện 32
Phạm vi
Hợp lý
Số ký tự
Giá trị
Hướng dẫn cung cấp phản hồi
Thiết kế giao diện 33
• 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ế giao diện 34
Thiết kế giao diện 35
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ế giao diện 36
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
Thiết kế giao diện 37
Ví dụ về thứ tự hội thoại
Thiết kế giao diện 38
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
Thiết kế giao diện 39
Thiết kế giao diện 40
TỔNG KẾT BÀI HỌC
Thiết kế giao diện 41
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
Thiết kế giao diện 42
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
Thiết kế giao diện 43
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ế giao diện 44
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ế giao diện 45
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 !!!!
Thiết kế giao diện 47