Skip to main content

Design System là gì?

1. Design System là gì?

Design System là một "bộ luật" dành cho thiết kế. Có nghĩa là các thiết kế trong một Design System phải tuân theo các nguyên tắc nhất định, và thể hiện tính triết lý trong đó. Mỗi hãng đều đặt ra một Design System của riêng mình, ví dụ như Google có Material Design, Microsoft có Fluent Design,...Nó giống như mỗi quốc gia đều có một bộ luật của riêng họ, các bộ luật có thể có nhiều điểm na ná giống nhau, nhưng vẫn có những điểm riêng biệt để phù hợp với hoàn cảnh của họ. 

Design System bao gồm những gì?
Nhìn chung, Design System là tập hợp các quy tắc, triết lý và được thể hiện trực quan dưới dạng các: layout, color, typography, iconography, component, content, interaction,...

2. Có những Design System phổ biến nào?

1. Material Design System - của Google.

Triết lý của họ là gì? 

  • Tạo ra một sự hoà hợp giữa thiết kế trực quan và khả năng của công nghệ.
  • Tạo ra một thiết kế thích nghi tốt với nhiều nền tảng, thiết bị, đầu vào.
  • Tạo ra một thiết kế có sự linh hoạt cao, có khả năng phát triển, cải tiến trong tương lai.

2. Human Interface Guidelines - của Apple.

https://developer.apple.com/design/human-interface-guidelines/
Hệ thống thiết kế này dựa trên các triết lý Steve Job đề ra:
  • Sự tỉ mỉ trên tất cả: Thiết kế quan tâm đến từng chi tiết nhỏ, độ chính xác cao.
  • Sự thấu hiểu: Thiết kế phải hiểu rõ nhu cầu của người dùng, kết nối với cảm xúc của họ.
  • Sự tập trung: Thiết kế tập trung vào các yếu tố quan trọng, loại bỏ các yếu tố thừa.
  • Sự gắn kết: Thiết kế tăng khả năng gắn kết giữa người dùng và doanh nghiệp.
  • Sự thân thiện: Thiết kế đáp ứng tốt với đông đảo người dùng ngay cả người bắt đầu và người dùng chuyên nghiệp.
  • Dựa trên sự ẩn dụ (metaphors): Các thiết kế ẩn dụ dựa trên thế giới thực sẽ đem lại trải nghiệm tốt hơn cho người dùng.

3. Fluent Design System - của Microsoft.

Thiết kế dựa trên 3 triết lý cơ bản:

  • Sáng tạo bắt đầu từ việc làm khác mọi người.
  • Thiết kế giải quyết được một và nhiều vấn đề.
  • Học hỏi từ sự đa dạng.

4. Polaris design system - của Shopify. 

Thiết kế dựa trên các quan điểm:

  • Sự quan tâm: Trên tất cả, thiết kế quan tâm đến người dùng. 
  • Sự kiểm soát: Thiết kế tạo cho người dùng cảm giác mọi thứ đều trong tầm kiểm soát.
  • Sự tỉ mỉ: Thiết kế cẩn thận trong mọi chi tiết.
  • Sự hiệu quả: Giúp người dùng hoàn thành công việc một cách nhẹ nhàng, ít tốn sức.
  • Sự tin tưởng: Xây dựng lòng tin từ người dùng.
  • Sự thân quen: Tạo cho người dùng cảm giác thân quen.

5. Atlassian Design System.

6. Base Web - của Uber

7. IBM Carbon Design System.


Nguồn tham khảo: https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6

Labels:

Comments

Post a Comment

Bài viết nổi bật

UI là gì?

1. UI là gì? UI (User interface) là cách mà con người giao tiếp với máy tính. UI bao gồm các thiết bị hỗ trợ input (chuột, bàn phím, joystick,...), thiết bị hỗ trợ output (màn hình, loa, máy in,...) và môi trường xảy ra input, output (phần mềm,...). 2. Có những dạng UI nào? Hiện tại, có 3 cách chính để con người có thể giao tiếp với máy tính: CLI (Command-Line Interface): Giao tiếp qua dòng lệnh máy tính. GUI (Graphical User Interface): Giao tiếp qua môi trường đồ hoạ. NUI (Natural User Interface): Giao tiếp tự nhiên. Ví dụ, với nhu cần cần công cụ để tính toán của con người, ta có thể thiết kế 3 loại giao diện khác nhau như sau: CLI (Command-Line Interface) CLI (Command-Line Interface): Đây là loại giao diện thuở sơ khai (ví dụ: hệ điều hành MS-DOS), con người phải học ngôn ngữ của máy tính để giao tiếp với chúng. Ưu điểm: Tốn ít tài nguyên (phù hợp với các thiết bị cấu...
Post a Comment
Read more

Mô hình AIDA trong thiết kế website

Mô hình AIDA (Attention-Interest-Desire-Action) là một khái niệm phổ biến trong tiếp thị và quảng cáo (marketing/advertising). Nó được ứng dụng linh hoạt trong nhiều lĩnh vực khác nhau, như một cách để thuyết phục người khác hành động. Hãy xem trong thiết kế nội dung website nó được áp dụng như thế nào nhé! Mô hình AIDA mô tả trải nghiệm của người dùng dẫn đến quyết định hành động (mua một sản phẩm, đăng ký dịch vụ, tham gia chương trình,...). Attention/Sự chú ý: Người dùng nhận thức về thương hiệu, sản phẩm. Có cảm giác tò mò, muốn khám phá thêm Interest/Sự thích thú: Người bán show ra các sản phẩm, tính năng...Người dùng cảm thấy thích thú vì sản phẩm đó đáp ứng được nhu cầu nào đó của họ. Desire/Sự thèm khát: Người dùng thèm khát sản phẩm vì nó không chỉ đáp ứng nhu cầu mà nó còn rất hiệu quả và tốt đẹp, trong giai đoạn này người dùng bị thuyết phục trước những lời dụ dỗ ngon ngọt của người bán. Action/Hành động: Người dùng quyết định mua sản phẩm. Mô hình A...
Post a Comment
Read more

Thông báo và phản hồi - Notification & feedback - Thiết kế UX

Thông báo và phản hồi là nguyên tắc cơ bản nhất trong thiết kế UX. Nó là cách để hệ thống tương tác và trả lời các câu hỏi của người dùng (Điều gì đang xảy ra?, đã xảy ra?, sẽ xảy ra?, tại sao lại như vậy?...).
Post a Comment
Read more