Thursday 20 December 2012

Nguyên tắc điểm nhấn trong thiết kế giao diện

Hãy hình dung trang Web của bạn có một "rừng" các nút điều khiển khiến cho người xem lúng túng và khả năng chọn nhầm chức năng là rất lớn do các lỗi "human mistakes". Một trang Web như vậy có thể được xem là có độ tương phản quá mức khiến cho người xem dễ bị rối. Để giảm độ tương phản, cần áp dụng nguyên tắc điểm nhấn. Thí dụ giao diện dưới đây được thiết kế nhằm giảm mức chú ý đối với các phần tử ít được dùng nhất, thí dụ nút Cancel hiếm khi được lựa chọn sẽ được hiển thị "khiêm tốn" ở vị trí cuối cùng. Còn nút "Save" được sử dụng thường xuyên sẽ làm nổi lên. Một thiết kế khá hoàn hảo!






Điểm nhấn trong thiết kế ở trên là nút "Save post", không phải nút  "Cancel".

Dưới đây là các thí dụ khác có thể tìm thấy trong thiết kế của Google Chrome, MS. Word hoặc thiết kế Web.


Các bạn cũng có thể thấy rõ nguyên tắc điểm nhấn được MS. Office tận dụng trong thiết kế mô tả bảng biểu hoặc hình vẽ trong Word ra sao. Trong Word, chọn “Insert Caption”, Word sẽ tự động đổi gam màu nhẹ nhàng hơn cho mô tả Caption nhằm giảm sự tương phản trong văn bản qua đó hướng người dùng vào điểm nhấn là nội dung chính chứ không phải nội dung phụ bên dưới hình vẽ.

Happy Coding!

No comments:

Post a Comment