Đen và Trắng: Một hệ thống thiết kế được xây dựng để tập trung

Chúng tôi xây dựng mọi sản phẩm OLUWA với màu đen và trắng nghiêm ngặt. Không có màu xanh lam thương hiệu, không có màu xanh mòng két tạo điểm nhấn, không có "màu xanh lá cây thành công" xuất hiện trong thông báo chúc mừng. Hệ thống thiết kế đen trắng tối giản không phải là nỗi hoài niệm về thiết bị đầu cuối và nó không phải là bảng tâm trạng mà chúng tôi yêu thích. Đó là một hạn chế trong công việc giúp chúng tôi đưa ra quyết định nhanh hơn, giao diện của chúng tôi dễ đọc hơn và đường cơ sở về khả năng truy cập của chúng tôi cao hơn theo mặc định. Đây là lý do tại sao chúng tôi chọn đơn sắc, những gì chúng tôi đã từ bỏ cũng như các mã thông báo và quy tắc mà bạn có thể áp dụng vào ngày mai.

Tại sao chúng tôi cố tình loại bỏ màu sắc

Màu sắc là biến bị lạm dụng nhiều nhất trong thiết kế giao diện. Thêm vào thì rẻ và quản lý thì tốn kém. Thời điểm bạn có một bảng màu, mọi yếu tố sẽ cạnh tranh để giành được một trong các màu sắc của bạn và "màu này nên là màu gì" trở thành câu hỏi bạn trả lời hàng trăm lần một tuần, thường là không nhất quán.

Nút hủy diệt có màu đỏ. Nhưng đó cũng là trạng thái lỗi, điểm đánh dấu trường bắt buộc, huy hiệu thông báo cũng như chuỗi biểu đồ dành cho người dùng rời bỏ. Màu đỏ bây giờ có nghĩa là năm thứ, nghĩa là nó chẳng có nghĩa gì cả.

Việc loại bỏ màu sắc sẽ loại bỏ toàn bộ loại quyết định đó. Khi bạn không thể tìm được màu sắc để báo hiệu tầm quan trọng, bạn báo hiệu nó bằng các công cụ thực sự mang ý nghĩa: vị trí, kích thước, trọng lượng và khoảng trắng. Những công cụ đó trung thực hơn. Tiêu đề được coi là quan trọng vì nó lớn và nằm ở trên cùng với khoảng trống xung quanh chứ không phải vì ai đó đã sơn nó màu tím.

Bài học rút ra: nếu bạn đang sử dụng màu sắc để khắc phục vấn đề phân cấp, thì bạn gặp vấn đề về phân cấp chứ không phải vấn đề về màu sắc. Monochrome từ chối cho phép bạn viết giấy lên nó.

Hệ thống phân cấp không có màu sắc: ba đòn bẩy

Loại bỏ màu sắc khỏi bàn, ba đòn bẩy sẽ thực hiện tất cả công việc.

Tỷ lệ loại. Chúng tôi chạy thang đo mô-đun với các bước nhảy rõ ràng chứ không phải chuyển đổi kích thước liên tục. Các bước ngồi quá gần sẽ gây ra tiếng ồn; mắt cần thứ hạng rõ ràng. Quy mô làm việc của chúng tôi là khoảng 12/14/16/20/28/40/64px. Nội dung văn bản nằm ở mức 16, siêu dữ liệu thứ cấp ở mức 14 và mọi thứ trên 20 đều mang tính cấu trúc. Nếu hai thứ cần có tầm quan trọng khác nhau thì chúng sẽ thực hiện các bước khác nhau, không bao giờ có cùng một bước với hai sắc thái xám.

Trọng lượng và vỏ. Với một kiểu chữ và không có màu sắc, trọng lượng trở thành tín hiệu chính. Chúng tôi sử dụng nhiều nhất ba mức độ đậm nhạt: thông thường, trung bình và một mức đậm duy nhất dành riêng cho sự nhấn mạnh thực sự. Chữ hoa với khoảng cách giữa các chữ cái được theo dõi sẽ thực hiện công việc của "màu nhãn", đánh dấu một chuỗi dưới dạng danh mục hoặc lông mày mà không có tông màu.

