Biến thiết kế Design system

Đặt tên và quản lý các giá trị dùng chung.

7 mục kiểm tra · 3 nhóm nội dung

Nội dung checklist

Tiến độ kiểm tra

Cấu trúc và ý nghĩa

Đối chiếu thông tin và cách trình bày trong ngữ cảnh sử dụng.

Tách giá trị và mục đíchPhân biệt giá trị gốc với biến theo vai trò và biến dành riêng cho thành phần.Đổi giao diện sáng sang tối rồi rà các trạng thái thành phần. Dùng tên theo mục đích như chữ phụ hoặc đường viền; tránh để mỗi màn hình tự chọn một màu gần giống.Ví dụ Ngày cập nhật, gợi ý ô nhập và chú thích đều dùng token “text-muted”; đổi token sẽ cập nhật cả ba theo cùng một quy tắc.Đặt tên có quy tắcDùng tên phản ánh công dụng, trạng thái và phạm vi để người khác đoán được cách dùng.Tên vai trò như màu nền cảnh báo bền hơn tên theo giá trị như vàng-200; giữ quy tắc cùng thứ tự phần tên cho cả hệ thống.Ghi cách dùng từng biếnCho ví dụ phù hợp và nêu trường hợp không nên dùng biến đó.Mỗi biến cần ví dụ dùng đúng và cảnh báo dùng sai; ghi rõ biến riêng của thành phần không phải lựa chọn toàn sản phẩm.

Tương tác và khả năng sử dụng

Thử thao tác, thay đổi trạng thái và đường tiếp tục công việc.

Kiểm tra qua các giao diệnDùng vai trò nhất quán khi đổi sáng hoặc tối và kiểm tra tương phản của từng trạng thái.Một tên vai trò nên giữ ý nghĩa qua sáng/tối; không yêu cầu thành phần tự biết mã màu nào thuộc mỗi giao diện.Giữ thiết kế và mã đồng bộĐối chiếu tên cùng giá trị giữa tài liệu thiết kế và các thành phần đang dùng.Chọn một nguồn dữ liệu chính và kiểm tra sai lệch tự động; cùng tên nhưng khác giá trị vẫn là lỗi đồng bộ.Theo dõi thay đổi dùng chungGhi lý do, phạm vi ảnh hưởng và cách chuyển đổi khi đổi hoặc bỏ một biến.Ghi biến thay thế và khoảng chuyển đổi khi bỏ biến cũ; rà các thành phần phụ thuộc trước khi phát hành giá trị mới.

Hoàn thiện trải nghiệm

Kiểm tra những chi tiết dễ bỏ sót khi đưa thiết kế vào sử dụng.

Có người phụ trách và quy trình thêm biếnNêu ai xét duyệt biến mới, tiêu chí tái dùng biến hiện có và cách giải quyết trùng ý nghĩa.Một yêu cầu thêm biến nên gồm trường hợp dùng và lý do không dùng vai trò đã có; tránh để mỗi nhóm tạo một bảng màu riêng.

Tiến độ được lưu tự động trên trình duyệt này.

HƯỚNG DẪN

Cách kiểm tra

Kiểm tra giá trị có được gọi bằng vai trò

Đổi giao diện sáng sang tối rồi rà các trạng thái thành phần. Dùng tên theo mục đích như chữ phụ hoặc đường viền; tránh để mỗi màn hình tự chọn một màu gần giống.

VÍ DỤ

Ví dụ áp dụng

Màu chữ phụ dùng chung

Ngày cập nhật, gợi ý ô nhập và chú thích đều dùng token “text-muted”; đổi token sẽ cập nhật cả ba theo cùng một quy tắc.