UI Guidelines P2: Một framework gồm những gì?

Sau phần 1 [UI Guidelines P1: Hiểu và áp dụng từ A-Z — Tran Quoc Huy — Medium] thì trong phần 2 này mình sẽ viết checklist theo dạng framework. Nghĩa là trong một bộ UI Guidelines nó sẽ gồm những gì cơ bản.

Nguồn: Google

Bộ UI Guidelines này chỉ là một framework, nó không giải thích rõ cách làm như thế nào. Việc chọn thành phần nào để áp dụng cho sản phẩm của bạn đến rõ từ Định vị, Chiến lược phát triển sản phẩm của nhóm.

Ngoài ra có 1 số từ chuyên môn mình cũng ngại dịch, vì mình không biết nên dịch như thế nào cho chuẩn, nên đành phải giữ nguyên từ gốc.

— Mời bạn tham khảo bộ framework bên dưới, nếu bạn thấy bài này có ý nghĩa và có ý muốn sử dụng, vui lòng take credit cho mình là được. Xin cảm ơn. —

Có một điểm thú vị trong bài viết này: Mình không viết theo thứ tự làm cái nào trước. Bạn sẽ là người quyết định việc đó 😁

Bộ màu

Còn gọi là Color Scheme hay Color Pattern gì cũng được. Trong lý thuyết màu sắc thì các bạn sẽ dùng các bộ 2,3,4,5 màu gì đó tùy vào bản chất sản phẩm.

Còn trong framework này Bộ màu nó sẽ gồm 4 cái. Mình liệt kê ra vậy để bạn không bị nhầm lần giữa các khái niệm màu với bộ khung bên dưới.

1. Màu Brand

Thông thường, mình nhắc lại là thông thường mọi người sẽ chọn màu Primary làm màu Brand luôn.

Việc này hết sức bình thường vì tính phổ biến của nó. Về nguyên tắc, chúng ta phải dùng Darker Shade và Lighter Shade cho màu brand. Khi nói về brand thì một trong những yếu tố quan trọng nhất là Personality của sản phẩm. Và điều quan trọng, màu cho Brand không chỉ mỗi một màu. Có thể nó có tận 3–4 màu.

2. Màu Xám (Grey)

Các màu xám dùng cho Text, Background, Line, Border. Nhưng mà là Xám kiểu gì? Có hẳn 6 loại Xám cho bạn áp dụng: Black, Steel, Slate, Silver, Smoke.

Mình chỉ nêu ra chú ý cho riêng màu Xám dạng Smoke và Snow buộc phải định nghĩa Darker và Lighter Share cho nó như ở màu Brand. Tại sao lại như vậy? Tại vì khi bạn làm icon và các background bạn sẽ phải cân nhắc đến dạng Smoke và Snow này, nó sẽ phục vụ tốt Usability.

3. Màu cho Giao diện sản phẩm (Gọi là UI Color)

Chúng ta sẽ định nghĩa ra các màu áp dụng cho:

• Các nút dạng action với mục đích nào đó trong trục Cấu trúc thông tin của bạn. Có thể có mối liên hệ nào đó tới Brand nếu bạn sử dụng màu Brand khác.
• Các thông báo dạng cảnh báo (alert message).
• Các thành phần của form.

Nôm na chúng ta sẽ có kiểu: màu chính là màu gì (liên hệ tới màu Brand ở trên), màu positive, màu negative, màu warning, etc.

4. Các màu nghịch của màu Xám ở mục trên

Trong trường hợp này nếu bạn có định nghĩa màu Light grey trước đó thì chúng ta sẽ có màu nghịch của màu này. Nó sẽ tối hơn (darker).

Typography

Đầu tiên là chúng ta sẽ chọn typeface. Thông thường người ta hay có tiêu chí đơn giản như typeface phải mỏng, gọn (Soft), thân thiện (Friendly). Typeface thì nhiều tài liệu trên Internet rồi nên các bạn có thể nghiên cứu thêm.

Ngoài ra để đáp ứng việc render tốt trên các thiết bị khác nhau thì font size tối thiểu phải từ 10px trở lên. Thực tế ngày nay cũng ít ai làm size này, có dùng thì sẽ có một lý do đặc biệt nào đó đằng sau. Size bé quá sẽ không đảm bảo tốt việc Đọc.

