7 Quy Tắc Thiết Kế UI Tuyệt Đẹp (Dành Cho Dân Không Chuyên)-P.2

Lần trước tôi đã chia sẻ xong ở phần Quy Tắc số 1 đầu tiền đó là Ánh Sáng Chiếu Từ Trên Xuống. Tiếp nối phần mở đầu của bài viết 7 Quy Tắc Thiết Kế UI Tuyệt Đẹp (Dành Cho Dân Không Chuyên), chúng ta cùng tìm hiểu Quy Tắc số 2: 

Quy tắc 2: Đen và Trắng trước

Sử dụng tông màu xám trước khi thêm màu sắc sẽ đơn giản hóa phần phức tạp nhất của thiết kế — và bắt bạn tập trung vào không gian và bố cục.

UX designer ngày nay rất chú trọng “mobile-first”. Nghĩa là bạn sẽ phải nghĩ về sự tương tác, hiển thị của các trang trên điện thoại trước khi hình dung sản phẩm của bạn trên một màn hình Retina hàng triệu pixel.

Điều bó buộc này thực ra rất tốt, nó làm suy nghĩ của bạn trở nên thông suốt. Bạn bắt đầu với bài toán khó trước (làm thế nào để sử dụng trên màn hình bé xíu), sau đó giải quyết bài toán đơn giản hơn (sử dụng trên màn hình lớn).

Hmm sau đây cũng là một điều bó buộc tương tự: thiết kế đen và trắng trước. Bắt đầu với bài toán khó trước đó là tạo ra ứng dụng đẹp, dễ sử dụng nhưng không sử dụng màu sắc. Hãy thêm màu sắc sau cùng, và ngay cả khi thêm, chỉ thêm khi có một lý do cụ thể.

Bản wireframe màu xám của Haraldur Thorleifsson

Đây là một cách đơn giản để cho ứng dụng “đơn giản” và “thoáng đáng”. Có quá nhiều màu sắc ở quá nhiều chỗ là một cách đơn giản để phá vỡ sự đơn giản/thoáng đãng. Đen trắng buộc bạn phải tập trung vào những điều như kích cỡ, không gian và bố cục trước. Và đó chính là những điều căn bản của thiết kế đơn giản, thoáng đãng.

Một số trường hợp khi mà Đen Trắng không hợp lý. Đó là khi bạn thiết kế cho những chủ đề có cảm xúc mạnh — “thể thao”, “chớp nhoáng”, “hoạt hình” … — khi đó cần designer có khả năng sử dụng màu sắc rất tốt. Nhưng hầu hết ứng dụng vẫn cần sự đơn giản và thoáng đãng. Điều này thì phải thừa nhận đúng là khó thiết kế hơn thật.

rông thế thôi mà không hề dễ đâu!

Bước 2: Thêm màu như thế nào

Đơn giản nhất đó là hãy chỉ chọn một màu để thêm.

Thêm màu vào một trang tông màu xám rất đơn giản, hiệu quả và ngay lập tức thu hút sự chú ý của người dùng.

Bạn cũng có thể linh hoạt biến đổi. Màu xám + 2 màu, hoặc màu xám + nhiều màu có chung hue. Color code — hue là gì vậy?

Thường thì khi nói đến màu sắc chúng ta thường dùng mã hex RGB. Nhưng RGB không phải là một framework tốt cho việc chọn màu trong thiết kế. Chúng ta nên sử dụng HSB (cũng còn gọi là HSV, và giống như HSL).

HSB tốt hơn RGB vì nó giống như cách chúng ta nghĩ về màu sắc, và bạn có thể dự đoán màu sắc sẽ thay đổi như thế nào khi bạn thay đổi giá trị HSB.
Nếu khái niệm này mới với bạn, đây là tài liệu rất dễ hiểu về HSL.

Màu vàng single-hue từ trang Smashing Magazine.

Màu xanh single-hue từ trang Smashing Magazine.

Bằng việc sửa saturation và brightness của màu có cùng hue, bạn có thể chọn ra nhiều màu — tối, sáng, nền, tông chủ đạo, bắt mắt — mà không làm mắt bạn thấy khó chịu.
Sử dụng nhiều màu cùng hue là cách an toàn nhất để làm nổi bật hoặc trung hòa các thành phần mà không làm cho thiết kế trở nên rối rắm.

Đồng hồ đếm ngược bởi Kerem Suer.

Một vài chú ý khác về màu sắc

Màu sắc là phần phức tạp nhất của thiết kế. Và trong khi có rất nhiều tài liệu thừa thãi về màu sắc và không thực dụng để bạn có thể hoàn thành thiết kế của mình. Tôi có một số tài liệu rất tốt như sau:

• Learn UI Design. Đây là khóa học tôi tạo, bao gồm 3 giờ thiết kế về màu sắc (và 13+ giờ về các chủ đề UI khác). Truy cập learnui.design
• Color in UI Design: A (Practical) Framework. Nếu bạn thích phần này, và muốn nghe nhiều hơn nữa về màu sắc (không chỉ đen và trắng), thì bài viết này là dành cho bạn. Đoán xem ai viết!
• Never Use Black (Ian Storm Taylor).
• Adobe Color CC. Công cụ tuyệt vời để tìm kiếm, chỉnh sửa, tạo color schemes.
• Dribble search-by-color. Một trang tuyệt vời giúp bạn tìm ra màu nào là phù hợp nhất. Nếu bạn đã chọn ra được một màu rồi thì hãy xem các designer giỏi nhất thế giới sử dụng màu đó để tạo ra các sản phẩm như thế nào.

Trên đây là phần tóm tắt ngắn cho Quy tắc số 2, hy vọng các bạn sẽ nắm rõ quy tắc về kết hợp màu sắc cũng như ánh sáng trong giao diện đã được chia sẻ ở Quy tắc số 1. Hẹn gặp các bạn ở các phần tiếp theo. 

Trên đây là bài dịch từ bài viết gốc của một tác giả. Các bạn muốn hứng thú tìm hiểu đọc sâu hơn thì theo đường link bên dưới nhé:

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda