Tìm hiểu về Design System và Material Design by Phương Minh

Tìm hiểu về Design System Material Design viết, tổng hợp và dàn trang bởi @pminhh

Trong này có...Design System đối tượng sử dụng? Material Design

để bắt đầu, hãy nhìn rộng ra chút... trong kiến trúc trong chế tạo sản xuất trong nhận diện Trong lịch sử, để tối ưu công việc của mình, con người đã tạo nên những hệ thống thiết kế mà tới ngày nay vẫn còn hữu dụng trong nhiều ngành nghề khác nhau.

“The traditional

paradigm is to gather all the parts of a

on site and then assemble them

building

piece by piece.” Tạm dịch: Mô hình xây dựng truyền thống là thu thập các phần của một toà nhà rồi lắp ráp chúng lại. Trong cuốn “Prefabricating Architecture”, tác giả diễn giải hiện trạng của ngành Kiến trúc như sau: trong Kiến trúc

Đầu tiên, các kiến trúc sư phải khảo sát vùng đất nơi toà nhà được đặt móng. Từ những thông số đo được cùng các guidelines, luật và quy định; họ sáng tạo nên bản vẽ 2D của tòa nhà.

Một đội ngũ khác sử dụng các loại máy móc chuyên dụng chuẩn bị nền đất theo bản vẽ. Sau khi nền đất đã được cải tạo phù hợp, họ đặt móng cho tòa nhà và từ đây, các cấu trúc của tòa nhà dần được dựng nên.

Cuối cùng là hoàn thiện lắp đặt các hệ thống ống nước và nội thất. Có thể nói đây là một quá trình tuyến tính, cứng nhắc do các phần không thể thay đổi thứ tự mà phải theo một quy trình nhất định và liên tục. Điều này gây ra sự tách biệt giữa các nhóm thực hiện công việc xây dựng.

Ngành công nghiệp ô tô đã tận dụng các công cụ để kết hợp nhiều quy trình, tối ưu hóa sản xuất, cắt giảm chi phí và tạo ra những chiếc ô tô chất lượng cao hơn.

Thay vì sản xuất và lắp ráp tất cả các bộ phận của ô

tô trong cùng một nhà xưởng, các bộ phận được sản xuất tại nhà máy sản xuất thiết bị gốc (OEM) chuyên

về công việc này. Các nhà máy này có thể là một phần của công ty, có cơ sở ở gần xưởng lắp ráp để

cho việc vận chuyển.

tiện

Quá trình này cho phép phát triển các bộ phận cùng lúc với nhau, đồng thời cho phép các nhà sản xuất chuyên môn hóa và tối ưu quá trình sản xuất các bộ phận lẻ (VD gương xe hơi), từ đó giảm thời gian và chi phí cho các nhà sản xuất xe hơi. trong Công nghiệp Chế tạo

trong Công nghiệp Chế tạo

Trong chế tạo tàu thuỷ, việc xây dựng mô-đun cho phép các nhà đóng tàu đồng thời làm việc trên các phần khác nhau của con tàu mà không bị giới hạn bởi vị trí. Cơ sở hạ tầng để đóng tàu cũng đã phát triển, những chiếc cần cẩu khổng lồ sẽ vận chuyển các mô-đun tàu có kích thước bằng một tòa nhà và chỉ cần đặt chúng giống như các khối LEGO ở nơi thích hợp.

Thiết kế theo hệ thống cực kỳ hữu dụng khi ta phải thiết kế nhận diện cho một chuỗi thương hiệu nhỏ thuộc về chung một tổ chức, như logo MIT Media Lab do Pentagram tạo ra. Ý tưởng của họ là tạo ra các chữ cái hoặc biểu tượng trừu tượng bằng màu đen và trắng trong một lưới vuông 7x7 pixels. Hệ thống này được sử dụng để tạo ra các biểu trưng có từ viết tắt cho 23 nhóm nghiên cứu tại phòng thí nghiệm và làm cơ sở để xây dựng một kiểu chữ, biểu tượng và mẫu tùy chỉnh. Biểu trưng này là một ví dụ cách một hệ thống thiết kế có thể được sử dụng để mang lại vẻ ngoài nhất quán và phong cách riêng biệt cho một tổ chức. Hệ thống này vừa đơn giản vừa linh hoạt, và có thể tạo ra gần như vô hạn các thiết kế. trong Thiết kế nhận diện

