CTT 534 Thiết kế giao diện LN09 graphics design 2 vi

CTT534 – Thiết Kế Giao Diện HK II 2015 – 2016 Thiết kế đồ họa – Phần Nội dung n n 5/24/16 Các triết lí thiết kế đồ họa Các hướng dẫn thiết kế Các triết lí thiết kế đồ họa n n n Tính thẩm mĩ ko tự động mang lại tính khả dụng Thiết kế giao diện phải cân ý nghĩa thành phần trực quan để phù hợp với mô hình thần kinh tác vụ Các ưu tiên q q q q 5/24/16 Đơn giản thể ngôn ngữ tự nhiên người dùng (natural user’s “language”) Sự tiết kiệm thành phần trực quan Gọn gàng, tổ chức tốt Ít tốt nhiều (less is more) Các hướng dẫn để thiết kế đồ họa tốt n Các nguyên tắc q q q q q q 5/24/16 Phép ẩn dụ Tính đơn giản rõ ràng Tính quán Có tổ chức/thẳng hàng/lân cận/lưới Rõ ràng dễ đọc Màu sắc/Tương phản Tính đơn giản (simplicity) n n n n “Keep it simple, stupid.” (KISS) “Less is more.” “When in doubt, leave it out.” Mỗi thành phần xuất giao diện có lí q 5/24/16 Lí phải thật rõ ràng Các kĩ thuật để đạt tính đơn giản n Sự rút gọn q q q 5/24/16 Quyết định thứ thiết yếu mà thiết kế cần truyền tải đến người dùng Khảo sát thành phần có mục đích thiết yếu Từ đó, loại bỏ thành phần ko phải thiết yếu Các kĩ thuật để đạt tính đơn giản (tt) n Tính cân đối (regularity) q Sử dụng mẫu cân đối (regular pattern) n n q Giới hạn khác biệt ko cần thiết thành phần n n 5/24/16 Tối thiểu hóa khác biệt ko cần thiết thành phần cách dùng mẫu cân đối Những thành phần cung cấp hệ điều hành Người dùng quen thuộc với thành phần Sử dùng font chữ, màu, độ dài đường kẻ, kích thước, hướng cho nhiều thành phần Sự cân đối thiết kế phóng đại mắt người dùng tạo ý nghĩa hay quan trọng định Các kĩ thuật để đạt tính đơn giản (tt) n Kết nối thành phần q Hãy để thành phần nhiều vai trò n n Scroll bar Title bar scroll up distance to top - current position in the document how big the document is scroll whole page up scroll down scroll whole page down 5/24/16 Khoảng trống (white space) n n n n Dẫn dắt ánh nhìn người dùng Tạo đối xứng cân Để mắt nghỉ ngơi thành phần hành động Dùng để thúc đẩy tính đơn giản, tính tao nhã, nhóm hạng, tinh tế q q 5/24/16 margins to draw eye around design Đừng để control nằm chật ních với White space (tt) n Ví dụ dialog chật ních (crowded) q q 5/24/16 Các control nhét chặt vào Thiếu lề text/label 10 Nguyên tắc Gestalt nhóm item (tt) n IBM logo 5/24/16 19 Sự thẳng hàng n Các thành phần thẳng hàng theo chiều ngang chiều dọc q n Giúp tăng tính đơn giản cho thiết kế Align text baselines Nguồn: Interface Hall of Shame 5/24/16 20 Sự thẳng hàng (tt) n Sự gióng hàng tệ hại q n Tương phản tệ hại q n Ko thể phân biệt label có màu với field nhập liệu Lặp lại tệ hại q n Ko theo luồng, bắt mắt người phải nhìn zig-zag hình muốn tìm kiếm vùng quan tâm Các button ko giống Cấu trúc ko rõ ràng q Các block cạnh tranh với alignment Nguồn: Interface Hall of Shame 5/24/16 21 Tính cân tính đối xứng n n Chọn trục (thường trục dọc) Phân chia thành phần đối xứng theo trục q 5/24/16 Cân số lượng lẫn phạm vi 22 Tính cân tính đối xứng (tt) n Ví dụ 5/24/16 23 Sự tiết kiệm thành phần trực quan n n n n n Less is more - unless more is more… Tối thiểu hóa số lượng control Chỉ thêm vào cần thiết Sắp xếp phù hợp kích cỡ, layout control, chẳng hạn text field, combo box, checkbox Tối thiểu hóa lộn xộn q 5/24/16 Để thông tin ko bị ẩn 24 Sự tiết kiệm thành phần trực quan (tt) Lạm dụng hiệu ứng 3D 5/24/16 Đố bạn biết bạn chọn gì? 25 Sự tiết kiệm thành phần trực quan (tt) n Tab q q Cách thức tuyệt vời để nhóm thành phần có liên quan Nhưng đừng lạm dụng mức Nguồn: Interface Hall of Shame 5/24/16 26 Tính rõ ràng tính dễ học n Các kí tự, biểu tượng, thành phần đồ họa nên dễ ý, dễ phân biệt Nguồn: Interface Hall of Shame 5/24/16 27 Tính rõ ràng tính dễ học (tt) n Hướng text gây khó đọc q Don’t try too hard to harm your neck Nguồn: Interface Hall of Shame 5/24/16 28 Sự tượng hình n Các dấu hiệu, icon, biểu tượng q n Thiết kế icon có nghĩa việc khó q n n Ngoại trừ icon quen thuộc, thường label chúng Sử dụng hình ảnh quán thích hợp q n right choice within spectrum from concrete to abstract Các định rõ tình huống, lựa chọn Tránh “eye candy” cần truyền tải thông điệp Di chuyển thu hút ý q q 5/24/16 Chỉ dùng chỗ quan trọng Dùng ko khéo gây xao lãng cho người dùng 29 Sự tượng hình (tt) n Hãy đoán ý nghĩa icon có hình Nguồn: Interface Hall of Shame 5/24/16 30 Màu sắc tương phản n Contrast encodes information along visual dimensions 5/24/16 31 Vấn đề tương phản Source: Interface Hall of Shame 5/24/16 32 Tổng kết n n Các triết lí thiết kế đồ họa Các nguyên tắc q q q q q q 5/24/16 Phép ẩn dụng Tính đơn giản rõ ràng Tính quán Có tổ chức/thẳng hàng/lân cận/lưới Rõ ràng dễ đọc Màu sắc/Tương phản 33 ... 5 /24 /16 21 Tính cân tính đối xứng n n Chọn trục (thường trục dọc) Phân chia thành phần đối xứng theo trục q 5 /24 /16 Cân số lượng lẫn phạm vi 22 Tính cân tính đối xứng (tt) n Ví dụ 5 /24 /16 23 ... Interface Hall of Shame 5 /24 /16 26 Tính rõ ràng tính dễ học n Các kí tự, biểu tượng, thành phần đồ họa nên dễ ý, dễ phân biệt Nguồn: Interface Hall of Shame 5 /24 /16 27 Tính rõ ràng tính dễ học... Tính quán q q q 5 /24 /16 Về vị trí Về định dạng Về lặp lại thành phần 15 Nguyên tắc Gestalt nhóm item n n n Phát triển năm 1 920 trường tâm lí học Gestalt Describe how early visual processing groups