Bí kíp dùng màu sáng trong thiết kế giao diện (UI Design)

Kỹ năng sử dụng màu hiệu quả vô cùng cần thiết cho những ứng dụng thiết kế như minh họa và thiết kế giao diện. Với những sản phẩm flat và material design (hai phong cách thiết kế sử dụng những mảng màu phẳng), lý thuyết màu sắc này lại càng trở thành một thứ vũ khí lợi hại.

1 47rbzvd4dnpxfxd2afdwdg

Gam màu nổi bật và kĩ thuật gradient đang được sử dụng nhiều hơn trong giao diện sản phẩm kỹ thuật số: từ trò chơi giải trí đến trang web và ứng dụng của doanh nghiệp.

Tuy nhiên, hiện còn khá nhiều tranh cãi xoay quanh việc sử dụng màu sáng và ảnh hưởng của chúng với trải nhiệm người dùng. Bài viết dưới đây sẽ cung cấp cho bạn những thông tin cụ thể về ưu - nhược điểm của một UI “rực rỡ”.

Creative UX

Những lợi ích khi sử dụng màu sáng cho UI

1. Tăng readability và legibility

Khi lựa chọn màu sắc, nhà thiết kế luôn xem xét hai yếu tố cơ bản là readability  và legibility. Readability là tính dễ đọc của nội dung copy, trong khi legibility là tính dễ nhận biết từng chữ cái trong một typeface.

Những màu sắc nổi bật tạo ra sự tương phản giúp tăng readabilitylegibility. Nhờ có tương phản mà những thành phần trong bố cục mới nổi bật và bắt mắt. Tuy nhiên, tương phản màu sắc quá độ không phải lúc nào cũng hay. Nếu nội dung copy và màu nền có độ tương phản quá cao, sẽ rất khó để đọc chữ. Vậy nên các nhà thiết kế luôn khuyến cáo hãy kiểm soát độ tương phản ở mức độ vừa phải và chỉ sử dụng tương phản cao khi cần làm bật một thành tố nào đó.

Big City Guide

2. Tối ưu điều hướng và tăng tương tác tự nhiên

Sự phân cấp các yếu tố thị giác luôn cần được cân nhắc để một sản phẩm số có sự điều hướng rõ ràngtương tác tự nhiên. Thành phần giao diện nên có một thứ tự sắp xếp cụ thể để não có thể phân biệt chúng tường tận thông qua những yếu tố vật lý như màu sắc.

Màu sắc cũng có sự phân cấp và sự phân cấp này được xác định bằng mức độ mà mỗi màu ảnh hưởng đến tâm trí chúng ta. Có những màu mạnh mẽ như là đỏ, cam và màu nhẹ như là trắng hoặc kem. Màu sáng rất bắt mắt nên hay được dùng để nhấn mạnh hay ấn định độ tương phản. Sử dụng một màu cho nhiều thành phần khác nhau còn cho thấy sự liên quan giữa chúng. Chẳng hạn, bạn có thể lấy màu đỏ cho nút mua hàng để người sử dụng có thể tìm thấy chúng dễ dàng.

Tasty Burger App

3. Tạo ấn tượng mạnh

Não người luôn bị thu hút bởi những màu rực, vậy nên sử dụng những màu này sẽ giúp thiết kế của bạn nổi bật và dễ nhớ. Giao diện đầy màu sắc lúc nào cũng thu hút hơn những sản phẩm nhợt nhạt. Nhưng xét cho cùng, quyết định sử dụng màu nên dựa vào thị hiếu của khách hàng và nghiên cứu thị trường.

Nếu một công ty đã có màu sáng trong logo và những sản phẩm thương hiệu thì việc sử dụng màu đó trong app và website là quá hợp lý. Bằng cách này, thiết kế của bạn sẽ tạo nên sự đồng nhất về mặt thị giác trên tất cả các kênh truyền thông và tăng độ nhận biết thương hiệu.

Book Swap App

4. Tạo ra bầu không khí phù hợp

Để tạo ra bầu không khí và thông điệp phù hợp khơi gợi những hành động nhất định từ người dùng, nhà thiết kế cần biết rằng màu sắc có thể ảnh hưởng đến tâm trạng và hành vi của họ. Não chúng ta luôn phản ứng với màu sắc mà ta không hề hay biết. Tâm lí học màu sắc cho rằng, khi mắt nhìn thấy màu, não sẽ phát tín hiệu để tiết ra những nội tiết tố có tác dụng thay đổi cảm xúc.

Những màu sắc được lựa chọn hợp lý đưa người dùng vào trạng thái thích hợp giúp đưa ra những hành động thích hợp cũng như chuyển tới họ thông điệp chính xác. Ví dụ, nếu một nhà thiết kế cần phải tạo ra một giao diện cho sản phẩm liên quan tới thiên nhiên hay việc làm vườn, có khả năng rất lớn là bạn sẽ thấy màu xanh lục và xanh dương. Bằng cách này, chỉ cần một ánh nhìn chúng ta có thể liên tưởng tới sản phẩm từ thiết kế. Bạn có thể tham khảo thêm về ý nghĩa của màu sắc trong bài “Màu sắc trong Thiết kế: Những ảnh hưởng tới người dùng”.

Booking Service

5. Vẻ ngoài bắt mắt và thời thượng

Xu hướng thiết kế giao diện đang rất ưa chuộng những màu sắc và gradient tươi sáng. Bạn có thể thấy những sản phẩm như vậy đầy rẫy khắp mọi nơi và những giới hạn về phong cách kinh doanh đã không còn nữa.

