intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Bài giảng Phân tích thiết kế hệ thống thông tin - Chương 9: Thiết kế giao diện

Chia sẻ: Ganuongmuoixa | Ngày: | Loại File: PDF | Số trang:21

25
lượt xem
3
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phân tích thiết kế hệ thống thông tin - Chương 9: Thiết kế giao diện cung cấp cho người học những kiến thức như: Giới thiệu; Nguyên lý thiết kế giao diện người dùng; Quy trình thiết kế giao diện người dùng; Thiết kế chuyển hướng giao diện; Thiết kế giao diện đầu vào; Thiết kế giao diện đầu ra. Mời cá bạn cùng tham khảo!

Chủ đề:
Lưu

Nội dung Text: Bài giảng Phân tích thiết kế hệ thống thông tin - Chương 9: Thiết kế giao diện

  1. 25/02/2016 25/02/2016 1 PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN Chương 9. Thiết kế giao diện 25/02/2016 2 Bức tranh PTKTHT 1
  2. 25/02/2016 25/02/2016 3 Nội dung • Giới thiệu • Nguyên lý thiết kế giao diện người dùng • Quy trình thiết kế giao diện người dùng • Thiết kế chuyển hướng giao diện • Thiết kế giao diện đầu vào • Thiết kế giao diện đầu ra 25/02/2016 4 Giới thiệu • Giao diện người dùng: thể hiện hệ thống sẽ tương tác của hệ thống và các đối tượng bên ngoài như thế nào. • Các giao diện hệ thống: thể hiện hệ thống trao đổi thông tin với các hệ thống khác như thế nào • Kỹ thuật định hướng: hỗ trợ cách thức cho người dùng “yêu cầu” hệ thống làm những gì • Kỹ thuật nhập liệu: định nghĩa cách thức cho người dùng “yêu cầu” hệ thống làm những gì. • Kỹ thuật xuất thông tin: định nghĩa cách thức hệ thống cung cấp thông tin đến người dùng hoặc hệ thống khác • Giao diện người dùng đồ họa: là phương pháp được đa số mọi người lựa chọn để phát triển ứng dụng 2
  3. 25/02/2016 25/02/2016 5 Nguyên lý thiết kế giao diện người dùng • Bố cục (layout) • Nội dung trình bày • Tín thẩm mỹ • Kinh nghiệp người dùng • Tính nhất quán • Hỗ trợ tối đa người dùng 25/02/2016 6 Bố cục màn hình • Màn hình thường được chia làm 3 khu vực • Khu vực định hướng (Navigation): ở đầu • Khu vực trạng thái (Status area): ở dưới • Khu vực thao tác công việc (Work area): ở giữa • Thông tin có thể được thể hiện ở nhiều khu vực • Khu vực giống nhau thường được gom nhóm lại với nhau 3
  4. 25/02/2016 25/02/2016 7 Bố cục màn hình • Người dùng di chuyển tối thiểu từ khu vực này đến khu vực khác, hoặc từ thông tin này đến thông tin khác. • Các khu vực sẽ duy trì nhất quán trong: • Kích thước • Hình dạng • Sắp xếp dữ liệu • Thể hiện dữ liệu 25/02/2016 8 4
  5. 25/02/2016 25/02/2016 9 Nội dung trình bày • Tất cả các giao diện nên có các tiêu đề • Thực đơn (menu) nên thể hiện: • Bạn đang ở đâu? • Từ đâu bạn có thể đến đây? • Thông tin ở mỗi khu vực nên rõ ràng • Các thuộc tính và nhãn cho thuộc tính nên được lựa chọn một cách cẩn thận. • Đưa thông tin ngày và thông tin số phiên bản cho người dùng hệ thống 25/02/2016 10 5
  6. 25/02/2016 25/02/2016 11 Tính thẩm mỹ • Giao diện cần được chức năng hóa và lôi cuốn người dùng • Tránh sự ép buộc khá nhiều, đặc biệt cho người mới sử dụng • Thiết kế văn bản(text) một cách cẩn thận • Lưu ý font và kích thước • Tránh sử dụng tất cả các từ viết hoa 25/02/2016 12 Tính thẩm • Màu sắc và các kểu nên được sử dụng một cách cẩn thận • Kiểm thử chất lượng của màu sắc bằng cách thử giao diện với màn hình trắng đen • Sử dụng màu sắc để phân cách và phân loại các thành phần. 6
  7. 25/02/2016 25/02/2016 13 Kinh nghiệm của người dùng • Chương trình dễ dàng để học. • Chương trình dễ dàng để sử dụng cho các chuyên gia. • Xem xét để thêm vào các phím tắt cho các chuyên gia 25/02/2016 14 7
  8. 25/02/2016 25/02/2016 15 Sự nhất quán • Cho phép người dùng có thể tiên đoán chuyện gì có thể xảy ra. • Giảm tải việc học lòng vòng • Xem xét các thành trong phạm vi một ứng dụng và xuyên qua các ứng dụng. • Thích hợp với nhiều mức khác nhau. • Quản lý hướng di chuyển • Thuật ngữ • Thiết kế báo biểu và giao diện (form) 25/02/2016 16 Hỗ trợ tối đa người dùng • Luật 3 lần nhấn (chuột hoặc phím) • Người dùng đi từ điểm bắt đầu hoặc thực đơn chính của một hệ thống để nhìn thấy thông tin hoặc hoạt động mà họ muốn trong phạm vi không hơn 3 lần click chuột hoặc 3 lần nhấn phím. 8
  9. 25/02/2016 25/02/2016 17 Nội dung • Giới thiệu • Nguyên lý thiết kế giao diện người dùng • Quy trình thiết kế giao diện người dùng • Thiết kế chuyển hướng giao diện • Thiết kế giao diện đầu vào • Thiết kế giao diện đầu ra 25/02/2016 18 Quy trình thiết kế giao diện người dùng 9
  10. 25/02/2016 25/02/2016 19 Xây dựng kịch bản sử dụng • Phác thảo các bước của công việc thực hiện. • Trình bày đơn giản thông qua lược đồ use case hoặc cộng tác. • Cung cấp tài liệu các đường dẫn chung nhất thông qua mô hình use case để giao diện thiết kế dễ dàng sử dụng cho các tình huống. 25/02/2016 20 Ví dụ 10
  11. 25/02/2016 25/02/2016 21 Ví dụ 25/02/2016 22 Thiết kế cấu trúc giao diện • Xây dựng lược đồ minh họa sự liên quan giữa các màn hình, biểu mẫu và báo cáo. • Chỉ ra cách thức làm thế nào để người dùng di chuyển từ màn hình này đến màn hình khác. • Sử dụng lược đồ đơn giản với các hình vuông và mũi tên. Mỗi hình vuông minh họa cho một màn hình, mỗi mũi tên minh họa cho sự di chuyển từ màn hình này đến màn hình khác. 11
  12. 25/02/2016 25/02/2016 23 Thiết kế cấu trúc giao diện 25/02/2016 24 Thiết kế cấu trúc giao diện 12
  13. 25/02/2016 25/02/2016 25 Thiết kế các chuẩn giao diện • Các thành phần cơ bản thường chồng chéo ở các màn hình riêng rẽ trong phạm vi một ứng dụng. • Giao diện từ khái niệm thực tế • Desktop, checkbook, shopping cart • Giao diện danh mục • Giao diện hoạt độnt • Giao diện hình tượng • Giao diện mẫu 25/02/2016 26 Thiết kế mẫu giao diện • Là một màn hình giả lập • Các phương pháp phổ biến gồm: • Thiết kế trên giấy • Window layout Diagram • Bản mẫu HTML • Bản mẫu bằng ngôn ngữ lập trình 13
  14. 25/02/2016 25/02/2016 27 25/02/2016 28 14
  15. 25/02/2016 25/02/2016 29 Đánh giá giao diện • So sánh thiết kế với danh sách tiêu chí (checklist) • Đánh giá thông qua các bước mô phỏng. • Đánh giá tương tác • Kiểm tra tính tiện dụng 25/02/2016 30 Thiết kế chuyển hướng • Giả định cho người dùng • Tất cả các đối tượng (control) nên rõ ràng và dễ hiểu, và được đặt nơi trực quan của màn hình. 15
  16. 25/02/2016 25/02/2016 31 Thiết kế chuyển hướng • Ngăn ngừa lỗi • Giới hạn lựa chọn • Đừng bao giờ hiển thị các nút lệnh mà không thể sử dụng. • Nhắc nhở các hành động mà rất khó hoặc không thể quay ại. • Khôi phục các lỗi đơn giản • Dùng ngôn ngữ nhất quán 25/02/2016 32 Thiết kế thực đơn • Menu bar • Drop – Down menu • Hyberlink menu • Pop-up menu • Tan menu • Tool bar • Image map 16
  17. 25/02/2016 25/02/2016 33 Các thủ thuật về thông điệp • Nên rõ ràng chính xác và trọn vẹn • Nên sử dụng đúng ngữ pháp, không sử dụng các thuật ngữ khó hiểu và viết tắt (ngoại trừ các thuật ngữ đó là của người dùng) • Tránh dùng phủ định và hài hước. 25/02/2016 34 Các loại thông điệp • Thông điệp lỗi • Thông điệp xác nhận • Thông điệp thông báo • Thông điệp chờ • Thông điệp trợ giúp • Thông điệp chờ • Thông điệp hỗ trợ/giúp đỡ 17
  18. 25/02/2016 25/02/2016 35 Thiết kế giao diện đầu vào • Xử lý trực tuyến: ghi nhận tức thời giao dịch vào cơ sở dữ liệu tương ứng. • Xử lý theo lô: thu thập dữ liệu thông qua một khoảng thời gian và nhập chúng vào hệ thống tại một thời điểm theo lô. • Xử lý theo lô làm đơn giản sự liên lạc dữ liệu và các xử lý khác, tập tin chủ không được cập nhật theo thời gian thực. 25/02/2016 36 Ghi nhận dữ liệu nguồn • Giảm công việc chồng lắp • Giảm thời gian xử lý • Giảm chi phí • Giảm xác suất về lỗi. 18
  19. 25/02/2016 25/02/2016 37 Tự động hóa dữ liệu nguồn • Có thể đặt được từ các công nghệ sau: • Công cụ đọc mã vạch • Công cụ nhận dạng ký tự quang học • Công cụ đọc vạch từ • Công cụ đọc thẻ thông minh 25/02/2016 38 Thao tác phím tối thiểu • Các đơn vị dữ liệu liên kết với các thuộc tính • Văn bản (text) • Số (numbers) • Lựa chọn (selection boxes) • Check boxes • Radio buttons • On-screen list boxes • Drop-down list boxes • Combo box 19
  20. 25/02/2016 25/02/2016 39 25/02/2016 40 Các loại kiểm tra hợp lệ đầu vào • Kiểm tra tính trọn vẹn: kiểm tra một số thuộc tính phải được nhập trước khi màn hình xử lý. • Kiểm tra format: dữ liệu mã hóa hoặc ký số. • Kiểm tra vùng dữ liệu. • Kiểm tra nhất quán. • Kiểm tra cơ sở dữ liệu. 20
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
3=>0