Đăng ký SPRINGMEBLOG để tiếp thu kiến thức hiệu quả hơn!

Forgot Password

Đăng ký SPRINGMEBLOG để tiếp thu kiến thức hiệu quả hơn!

Cảm ơn bạn đã đăng ký tài khoản Springmeweb!

Vui lòng kiểm tra Email, click vào Link để kích hoạt tài khoản.

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

BY: Nguyen-Ngoan  |   March 28, 2018  |  
UI
  • 0

Đâ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 ...

Please Share This With

ĐĂNG KÝ ĐỂ TIẾP THU KIẾN THỨC HIỆU QUẢ HƠN

ABOUT SPRINGMEBLOG

Springmeblog.com giới thiệu các bài viết về chủ đề KINH DOANH, PHÁT TRIỂN SỰ NGHIỆP, QUẢN LÝ CON TRẺ.

Các bài viết của Springmeblog được chọn lọc kỹ từ các bài viết English của các chuyên gia giỏi trên thế giới để mang lại nguồn kiến thức HỮU ÍCH nhất và THIẾT THỰC nhất có thể áp dụng ngay vào công việc và cuộc sống.

Springmeblog.com được thiết kế nhằm mang đến sự tiếp thu kiến thức một cách HIỆU QUẢ nhất. Mỗi bài viết English được giới thiệu có công cụ TỪ ĐIỂN TÍCH HỢP hỗ trợ đọc hiểu. Cùng với các công cụ LƯU BÀI VIẾT, TẠO GHI CHÚ cho mỗi bài viết, springmeblog hỗ trợ cho việc HỌC TẬP SUỐT ĐỜI qua tiêu chí ĐỌC ĐỂ LÀM và HỌC ĐỂ LÀM ĐƯỢC.

© 2018 SPRINGMEWEB. DESIGIN BY SPRINGMEWEB