Những mảng màu sáng sủa trong giao diện có thể tạo nên cảm giác hiện đại và tươi mới. Đi theo thời thế lúc nào cũng giúp thiết kế nổi bật giữa môi trường cạnh tranh.

Business Card App

Những sai lầm thường gặp khi sử dụng màu sáng cho UI

1. Những màu sáng thì khó để cân bằng

Một sai lầm lớn trong tư duy thiết kế là dựa vào cảm quan và gu thẩm mỹ để phối màu. Để tạo ra những sản phẩm hài hòa về mặt thị giác, kiến thức về cách màu sắc vận hành và kết hợp là hết sức cần thiết.

Càng nhiều màu sáng trong giao diện có nghĩa là càng nhiều nguy cơ mất cân bằng. Để người dùng cảm thấy dịu mắt, nhà thiết kế luôn cố gắng mang lại tính cân bằng trong thiết kế của mình. Sự hài hòa màu sắc cũng có nghĩa là màu sắc luôn được sử dụng một cách bắt mắt và hợp lý nhất đối với người dùng để tạo ra ấn tượng tốt nhất dù là trên website hay trong ứng dụng. Lý thuyết màu sắc đã đúc kết vài cách phối màu cơ bản nhưng hiệu quả mà chúng ta có thể tham khảo:

  • Phối màu đơn sắc: sử dụng một màu với nhiều sắc thái khác nhau để tạo sự hài hòa.
  • Phối màu tương đồng: sử dụng những màu sắc cạnh nhau trên vòng thuần sắc để bổ trợ lẫn nhau.
  • Phối màu tương phản: kết hợp những màu đối diện nhau trên vòng thuần sắc để tăng cường độ tương phản.
  • Phối màu tương phản chéo: cách kết hợp màu sắc này giống cách trước nhưng thay vì sử đụng hai màu đối diện nhau, chúng ta sử dụng một màu và hai màu bên cạnh màu đối diện nó trên vòng thuần sắc.
  • Phối màu tương phản bộ ba: sử dụng ba màu có khoảng cách bằng nhau trên vòng thuần sắc. Những nhà thiết kế vẫn hay sử dụng một màu làm màu chủ đạo, hai màu còn lại làm điểm nhấn.
  • Phối màu tương phản bộ bốn: sử dụng bốn màu mà trong đó có hai cặp màu tương phản. Nếu bạn nối bốn màu này lại, nó sẽ tạo thành hình chữ nhật.

2. Mất điểm nhấn

Những màu sắc rực rỡ có thể tạo nên điểm nhấn cần thiết trong giao diện nhưng cũng vì vậy mà nếu lạm dụng, bạn sẽ khó có thể làm nổi bật bất cứ thành phần nào.

Đó là lí do tại sao chúng ta có công thức 60% - 30% - 10%. Phần lớn nhất dành cho màu chủ đạo, một phần ba dành cho màu thứ cấp và 10% còn lại chính là màu sẽ tạo nên điểm nhấn. Công thức này tạo cảm giác dễ chịu cho mắt bởi nó cho ta khoảng nghỉ để cảm nhận từng thành tố thị giác.

3. Không phải nhóm người dùng nào cũng thích màu sáng

Nghiên cứu người dùng là một phần không thể thiếu để tạo ra sản phẩm số. Xác định và phân tích người dùng tiềm năng sẽ giúp ta hiểu biết thêm về mong muốn của họ khi sử dụng ứng dụng hay website. Tuổi tác, giới tính và văn hóa đều có thể ảnh hưởng tới xu hướng của người dùng. Ví dụ, trẻ em rất thích màu vàng nhưng khi lớn lên, nó không còn quá hấp dẫn nữa. Cả nam và nữ giới có vẻ đều thích những màu mát như xanh dương, xanh lục và các sắc của chúng. Tuy nhiên, những màu đơn sắc như trắng, đen, và xám được ưa chuộng nhiều hơn bởi nam giới.

Chúng ta phải hiểu rõ thị trường mục tiêu trước khi lựa chọn sử dụng màu rực. Thậm chí đối với những ứng dụng giải trí cũng có những trường hợp riêng biệt, chẳng hạn như người trung niên luôn thích giao diện nhẹ nhàng và sẽ không thích giao diện rực rỡ vì cho rằng chúng làm họ phân tâm.

4. Màu sắc rực có thể tạo độ tương phản quá cao trên màn hình thiết bị di động

Chúng ta đã biết rằng màu sáng có thể hỗ trợ tạo tương phản, nhấn mạnh những thành phần thiết yếu của giao diện, và tăng cả legibilityreadability. Tuy nhiên, tương phản có thể trở nên quá cao trên những thiết bị di động bởi chúng có không gian màn hình khá nhỏ và được sử dụng trong rất nhiều hoàn cảnh đa dạng. Màn hình nhỏ, ánh sáng môi trường và font chữ rực rỡ sẽ làm cho thiết kế của bạn khó chịu với mắt người dùng. Đó là lí do các nhà thiết kế nên chú ý tới từng mức độ tương phản giữa màu sắc để người dùng cảm thấy thoải mái khi sử dụng app của bạn hàng giờ.

Night in Berlin App

Màu sắc là một công cụ mạnh mẽ, nhưng công cụ nào cũng có ưu thế và yếu điểm. Vậy nên lúc nào nhà thiết kế cũng nên suy nghĩ đa chiều để đưa ra được những giải pháp đúng đắn nhằm đạt được mục tiêu trong thiết kế của mình.

Người dịch: Thanh Phạm
Nguồn: UX Planet