<>Design system là gì?
Design system là một tập hợp các tiêu chuẩn, giúp duy trì tính nhất quán của các thiết kế trên nhiều sản phẩm khác nhau, giúp thiết kế nhanh hơn, hiệu quả hơn.
/Nguồn gốc của design system
– Vào đầu thế kỷ 20, các ngành công nghiệp như sản xuất và kiến trúc đã nhận ra nhu cầu về tiêu chuẩn hóa và tính nhất quán. Hãy nghĩ về cách một nhà sản xuất ô tô sử dụng cùng loại ốc vít, bu lông và linh kiện trên các mẫu xe khác nhau để đảm bảo hiệu quả và chất lượng. Ý tưởng về các bộ phận có thể tái sử dụng và quy trình tiêu chuẩn hóa là một khái niệm cốt lõi trong các design system.
– Khi các sản phẩm kỹ thuật số như trang web và ứng dụng trở nên phức tạp hơn, nhu cầu về một cách tiếp cận tương tự đối với thiết kế trở nên rõ ràng. Các nhà phát triển web ban đầu bắt đầu tạo thư viện giao diện người dùng gồm các thành phần có thể tái sử dụng và ghi lại phong cách và hướng dẫn của họ. Theo thời gian, các hoạt động này đã phát triển thành những gì chúng ta gọi là design system.
/Tại sao nên sử dụng design system?
– Tính nhất quán : Một design system đảm bảo tính đồng nhất trên mọi bộ phận của sản phẩm. Nếu không có hệ thống này, các nhóm khác nhau có thể sử dụng các thành phần thiết kế xung đột, dẫn đến trải nghiệm người dùng rời rạc và thiếu chuyên nghiệp. Bằng cách chuẩn hóa typography, color, button và tương tác. Một design system tạo ra trải nghiệm liền mạch, trau chuốt và gắn kết, xây dựng lòng tin vào thương hiệu.
– Khả năng mở rộng : Khi sản phẩm của bạn phát triển, việc duy trì tính nhất quán trên nhiều trang, nền tảng và thiết bị khác nhau trở nên ngày càng khó khăn. Một design system có cấu trúc tốt cung cấp nền tảng vững chắc, đảm bảo các tính năng và bản cập nhật mới tích hợp trơn tru mà không làm gián đoạn tính thẩm mỹ và chức năng tổng thể.
– Hiệu quả : Nếu không có hệ thống, các nhóm sẽ lãng phí vô số thời gian để phát minh lại bánh xe, sao chép công sức và thiết kế lại cùng một thành phần nhiều lần. Một design system sẽ loại bỏ tình trạng kém hiệu quả này bằng cách cung cấp các thành phần có thể tái sử dụng, được xây dựng sẵn giúp cắt giảm đáng kể thời gian phát triển và giải phóng các nhóm để tập trung vào đổi mới và chiến lược.
– Hợp tác : design system là công cụ căn chỉnh tối ưu. Nó hoạt động như một nguồn thông tin chung cho các nhà thiết kế, nhà phát triển và các bên liên quan, đảm bảo rằng mọi người đều nói cùng một ngôn ngữ thiết kế. Sự rõ ràng này loại bỏ sự hiểu lầm, thúc đẩy tinh thần làm việc nhóm liền mạch và tạo ra quy trình làm việc hiệu quả.
/Tại sao không sử dụng design system?
– Các công ty khởi nghiệp giai đoạn đầu: Khi một sản phẩm vẫn đang trong giai đoạn thử nghiệm, việc đầu tư thời gian và nguồn lực vào một design system hoàn chỉnh có thể không thực tế. Việc lặp lại và thay đổi nhanh chóng có thể khiến một hệ thống có cấu trúc trở nên không cần thiết ở giai đoạn này.
– Các dự án một lần : Nếu bạn đang thực hiện một dự án nhỏ hoặc ngắn hạn mà không yêu cầu bảo trì dài hạn thì công sức bỏ ra để tạo ra một design system có thể lớn hơn lợi ích mang lại.
– Nguồn lực hạn chế : Xây dựng và duy trì design system đòi hỏi thời gian và công sức chuyên biệt. Các nhóm nhỏ hơn với thời hạn gấp và nhân lực hạn chế có thể thấy khó khăn trong việc phân bổ nguồn lực để phát triển hệ thống.
– Thiết kế sáng tạo và độc đáo : Một số dự án đòi hỏi sự tùy chỉnh và tự do nghệ thuật cực độ mà có thể không phù hợp với design system có cấu trúc. Trong những trường hợp này, các hướng dẫn nghiêm ngặt có thể hạn chế khả năng thể hiện sáng tạo thay vì nâng cao hiệu quả.
/Các bước xây dựng design system
1. Tổng hợp lại các thành phần trong thiết kế:
Phân tích sản phẩm hiện tại của bạn để phát hiện ra sự không nhất quán và kém hiệu quả. Thực hiện kiểm kê giao diện bằng cách thu thập:
– UI components (nút, đầu vào, thẻ, v.v.)
– Typography styles
– Color schemes
– Hiệu ứng (bóng đổ, độ cao, làm mờ, v.v.)
– Spacing và grid systems
– Interaction patterns
2. Xác định nền tảng cốt lõi
Những yếu tố cốt lõi này bao gồm:
– Typography : Chọn một kiểu chữ và xác định kiểu cho tiêu đề, nội dung chính và chú thích để duy trì bản sắc trực quan riêng biệt và dễ đọc.
– Color Palette : Thiết lập bảng màu chính, phụ và nhấn mạnh giúp củng cố bản sắc thương hiệu của bạn và đảm bảo sự hài hòa về mặt thị giác.
– Spacing & Grid : Đặt các quy tắc chính xác cho padding, margins và grid để tạo ra thiết kế có cấu trúc và thẩm mỹ.
– Icons & Imagery : Chuẩn hóa cách sử dụng icon và image để tăng cường nhận diện thương hiệu và đảm bảo trải nghiệm gắn kết về mặt hình ảnh.
– Khả năng truy cập : Đảm bảo độ tương phản màu sắc và lựa chọn kiểu chữ đáp ứng các tiêu chuẩn về khả năng truy cập (tuân thủ WCAG) để sản phẩm của bạn có tính toàn diện và dễ sử dụng cho tất cả mọi người.
3. Design token
Design token là gì?
– Design token là kết hợp giữa tên và giá trị đại diện cho các thiết kế nhỏ, có thể lặp lại. Token có thể là color, font style, white space hoặc thậm chí là motion được thiết kế cho một nhu cầu cụ thể.
Tại sao nên sử dụng mã design token?
– Các tính năng như dark mode, responsive design có thể thực hiện được bằng token. Design token giúp đơn giản hóa thiết kế và phát triển bằng cách hợp lý trong xử lý và chuyển giao giữa các teamwork.
Quy ước đặt tên — Foundation + Property + Role + State
4. Tạo các UI Component
Ví dụ các thuộc tính của 1 button:
– Variants: Solid, Soft, Outline, Text, Link
– Color: Primary, Secondary, Tertiary
– Size: Large, Default, Small
– Shape: Rounded, Fill
– State: Default, Active, Hover, Disabled
Danh sách các Component:
– Layout: Grids, Spacing, Margins, Sections, Dividers
– Basics: Avatars, Alerts, Badges, Buttons, Button Groups, FAB, Cards, Dividers, List, List Group, Loaders
– Forms: Input fields, Dropdowns, Checkboxes, Radio buttons, Text area, Switch
– Navigation: Headers, Footers, Bread crumbs, Sidebars, Menus, Tabs, Paginations
– Interactive Components: Modals, Popups, Tooltips, Carousels, Accordions
5. Tạo Pattern Library
– Pattern Library là tập hợp các thành phần UI. Thư viện này giúp duy trì tính nhất quán, cải thiện hiệu quả và tăng tốc độ phát triển bằng cách cung cấp các pattern được xác định trước mà các nhà thiết kế và nhà phát triển có thể sử dụng trên toàn bộ sản phẩm.
Pattern bao gồm:
– Navigation patterns
– Form patterns
– Feedback patterns
– Layout patterns
– Authentication patterns