Không gian. Khoảng trắng là bức tường chịu lực của bố cục đơn sắc. Những thứ liên quan đến nhóm lân cận; khoảng cách ngăn cách họ. Trong MadaiOps, ứng dụng đặt hàng tiền điện tử của chúng tôi, phiếu đặt hàng hoàn toàn dựa vào điều này: giá, kích thước và mặt được nhóm chặt chẽ, trong khi hành động xác nhận được đẩy ra xa với không gian có chủ ý để nó không bao giờ có thể bị bỏ qua bên cạnh đầu vào. Không cần kiểu dáng "nguy hiểm" màu đỏ. Khoảng cách thực hiện việc bảo vệ.

Sự tương phản là một hệ thống, không phải là sự rung cảm

Cái bẫy đen trắng đang nghĩ rằng bạn chỉ có hai giá trị. Bạn có một đoạn đường dốc đầy đủ màu xám và kỷ luật là hạn chế nó. Chúng tôi xác định một tập hợp các bước nhỏ, cố định và cấm các màu xám ngoài đoạn đường nối. Đây là đoạn đường nối chúng tôi thực sự vận chuyển:

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

Sáu giá trị. Đó là toàn bộ hệ thống, cộng với nghịch đảo của nó đối với chế độ tối. Quy tắc mà chúng tôi thực thi trong quá trình xem xét: không có màu xám nào có thể tồn tại nếu không có trên đoạn đường nối. Ngay khi ai đó nhỏ mắt vào #8a8a8a vì "đường viền có cảm giác nặng nề", hệ thống bắt đầu hỏng hóc. Một tập hợp các giá trị khép kín là thứ giữ cho giao diện người dùng đơn sắc không bị trôi vào tình trạng giống nhau như bùn.

Xóa văn bản 4,5:1, xóa cấu trúc 3:1

Mọi ghép nối văn bản trên bề mặt đều được kiểm tra theo tỷ lệ tương phản WCAG trước khi xuất xưởng. --ink-500 trên --paper đạt tỷ lệ khoảng 5,7:1, vượt ngưỡng 4,5:1 cho văn bản nội dung một cách thoải mái. --ink-300 không hoạt động dưới dạng văn bản và do đó chỉ được phép đối với đường viền và dải phân cách, trong đó áp dụng ngưỡng không phải văn bản 3:1. Mã hóa quy tắc thành các mục đích sử dụng được phép của mã thông báo, không chỉ giá trị của nó, là điều khiến nó được gắn bó.

Cổ tức khả năng tiếp cận

Đây là nơi đơn sắc lặng lẽ chiến thắng. Khoảng 1/12 nam giới mắc một số dạng thiếu thị lực màu sắc và bất kỳ giao diện nào dựa vào màu đỏ so với xanh lá cây để mang ý nghĩa đều không thể đọc được đối với một bộ phận người dùng có ý nghĩa. Chúng tôi chưa bao giờ gặp phải bức tường đó, bởi vì chúng tôi chưa bao giờ mã hóa ý nghĩa bằng màu sắc ngay từ đầu. Các tiểu bang của chúng ta được phân biệt bằng hình dạng, nhãn hiệu, trọng lượng và vị trí.

Kỷ luật đó buộc phải áp dụng một mô hình lành mạnh hơn ở mọi nơi: không bao giờ để một kênh duy nhất mang ý nghĩa riêng. Nút bị vô hiệu hóa trong hệ thống của chúng tôi không chỉ nhẹ hơn. Nó mất đường viền và nhãn giảm xuống --ink-300, do đó trạng thái vẫn tồn tại trên màn hình thang độ xám, dưới ánh sáng mặt trời và đối với người dùng mù màu giống hệt nhau. Youp, ứng dụng ghi nhật ký của chúng tôi, đánh dấu các mục nhập tâm trạng bằng hình tượng và văn bản nhãn thay vì chuyển màu cảm xúc từ đỏ sang xanh thông thường, vì vậy lịch sử cảm xúc sẽ được đọc mà không cần dựa vào quang phổ mà nhiều người không thể nhìn thấy.

Bạn cũng nhận được sự hỗ trợ về độ tương phản cao và màu sắc bắt buộc gần như miễn phí, bởi vì bạn chưa bao giờ đấu tranh với khả năng ghi đè khả năng truy cập của chính trình duyệt bằng bảng màu thương hiệu tinh tế.

