7 luật để làm giao diện UI "tuyệt đỉnh" (Phần 2): Trắng và Đen trước hết
design
27
UI
25
White

Vu Nhat Minh viết ngày 20/07/2015

Đây là phần 2 của một series chuyên về thiết kế UI. Bạn nên đọc phần trước trước khi bắt đầu đọc phần này.

Trắng và Đen trước hết

Design ở chế độ đen trắng trước khi sử dụng màu sắc sẽ đơn giản hóa các vấn đề phức tạp của thiết kế đồ họa, buộc người thiết kế phải tập trung vào khoảng trắng và bố cục.

Ngày nay designer thường xuyên dùng phương pháp "mobile-first" - nghĩa là nghĩ đến chuyện web của mình sẽ có hình dáng và tương tác như thế nào trên màn hình điện thoại, trước khi nghĩ đến màn hình máy tính Retina với hàng tỉ pixel.

Cách nghĩ như vậy rất chuẩn, nó giống như là đối đầu với vấn đề khó trước (app tốt trên màn hình phone rất nhỏ), và rồi áp dụng với vấn đề dễ sau (app tốt trên màn hình lớn).

Trong design thì cách tiếp cận cũng tương tự như vây: design cho chế độ đen trắng trước. Đây là vấn đề khó hơn bởi để trang web đẹp và dễ dùng chỉ trên nền đen và trắng là không hề đơn giản. Sau cùng bạn có thể thêm màu sắc vào bản phác thảo của mình, nhưng chỉ thêm màu sắc với mục đích rõ ràng.

BAW

Đây là cách chắc chắn và đơn giản nhất để design trở nên "clean" và "simple". Dùng quá nhiều màu sắc ở quá nhiều chỗ là cách dễ nhất để phá hỏng luật clean và simple. Tập trung vào chế độ đen trắng sẽ bắt buộc bạn phải tập trung đầu tiên vào những thứ như khoảng trắng, độ dài và bố cục. Và đó chính là những yếu tố quan trọng nhất cho một design được coi là "clean" và "simple".

Uber

Có một vài tình huống mà design theo chế độ đen trắng không hữu dụng cho lắm, đó là khi bạn cần thể hiện những trạng thái cảm xúc mạnh và cụ thể như là "sporty", "flashy" hay "cartoony", v.v... Lúc đó bản thiết kế sẽ cần đến những designer thực sự giỏi về màu sắc. Tuy nhiên hầu hế các app không cần những trạng thái cảm xúc như thế. Những design như thế thực sự khó hơn rất nhiều.

Sporty
Flashy

Vì vậy, với hầu hết những bản phác thảo cần làm, hãy làm với chế độ đen trắng trước

Thêm màu sắc vào bản đen trắng

Sau khi đã phác thảo xong bản đen trắng và muốn thêm màu sắc, cách đơn giản nhất là thêm chỉ một màu duy nhất. Điều này sẽ khiến mắt của người dùng tự động hướng đến màu sắc đó một cách đơn giản và hiệu quả

Add Color
Add Color

Sau đó, bạn có thể tiến thêm những bước nữa như là : đen trắng + 2 màu, đen trắng + một vài màu trên cùng tông.

Chờ đã, màu trên cùng tông là màu như thế nào ?
Bạn có thể đã nghe nhiều đến màu RGB và hex code RGB. Tốt nhất là quên nó đi. RGB không phải là một framework tốt cho màu sắc để design. Có một framework tốt hơn hản là HSB (hay còn gọi là HSV hoặc HSL).
HSB tốt hơn RGB ở chỗ nó thể hiện chuẩn nhất cách chúng ta nhìn các màu sắc tự nhiên. Bạn sẽ dễ dàng hiểu ra cần thay đổi màu HSB thế nào để thay đổi màu sắc mà bạn đang nhìn vào.
Nếu đây là lần đầu tiên bạn nghe đến HSB, thì hãy đọc bản hướng dẫn này.

Dưới đây là 2 tông HSB vàng(gold) và xanh(blue) của tạp chí design Smashing Magazine

single-hue-gold
single-hue-blue

Chỉ với việc thay đổi độ bão hòa(saturation)độ sáng(brightness) của một tông màu, bạn có thể tạo ra rất nhiều màu khác nhau: màu tối, màu sáng, màu nền, màu nhấn và màu gây chú ý với mắt.

Dùng nhiều màu trên một hoặc 2 tông là cách chắc chắn nhất để nhấn mạnh và trung hòa các chi tiết mà không làm hỏng và loạn bản phác thảo của bạn.

one-or-two-hue

Một vài gợi ý về màu sắc

Màu sắc là lĩnh vực khó nhất trong design. Trong khi có rất nhiều hướng dẫn rất loạn và khó hiểu về màu sắc như hiện nay thì tôi có thể chỉ cho bạn những hướng dẫn tốt như sau:

  • Không bao giờ dùng màu đen (Ian Storm Taylor). Bài này nói về phương pháp tăng giảm độ bão hòa(saturation) cho màu xám, đặc biệt là những màu gần đen, đem lại sự giàu có về cảm nhận thị giác cho bản phác thảo của bạn. Màu xám khi được tăng độ bão hòa, sẽ nhìn rất gần với thế giới thực của chúng ta - chính nơi mà nó được sinh ra.
  • Adobe Color CC là một tool rất tuyệt cho tìm kiếm, thay đổi và tạo ra bảng màu.
  • Công cụ tìm kiếm trên Dribble theo màu sắc để tìm kiếm xem cái gì là tốt nhất với một màu xác định sẵn. Nếu bạn đã có một màu định sẵn, bạn sẽ tìm thấy những designer giỏi nhất trên thế giới đã tạo ra những sản phẩm như thế nào với màu sắc đó.

.. Phần sau: Hãy tăng gấp đôi khoảng trắng ...

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

52 bài viết.
640 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
112 26
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết 2 năm trước
112 26
White
85 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết 2 năm trước
85 4
White
54 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết 2 năm trước
54 5
Bài viết liên quan
White
54 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết 2 năm trước
54 5
White
6 1
Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com (Ảnh) Dựa trên một câu chuyện có thật, tuy nhiên tên nhân vật đã được thay đ...
Giaosucan viết 6 tháng trước
6 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
52 bài viết.
640 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!