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

15 câu hỏi cần trả lời khi thiết kế chức năng

  Ta có thể chia thành 4 nhóm câu hỏi gồm: Con người (People) Hoạt động (Activities) Ngữ cảnh (Context) Công nghệ (Techonology) 1. Người dùng là ai? Là câu hỏi đầu tiêu khi thiết kế sản phẩm. Người dùng có những đặc điểm thể chất, tâm lý, sở thích, tính cách... khác nhau dẫn đến cách hành vi sử dụng sản phẩm cũng khác nhau. 2. Người dùng chuyên nghiệp hay người dùng phổ thông? Người dùng chuyên nghiệp cần học tập để sử dụng sản phẩm còn người dùng phổ thông thì không. 3. Hành động có xảy ra thường xuyên? Nếu một hành động xảy ra thường xuyên hãy sắp xếp nó ở chỗ người dùng có thể tiếp cận dễ dàng. Ví dụ, Chrome đề xuất các trang web truy cập nhiều nhất ngay tại trang chủ. 4. Hành động có bị ngắt quãng không? Nếu bạn đang xem dở một video trên youtube, khi quay lại youtube sẽ load tiếp vị trí cuối cùng mà bạn đang xem thay vì load lại từ đầu. Một tính năng nhỏ nhưng giúp trải nghiệm người dùng liền mạch. 5. Hành động xảy ra giữa một người dùng với sản phẩm hay nhiều người d...
Post a Comment
Read more