Thiết kế giao diện người dùng (UI) vừa là một nghệ thuật vừa là một khoa học, giá trị cốt lõi của nó nằm ở logic và phương pháp. Những thứ rất cơ bản như ánh sáng, màu sắc và độ tương phản thường bị mọi người bỏ qua, điều này có thể ảnh hưởng tiêu cực đến giao diện người dùng bằng cách chuyển hướng sự chú ý của họ và không tập trung đủ vào những thứ quan trọng.
Dưới đây là những chia sẻ tổng quan về cách sử dụng màu sắc, ánh sáng và độ tương phản trong thiết kế giao diện người dùng áp dụng cho cả thiết kế giao diện app và website.
1. Ánh sáng: tạo chiều sâu
Bạn có thể dùng ánh sáng để tạo chiều sâu bằng cách sử dụng ánh sáng và bóng tối. Các sắc thái sáng hơn xuất hiện gần hơn và các sắc thái tối hơn ở xa hơn. Đây không hoàn toàn là cách ánh sáng hoạt động, nhưng vì giao diện người dùng ở trong môi trường rất cơ bản của màn hình máy tính, điện thoại.
Bạn hãy nghĩ về các nút ấn. Khi một nút được nhấn, hầu hết các nhà thiết kế có xu hướng làm cho nó tối hơn. Tạo sao? Lý do rất đơn giản là chúng ta tưởng tượng nút như một vật thể 3D. Khi nó được nhấn, người dùng sẽ cảm giác nó đi xa hơn do được che đi bởi một phần ánh sáng.
Sử dụng ý tưởng cơ bản này, chúng ta có thể xây dựng ẩn dụ giao diện người dùng bằng cách dựa trên các đối tượng 3D có chiều sâu. Tô màu những thứ bạn muốn trông nhạt hơn. Tô màu những thứ được chạm vào bên trong tối hơn. Điều này không áp dụng cho mọi phong cách thẩm mỹ, nhưng những thứ chung chung như giao diện hệ điều hành có xu hướng tuân theo nguyên tắc này - đặc biệt là khi mô tả các đối tượng trong thế giới thực như nút và công tắc.
Xem thêm: Hướng dẫn thiết kế giao diện App Android & iOS toàn tập
2. Màu sắc: quản lý tiêu điểm
Màu sắc không phải tất cả đều hoạt động theo cùng một cách. Có những màu được coi là màu lạnh - xanh lam và xanh lục - và có những màu ấm - đỏ và vàng. Các màu ấm hơn sẽ nở ra khi đặt cạnh các màu lạnh hơn, chúng tràn ra ngoài và chiếm ưu thế theo đúng nghĩa đen. Đây là một ví dụ:
Hãy nhìn vào hình vuông bên phải với segmens màu xanh lam và màu vàng. Màu vàng ấm hơn và sáng hơn và do đó nó trở nên nổi bật trên hình ảnh.
Còn màu đỏ và xanh lá cây thì sao? Cái này phức tạp hơn, nhưng màu đỏ ấm hơn đang chiếm quyền kiểm soát ở đây. Màu xanh lá cây lạnh hơn co vào trong, để màu đỏ tiến lên phía trước.
Điều này rất giống với ánh sáng, màu ấm hơn sẽ sáng hơn. Không chỉ vậy, chúng còn xuất hiện gần với chúng ta hơn. Sử dụng màu ấm hơn cho các yếu tố bạn muốn nổi bật và được chú ý. Những màu như đỏ đặc biệt tốt cho mục đích này và không có gì ngạc nhiên khi hầu hết các thiết kế ứng dụng, website thương hiệu lớn đều lấy màu đỏ tươi.
3. Độ tương phản: tạo sự chú ý
Các mục có độ tương phản cao hơn sẽ nổi bật, chúng sẽ trông bắt mắt và thu thút mắt nhìn hơn. Hãy xem một ví dụ về một cửa sổ nội dung với một số văn bản và nút. Ở đây, chúng tôi đang sử dụng cả hai, mức độ sáng và độ tương phản, để quản lý sự chú ý và tập trung của người dùng.
Trong trường hợp đầu tiên, văn bản nằm trên nền tối hơn, trong khi nút nằm trên bề mặt sáng hơn phần còn lại của ngăn. Nút có độ tương phản cao nhất giữa văn bản màu đen và bề mặt màu xám nhạt mà nó nằm trên đó. Nó cũng là yếu tố nhẹ nhất trên bề mặt - nó bật ra.
Ở bên phải, tôi đã lật các sắc thái. Ở đây văn bản bật ra vì nó nằm trên nền sáng hơn và có độ tương phản cao giữa văn bản và nền. Nút bây giờ biến mất.
Sử dụng độ tương phản để quản lý sự chú ý của người dùng. Bạn không nhất thiết phải làm cho các nút nhẹ hơn (điều đó sẽ phụ thuộc vào phong cách thiết kế và chủ đề của bạn), nhưng bạn cần làm cho chúng đủ nổi bật để chúng không bị bỏ qua. Giảm độ tương phản cho các khu vực ít quan trọng hơn trong giao diện người dùng của bạn để khiến họ lùi lại.
4. Ví dụ: Giao diện OS X
Hãy cùng xem một ví dụ thực tế về những nguyên tắc này từ một chuyên gia nổi tiếng về khả năng sử dụng - Apple. Đây là giao diện cho bảng điều khiển của hệ điều hành OS X dành cho Mac:
Bạn có thể xem các phép ẩn dụ về độ tương phản và 3D tại nơi làm việc tại đây. Các nút sáng và độ tương phản cao, đồng thời trở nên tối hơn khi nhấn. Các khu vực nội dung nhất định được vát vào trong để nhóm các mục khác nhau lại với nhau và vì chúng ít quan trọng hơn về mặt phân cấp. Nó trông đẹp và nó rất dễ sử dụng.
Suy nghĩ về quy trình thiết kế giao diện người dùng của bạn một cách hợp lý. Bạn đang cố gắng khắc họa một đối tượng ngoài đời thực như một nút bấm hoặc một công tắc? Sử dụng bóng và ánh sáng để tạo chiều sâu và cảm giác 3D một cách thích hợp.
Bạn có cần quản lý sự tập trung của người dùng, chẳng hạn như tạo sự nổi bật cho thông điệp chào mừng hoặc thông báo trên trang web của bạn? Tô màu hộp đó bằng màu ấm như màu vàng. Đảm bảo rằng tất cả các điều khiển quan trọng có đủ độ tương phản để nổi bật để chúng không bị bỏ qua.
Tôi hy vọng bạn thấy điều này hữu ích - vui lòng đăng bất kỳ suy nghĩ hoặc tài nguyên nào trong phần bình luận bên dưới.
