Design System: Overview
Design System: Overview

⁠

Design system là gì?

Có thể hiểu nhanh gọn rằng, Design System là một hệ thống các tiêu chuẩn được đội ngũ thiết kế phát triển và xây dựng cho product (sản phẩm) hoặc software (phần mềm) dành riêng cho một businesses (doanh nghiệp) có sự phát triển theo thiên hướng lâu dài.

Ở thời điểm hiện tại, việc xây dựng và triển khai Design System đã được rất nhiều các công ty công nghệ lớn trên toàn cầu áp dụng. Có thể kể đến như Google với Material Desgin, hay Hurman Interface Guidelines của Apple hoặc Uber Design Presents của Uber , Dropbox Design của Dropbox

⁠

Nền tảng của một Design System

1. Rule (Quy tắc)

LUÔN phải có 1 quy tắc đồng nhất và hợp lý dành cho mọi element (thành phần) trong thiết kế của bạn. Mọi thứ đều phải được đặt câu hỏi là “Dùng khi nào?”- Và trả lời “Dùng như nào cho hợp lý?”

2. Obey (Tuân theo)

Quy tắc đặt ra luôn phải được Tuân theo để xây dưng. Nhằm đảm bảo hệ thống luôn đáp ứng được các case nằm trong 3 phạm vi cơ bản sau mà sản phẩm thiết kế của bạn sẽ gặp phải bao gồm:

Primary (Sơ cấp): Đây là những yêu cầu luôn phải có trên sản phẩm khi đưa vào thực tiễn. Ví dụ như case study (trường hợp thực tế): Trên màn hình login luôn phải có text box để user điền ID.

Text hiển thị trên box là gì, màu sắc trong trạng thái khi user chưa typing sẽ ra sao?

Secondary (Thứ cấp): Đây là những vấn đề nằm bên cạnh và liên quan trực tiếp đến Primary mà design system cần lưu ý. Ví dụ như case study (trường hợp thực tế): Khi có text box trên màn hình login, nếu ID của user vượt quá số lượng text hiển thị trên text box đó thì điều gì sẽ xảy ra?

Text sẽ hiển thị thế nào khi được user typing, màu sắc ra sao, dài quá sẽ thế nào?

Default (Mặc định): Đây những trường hợp nhất định và chắc chắn sẽ xảy ra. Ví dụ Khi điền ID user trên text box sẽ có 2 trường hợp xảy ra là success (thành công) dẫn đến gì? Hoặc error (báo lỗi) sẽ thế nào? Hoặc nhập sai quá nhiều lần Disabled (Vô hiệu) sẽ thế nào nếu có?

3. Principle (Nguyên tắc)

Quy Tắc đặt ra phải Tuân theo Nguyên tắc của người dùng mà sản phẩm hướng đến. Đó là cách mà định nghĩa Design System được sinh ra.

Một hệ thống Design System thực tế chứa nhiều những thành phần và nhiều tính chất phức tạp hơn ví dụ mà mình đưa ra trên đây. Nhưng về bản chất xây dựng sẽ xuất phát từ 3 điều trên.

⁠

Design System bao gồm những gì

1. Tài nguyên thiết kế

Style Guides: Liệt kê chi tiết cấu tạo các thành phần được dùng trong UI (User Interface-Giao diện người dùng) mà team design xây dựng. Ví dụ như phong cách thiết, bộ font, màu sắc, icon, logo.v.v.v. quy chung là những thành phần lớn trong UI Kit dùng trong nội bộ team design để giữ được tính nhất thống teamwork.

Pattern Libraries: Kho lưu trữ các element (thành phần) có giá trị tương tác trong file thiết kế được tái sử dụng liên tục. Ví dụ như button, placeholder, modals, page layouts, page spacing,…