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
lượt xem 3
download
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!
Bình luận(0) Đăng nhập để gửi bình luận!
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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 25/02/2016 25/02/2016 27 25/02/2016 28 14
- 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
- 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
- 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
- 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
- 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
- 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
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Bài giảng Phân tích thiết kế hệ thống mạng - ThS. Lê Xuân Thành
52 p | 722 | 95
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 5 - TS. Đào Nam Anh
87 p | 192 | 31
-
Bài giảng Phân tích thiết kế thuật toán: Chương 3 - Nguyễn Văn Linh
87 p | 189 | 22
-
Bài giảng Phân tích thiết kế thuật toán: Chương 1 - Nguyễn Văn Linh
56 p | 229 | 22
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 3 - TS. Đào Nam Anh
60 p | 129 | 21
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 6 - TS. Đào Nam Anh
22 p | 128 | 16
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 2 - TS. Đào Nam Anh
28 p | 136 | 15
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 4 - TS. Đào Nam Anh
12 p | 155 | 15
-
Bài giảng Phân tích thiết kế hệ thống: Bài giảng 7 - TS. Đào Nam Anh
39 p | 111 | 13
-
Bài giảng Phân tích thiết kế giải thuật: Chương 2 - Trịnh Huy Hoàng
98 p | 116 | 11
-
Bài giảng Phân tích thiết kế giải thuật: Chương 1 - Trịnh Huy Hoàng
72 p | 117 | 8
-
Bài giảng Phân tích thiết kế hướng đối tượng: Chương 5 - Lê Thị Minh Nguyện
11 p | 99 | 8
-
Bài giảng Phân tích thiết kế giải thuật: Chương 4 - Trịnh Huy Hoàng
90 p | 107 | 7
-
Bài giảng Phân tích thiết kế hệ thống thông tin: Bài 11 - TS. Trần Mạnh Tuấn
29 p | 52 | 7
-
Bài giảng Phân tích thiết kế hệ thống thông tin: Bài 9 - TS. Trần Mạnh Tuấn
46 p | 59 | 6
-
Bài giảng Phân tích thiết kế đảm bảo chất lượng phần mềm: Phần 1
115 p | 33 | 6
-
Bài giảng Phân tích thiết kế hướng đối tượng: Chương 4 - Lê Thị Minh Nguyện
14 p | 80 | 5
-
Bài giảng Phân tích thiết kế và giải thuật - Chương 2: Kỹ thuật thiết kế giải thuật
80 p | 48 | 2
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn