Buổi 7 — Design system và tính nhất quán
Vì sao PM nên quan tâm tới design system
Nghe như việc của designer, nhưng nó ảnh hưởng trực tiếp tới tốc độ giao hàng — thứ PM chịu trách nhiệm.
Có design system: một tính năng mới dùng lại thành phần có sẵn, ship trong vài ngày. Không có: mỗi màn hình thiết kế lại từ đầu, mỗi nút được code lại, và sản phẩm dần trông như được ghép từ nhiều sản phẩm khác nhau.
Design system là gì
Không phải một thư viện màu. Nó gồm ba tầng:
Token — các giá trị nền: màu, khoảng cách, cỡ chữ, bo góc. Đổi một token thì đổi toàn bộ sản phẩm.
Component — thành phần dùng lại: nút, ô nhập, thẻ, hộp thoại. Kèm theo mọi trạng thái của chúng.
Pattern — cách kết hợp component để giải quyết một tình huống lặp lại: form nhiều bước, danh sách có bộ lọc, luồng xác nhận.
Tầng thứ ba là tầng có giá trị nhất và hay bị bỏ qua nhất.
Nhất quán không có nghĩa là giống hệt
Mục tiêu không phải mọi màn hình trông như nhau. Mục tiêu là người dùng đoán được: cùng một thao tác cho cùng một kết quả, cùng một loại thông tin ở cùng một chỗ.
Sự không nhất quán bắt người dùng học lại ở mỗi màn hình. Chi phí đó vô hình nhưng cộng dồn.
Khi nào phá vỡ hệ thống
Đôi khi cần. Nguyên tắc: phá vỡ có chủ đích và có lý do ghi lại, không phá vỡ vì tiện.
Nếu một tình huống mới xuất hiện lặp lại, đó không phải ngoại lệ — đó là pattern mới cần đưa vào hệ thống.
Nợ thiết kế
Giống nợ kỹ thuật: mỗi lần "làm nhanh cho kịp" tạo ra một biến thể phải bảo trì. Sau hai năm, sản phẩm có bảy kiểu nút và không ai biết dùng cái nào.
Dấu hiệu nợ thiết kế đang tích tụ: designer phải hỏi "chỗ này dùng component nào" và không có câu trả lời rõ ràng; hoặc cùng một chức năng trông khác nhau ở hai màn hình.
PM nên coi việc trả nợ này như trả nợ kỹ thuật — dành một phần năng lực mỗi quý, không đợi tới khi nó thành khủng hoảng.
Câu hỏi PM nên hỏi
- Tính năng này dùng được component có sẵn không? Nếu không, vì sao?
- Nếu tạo component mới, còn chỗ nào khác sẽ dùng nó?
- Việc này tạo thêm bao nhiêu biến thể phải bảo trì?
Bài tập
Chụp màn hình năm nút chính trong sản phẩm của bạn và đặt cạnh nhau. Đếm số kiểu khác nhau. Con số đó là thước đo nợ thiết kế hiện tại.
<!--les-append-->
Lập luận về tốc độ — dành cho PM
Design system thường được trình bày như vấn đề thẩm mỹ, nên nó thua mọi cuộc tranh giành ưu tiên. Lập luận đúng là tốc độ giao hàng:
| Không có design system | Có design system |
|---|---|
| Mỗi màn hình thiết kế lại từ đầu | Ghép từ thành phần có sẵn |
| Mỗi nút được code lại | Dùng lại, đã kiểm thử sẵn |
| Mỗi thành phần mới phải kiểm accessibility lại | Đã kiểm một lần, dùng khắp nơi |
| Đổi thương hiệu = sửa hàng trăm chỗ | Đổi token, cả sản phẩm đổi theo |
Khi nào nên bắt đầu
| Quy mô | Nên có gì |
|---|---|
| 1 sản phẩm, 1–2 người làm giao diện | Vài token dùng chung (màu, khoảng cách, cỡ chữ) là đủ |
| 1 sản phẩm, đội lớn hơn | Thư viện thành phần cơ bản, có mọi trạng thái |
| Nhiều sản phẩm hoặc nhiều đội | Design system thật, có người sở hữu |
Vai trò của PM
Bạn không thiết kế hệ thống, nhưng bạn quyết ba điều:
- Có dành công suất cho nó không, và bao nhiêu mỗi sprint
- Khi nào được phép phá quy tắc — và mọi lần phá đều phải ghi nợ
- Ai sở hữu nó khi có nhiều đội cùng dùng; không có chủ thì nó phân mảnh trong một quý
Dấu hiệu hệ thống đang phân rã
- Có ba kiểu nút "chính" trong cùng một sản phẩm
- Thành phần được sao chép rồi sửa thay vì mở rộng
- Không ai biết phiên bản nào là bản chuẩn
- Thư viện thiết kế và mã nguồn không khớp nhau
Làm ngay
Đếm số kiểu nút khác nhau trong ba màn hình chính của sản phẩm. Nếu trên ba, bạn có dữ liệu để mở một cuộc trò chuyện về design system — bằng con số, không bằng cảm giác. <!--/les-append-->