Hệ thống Thiết kế dành cho Nhà phát triển
Sự nhất quán không phải là một thứ xa xỉ. Người dùng mong đợi các sản phẩm mang lại cảm giác mượt mà và đáng tin cậy trên mọi màn hình.
Một hệ thống thiết kế không chỉ dừng lại ở màu sắc và các nút bấm. Đó là một ngôn ngữ chung cho các đội ngũ thiết kế, phát triển và sản phẩm. Đó là một tập hợp các thành phần, khuôn mẫu và quy tắc có thể tái sử dụng.
Bên trong một hệ thống thiết kế có gì?
- Các thành phần UI như nút bấm và ô nhập liệu
- Design tokens cho màu sắc và khoảng cách
- Các quy tắc về khả năng tiếp cận (accessibility)
- Các tiêu chuẩn lập trình
- Tài liệu hướng dẫn
Các ví dụ phổ biến bao gồm Google Material Design, Microsoft Fluent và IBM Carbon.
Một hệ thống thiết kế giải quyết các vấn đề kỹ thuật thực tế.
Nó giúp ngừng các công việc lặp đi lặp lại Nếu không có một hệ thống, bạn sẽ phải xây dựng cùng một loại nút bấm và biểu mẫu lặp đi lặp lại. Một hệ thống thiết kế cung cấp cho bạn các thành phần có thể tái sử dụng. Bạn sẽ không còn phải viết CSS tùy chỉnh cho từng phần tử nữa. Bạn sử dụng một thành phần duy nhất để xử lý việc tạo kiểu (styling), các trạng thái (states) và tính đáp ứng (responsiveness). Điều này giúp tiết kiệm thời gian.
Nó đảm bảo sự nhất quán Nếu một trang có các nút bo tròn và một trang khác lại có các nút vuông, sản phẩm của bạn sẽ trông như chưa hoàn thiện. Một hệ thống thiết kế giữ cho các nút bấm, khoảng cách và kiểu chữ (typography) đồng nhất ở mọi nơi. Người dùng không cần phải học lại cách sử dụng giao diện của bạn.
Nó khắc phục các lỗ hổng giao tiếp Các nhà thiết kế và nhà phát triển thường hiểu lầm ý nhau. Một nhà thiết kế có thể yêu cầu một nút bấm "hiện đại". Bạn có thể hiểu điều đó theo một cách khác. Một hệ thống thiết kế thay thế những từ ngữ mơ hồ bằng các tiêu chuẩn. Bạn sử dụng các token và thành phần cụ thể. Mọi người đều nói cùng một ngôn ngữ.
Nó thúc đẩy kiến trúc sạch Thay vì tạo các tệp riêng biệt cho mỗi nút bấm, bạn tạo một thành phần Button duy nhất với nhiều biến thể. Điều này tuân theo nguyên tắc DRY. Nó giúp mã nguồn của bạn dễ bảo trì hơn.
Nó giúp việc thay đổi trên quy mô lớn trở nên dễ dàng Nếu một thương hiệu thay đổi màu sắc chủ đạo, bạn không nên phải tìm kiếm qua hàng trăm tệp tin. Với các design tokens, bạn chỉ cần thay đổi giá trị ở một nơi duy nhất. Nó sẽ được cập nhật tức thì ở mọi nơi.
Nó tích hợp khả năng tiếp cận vào cốt lõi Khả năng tiếp cận rất khó để thực hiện thủ công mọi lúc. Một hệ thống thiết kế bao gồm cả điều hướng bằng bàn phím và các tiêu chuẩn ARIA. Bạn sẽ có được các thành phần hỗ trợ khả năng tiếp cận theo mặc định.
Một hệ thống thiết kế không chỉ đơn thuần là một thư viện thành phần. Một thư viện cho bạn biết cách xây dựng một nút bấm. Một hệ thống thiết kế cho bạn biết tại sao nút bấm đó tồn tại và nó nên hoạt động như thế nào.
Xây dựng các hệ thống thông minh hơn để tạo ra các sản phẩm tốt hơn.
Nguồn: https://dev.to/pixel_mosaic/design-systems-for-developers-why-they-matter-18f0