Khi nói về font size thì chúng ta sẽ đi theo dạng 12 scales. Tối thiểu đi từ 10px lên 12, 14, 16, 18, 20, 24, 28, 32, 34, 38, 46. Thực tế ít khi chúng ta dùng 34, 38, 46.

Về font weight thì nó sẽ đi theo loại font chúng ta chọn. Cơ bản phải đủ 3 cái Light, Regular, Bold. Thực tế chúng ta dùng sẽ dùng trọng số của font weight theo loại font. Vd: 400, 600, 900.

Border Radius

Hai dạng phổ biến sẽ được áp dụng là Uniform border radius hoặc Dạng Circular Shape. Có thể dùng cả 2 hoặc 1 trong 2.

Mỗi dạng nên có 2–3 kiểu khác nhau.

Box Shadow

Mình sẽ dùng 3 kiểu sau cho box shadow: Dạng Hover shadow, Dạng 3D shadow, và perspective shadow.

Riêng 3d shadow thì chắc cũng hơi khó dùng, do tình huống khá đặc biệt và không phổ thông. Đối với perspective shadow chúng ta sẽ áp dụng cho modal/popup trong sản phẩm.

Layout

Về layout mình sẽ bỏ qua nhiều phần của layout (vì các bạn trong nghề đã biết nó là gì rồi) mà sẽ đi tới 4 điểm cốt lõi của layout luôn.

Nó bao gồm: Uniform spacing (padding và margin thế nào, gồm mấy kiểu), Individual spacing (padding và margin cho các thành phần đặc biệt, nằm trong “khuôn khổ” nào đó, từ đó sẽ có các chỉ số top, left, right, bottom ra sao), Inline (các thành phần nằm nhau thì padding thế nào), và cuối cùng là định nghĩa đến Text Manipulation: khi text dài thì truncate thế nào? Có cần truncate không?

Icon

Phần này không phải chuyên môn của mình, mình chỉ liệt kê những gì mình đã từng làm việc với các bạn UI Designer trước đây. Từ những cái mình biết khi giao tiếp trong các buổi họp mình sẽ dễ xác định được đâu là những feedback mình có thể nói ra, tránh bị lan man và cảm tính.

Mỗi loại icon thì phải có size khác nhau, nằm trên các nền Light và Dark khác nhau. Chung quy vẫn đảm bảo được việc Đọc, Hiểu, Liên hệ tới feature và flow đang có, mục đích cuối của nó là gì.

Khi icon đang active và focused vào thì nó như thế nào. Khi icon đang active và unfocused thì nó như thế nào. Có cần có các mức độ opacity không? Như thế nào thì đạt cảm giác vừa mắt? Ngoài ra khi icon bị inactive đi thì cũng nên có hướng xử lý cho nó.

Phần cuối là các tiêu chuẩn cho bộ Product icon: phần này nhóm designer sẽ trình bày lý do chọn hướng ánh sáng, shadow nặng ở đâu, có cần tint ở góc nào không? Shade nó như thế nào? Từ hướng này thì chúng ta sẽ xác định được liệu như vậy về mặt Usability các feature sẽ làm (hoặc cần cải tiến) sẽ có khả năng đạt tới mức độ nào? (Usability score). Nếu không dự đoán được thì chúng ta sẽ chấp nhận test dần với user bên ngoài.

Hình ảnh đại diện

Có thể nó là avatar, có thể nó là thumb ở đâu đó. Có 3 cái cân nhắc.

Đầu tiên là các kích cỡ của ảnh đại diện. Có bao nhiêu size cho sản phẩm?
Tiếp theo là cách hiển thị ảnh đại diện trong các trường hợp lỗi, xấu, hoặc không đạt case tối ưu. Cuối cùng là nếu phải kết hợp ảnh đại diện kèm với icon thì nó sẽ thế nào?

Các loại nút

Về nguyên tắc, nút phải có 5 kích cỡ: Extra large, Large, Medium, Small, Extra small.

Nếu bạn làm không đủ kích cỡ nút sẽ dẫn tới trường hợp phổ biến: “Sao các nút này không đồng bộ với nhau vậy?”. Ấy là do bạn định nghĩa thiếu.

Về nút thì tài liệu cũng vô vàn, mình chỉ đề cập đến 2 vấn đề chính của nút Flat và nút Ghost.

Với nút Flat, chúng ta sẽ nghĩ đến việc áp dụng cho các trường hợp Required, Mandatory nhiều hơn (có thể tùy tình hình). Buộc phải có màu brand, màu positive đi theo.

Với nút Ghost, mình thấy người ta có xu hướng dùng các trường hợp Optional nhiều hơn (có thể tùy tình hình). Dạng này thì không thường xuyên. Mình cũng thấy nhiều trường hợp dùng border trên nền trắng, khi hover vào sẽ có các màu đi theo bộ màu ở mục 1. Tất nhiên đây chỉ là quan sát, có thể có nhiều phương án khác thú vị hơn.

Một số kiểu áp dụng nút:

• Nút trên nền Dark/Light.
• Nút khi disable thì thế nào.
• Có dạng nút kiểu “Waiting” không? Nếu có, trên nền Dark/Light như thế nào?
• Nếu cần phải đi kèm với icon thì nó trông ra sao? Format có nên là cái gì khác ngoài kiểu inline svg?
• Nếu nút chỉ là dạng icon thì áp dụng vào chỗ nào?
• Nút dùng với logo brand thì áp dụng chỗ nào?
• Nhóm các group cạnh nhau thì sẽ xài kiểu gì? Nó sẽ là 1 set các nút ghost hay sao?
• Nút có trạng thái (stateful button): Khi hover, nhấn vào thì trông như thế nào?

Các thành phần của form

Form thì không nhất thiết phải là các form như form đăng ký/đăng nhập. Nhiều khi chỉ cần 1 ô nhập liệu thì cũng được gọi là form rồi, dù nó nằm trên pop/modal hay là 1 page.

Form cũng vốn dĩ quá trời tài liệu, mình chỉ liệt kệ những vấn đề cơ bản cần quan tâm trước.

Về input:

• Như nút, nó có 5 kích cỡ.
• Về style thì quan tâm placeholder và border.
• Nếu kèm với icon thì quan tâm đến việc khi click vào placeholder thì icon nó biểu thị trạng thái gì?
• Khi bị disable thì ra sao?
• Khi kèm theo context kiểu “input + email domain” thì trông như thế nào?

Về text area:

• Một khung nhập text thuần túy, kích cỡ như thế nào là phù hợp?
• Nếu buộc phải có icon, nó trông như thế nào?
• Khi user chủ động mở rộng text area thì cơ chế expand thế nào? Tối đa bao nhiêu?

Về select menu (combo box):

• Nếu có dùng thì chú ý đến 5 kích cỡ như trên.

Về checkbox:

• Chỉ cần 2 kích cỡ để sử dụng.

Về slider:

• Nếu buộc phải dùng thì nó là dạng gì? Range slider hay là cái gì khác?
• Về style buộc phải có màu brand và màu xám. Nếu brand là màu xám thì cân nhắc kỹ hơn.

Grid

Tương tự form mình sẽ đề cập đến các vấn đề trọng yếu của một grid.

• Khi có content nhiều thì mình sẽ xử lý wrap content lại như thế nào?
• Có bao nhiêu grid size cần sử dụng trên sản phẩm?

Links

Chúng ta sẽ có các dạng link sau, bạn sẽ thấy bất ngờ khi trước giờ những gì bạn nghĩ về link là chưa đủ.

• Default link: sẽ dùng màu brand cho default link. Khi hover sẽ là dạng dark shade của màu brand.
• Dark link: áp dụng khi bạn cần sử dụng trên 1 số điều kiện, khi có light background.
• Light link: ngược với dark link, nhưng hiếm khi sử dụng. Trừ khi sản phẩm bạn có thêm chế độ night mode hoặc dark mode.
• Negative link: sử dụng ở một số trường hợp đặc biệt như cảnh báo user cẩn thận với hành vi sử dụng nào đó.
• Underline link: Cũng ít áp dụng.
• Opaque link: dạng này bạn cũng sẽ ít gặp trong sản phẩm, nếu sản phẩm buộc phải dùng link trên trên các nền tối mà nó có màu không thuộc bộ màu của sản phẩm (mục 1) thì bạn sẽ phải chọn ra một hoặc vài màu khác. Trường hợp này áp dụng cho các dạng event, promotion, marketing. Kết hợp với bộ màu brand thì sẽ tạo ra nhiều dạng content khác nhau cho nhiều nhóm đối tượng.
• Opaque link cũng sẽ có thêm dạng underline như link thường.
• Snow background link: có lẽ bạn thấy cái tên hơi…lạ, nó được áp dụng trên navigation menu, popover hoặc các menu thông thường.
• Colorful link: dạng link màu sắc này cũng phù hợp với các trang như đồ chơi trẻ em, những trang cần nhiều sắc màu. Thường khi dùng dạng link này thì chúng ta sẽ áp dụng cho Category.