Hạn chế tăng tốc độ ra quyết định như thế nào

Lợi ích bị đánh giá thấp là tốc độ. Bảng màu là một sự bùng nổ tổ hợp: mọi thành phần mới sẽ nhân lên theo mọi màu sắc và mọi trạng thái. Đơn sắc sụp đổ điều đó. Không cần đưa ra quyết định về màu sắc, thiết kế của thành phần sẽ giảm bớt bước nhập, trọng lượng, khoảng cách và mã thông báo thang độ xám nào cho đường viền. Đó là một quyết định mà bạn có thể đưa ra trong vài giây và bảo vệ khi xem xét bằng một quy tắc thay vì lập luận về sở thích.

Nó cũng hợp chất. Bởi vì bộ mã thông báo rất nhỏ và đóng, nên các thành phần kết hợp có thể dự đoán được: một thẻ, một hàng trong bảng và một phương thức đều được vẽ từ sáu màu xám giống nhau và bảy bước loại giống nhau, vì vậy chúng trông có vẻ liên quan mà không có bất kỳ sự phối hợp nào. Các bề mặt mới kế thừa tính nhất quán thay vì phải thương lượng để có được nó. Đối với một studio nhỏ vận chuyển một số sản phẩm, nền tảng chung đó là sự khác biệt giữa bốn ứng dụng giống như một gia đình và bốn ứng dụng giống như bốn nhà cung cấp.

Sự đánh đổi là có thật và đáng được đặt tên. Đơn sắc có phạm vi biểu cảm thô ít hơn và một số danh mục thực sự cần màu sắc: trực quan hóa dữ liệu với nhiều chuỗi, bất kỳ thứ gì ánh xạ tới màu vật lý, khoảnh khắc thương hiệu đánh đổi bằng sự ấm áp. Chúng tôi không giả vờ khác. Quan điểm của chúng tôi là màu sắc phải kiếm được và hiếm, được giới thiệu có chủ đích cho một công việc cụ thể, không bao giờ được coi là đòn bẩy mặc định cho hệ thống phân cấp. Khi chúng tôi chạm tới nó, nó tiếp đất rất khó vì mọi thứ xung quanh đều yên tĩnh.

Những quy tắc bạn có thể áp dụng vào ngày mai

Nếu bạn muốn thử điều này mà không cần xây dựng lại mọi thứ:

• Đóng đoạn đường nối màu xám của bạn. Chọn năm hoặc sáu giá trị, đặt tên cho chúng và cấm mọi thứ ra khỏi đoạn đường nối trong quá trình xem xét mã. Quy tắc duy nhất này thực hiện hầu hết công việc.
• Tạo một tỷ lệ kiểu và chỉ sử dụng các bước của nó. Không có kích thước phông chữ tùy ý. Nếu bạn tiếp tục cần một kích thước mới thì cân đã sai; sửa thang đo, không thêm một lần.
• Mã hóa các mục đích sử dụng được phép thành mã thông báo. --ink-300 là "chỉ đường viền", không chỉ là giá trị hex. Hãy ghi lại nó ở nơi các kỹ sư sẽ đọc nó.
• Kiểm tra mọi tín hiệu mang ý nghĩa cho kênh thứ hai. Nếu việc xóa màu sẽ khiến trạng thái trở nên mơ hồ, hãy thêm hình dạng, nhãn hoặc vị trí cho đến khi không còn nữa.
• Coi khoảng trắng như một thành phần. Đặt khoảng cách cho các mã thông báo được đặt tên và bảo vệ chúng theo cách bạn bảo vệ màu sắc ở những nơi khác.

Suy nghĩ kết thúc

Làm việc với màu đen trắng không phải là một hạn chế mà chúng tôi có thể chấp nhận được; nó là một thấu kính làm sáng tỏ. Loại bỏ biến dễ dàng nhất và các biến cấu trúc, nhịp điệu, tỷ lệ, độ tương phản, không gian, không có nơi nào để che giấu. Giao diện có hệ thống phân cấp thực sự hoặc không, và bạn sẽ phát hiện ra ngay lập tức. Sự trung thực đó đối với chúng tôi có giá trị hơn bất kỳ bảng màu nào.