Một ví dụ rõ thấy nhất về hệ thống thiết kế đó là LEGO. LEGO không chỉ là đồ chơi cho trẻ em mà cả người lớn cũng thấy thú vị với cách chúng hoạt động. Các khối Lego có thể coi là một hệ thống do chúng được thiết kế một cách đồng nhất, có thể ghép vào nhau dù khác hình dạng khối. Từ những khối gạch gốc, ta có thể tạo ra vô số các cấu trúc khác nhau.

Trong thiết kế giao diện cũng không ngoại lệ, có thể nói hệ

thống thiết kế đặc biệt phù hợp với việc xây dựng giao diện

các phần mềm. Điều này có thể do cấu trúc của chúng

được dựng nên từ hệ thống các ngôn ngữ lập trình. Nhưng

sự thích hợp này là một quá trình dài khám phá và phát

triển, do ở giai đoạn đầu cách các giao diện được thiết kế khá tuỳ hứng.

Phần lớn nội dung và mục đích tạo ra web vẫn giữ nguyên. Tuy nhiên, thiết kế và phát triển web đã trưởng thành trong lịch sử hàng thập kỷ. Xuất phát từ nguồn gốc thiết kế đồ họa, các nhà thiết kế web bắt đầu nghĩ về các trang web như một mạng lưới các thành phần, được sắp xếp thành các cấu hình và mẫu khác nhau.

để tìm hiểu, hãy đi ngược lại dòng lịch sử ...

Internet được tạo ra, các trang web bắt đầu xuất hiện - Web 1.0 Các trang web tĩnh, được phát triển bằng HTML và giao thức protocol cơ bản là HTTP. 2000, kỉ nguyên dot.com. PHP 4.0 - ngôn ngữ lập trình web đầu tiên ra mắt. Các trang web bắt đầu thay đổi từ năm 2004Trào lưu Web 2.0 2005, ra mắt sách O’Reilly Designing Interface viết bởi Jennifer Tidwell, tổng hợp thiết kế trở thành các mô hình tái sử dụng, từ biểu mẫu tới menu và cả thanh điều hướng Dirk Jesse’s Yet Another Multi Column Layout (YAML), phát triển năm 2005 là một code based frameworks kiến tạo sắp xếp các hoạ tiết layout Vào năm 2006, Yahoo! mở hệ thống thiết kế giao diện của họ (YUI) Jeff Croft ra mắt *Framework for Designers vào 2007, sắp xếp lại thiết kế website trên cơ sở mô hình các hoạ tiết abstract 2008, Natalie Downe thuyết trình một bài tham luận về CSS Systems. Sử dụng frameworks như YUI là một điểm khởi đầu, Downe tạo ra cách tiếp cận cho các trang web nhỏ, phù hợp với nhiều mô hình dự án

Atomic

2011, Twitter ra mắt

framework của họ, gọi là Bootstrap.

open-source

Brad Frost’s

design, cuốn sách ông bắt đầu viết vào năm 2013, chia các phần components thành phần nhỏ gọi là nguyên tử (atoms) Còn rất nhiều sự kiện nổi bật khác, nhưng nhìn chung ta có thể thấy Internet và cách nội dung phân bố trên nó được cải tiến hàng ngày. Trong đà phát triển này, ta cần một cách thiết kế giao diện hợp lí, hiện đại để bắt kịp với sự dịch chuyển nhanh chóng của công nghệ. Sản phẩm ảnh hưởng trực tiếp từ concepts của framework lớn hơn; Dave Rupert chứng minh điều này trong Responsive Deliverables Công nghệ phát triểnSự ra đời của khái niệm Web 3.0 Trong năm tiếp, Downe đã biến ý tưởng đó thành *Practical, Maintainable CSS,* portfolio hoạ tiết Anna Debenham. Debenham trình bày về Front-end Style Guides trong năm 2011, một mở rộng của portfolio hoạ tiết kết hợp guidelines thiết kế truyền thống và quy chuẩn lập trình cơ bản. Samantha Warren’s Style Tiles -. ra mắt trong cùng năm - tạo prototyping framework theo cùng nguyên lý hoạt động

Design System Một hệ thống thiết kế (Design System) là một quy chuẩn được thiết kế để quản lí thiết kế số lượng lớn bằng việc tái sử dụng các hoạ tiết và components. Design System đưa ra cách tiếp cận mới, khi nhà thiết kế buộc phải xem xét nhiều viễn cảnh và ràng buộc thay vì phụ thuộc vào thiết kế 1 lần. là một công cụ tư duy Mô hình này không có gì mới, một số người có nói rằng đây đã luôn là một phần việc của nhà thiết kế. Điều mới là cách ta áp dụng nó lên công việc của mình. Hệ thống thiết kế ta đang nói tới trọng tâm vào các sản phẩm công nghệ: websites, ứng dụng,... ;tiếp cận tới những người làm việc trong thiết kế công nghệ, trải nghiệm người dùng và các lập trình viên.

Tại sao lại sử dụng Design System?

Lợi ích chính của hệ thống thiết kế là khả

tái tạo thiết kế nhanh chóng bằng cách tận dụng các UI components và elements đã làm sẵn. Nhà thiết kế có thể tái sử dụng các components, giảm thiểu việc thiết kế lại và rủi ro không đồng nhất.

Hãy nghĩ tới việc phải quyết định thiết kế cho một ứng dụng có hàng nghìn màn hình. Các UI elements đơn giản đã được

tạo ra và tái sử dụng, vì vậy đội thiết kế có thể tập trung vào các vấn đề như phân cấp thông tin, cải thiện workflow, quản lí hành vi sử dụng sản phẩm,...

Khiến quá trình thiết kế và phát triển sản phẩm nhanh chóng, thuận lợi khi quy mô tăng trưởng. Giảm bớt áp lực cho tài nguyên thiết kế, từ đó có thể tập trung vào vấn đề lớn hơn.

năng

Design System tạo ra ngôn ngữ thống nhất trong các đội nhóm làm việc ở nhiều mảng khác nhau. Tạo ra sự đồng nhất thị giác trong các sản phẩm, kênh truyền thông và các phòng ban của tổ chức. Nhất là với các đội nhóm làm việc đa quốc gia, sự thống nhất này trở nên cần thiết hơn bao giờ hết. Một ngôn ngữ thiết kế chung giảm thiểu thời gian làm việc, tránh hiểu lầm; giúp tập trung vào phát triển sản phẩm. Design System có thể là công cụ học tập và tài liệu tham khảo cho các junior designer. Những guidelines được viết và kiểm tra kĩ lưỡng có thể giúp những nhà thiết kế mới vào nghề học được các kiến thức trong thiết kế giao diện; đồng thời có thể training nhân sự mới trong tổ chức dễ dàng hơn. Khi nhân sự làm việc chia thành nhiều ph òng ban khác nhau mà mỗi ban lại phụ trách một sản phẩm khác nhau, thiếu một hệ thống quy chuẩn có thể dẫn tới thiếu đồng nhất trong thiết kế, làm chệch định hướng nhãn hiệu. Khi thương hiệu muốn rebranding/ thay đổi nhận diện, việc thay đổi thiết kế của các sản phẩm trong công ty cũng dễ dàng hơn khi sử dụng Design System.

