BÍ KÍP DÙNG MÀU SÁNG TRONG UI DESIGN

18-05-2018 11:12

Kỹ năng sử dụng màu hiệu quả là 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. Flat và Material design (hai phong cách thiết kế sử dụng những mảng màu phẳng) những xu hướng thịnh hành khiến cho lý thuyết màu sắc ngày càng trở thành một thứ vũ khí lợi hại.

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

Tuy nhiên, hiện nay vẫn còn khá nhiều tranh cãi xoay quanh việc sử dụng màu áng và ảnh hưởng của chúng với trải nghiệ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ỡ”.

Tỷ lệ vàng - Làm sao để thiết kế một UI cân bằng

Bí kíp để lựa chọn nền đen cho website

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

1. Tăng readability và legibility

Để lựa chọn được màu sắc phù hợp, nhà thiết kế luôn phải 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 còn legibility là tính dễ nhận biết từng chữ cái trong một typeface.

Các màu sắc nổi bật tạo ra sự tương phản giúp tăng readability và legibility. Nhờ có sự tương phản này mà những thành phần trong bố cục mới nổi bật và bắt mắt. Nhưng không phải lúc nào tương phản màu sắc quá độ cũng hay. Nếu nội dung copy và màu nền có độ tương phản quá cao thì sẽ rất khó để đọc chữ. Vậy nên các hà 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ỉ nên sử dụng tương phản cao khi cần làm bật một thành tố nào đó.

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

Cần phải cân nhắc về sự phân cấp các yếu tố thị giác để một sản phẩm số có sự điều hướng rõ ràng và tương tác tự nhiên. Thành phần giao diện nên được sắp xếp theo một thứ tự 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 ảnh hưởng đến tâm trí chúng ta. Có những màu mạnh mẽ như đỏ, cam và những màu nhẹ như là trắng hoặc màu kem. Màu sáng thườ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 đỏ để tạo ra nút mua hàng để người sử dụng có thể tìm thấy chúng dễ dàng.

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

Não người luôn bị thu hút bởi những màu sắc rực rỡ, vậy nên việc 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 nhiều màu sắc lúc nào cũng sẽ thu hút hơn những sản phẩm trông nhợt nhạt. Nhưng xét cho cùng, nhữ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 công ty đã có màu sáng trong logo cùng với những sản phẩm thương hiệu thì việc sử dụng màu sắc đó 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 sự nhận diện thương hiệu.

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à bản thân chúng ta không hề hay biết. Tâm lý học màu sắc cho rằng, khi mắt ta nhìn thấy màu, não sẽ phát tin 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ụ như, 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ế.

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 được ưa chuộng những màu sắc và gradient tương 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 và 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.

Khóa học thiết kế đồ họa chuyên nghiệp

Khóa học Photoshop

Khóa học lllustrator 

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ả legibilityvà readability. 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ờ.

Màu sắc là một công cụ mạnh mẽ, nhưng công cụ nào cũng có ưu điểm và nhược đ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.

Ban Truyền thông ITPlus Academy