Mạng thông tin - Thiết kế giao diện

Chia sẻ: Anh Vu Duong | Ngày: | Loại File: PPT | Số trang:75

Thêm vào BST

Báo xấu

71
lượt xem 6
download

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

Để thiết kế giao diện, đầu tiên dựa vào các chức năng và dữ liệu mà ta đã phân tích, ta có thể xác định được bao nhiêu giao diện cần phải sử dụng, mục đích

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Mạng thông tin - Thiết kế giao diện

Thiết kế giao diện 1
Th i ết k ế g ia o d i ện M ở đ ầu  Nguyên tắc thiết kế giao diện Thiết kế biểu mẫu và báo cáo Thiết kế giao tiếp 2
1. Mở đầu • Giao diện người sử dụng (user interfaces) là cách thức các thực thể ngoài tương tác với HT. • Giao diện hệ thống (system interfaces) là cách thức HTTT trao đổi thông tin với hệ thống khác. • Phần này tập trung vào thiết kế giao diện người sử dụng hay còn gọi vắn tắt là thiết kế giao diện. • Thiết kế giao diện là quá trình PTV xác định cách thức người sử dụng tương tác với HT cũng như bản chất của các input và output mà HT chấp nhận và tạo ra. 3
• Giao diện người sử dụng, gọi tắt là giao diện, gồm có ba phần căn bản: Cơ chế điều khiển (navigation mechanism). Cơ chế nhập liệu (input mechanism). Cơ chế xuất liệu (output mechanism). • Cơ chế điều khiển nhằm nói đến các cách mà qua đó người sử dụng bảo cho HT những gì phải thực hiện. Ví dụ thực đơn, nút nhấn. • Cơ chế nhập liệu nhằm nói đến các cách mà qua đó HT nắm bắt được thông tin. Ví dụ biểu mẫu màn hình nhập thông tin đơn đặt hàng. 4
• Cơ chế xuất liệu nhằm nói đến các cách mà HT cung cấp thông tin cho người dùng hoặc các hệ thống khác. Ví dụ như báo cáo in ra, trang Web. • Ba cơ chế thường được kết hợp với nhau. Chẳng hạn các màn hình đều hiển thị cơ chế điều khiển, và phần lớn chứa cả cơ chế nhập liệu và xuất liệu. • Ngoài ra, khi nói đến giao diện là màn hình giao tiếp người ta thường đề cập đến giao diện dựa trên Web (Webbased Interfaces) và giao diện GUI (Graphical User Interfaces). 5
• Trong HTTT khi nói đến thiết kế giao diện, người ta chú trọng đến: Thiết kế các biểu mẫu nhập liệu (forms) trên màn hình máy tính. Thiết kế các báo cáo xuất liệu (reports) từ máy in, hoặc hiện ra trên màn hình máy tính, hoặc lưu thành tập tin. Thiết kế các phương tiện giao tiếp (commands, windows, menus, objects) và các đối thoại giữa người dùng và HT qua màn hình. 6
Th i ết k ế g ia o d i ện Mở đầu Ng u y ê n t ắc t h i ết k ế g ia o d i ện  Thiết kế biểu mẫu và báo cáo Thiết kế giao tiếp 7
2. Nguyên tắc thiết kế giao diện • Có thể nói thiết kế giao diện là công việc ít nhiều mang tính nghệ thuật. • Mục tiêu của thiết kế giao diện: Người dùng cảm thấy đẹp mắt. Đơn giản, dễ sử dụng. Không tốn nhiều công sức thao tác. Không mất nhiều thời gian để học. Thừa kế được các thói quen thao tác. • Giao diện đóng vai trò quan trọng vì người dùng thường đánh giá HT qua giao diện. 8
• Một số nguyên tắc căn bản thiết kế giao diện. Khung giao diện (Layout). Gợi lên nội dung (Content awareness). Thẩm mỹ (Aesthetics). Kinh nghiệm người dùng (User experiences) Nhất quán (Consistency). Người dùng ít tốn sức (Minimal user effort). 9
Nguyên tắc khung giao diện • Nguyên tắc khung giao diện nhằm nói đến việc phân bố và trang trí các vùng hiển thị thông tin, hình ảnh và biểu tượng trên các màn hình giao tiếp, biểu mẫu hay báo cáo. • Ví dụ khung giao diện. Màn hình thường được chia thành ba khu vực: Khu vực điều khiển (đỉnh). Khu vực thông báo tình trạng (đáy). Khu vực làm việc (giữa). 10
• Các khu vực giống nhau nên được nhóm lại. • Các khu vực chứa thông tin đi cùng luồng (liên quan logic với nhau) nên được sắp xếp sao cho NSD dùng ít thao tác di chuyển. • Nếu có thể, các khu vực nên nhất quán với nhau về: Kích thước. Hình dáng. Vị trí nhập dữ liệu. Vị trí hiển thị các dữ liệu tìm thấy. 11
Ví dụ khung giao diện. 12
Ví dụ khung giao diện. (Có nhiều khu vực điều khiển, cho phép NSD di chuyển) 13
Ví dụ khung giao diện. (Bố trí các vùng thông tin theo kiểu dọc, theo kiểu ngang) 14
Nguyên tắc gợi lên nội dung • Nguyên tắc gợi lên nội dung nhằm nói đến khả năng giao diện làm cho NSD ý thức được dễ dàng nội dung giao diện đang đề cập đến. • Tất cả các phần của giao diện (điều khiển, di chuyển, nhập, xuất) nên có nhiều khả năng gợi lên nội dung. • Một số áp dụng của nguyên tắc này: Có tiêu đề rõ ràng. Dấu hiệu cho thấy NSD đang ở đâu. Dấu hiệu cho thấy NSD đến từ đầu. 15
• Đối với các biểu mẫu, báo cáo. Các vùng cần được định danh rõ ràng để NSD không phải đoán thông tin trong vùng nào đó liên quan đến cái gì. Các vùng cần được phân bố rõ ràng để NSD có thể định vị nhanh những phần trong biểu mẫu, báo cáo chứa thông tin họ cần. Các tiêu đề vùng, tên các mục tin cần phải chọn lọc trình bày cẩn thận. Các mục tin liên quan cần được trình bày nhóm lại. 16
Nguyên tắc thẩm mỹ • Nguyên tắc thẩm mỹ nhằm nói đến khía cạnh mỹ thuật của giao diện làm hài lòng NSD. • Để giao diện được đẹp mắt, cẩn thận khi: Trình bày logo tổ chức, các tiêu đề. Phân phối các khoảng trắng. Dùng phối hợp các màu sắc. Canh thẳng hàng các vùng, các mục tin. Phân bố các khu vực, các vùng. Chọn phông chữ, kích cỡ chữ, màu chữ. Chọn màu hay hình làm nền cho chữ. 17
Nguyên tắc kinh nghiệm người dùng • Nguyên tắc kinh nghiệm người dùng nhằm nói đến sự thích hợp của người dùng đối với việc giao tiếp giao diện. • Đối với NSD có ít kinh nghiệm, giao diện cần có các giải thích hoặc hướng dẫn, các thực đơn của màn hình giao tiếp cần có đủ các chức năng. • Đối với NSD có nhiều kinh nghiệm, họ thích giao diện ngắn gọn và súc tích, hoặc màn hình giao tiếp nên có các thực đơn thu gọn theo ngữ cảnh. 18
Nguyên tắc nhất quán • Nguyên tắc nhất quán nhằm nói đến khả năng cho phép NSD dự đoán điều gì sẽ xảy ra khi giao tiếp với giao diện. • Với giao diện nhất quán, NSD có thể tương tác với một phần của HT và sau đó biết cách tương tác với phần còn lại  NSD giảm thời gian học. • Sự nhất quán diễn ra ở nhiều khía cạnh: Các biểu tượng điều khiển, di chuyển. Các thuật ngữ, tiêu đề, logo. Hình thức biểu mẫu, báo cáo, màn hình. 19
Nguyên tắc người dùng ít tốn sức • Nguyên tắc người dùng ít tốn sức nhằm nói đến giao diện nên được thiết kế sao cho NSD không tốn nhiều công sức thao tác, tìm hiểu vẫn sử dụng được HT để hoàn thành được công việc. • Quy tắc ba lần nhấp chuột. NSD có thể đi từ điểm bắt đầu hoặc thực đơn chính của HT đến thông tin họ cần hoặc hành động họ muốn thực hiện mà không qua ba lần nhấp chuột hoặc ba lần nhấn phím. 20