List

Cái này thì quá bình thường: Chỉ có 2 dạng Ordered và Unordered. Phần này thì có hoặc không có cũng được nhưng cũng nên định nghĩa rõ ra.

Mẹo: Có thể kết hợp icon với từng list item.

Modal

Quan trọng nhất vẫn là kích thước. Ít nhất phải 2 kích thước. Không nên quá nhiều và phải từ 2. Thông thường chúng ta chọn 2 là một con số an toàn.

Bởi vì bạn sẽ phải có các dạng modal làm event, promotion, cho các thành phần form lên modal. Modal bé quá thì form mất giá trị Usability, đúng không?

Ngoài các thành phần cơ bản như Tiêu đề và các thành phần bên dưới body, có thể modal có thêm sub-text để mô tả thêm.

Popover

Cái mà chúng ta hay nói là context menu. Thực ra là không chuẩn hoàn toàn.

Khi chúng ta cần sử dụng một dạng trình bày nào đó mang tính ngữ cảnh, mà không làm cản trở end task của user trên 1 trục feature nhỏ, lớn (rộng hơn là cấu trúc thông tin của một app) thì lúc đó chúng ta sẽ áp dụng Popover.

Một số dạng popover phổ biến:

• Context menu.
• Dropdown menu (có thể có link hoặc không).
• Hovercard: có thể hơi lạ với các bạn.
• Tooltips: cái này quá quen thuộc.

Một số style chúng ta có thể thuộc nằm lòng:

• Padding có thể khác nhau TÙY VÀO CONTENT.
• Width và Height có thể khác nhau TÙY VÀO CONTENT.
• Chúng ta cần ít nhất 3 kích cỡ.
• Về vị trí, nó có thể nằm top, right, left, bottom tùy vào thành phần nó đang dựa vào.
• Trạng thái của popover: trạng thái default, error và dark nếu có.
• Nếu dùng popover có link kèm theo: áp dụng cho header menu, một số filter trong app.
• Nếu dùng popover với select menu: thông thường người ta dùng checkbox kèm theo.
• Thỉnh thoảng nên để ý khi hover thì có nên hiện popover không?

Tỷ lệ của hình chữ nhật & vuông

Rất ít người chú ý đến phần này. Bạn muốn thỏa thích làm bao nhiêu kích cỡ hình chữ nhật & vuông cũng được, nhưng làm ơn theo 4 kiểu sau:

• 100% vuông.
• 75% chữ nhật nằm ngang.
• 60% chữ nhật nằm ngang, dẹp hơn 75% trên kia.
• 16:9.

Vị trí center của các thành phần/nội dung

Center thì cũng chỉ có 2 dạng: Dọc (Vertically) và Ngang (Horizontally).

Quy định việc ẩn (hide) các thành phần/nội dung

Có 3 kiểu:

• Khi ẩn đi thì có có chế tự collapse khu vực trắng hay không?
• Khi ẩn đi nếu vẫn giữ khu vực trắng, có nội dung hiện ra hay không?
• Khi ẩn đi nếu hover vào có hiện ra không?

— — — —

Tạm kết

• Trên đây chỉ là một framework, việc của bạn vẫn là làm sao cho người ta hiểu cái Guidelines của bạn khi họ đọc vào.
• Nếu bạn thấy lười, bạn có thể chỉ làm Style Guidelines 😪
• Thuyết phục được người khác tại sao nên có Guidelines là điều thừa thãi, bạn nên làm trước đó, chuẩn bị trước đó để cho các việc khác trở nên dễ dàng hơn cho chính bạn. Nó giống như là một phần việc của bạn vậy, cứ làm nó cho xong, và tiếp theo là phần khác, cứ thế.
• Khi bạn nói với người khác “Nhưng mà cái này không đồng bộ”, nếu bạn có Guidelines một cách khoa học, người ta sẽ hiểu bạn nói gì.