01 / 03
Thư viện thành phần
Nút, biểu mẫu, điều hướng và bố cục dùng lại được, có mô tả trạng thái và biến thể.
Design system
Design system giúp sản phẩm nhất quán khi lớn dần. Tôi xây dựng thư viện thành phần, design token và hướng dẫn để designer và lập trình viên dùng chung, giúp màn hình mới thiết kế nhanh hơn và dễ lập trình hơn.
Cần xây dựng design system cho sản phẩm? Hãy cho tôi biết về đội ngũ và các màn hình của bạn.
Bắt đầu dự án →[ Tôi thiết kế gì ]
-
-
02 / 03
Design token
Màu sắc, chữ, khoảng cách và các quyết định khác được định nghĩa một lần, dùng cho cả web và di động.
-
03 / 03
Hướng dẫn sử dụng
Quy tắc và ví dụ rõ ràng để đội ngũ của bạn áp dụng hệ thống một cách nhất quán.
[ Quy trình làm việc ]
Quy trình xây dựng design system
Từ rà soát những gì đang có đến quản trị những gì bạn phát hành: tám giai đoạn để xây một hệ thống mà designer và lập trình viên thực sự dùng.
-
Rà soát & kiểm kê
Tôi chụp lại mọi màn hình và thành phần trong sản phẩm, rồi lập danh mục những phần trùng lặp, gần giống nhau và kiểu dáng dùng một lần làm đội ngũ chậm lại.
Bàn giao
- Danh mục giao diện
- Báo cáo điểm chưa nhất quán
-
Mục tiêu & phạm vi
Cùng đội thiết kế và lập trình, chúng ta chốt hệ thống phải làm được gì: nền tảng, quy mô đội, ai sở hữu và phiên bản đầu tiên gồm những gì.
Bàn giao
- Phạm vi & lộ trình
- Thước đo thành công
-
Nền tảng
Màu sắc, chữ, khoảng cách, bo góc, đổ bóng và chuyển động được định nghĩa một lần dưới dạng design token, đặt tên để designer và lập trình viên hiểu cùng một điều.
Bàn giao
- Bộ token
- Tài liệu nền tảng
-
Thành phần cốt lõi
Nút, ô nhập, lựa chọn, điều hướng và phản hồi được xây với đủ trạng thái, kích cỡ và biến thể, kiểm tra độ tương phản và trạng thái focus ngay từ đầu.
Bàn giao
- Thư viện thành phần
- Mô tả trạng thái & biến thể
-
Mẫu & template
Các thành phần được ghép thành biểu mẫu, bảng, dashboard và màn hình trống, rồi thử trên màn hình thực tế để chứng minh hệ thống đủ vững.
Bàn giao
- Thư viện mẫu
- Template trang
-
Tài liệu & hướng dẫn
Mỗi phần có quy tắc dùng rõ ràng: khi nào dùng, khi nào không, hoạt động ra sao và giữ khả năng tiếp cận thế nào.
Bàn giao
- Hướng dẫn sử dụng
- Ghi chú về khả năng tiếp cận
-
Bàn giao cho lập trình
Token và thành phần được đồng bộ với code, đặc tả được duyệt cùng lập trình viên, và một tính năng thật được xây thử bằng hệ thống.
Bàn giao
- Bàn giao token
- Đặc tả & buổi duyệt thử nghiệm
-
Quản trị & triển khai
Quy tắc đóng góp, đánh phiên bản và changelog giữ hệ thống khỏe mạnh, kèm kế hoạch triển khai để đội ngũ tiếp tục dùng.
Bàn giao
- Hướng dẫn đóng góp
- Kế hoạch phiên bản & triển khai
