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.
Đang xem: Nghĩa của từ system là gì, các bộ phận cấu thành lợi Ích ra sao
Ở 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.v.v.v.v. Mình kể hết ra thì sẽ phải mất 2 tiếng các bạn scroll để xem : )
Định nghĩa trên không chỉ phát triển mạnh mẽ tại các công ty công nghệ mà còn lan rộng ra cả các mô hình khác. Ví dụ gần đây nhất là chính phủ Hoa Kỳ cũng đã giới thiệu bộ quy chuẩn thiết kế website chính phủ dành riêng cho quốc gia liên bang số 1 thế giới này.
Design System nên được xây dựng ra sao?
Được xây dựng lên như một thư viện quy tắc với mục đích giúp đội ngũ phát triển (designer, developer, producter) nắm rõ và hiểu được cốt lõi một sản phẩm. Do đó một hệ thống Design System luôn phải tuân thủ nghiêm khắc những quy định rằng buộc theo mình là cần thiết dưới đây:
Design System giống một hợp chất hoá học được tạo lên từ một công thức quy chuẩn. (Imgae by Atlassian)
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ý?”
P/s: Hãy làm 1 cách detail & careful (chi tiết và cẩn thận) nhất từ khâu chuẩn bị, nếu bạn hay team của bạn không muốn đến 1 ngày làm lại từ đầu bởi sai ở 1 vị trí nhỏ nào đó.
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ủa bạn 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 ( dù chỉ mang bội số là 01 cũng được tính là mặc định). Ví dụ như case study (trường hợp thực tế): 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?
Successs sẽ thế nào? Error 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.
Xem thêm: Công Dụng Của Star Anise Là Gì, Công Dụng Của Star Anise (Hoa Hồi) Là Gì
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 có phải là Style Guides không?
Câu trả lời là: KHÔNG
Style Guides được xây dựng với mục đích 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. Tạm gọi tầng giữa của giai đoạn xây dựng phát triển sản phẩm.
Tầng đầu thuộc về các mảng như lên idea, research, tracking, wireframe, talking , concept v.v.v. Mình sẽ viết 1 bài chi tiết hơn về tầng đầu sau : )
Design System được coi là sơ đồ mạch nối xây dựng của các tầng trong sản phẩm. Thể hiện mọi quy chuẩn của các thành phần sử dụng. Như tương thích thế nào, hoặc thay đổi ra sao khi gặp một trường hợp nào đó trong quá trình phát triển hoặc trải nghiệm. Đảm bảo tính rằng buộc và kết nối của sản phẩm với nhiều môi trường thực tế khác nhau.
Design System có phải là Pattern Libraries không?
Câu trả lời: KHÔNG
Pattern Libraries là một dạng 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, modals, page layouts. Khác với nó, Design System định nghĩa quy chuẩn và cách dùng cụ thể của các thành phần trên trong mọi trường hợp xảy ra.
Design System là Front-end Frameworks rồi?
Front-end frameworks có phải là một hệ thống được phát triển từ Design System không? OK, sure.