Những hạn chế của Design System Tạo ra và duy trì một hệ thống thiết kế là một công việc kéo dài, yêu cầu một đội ngũ nhân sự nhất định. Design System cũng không phải là một giải pháp tối thượng và có thể không hợp với quy mô tổ chức. Cần có thời gian để dạy nhân sự về cách sử dụng Design System. Tất cả các hệ thống cần hướng dẫn sử dụng, ngay cả những hệ thống mô phỏng theo hệ thống khác. Có thể có những ngoại lệ - đó là những dự án tĩnh, chỉ cần thiết kế một lần, không cần tái sử dụng các components. 1 2 3

“ Khi nền công nghệ trưởng thành, thiết kế trở thành phần chính bởi phần máy móc bên dưới đã trở thành một mặt hàng bình thường.” John Maeda và đội ngũ của anh nói trong “Design In Tech Report”:

Trong thời đại hiện nay, hầu như tất cả các ngành công nghiệp đang bị nhấn chìm

trong biển của các thiết bị, màn hình và môi trường online. Ta đang bị lệ thuộc vào

công nghệ, không chỉ trong công việc mà cả trong đời sống. Ở thời đại trước, việc thể hiện webpage mượt mà trên các thiết

bị khác nhau là một điều vô cùng khó khăn, nhưng ngày nay đó là một điều bắt buộc phải làm được khi thiết kế giao diện. Sản phẩm của ta cần phải hoạt động tốt trên tất cả các nền tảng, từ smartphones, desktop, máy tính bảng, TVs, game consoles, …

Sự mô đun hoá (modularity)

Câu chuyện phát triển Design System

Bắt đầu từ sự hỗn loạn, team sản phẩm đã phát triển và cho ra mắt một ứng dụng được thiết kế trong 3 tháng; với tài sản là một vài style guide (color & typography) và một số patterns chung (button, divider,..). Tới thời điểm app mở từ 1 dịch vụ lên 10+ sản phẩm - dịch vụ khác, team đã nhận ra tầm quan trọng của việc có một hệ thống thiết kế để đảm bảo tính đồng bộ của sản phẩm. Sau 12 tháng làm việc, team đã ra mắt DS2 và giải quyết được nhiều vấn đề trước đó.

“Sau khi DS2 được đưa vào sử dụng,

team sản phẩm có thể tự tin tự hào với kết quả: Về mặt triển khai: các component & tài liệu được định nghĩa sẵn, ch cần kéo ra sử dụng trong phút mốt, áp dụng được cho nhiều team Về mặt giao tiếp: ch cần nói tới dialog là PO, UX, dev có thể biết luôn nó là gì, cách sử dụng thế nào, tương tác của người dùng thế nào, … tránh việc trước đó mỗi người gọi một tên khác nhau pop up, modal,… và hình dung về cách sử dụng khác nhau.” @VinID -> Đọc full câu chuyện của VinID tại đây

phát triển Design

Các kĩ sư

thấy công việc lặp đi lặp lại, làm số lượng lớn để đảm bảo deadlines; còn team thiết kế thì thực hiện công việc theo style cá nhân. Phải

thời gian để bảo trì nhiều “biến thể” khác nhau ở nhiều nơi, dù cho chúng cùng thực hiện 1 tính năng. Việc cập nhật mỗi khi có thay đổi là rất tốn thời gian và khó khăn.

Sau một thời gian được đưa vào sử dụng, Design System đã

trao

thông qua

ngôn

cách đặt tên các

utilities trong Design

Thiết kế của sản phẩm được thống nhất, chất lượng các bản thiết kế từ các Designers trong team tương đối đồng đều theo tiêu chuẩn đã đề ra, có thêm thời gian để tập trung vào thiết kế trải nghiệm người dùng. Tốc độ triển khai HTML template nhanh hơn đáng kể: 40% đến 50%. Các Frontend engineers vốn chưa từng

Câu chuyện

