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 1 Bức tranh PTKTHT 25/02/2016 2 25/02/2016 2 Nội dung • Giới thiệu • Nguyên lý thiết kế giao diện người dùng •[.]
25/02/2016 25/02/2016 PHÂN TÍCH THIẾT KẾ HỆ THỐNG THƠNG TIN Chương Thiết kế giao diện 25/02/2016 Bức tranh PTKTHT 25/02/2016 25/02/2016 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 25/02/2016 Giới thiệu • Giao diện người dùng: thể hệ thống tương tác • • • • • hệ thống đối tượng bên Các giao diện hệ thống: thể hệ thống trao đổi thông tin với hệ thống khác 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 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 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 hệ thống khác Giao diện người dùng đồ họa: phương pháp đa số người lựa chọn để phát triển ứng dụng 25/02/2016 25/02/2016 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 qn • Hỗ trợ tối đa người dùng 25/02/2016 Bố cục hình • Màn hình thường chia làm khu vực • Khu vực định hướng (Navigation): đầu • Khu vực trạng thái (Status area): • Khu vực thao tác cơng việc (Work area): • Thơng tin thể nhiều khu vực • Khu vực giống thường gom nhóm lại với 25/02/2016 25/02/2016 Bố cục hình • Người dùng di chuyển tối thiểu từ khu vực đến khu vực khác, từ thông tin đến thơng tin khác • Các khu vực trì qn trong: • Kích thước • Hình dạng • Sắp xếp liệu • Thể liệu 25/02/2016 25/02/2016 25/02/2016 Nội dung trình bày • Tất giao diện nên có tiêu đề • Thực đơn (menu) nên thể hiện: • Bạn đâu? • Từ đâu bạn đến đây? • Thơng tin khu vực nên rõ ràng • Các thuộc tính nhãn cho thuộc tính nên lựa chọn cách cẩn thận • Đưa thông tin ngày thông tin số phiên cho người dùng hệ thống 25/02/2016 10 25/02/2016 25/02/2016 11 Tính thẩm mỹ • Giao diện cần chức hóa lơi người dùng • Tránh ép buộc nhiều, đặc biệt cho người sử dụng • Thiết kế văn bản(text) cách cẩn thận • Lưu ý font kích thước • Tránh sử dụng tất từ viết hoa 25/02/2016 12 Tính thẩm • Màu sắc kểu nên sử dụng cách cẩn thận • Kiểm thử chất lượng màu sắc cách thử giao diện với hình trắng đen • Sử dụng màu sắc để phân cách phân loại thành phần 25/02/2016 25/02/2016 13 Kinh nghiệm người dùng • Chương trình dễ dàng để học • Chương trình dễ dàng để sử dụng cho chuyên gia • Xem xét để thêm vào phím tắt cho chuyên gia 25/02/2016 14 25/02/2016 25/02/2016 15 Sự quán • Cho phép người dùng tiên đốn chuyện xảy • Giảm tải việc học lịng vịng • Xem xét thành phạm vi ứng dụng xun qua ứng dụng • Thích hợp với nhiều mức khác • Quản lý hướng di chuyển • Thuật ngữ • Thiết kế báo biểu giao diện (form) 25/02/2016 16 Hỗ trợ tối đa người dùng • Luật lần nhấn (chuột phím) • Người dùng từ điểm bắt đầu thực đơn hệ thống để nhìn thấy thơng tin hoạt động mà họ muốn phạm vi không lần click chuột lần nhấn phím 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 25/02/2016 18 Quy trình thiết kế giao diện người dùng 25/02/2016 25/02/2016 19 Xây dựng kịch sử dụng • Phác thảo bước cơng việc thực • Trình bày đơn giản thông qua lược đồ use case cộng tác • Cung cấp tài liệu đường dẫn chung thơng qua mơ hình use case để giao diện thiết kế dễ dàng sử dụng cho tình 25/02/2016 20 Ví dụ 10 ... 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 25/02/2016 Giới thiệu • Giao diện. .. 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 25/02/2016 18 Quy trình thiết kế. .. thể hệ thống tương tác • • • • • hệ thống đối tượng bên Các giao diện hệ thống: thể hệ thống trao đổi thông tin với hệ thống khác Kỹ thuật định hướng: hỗ trợ cách thức cho người dùng “yêu cầu” hệ