System Trước khi có một Design System chính thức, team phát triển sản phẩm của Got It rơi vào sự nhàm chán, hỗn loạn và chán nản.

thì cảm

dành

Quá trình phát triển Design System của Got It được chia làm 2 giai đoạn lớn: Giai đoạn 1 (8–10/2019) và Giai đoạn 2 (1–3/2020). @Got It -> Đọc full câu chuyện của Got It tại đây

chứng minh hiệu quả. PMs

đổi dễ dàng hơn với bộ phận kỹ thuật

một

ngữ chia sẻ chung nhờ

components, prop và CSS

System.

tự tạo HTML layout thì nay dựa vào DS dần dần đã biết cách áp dụng, chủ động hơn về mặt công việc, giảm phụ thuộc vào HTML engineers. Do nhất quán từ UI đến Code, nên không phải test đi test lại các thành phần UI nữa, dành nhiều thời gian tập trung vào việc test logic kỹ càng hơn.

Những thứ tuyệt vời được tạo ra từ sự hợp tác và giao tiếp hiệu quả của con người với nhau. Ta có thể có công nghệ mới nhất, sử dụng những công cụ tân tiến nhất, thậm chí tuyển được những nhân tài tốt nhất trong đội; nhưng nếu họ không làm việc được với nhau thì sản phẩm của ta cũng sẽ không thể thành công. Trong quá trình thiết kế giao diện và phần mềm, ta cần làm việc với rất nhiều đội nhóm khác nhau với những kỹ năng chuyên môn khác biệt. Thấu hiểu công việc và kĩ năng của họ có thể giúp ta làm việc với họ hiệu quả hơn.

Nhóm phụ trách phần thiết kế:

Product Design: Nhóm thành viên nhiều kĩ năng (UX design, interaction design, visual design,..), làm việc sát sao cùng các nhà thiết kế nội dung thực hiện các phần chính của sản phẩm.

Inclusive Design: Nhóm này bao gồm nghiên cứu người dùng, chuyên gia accessibility và thiết kế dịch vụ. Họ đảm bảo mọi người có thể sử dụng sản phẩm, quan tâm tới quá trình trải

Những đối tượng sử dụng Design Syste

nghiệm sản phẩm trong mô hình sản xuất lớn. Content Design - Thiết kế nội dung: Có thể bao gồm content designers, content editors, SEO specialists. Họ là những người quan tâm tới nội dung mặt chữ cho sản phẩm. Design Ops: Họ giúp nhóm thiết kế làm việc theo cách tốt nhất với các công cụ, quy trình tốt nhất có thể để tạo ra sản phẩm.

Nhóm kỹ sư lập trình: Các kỹ sư lập trình nên làm việc cùng với nhóm nhà thiết kế thay vì chờ sau khi thiết kế hoàn tất. Các nhà phát triển có thể giúp xác thực quyết định thiết kế UX thông qua các cuộc trao đổi và prototypes của sản phẩm. Từ đó giúp các nhà thiết kế hiểu rõ hơn về thứ tự nguồn và bố cục web, đồng thời nhanh chóng tạo ra codebase sẽ phát triển thành sản phẩm cuối cùng cho các lập trình viên. Lãnh đạo doanh nghiệp: (Director in Brand/Marketing, portfolio manager in Product Management, hoặc chuyên gia về các lĩnh vực ở các tập đoàn): Điều quan trọng là phải có được sự quan tâm từ các stakeholders và nhóm thiết kế trước khi bắt đầu xây dựng một hệ thống thiết kế.

Nhà thiết kế UX qua định hướng của lãnh đạo doanh nghiệp tạo lo-fi sketch về sản phẩm để thiết lập phân cấp thông tin cơ bản và một vài hoạ tiết giao diện. Front-end dev thiết lập các định hướng của dự án, phác thảo mẫu cơ bản và viết code cấu trúc cho các mẫu mà nhóm dự kiến sẽ sử dụng trong dự án. Nhà thiết kế trực quan tạo các nguyên mẫu phong cách cho sản phẩm, thiết kế định hướng thẩm mĩ và thử nghiệm trên giao diện layout. Từ các nhóm nhân sự trên, ta có thể tưởng tượng quy trình thiết lập hướng thiết kế cơ bản như sau:

Những công việc này nên thực hiện cùng nhau chứ không nên tách biệt. Có một số đầu việc sẽ yêu cầu khả năng riêng của từng nhóm, nhưng tất cả các thành viên cần biết đầu việc của nhóm còn lại, từ đó mới có thể làm việc và phát triển những ý tưởng mới hiệu quả. Mục đích là nảy sinh ý tưởng và giải quyết vấn đề, không phải thực thi một trình tự làm việc cứng nhắc. Bằng cách tiếp cận thiết kế này theo tư duy liên ngành, các nhóm có thể tìm thấy sự cân bằng giữa tính thẩm mỹ cùng tính khả thi trong kỹ thuật mà vẫn đảm bảo khả năng sử dụng.

Phân loại các hệ thống Design System Ngôn ngữ thiết kế Giọng nói và âm điệu Viết - Content Code lập trình Pattern Library Nhận diện thương hiệu Có nhiều loại hệ thống thiết kế,như tài liệu về nhận dạng thương hiệu, văn bản, giọng nói và giọng điệu, code, ngôn ngữ thiết kế và các mẫu giao diện người dùng. Phần này sẽ không trình bày chi tiết mọi danh mục của tất cả các thể loại, nhưng ta sẽ phân loại để hiểu rõ hơn cách mỗi hệ thống kiểu ảnh hưởng đến những yếu tố khác trong thiết kế web, và cách chúng phù hợp với một hệ sinh thái lớn hơn.

Nhận diện thương hiệu Các nguyên tắc nhận dạng thương hiệu xác định các tài nguyên tạo nên sự độc đáo của một công ty. Biểu trưng, kiểu chữ, bảng màu, thông điệp (chẳng hạn như tuyên bố sứ mệnh và dòng giới thiệu), v.v. được tổng hợp và mô tả trong nguyên tắc nhận dạng thương hiệu.

Ngôn ngữ thiết kế Mặc dù các nguyên tắc nhận dạng thương hiệu khá dễ hiểu, nhưng các nguyên tắc về ngôn ngữ thiết kế lại khó xác định hơn một chút. Ngôn ngữ thiết kế trình bày rõ ràng một hướng thiết kế chung, triết lý và cách tiếp cận đối với các dự án hoặc sản phẩm cụ thể. Ngôn ngữ thiết kế có thể kết hợp các khía cạnh của các phong cách thiết kế khác để làm cho các khái niệm cấp cao trở nên hữu hình hơn.

Để thể hiện sự thống nhất trên nhiều loại sản phẩm và phương tiện, Google đã phát triển một ngôn ngữ thiết kế gọi là material design. Hướng dẫn phong cách thiết kế material design xác định triết lý thiết kế tổng thể, mục tiêu và các nguyên tắc chung, đồng thời cung cấp các ứng dụng cụ thể của ngôn ngữ material design. Nguyên tắc về ngôn ngữ thiết kế không được thiết lập giống như nguyên tắc thương hiệu. Ví dụ: một ngày nào đó, Google có khả năng sẽ phát triển một ngôn ngữ thiết kế mới để thay thế material design, vì vậy, mặc dù thương hiệu tổng thể của Google sẽ vẫn còn nguyên vẹn, nhưng từ vựng về thiết kế xung quanh các sản phẩm của họ sẽ thay đổi.

Giọng nói và âm điệu Mọi người tương tác với các thương hiệu trên nhiều kênh và phương tiện truyền thông. Ngoài các phương tiện kỹ thuật số mà chúng ta đã thảo luận cho đến nay, các thương hiệu cũng hoạt động trong lĩnh vực báo in, bán lẻ, ngoài trời, đài phát thanh, TV và các kênh khác. Khi một thương hiệu phải giao tiếp qua nhiều điểm tiếp xúc khác nhau, việc nói một cách thống nhất, nhất quán trở nên quan trọng đối với sự thành công của thương hiệu.

Viết - Content Sự gia tăng của web và các trang web được quản lý nội dung giúp các tổ chức xuất bản nội dung hơn bao giờ hết. Tất nhiên, điều này có thể là một con dao hai lưỡi, vì việc duy trì một phong cách viết nhất quán cho một tổ chức có nhiều tiếng nói có thể là một thách thức. Hướng dẫn cách viết cung cấp một số hướng dẫn và quy luật để đóng góp nội dung.

Code lập trình Điều cần thiết với các đội nhóm là viết code dễ đọc, có thể mở rộng và bảo trì. Nhưng nếu không có cách để thúc đẩy và thực thi tính nhất quán của code, mọi thứ sẽ rất dễ dẫn tới nhiều sai lầm. Code style guide cung cấp các quy ước, mẫu và ví dụ về cách các nhóm nên tiếp cận mã nguồn của họ. Những hướng dẫn này giúp kiềm chế sự hỗn loạn để các nhóm có thể tập trung vào việc tạo ra những tác phẩm tuyệt vời cùng nhau thay vì cấu trúc lại một loạt mã cẩu thả, không nhất quán.

Pattern Library Pattern Library, còn được gọi là hướng dẫn kiểu front-end, thư viện giao diện người dùng hoặc thư viện thành phần, đang nhanh chóng trở thành nền tảng của thiết kế giao diện hiện đại. Sau đây, ta sẽ tìm hiểu một ngôn ngữ thiết kế đã phát triển lâu đời, bao gồm nhiều tuỳ biến cho cả việc thiết kế lẫn lập trình - Material Design by Google Design.

Material

là một ngôn ngữ thiết kế được

triển bởi

Google, lần đầu

mắt vào năm

2014. Material giúp các nhà phát

triển xây dựng trải nghiệm chất

lượng cao cho Android, iOS, Flutter và các website.

“A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.”

Design

phát

đội ngũ thiết kế của

Lịch sử phát triển Material lần đầu ra mắt, định hướng là một ngôn ngữ hình ảnh kết hợp các nguyên tắc thiết kế với sự đổi mới của công nghệ và khoa học. 2014 Material cũng mong muốn có thể phát triển một hệ thống cơ bản duy nhất, cho phép trải nghiệm thống nhất trên các nền tảng đa thiết bị. Truy cập Material 1.0 tại đây Giao diện website của Material 1.0

Material Design 2 được lấy cảm hứng từ thế giới vật chất, bao gồm cả cách phản chiếu ánh sáng và mô tả bề mặt vật liệu. 2018 Material Design tuân theo phương pháp thiết kế đồ hoạkiểu chữ, khung lưới, không gian, tỷ lệ, màu sắc và hình ảnh - để tạo ra thứ bậc, ý nghĩa và tiêu điểm. Các chuyển động của UI cũng được chú ý đầu tư trong phiên bản lần này. Truy cập Material 2.0 tại đây Giao diện website của Material 2.0

Material Design 3 - Material You được ra mắt vào cuối năm 2021, với rất nhiều tính năng cá nhân hoá và thiết kế thân thiện hơn. 2021 Tuân chỉ lớn nhất của Material Design lần ra mắt này là accessibility - thiết kế cho mọi người. Để làm được điều này, M3 đã cập nhật nhiều guidelines về màu sắc, component và tools; như Material Theme Builder cho phép xem trước, tùy chỉnh thiết kế sản phẩm và áp dụng vào code nhanh chóng. Truy cập Material 3.0 tại đây Giao diện website của Material 3

Design 3 có gì mới?

Hướng

Material

Màu sắc đóng một vai trò quan trọng trong Material You, tạo ra trải nghiệm cá nhân hóa và biểu cảm cho người dùng của bạn và mở ra khả năng mới cho vai trò của màu sắc trong ứng dụng được cá nhân hoá. Một số components được cập nhật để hỗ trợ M3 với phong cách trực quan. Cách sử dụng không gian trắng được cải thiện và các components được áp dụng hệ màu mới.

dẫn sử dụng màu sắc, mô tả cách thức hoạt động của hệ thống màu, từ việc tạo bảng màu cho đến cách áp dụng màu cho từng thành phần để giữ cho ứng dụng của mình trở nên độc đáo, thích ứng với mọi người dùng. Cập nhật Kit UI Figma giúp các nhà thiết kế dễ dàng xây dựng với Material Design 3 trong Figma. 1 2

Theme Builder cho phép bạn xem

dụng của mình trực quan với thiết

Tokens đại diện cho phong cách hệ thống thiết kế dưới dạng dữ liệu, cung cấp nguồn chân thực cho tất cả các sản phẩm để luôn đồng bộ hệ thống. Hướng dẫn thiết kế tokens mô tả cách kết hợp các tokens để hợp lý hóa quy trình làm việc của bạn và cải thiện tính nhất quán trên sản phẩm. Material

trước ứng

kế chủ đề Material Design 3 tùy chỉnh. Cập nhật đối với Jetpack Compose Material và MDC-Android ở khâu lập trình. Material Theme Builder Design tokens Các công cụ mới dành cho các nhà phát triển và nhà thiết kế cung cấp các điều khiển đơn giản giúp bạn truy cập vào hệ thống tạo màu Material You phức tạp. 3 4

Một số sản phẩm ứng dụng M3 Moooi.com là một cửa hàng bán nội thất sang trọng, đã ứng dụng tỉ lệ màu sắc, typography và kích thước của các yếu tố cùng việc tái sử dụng các components để cân bằng giữa tính biểu cảm và tính thực tế.

Đối với một ứng dụng có mục đích là cải thiện cuộc sống của những người mắc chứng động kinh, Epsy sử dụng chuyển động một cách có ý nghĩa, hướng người dùng thực hiện các task quan trọng để cải thiện chất lượng cuộc sống của họ, như kích hoạt ghi nhật ký, dùng thuốc và xây dựng kết nối cộng đồng.

KAYAK đã đưa trải nghiệm so sánh giá và đặt phòng du lịch lên một tầm cao mới bằng cách chuyển giao diện sang chủ đề tối, ứng dụng màu sắc tinh tế nhưng có chủ đích. Màu cam độc đáo của thương hiệu chỉ xuất hiện để tạo ra các yếu tố nổi bật, chẳng hạn như các biểu tượng điều hướng hay hệ thống phân cấp, để lại phần lớn không gian phần tối.

Hệ thống thiết kế - Design System là một thứ rất phù hợp với thời đại công nghệ ngày nay; bởi các sản phẩm công nghệ được tạo nên từ các hệ thống code. Các nhà thiết kế không còn giới hạn trong việc chỉ tạo ra các sản phẩm đồ hoạ in ấn. Tư duy hệ thống cho phép nhà thiết kế không chỉ tạo ra các sản phẩm thiết kế, mà xây dựng hệ thống tạo ra chúng. Trong tương lai, họ sẽ được giải thoát khỏi giới hạn đến từ các phần mềm đồ hoạ truyền thống.

Tìm hiểu Design System và Material Design Biên soạn - tổng hợp - thiết kế bởi @pminhh Chỉnh sửa bởi @quanghuyquanghuy Hoàn thành vào 09/2022 Typography Unbounded Variable Be Vietnam Tất cả tên thương hiệu được trích dẫn trong bài luận này chỉ cho mục đích giới thiệu, không có mục đích liên kết thương mại. Nếu có bất kì vấn đề về bản quyền, liên lạc tới chuphuongminh@gmail.com.