Thực đơn
trang chủWindows 7

Thiết kế Vật liệu - lịch sử sáng tạo, nguyên tắc, triết lý. thiết kế vật liệu avsc Bề mặt, tính chất và chức năng của chúng

Có lẽ bạn đã nhiều lần nghe đến cụm từ “thiết kế vật liệu”. Khái niệm về thiết kế vật liệu không phải là mới và đã được thiết lập khá vững chắc trên thị trường thiết kế web, chủ yếu là do sự hấp dẫn của nó đối với trải nghiệm người dùng. Vật liệu thiết kếđược Google giới thiệu lần đầu tiên vào mùa hè năm 2015 và kể từ đó đã trở thành một khái niệm gắn bó chặt chẽ với công ty này. của anh ấy là gì tính năng đặc biệt, nguyên tắc cơ bản và liệu nó có tốt như người ta nói không? Thông tin thêm về điều này sau trong bài viết.

Material Design không chỉ là một ý tưởng; nó từng buộc các nhà thiết kế phải xem xét lại hoàn toàn quan điểm của họ về quá trình tạo ra các trang web và ứng dụng. Các trang web hiện đại tận dụng tối đa các khung thiết kế và tài liệu thiết kế vật liệu của Google. Nhưng trước khi chuyển sang món tráng miệng, hãy xác định khái niệm về vật liệu thiết kế, mục đích và đặc điểm chính của nó.

Thiết kế vật liệu là gì?

Thiết kế vật liệu là ngôn ngữ đồ họa và phong cách thiết kế do nhóm tạo ra nhà phát triển Google, để giúp các nhà thiết kế tạo ra các trang web và ứng dụng dễ truy cập, thiết thực và hữu ích. Khái niệm này dựa trên tài liệu sống nằm ở truy cập công cộng và có thể được sử dụng bởi bất kỳ người dùng nào quan tâm đến khái niệm thiết kế vật liệu. Cho đến ngày nay, tài liệu này được cập nhật liên tục để phản ánh những thay đổi trong thiết kế và phát triển. Nhờ đó, thiết kế vật liệu vẫn phù hợp và không ngừng phát triển như một định hướng.

Material Design có một số mục tiêu và nguyên tắc được người tạo ra nó nêu ra. Danh sách này có thể trông hơi lý tưởng, nhưng chúng tôi vẫn sẽ trình bày những ý chính của nó bên dưới.

Mục tiêu thiết kế vật liệu

  1. Tạo nên ngôn ngữ hình ảnh, sẽ kết hợp các nguyên tắc cổ điển thiết kế tốt với sự đổi mới và khả năng của khoa học công nghệ hiện đại.
  2. Phát triển một đơn hệ thống cơ bản, cho phép bạn tạo các thiết kế phổ quát cho nền tảng khác nhau và các thiết bị. Nguyên tắc di động là cơ bản, nhưng chạm vào, khẩu lệnh, thao tác nhập bằng chuột và bàn phím là các phương thức nhập và tương tác chính sẽ được xem xét trong các thiết kế.

Nguyên tắc thiết kế vật liệu:

  1. Thiết kế vật liệu là một phép ẩn dụ: tín hiệu trực quan và tất cả yếu tố đồ họa các thiết kế phải dựa trên và kết nối với thực tế xung quanh, thế giới vật chất.
  2. Đồ họa, rõ ràng, có mục đích: Lý thuyết thiết kế cơ bản (sử dụng các loại, lưới, tổ chức không gian, tỷ lệ, tỷ lệ, màu sắc và hình ảnh) nên hướng dẫn hiệu ứng hình ảnh và sáng tác cơ sở trực quan vật liệu thiết kế.
  3. Mọi chuyển động hoặc hành động đều quan trọng: chuyển động của đồ vật hoặc hành động khác được thực hiện không được gây trở ngại cho người dùng, ngược lại, phải đảm bảo sự thuận tiện và nhất quán của các hành động được thực hiện.

Ngoài các mục tiêu và nguyên tắc trên, còn có nhiều yếu tố định hướng khác. Mà xác định thiết kế vật liệu. Tài liệu thiết kế vật liệu được chia thành nhiều khái niệm và kỹ thuật cụ thể. Vì vậy, ví dụ: Google đã phát triển một bộ quy tắc cụ thể để tạo hoạt ảnh, kiểu, bố cục, thành phần, v.v.

Tất cả những khuyến nghị này đều dựa trên các đặc tính cơ bản của thiết kế vật liệu. Điều quan trọng nhất là thiết kế vật liệu dựa trên thực tế, trong đó các vật thể được đặt trong một không gian gần như ba chiều. Về mặt thẩm mỹ, thiết kế vật liệu nằm ở đâu đó giữa thiết kế phẳng và tính đa dạng.

Màu sắc và kiểu chữ trong thiết kế Material Design

Màu sắc trong thiết kế vật liệu có nhiều điểm chung với . Các bảng màu chất liệu khá đậm và tươi sáng. , giống như trong thiết kế phẳng, sans serif đơn giản.

« Thiết kế vật liệu đầy đủ, kết hợp với tông màu trầm, một cách tiếp cận bắt nguồn từ kiến trúc hiện đại, biển báo đường bộ, băng đánh dấu và sân thể thao,” như đã nêu trong tài liệu thiết kế vật liệu của Google. “Làm nổi bật những vùng tối và vùng sáng đậm. Sử dụng bất ngờ và màu sáng ».

Và điều tuyệt vời nhất về khái niệm màu sắc trong thiết kế vật liệu là việc sử dụng độ tương phản rõ ràng. Để thuận tiện cho người dùng, Google cung cấp đầy đủ bảng màu với các mẫu có sẵn để tải về. Khái niệm màu sắc đơn giản đến mức bạn tự hỏi liệu Google có nghĩ rằng các nhà thiết kế đã hoàn toàn quên mất lý thuyết về màu sắc hay không.

Các hướng dẫn chọn và sử dụng font chữ cũng khá cơ bản và đơn giản. Phông chữ mặc định cho tất cả các ứng dụng - Roboto - có sẵn để tải xuống qua liên kết, nơi bạn cũng có thể tìm thấy bảng kết hợp và lựa chọn phông chữ.

Mẫu, cấu trúc và thiết kế

Trong cấu trúc và cách sắp xếp các yếu tố, thiết kế vật liệu vay mượn rất nhiều từ khái niệm thiết kế in ấn. Thiết kế vật liệu khuyến khích các nhà thiết kế tạo và sử dụng lưới cơ bản và cấu trúc toán học để đặt các phần tử dựa trên các mẫu.

Tiếp theo, mẫu được chia thành các khu vực, trong đó tài liệu cung cấp một số đề xuất nhằm cải thiện Kinh nghiệm người dùng trên trang web hoặc trong ứng dụng (cũng có những khuyến nghị về tầm quan trọng của yếu tố này hoặc yếu tố kia).

Yếu tố thiết kế vật liệu cơ bản

Mỗi thành phần mà một trang web được tạo theo kiểu vật liệu có thể bao gồm được mô tả chi tiết trong tài liệu. Bắt đầu từ cách tạo nó và nó trông như thế nào, cho đến vị trí, phương pháp và thời điểm xuất hiện trên màn hình của người dùng. Nói chung, rất khó để tìm ra thứ gì đó mà người sáng tạo đã bỏ sót hoặc không làm. Danh sách này bao gồm 19 thành phần cấu trúc chính, một số trong số đó được liệt kê dưới đây.

  • Màn hình dưới cùng (lớp dưới cùng của thiết kế)
  • nút
  • thẻ
  • Đối thoại
  • Dấu phân cách
  • Lưới
  • Danh sách
  • Thanh tiến trình và hoạt động
  • Thanh trượt
  • Tiêu đề phụ
  • Công tắc
  • Tab
  • Trường văn bản
  • Cửa sổ bật lên

Những nhà thiết kế thích vẻ bề ngoài các thành phần được đề xuất, họ thậm chí có thể tải xuống nguồn của họ cho Illustrator hoặc. Các biểu tượng và chi tiết khác được ghép nối với các kiểu và thích ứng với mẫu đã chọn.

Sự tiện lợi, khả năng tiếp cận và trải nghiệm người dùng

“Một sản phẩm sẽ dễ tiếp cận khi tất cả mọi người – bất kể khả năng – đều có thể sử dụng nó để đạt được mục tiêu của mình. thực sự sản phẩm thành công có thể tiếp cận được với nhiều đối tượng nhất có thể."

Tài liệu thiết kế Material Design tập trung rất nhiều vào khả năng tiếp cận, khả năng sử dụng và trải nghiệm người dùng, tất cả đều rất quan trọng. Trong khi nhiều đặc tính thẩm mỹ của thiết kế vật liệu có vẻ khá thô sơ đối với các nhà thiết kế có kinh nghiệm, một số khái niệm về trải nghiệm người dùng và tương tác được triển khai ở mức cao nhất.

Phần về các mô hình tương tác đặc biệt hữu ích. Nó tiết lộ những ý tưởng nhằm làm cho một số yếu tố thiết kế trở nên phổ biến cho tất cả mọi người mạng có thể dự án. Ví dụ: định dạng để chỉ định ngày và giờ hoặc thao tác tìm kiếm. Những điều này có thể khác nhau tùy theo từng trang web, nhưng sự khác biệt là nhỏ và nhìn chung những yếu tố này khá phổ biến. Nếu khách truy cập nhìn thấy kính lúp, anh ta hiểu rằng trước mặt anh ta có thể sử dụng một tìm kiếm, ngay cả khi không có chỉ mục văn bản bên cạnh. Đây là lý do tại sao thiết kế vật liệu chứa một số phần lớn công cụ đơn giản, mà người dùng mong đợi thấy trên bất kỳ trang web nào và họ đã quen làm việc với nó.

Khả năng tiếp cận và dễ hiểu của thiết kế là một khía cạnh khác được đề cập rộng rãi trong tài liệu thiết kế vật liệu. Thiết kế vật liệu phải tính đến những người dùng có thể tương tác với nó không chỉ thông qua màu sắc và hình dạng mà còn thông qua âm thanh và tìm kiếm bằng giọng nói. Ngoài ra, điều quan trọng là phải xem xét khả năng xem thiết kế trên các thiết bị có độ tương phản cao, màn hình lớn, không có màn hình hiển thị, chỉ với sự giúp đỡ điều khiển giọng nói hoặc xem xét sự kết hợp của tất cả các yếu tố này.

10 tài nguyên thiết kế vật liệu

Thiết kế vật liệu là chủ đề phổ biếnđể thảo luận và là nguồn cảm hứng cho nhiều blog, diễn đàn và các trang web khác nơi các nhà thiết kế web tập hợp. Có rất nhiều thứ hữu ích có thể tải xuống trực tiếp từ tài nguyên của Google, nhưng ngoài ra cũng có nhiều tài nguyên đăng tác phẩm của họ theo phong cách thiết kế vật liệu. Dưới đây là một số trang web có thể giúp bạn tìm hiểu các khái niệm về thiết kế vật liệu và tải xuống các tài liệu miễn phí.

  1. Tập hợp các yếu tố theo phong cách thiết kế vật liệu dành cho điện thoại thông minh và các thiết bị khác thiêt bị di động(xem bên dưới).

Phần 1: Thư viện thiết kế Material Design cho trang web và ứng dụng – Tài liệu miễn phí

Để đơn giản hóa công việc cho những độc giả quyết định thực hiện một dự án theo phong cách thiết kế vật liệu, chúng tôi quyết định tạo một phòng trưng bày với các giải pháp và phát triển sẵn có. Chỉ cần lấy một hoặc nhiều bộ miễn phí, được cung cấp bởi các nhà thiết kế từ khắp nơi trên thế giới. Dưới đây bạn sẽ tìm thấy một bộ sưu tập phong phú các mặt hàng như vậy.

Thiết kế vật liệu của UXPin

Thiết kế vật liệu của Creative Tim

Lựa chọn vật liệu miễn phí từ Designtory

UIDE – tài liệu phác thảo miễn phí từ Mateusz Dembek

Tài nguyên phác thảo thiết kế vật liệu của Google

Thiết kế vật liệu L Bootstrap theo phong cách Android của Vitaly Chernega

Tài nguyên phác thảo cho thiết kế vật liệu từ Boilerplate

Thiết kế Vật liệu cho Niềm đam mê EL

Khối Froala theo phong cách vật liệu

Free Landing 1.0 theo phong cách vật liệu

Thiết kế vật liệu di động

thiết kế vật liệu avsc

Thiết kế vật liệu giao diện người dùng của Jakub Kośla

Thiết kế vật liệu cho Android của Ivan Bjelajac

Thiết kế vật liệu bởi Ultralinx

Thiết kế Vật liệu Di động của Emma Drews

Lựa chọn tài liệu miễn phí từ Adrian Goia

Thiết kế vật liệu từ UI8

Thiết kế Vật liệu cho Photoshop bởi Psddd

Thiết kế vật liệu Android PSD từ Nine Hertz

Các bộ sưu tập thiết kế vật liệu khác có thể hữu ích

Thiết kế vật liệu tương tác trạm của Nelson Sawa


Các vật dụng theo phong cách vật liệu từ Elad Izak


Bản phác thảo vật liệu từ Benjamin Schmidt




Vật liệu chọn màu Bộ chọn màu


Hãy tóm tắt lại

Khái niệm về thiết kế vật liệu là một giải pháp được cân nhắc kỹ lưỡng để tạo ra bất kỳ thiết kế hiện đại trang web hoặc ứng dụng. Ngoài ra còn có khá hướng dẫn chi tiết về Thiết kế Vật liệu, điều này sẽ rất hữu ích cho những nhà thiết kế mới bắt đầu nhưng có vẻ hơi thô sơ đối với những nhà thiết kế có kinh nghiệm.

Rất có thể ngày mai một thứ gì đó hoàn toàn sẽ xuất hiện sẽ xóa thiết kế vật liệu khỏi trí nhớ của các nhà phát triển, giống như nó đã xóa Công nghệ đèn flash. Không ai miễn nhiễm với điều này. Nhưng với tư cách là nhà thiết kế, bạn có quyền tự quyết định xem bạn quan tâm và cần bao nhiêu thiết kế vật liệu cho các dự án tiếp theo của mình, cũng như sử dụng các phát triển và thành phần của nó cho các thử nghiệm của riêng bạn.

Chúc bạn vui vẻ khi tạo ra các thiết kế và nếu bạn có điều gì muốn bổ sung vào bài viết, vui lòng viết đề xuất của mình trong phần bình luận.

Cái nào đang phát triển ứng dụng di động và các trang web, đã viết một chuyên mục cho chúng tôi và lập kỷ lục về thiết kế vật liệu và phẳng.

Qua nhìn chung, sự khác biệt giữa thiết kế phẳng ( Thiết kế phẳng) và thiết kế vật liệu ( Vật liệu thiết kế) hầu như không thể cảm nhận được. Đối với một người không có kiến ​​thức sâu về thiết kế đồ họa, chúng thực sự có vẻ rất giống nhau. Trong bài viết này, tôi sẽ cố gắng “làm sáng tỏ” một số khác biệt giữa chúng. Bạn sẽ nhận được những kiến ​​thức bổ sung rất cần thiết để không vô tình làm tổn thương đến bản chất mỏng manh của nhà thiết kế.

Một ít lịch sử

Trước khi bắt đầu nói về sự khác biệt giữa hai xu hướng thiết kế phổ biến nhất, hãy cùng tìm hiểu xem chúng đến từ đâu. Có ý kiến ​​​​cho rằng thiết kế vật liệu được tạo ra trên cơ sở phẳng. Nó đến từ đâu trong trường hợp này? thiết kế phẳng?

tính đa hình

Khi nói đến giao diện người dùng và thiết kế web, khái niệm đa dạng đề cập đến một cách tiếp cận có ý tưởng chính là bắt chước. Không đi sâu vào chi tiết, chỉ cần nhớ các giao diện của Apple trước đây sự xuất hiện của iOS 7 với “kết cấu, ánh sáng và hiệu ứng khoa trương chân thực”.

Nỗ lực làm cho các vật thể kỹ thuật số giống với các đối tượng trong thế giới thực của chúng được thúc đẩy bởi nhu cầu tạo điều kiện thuận lợi cho người dùng tương tác với thiết bị. Trên thực tế, đây là lý do tại sao tất cả các giao diện có họa tiết chân thực đã thống trị thế giới kỹ thuật số trong nhiều năm. Thiết kế Skeuomorphic thực hiện rất tốt công việc giúp người dùng chuyển đổi liền mạch từ thế giới thực sang thế giới kỹ thuật số.

Tuy nhiên, với sự hưng thịnh công nghệ di động dần dần cần phải tập trung chủ yếu vào sự tiện lợi và dễ sử dụng. Đồng ý, trong lĩnh vực này cần phải tạo ra giải pháp di động, Có sẵn từ các thiết bị khác nhau, tăng đáng kể. Và tại thời điểm này, sự đơn giản trở thành tiêu chuẩn thiết kế mới.

Lưu ý: Trong mọi trường hợp, đừng nghĩ rằng tính đa hình đã biến mất hoàn toàn. Nó được sử dụng rộng rãi trong các trò chơi cần tạo ra một thế giới chân thực và giúp người chơi cảm nhận được nhân vật của mình để có thể hòa mình sâu sắc vào quá trình chơi.

Thiết kế phẳng

Phong cách này hoàn toàn không có bất kỳ vật thể ba chiều nào. Nói một cách đại khái, thiết kế phẳng thiếu các yếu tố phong cách như bóng đổ, họa tiết, độ dốc, nhưng lại chú ý đến cách chơi của phông chữ, màu sắc và biểu tượng. Nhưng tại sao tất cả điều này lại cần thiết? Đáp án đơn giản.

Thứ nhất, thiết kế phẳng giúp giảm đáng kể thời gian tải trang. Sự vắng mặt của các chi tiết đa hình “nặng” (ví dụ: các lớp, phông chữ serif, độ chuyển màu) làm cho các thành phần thiết kế phẳng “nhẹ hơn”, từ đó tăng tốc đáng kể thời gian tải. Hơn nữa, các phần tử phẳng trông hấp dẫn như nhau trên cả hai màn hình. độ phân giải cao, và với mức thấp.

Thứ hai, hình ảnh đơn giản có thể truyền đạt ý tưởng của bạn đến người dùng nhanh hơn các minh họa chi tiết: chúng có tính sơ đồ và do đó khá dễ hiểu.

Và dĩ nhiên, biểu tượng phẳng với sự tương đối bằng phông chữ đơn giản có thể hướng sự chú ý của người dùng đến nội dung thực sự quan trọng.

Ngày nay, thiết kế phẳng đã nhận được sự công nhận xứng đáng, nhưng nó vẫn có những vấn đề. Ví dụ rõ ràng nhất về những vấn đề như vậy là Phiên bản Windows 8 bởi Microsoft. Hệ điều hành này được coi là hệ điều hành tiên phong về thiết kế phẳng và hỗ trợ khái niệm thiết kế Metro. Điều dẫn đến vấn đề là công ty cho rằng cần phải chú ý đến kiểu chữ hơn là bản thân đồ họa.

Kết quả từ bài kiểm tra khả năng sử dụng Windows 8 do NN Group thực hiện cho thấy người dùng gặp khó khăn trong việc phân biệt các đối tượng có thể nhấp vào và các đối tượng không thể nhấp vào. Người dùng phàn nàn rằng các đối tượng có vẻ tĩnh lại thực sự có thể nhấp vào được. Kết quả là sứ mệnh chính của công ty - giúp người dùng giải thích chính xác hệ thống - đã thất bại.

Một công ty khác thường gắn liền với thiết kế phẳng là Apple. Họ đã loại bỏ các yếu tố thiết kế đa dạng trong phòng điều hành di động hệ thống iOS 7, phát hành năm 2013. Lần chuyển đổi này được đón nhận tốt hơn một chút, chủ yếu là do công ty không cố gắng cập nhật hoàn toàn khái niệm giao diện người dùng mà chỉ đơn giản là thêm một số thay đổi theo hướng thiết kế phẳng. Điều này mang đến cho người dùng cơ hội sử dụng sản phẩm bằng cách dựa vào trải nghiệm trước đây của họ với các hệ điều hành và các trang web.

Vật liệu thiết kế

Hãy làm rõ ngay bây giờ: Material Design giống một sản phẩm có thương hiệu hơn là một xu hướng thiết kế tự phát đã được chấp nhận rộng rãi. Đây là điểm khác biệt chủ yếu của nó với thiết kế phẳng.

Khi gọi vật liệu thiết kế là “có thương hiệu”, ý tôi là nó có một tập hợp hoàn chỉnh các khuyến nghị và nguyên tắc được xác định rõ ràng mà mọi nhà thiết kế có lòng tự trọng đều tuân theo. Khá rõ ràng tại sao Google giới thiệu Thiết kế Vật liệu của mình: cần phải thống nhất thiết kế để các ứng dụng trông giống nhau trên mọi thiết bị. nhiều Android thiết bị.

Mặc dù khá hữu dụng nhưng thiết kế phẳng vẫn bị coi là khó hiểu. Sự thật là các vật thể phẳng trên màn hình có thể gây nhầm lẫn cho người dùng (đặc biệt là những người chưa có kinh nghiệm sử dụng giao diện di động và web). Do đó, thiết kế vật liệu cố gắng mang lại các yếu tố đa dạng, nhưng ở dạng đơn giản hóa rất nhiều. Hình ảnh trông phẳng, đặc biệt là về màu sắc nhưng vẫn đa chiều nhờ sự hiện diện của trục Z.

Nói cách khác, thiết kế vật liệu có thể được gọi là phiên bản cải tiến của thiết kế phẳng với các yếu tố đa dạng - hoạt hình, bóng và lớp. Bằng cách này, bạn có thể làm cho sản phẩm trở nên trực quan hơn về mặt điều hướng và tránh sự phức tạp không cần thiết trong phong cách tổng thể.

Ưu và nhược điểm của thiết kế phẳng

Hãy bỏ lại lịch sử phát triển của các phong cách và chuyển sang một điều quan trọng hơn - hãy liệt kê những điểm mạnh và mặt yếu thiết kế phẳng.

  • Chủ nghĩa tối giản và phong cách
  • Trực giác. Bạn sẽ dễ dàng truyền đạt ý tưởng của mình tới người dùng hơn.
  • Tiết kiệm thời gian và nguồn lực. Các trang tải nhanh hơn nhiều với mức tiêu thụ băng thông ít hơn.
  • Tập trung vào nội dung. Giao diện không có chi tiết không cần thiết, có thể làm xao lãng thông tin thực sự có giá trị.
  • Có vẻ tốt như nhau trên nhiều thiết bị khác nhauà, có thể là trình duyệt trên PC hoặc điện thoại thông minh.
  • Tăng tốc quá trình phát triển thiết kế trang web hoặc ứng dụng bằng cách loại bỏ những chi tiết thiết kế không cần thiết.
  • Phong cách tối giản.
  • Khá dễ hiểu ở mức độ trực quan. Thiết kế vật liệu sẽ dễ nhận biết như nhau người dùng có kinh nghiệm, và dành cho người mới bắt đầu.
  • Độ lệch hình vừa phải. Mọi thứ trông thực tế hơn nhờ sử dụng trục Z (một khái niệm độc đáo của Google).
  • Có bộ tài liệu hướng dẫn được cập nhật liên tục. Vì vậy, bất kỳ nhà thiết kế nào cũng có thể nhờ đến họ nếu gặp khó khăn trong quá trình làm việc.
  • Khuyến khích hoạt ảnh cho các giải pháp web. Không cần phải nhắc bạn rằng mọi người yêu thích sự chuyển động đến mức nào. Ngoài ra, hoạt ảnh cho phép bạn làm cho giao diện rõ ràng và trực quan hơn.
  • Có chủ sở hữu (Google). Vì vậy, mọi thắc mắc và đề xuất cải tiến nên được gửi đến chủ sở hữu.
  • Do trục Z nên quá trình thiết kế có thể mất nhiều thời gian hơn để hoàn thành.
  • Các yếu tố hoạt hình đòi hỏi nhiều tài nguyên hơn.
  • Việc tuân thủ cứng nhắc các nguyên tắc có thể hạn chế tính độc đáo của thiết kế.

Tóm tắt

Trên thực tế, một trong những phương pháp thiết kế đang được xem xét không nên được coi là có lợi thế rõ ràng so với phương pháp kia, vì phong cách phẳng và chất liệu luôn đi cạnh nhau. Cả hai đều cực kỳ nổi tiếng và cả hai đều không có chủ nghĩa hiện thực quá mức. Thiết kế vật liệu là sự kế thừa của thiết kế phẳng, trong khi bản thân thiết kế phẳng là một phản ứng đối với các giải pháp quá nặng nề và thực tế. Thiết kế vật liệu đã bổ sung thêm một thứ mà thiết kế phẳng luôn cố gắng tránh xa - một chút đa dạng. Mặc dù có một điều sẽ luôn khác nhau giữa các cách tiếp cận này: thiết kế vật liệu là sản phẩm độc quyền Google và thiết kế phẳng là kết quả của sự kết hợp của một số phương pháp thiết kế nhằm hướng tới sự đơn giản tổng thể.

Trên thực tế, thiết kế phẳng đã phát triển rất nhiều trong những năm qua. những năm trước: Từ kiểu “phẳng” hoàn toàn đến kiểu “bán phẳng”. Giờ đây, nó cho phép sử dụng các lớp và bóng tinh tế để cho phép các đối tượng xuất hiện sâu hơn so với trước đây. Vì vậy, bạn và tôi đều là những người cùng thời với thiết kế phẳng 2.0.

Cuối cùng, không có gì ngăn cản bạn cố gắng kết hợp hai phương pháp này để tạo ra một sản phẩm thực sự hữu ích và thân thiện với người dùng. Vì vậy, hãy lấy cảm hứng từ các chuyên gia thiết kế vật liệu và phẳng và bắt tay vào làm!

Phó chủ tịch thiết kế của Google Matias Duarte nói về các nguyên tắc cơ bản của thiết kế mới, được gọi là Material, trong một cuộc phỏng vấn với The Verge. Đây là một cách tiếp cận hoàn toàn khác, cung cấp một bộ quy tắc thống nhất, từ loại phần mềm đến chức năng. Hiện tại, thiết kế có vẻ hơi lạ và phải mất một thời gian để làm quen.

Nhóm thiết kế tại Google cảm thấy cần phải đưa ra giao diện và chức năng thống nhất của phần mềm có thể được sử dụng trên tất cả các sản phẩm: Android, Chrome OS, dịch vụ web. Thay vì bắt đầu với việc phát triển bảng màu, họ bắt đầu bằng câu hỏi: “Nó là gì?” phần mềm?»

Vật chất và hình thức

Câu trả lời đến từ bộ phận thiết kế khi Jon Wiley, trưởng nhóm thiết kế Công cụ tìm kiếm Google, và đồng nghiệp của ông là Nicholas Jitcoff đã xem xét thiết kế Tìm kiếm bằng google. Họ nhìn vào giao diện thẻ và nghĩ: “Và nếu bạn di chuyển lá bài thì đằng sau nó là gì?”

“Câu hỏi ngây thơ này đã thắp lên một tia lửa mạnh mẽ!” - Duarte nói. Cả nhóm bắt đầu nghĩ về một cách mới để tương tác với yếu tố phần mềm. Thay vì chỉ sử dụng các pixel trên màn hình và các lớp trừu tượng, nhóm bắt đầu nghĩ về thiết kế như một vật thể hữu hình, thực tế. Vì vậy, thẻ phải có tính chất vật lý. Đã đến lúc đưa ra các quy tắc xác định cách mọi thứ sẽ hoạt động và di chuyển trên màn hình. Nhóm phát triển muốn đạt được hiệu ứng mà người dùng đang tương tác với các vật thể vật lý.

Do đó, công việc bắt đầu trên một chất liệu ẩn dụ giống như tờ giấy - phẳng và trắng với bóng thực tế. Đây là hạt giống mà từ đó phần còn lại của thiết kế đã phát triển, việc triển khai nó có thể được thấy trong Android L. Material Design hướng đến màu sắc đậm, tươi sáng, sự tối giản và cảm giác nhất quán.

Wiley và Zhitkoff cho rằng đây là sự phát triển mang tính thẩm mỹ trong toàn bộ triết lý thiết kế của Google. Vào năm 2012 và 2013, trong các bức tường của trụ sở chính của gã khổng lồ Internet, dự án Kennedy đã bắt đầu, dự án sẽ thống nhất thiết kế của mọi thứ.

Sự sáng tạo và những hạn chế

Material Design tập hợp tất cả lại với nhau ý tưởng hay nhất. Matias Duarte nhận thấy chúng ta một phong cách mới như một loạt hạn chế, theo ý kiến ​​​​của ông, làm cho công việc của các nhà thiết kế ứng dụng trở nên dễ dàng và nhất quán hơn. Ví dụ, cử chỉ lật tấm thẻ để xem những gì được viết ở mặt sau. Trong thế giới bình thường, điều này là không thể do thiếu không gian. Cứ như thể phần mềm là vật thể thực sự bên trong thiết bị. Và rõ ràng là điện thoại của bạn không còn chỗ để lật thẻ nên Google hạn chế kiểu thao tác này.

Chúng ta phụ thuộc rất nhiều vào vật lý và phần mềm thường hoạt động theo cách phá vỡ sự hiểu biết của chúng ta về thế giới, giống như một bộ phim khoa học viễn tưởng nào đó thách thức logic cơ bản. Duarte trực tiếp bình luận về triết lý mới thiết kế iOS từ Apple.

Chúng ta không lao qua không gian và thời gian với tốc độ siêu âm. Thiết kế - là tìm kiếm giải pháp trong những ràng buộc chặt chẽ. Thiết kế là một nghệ thuật.

Các nhà thiết kế của Google kiên quyết từ chối nêu tên vật liệu hư cấu được sử dụng. Một giải pháp vừa mang lại cho họ sự linh hoạt cao hơn vừa bổ sung thêm một lớp thần bí siêu hình cho nội dung. Giấy lượng tử - điều này đã được nói đến trong một số rò rỉ trước Google I/O. Điều này rất quan trọng vì vật liệu tuân theo vật lý và nó sẽ không rơi vào bẫy của hiện tượng lệch hình. Chính xác thì nó không phải là sự bắt chước các vật thể vật lý, như Duarte đã nói, nó là một thứ gì đó "ma thuật".

Chất liệu trong thiết kế của chúng tôi có thể làm được những điều mà giấy vật lý không thể làm được, chẳng hạn như phóng to và thu nhỏ bằng hình ảnh động. Những hoạt ảnh này rất quan trọng đối với Google vì chúng giúp người dùng hiểu rằng chúng đang ở bên trong phần mềm. Wiley so sánh phần mềm này với các bộ phim, trong đó có những bước chuyển đột ngột giữa các cảnh. Người dùng mất cảm giác về thời gian và không gian. Trong phần mềm, điều quan trọng là người dùng hiểu được nguyên tắc chuyển từ cái này sang cái khác.

Cụ thể hoá

Điều quan trọng hơn nữa mà Material Design mang lại đó là sự thống nhất. Google đã nghiên cứu các thuật toán cho tất cả các sản phẩm của mình trong nhiều năm và điều này đã trở thành một phần không thể thiếu trong triết lý thiết kế mới. Thay vì người dùng phải tự cấu hình mọi thứ, Material Design khiến họ tin rằng những gì họ cần trên màn hình sẽ là thứ họ cần vào đúng thời điểm.

Đó là lý do tại sao Mặc Android không mang lại cho người dùng gì hơn ngoài sự tương tác với các thông báo. Alex Faaborg, nhà thiết kế nền tảng, cho biết:

Bạn không dành nhiều thời gian để tương tác với đồng hồ. Bạn chỉ muốn có thể nhìn vào cổ tay của mình và ngay lập tức nhận được thông tin cần thiết hoặc thực hiện một hành động bằng lệnh thoại. Chúng tôi đã thực hiện rất nhiều công việc trên toàn bộ nền tảng của Google.

Google đang yêu cầu quá nhiều tín nhiệm cho bản thân và tài liệu giấy "ma thuật" của mình, nhưng Duarte tin rằng có những lý do chính đáng cho điều này.

Chúng tôi đã làm điều này bởi vì nó là giải pháp đơn giản nhất. Chúng tôi muốn thiết kế một thiết kế đơn giản nhất có thể cho người dùng.

Công viên 3.0

Có rất nhiều thứ liên quan đến Material Design hơn là chỉ thiết kế Android L, Android Wear và mọi thứ khác mà Google tham gia. Chúng ta đang nói về những cảm giác trong mối quan hệ giữa con người và công nghệ.

Duarte cho biết Xerox PARC đã thực hiện một công việc xuất sắc khi tạo ra trải nghiệm con trỏ và cửa sổ quen thuộc. Điều này thật sáng tạo vì công ty có thể tạo ra phiên bản ảo của máy tính để bàn thực sự. Mọi người hiểu cách máy tính hoạt động và có thể làm việc với nó một cách thoải mái. Điều này cũng áp dụng cho những gì Apple đã làm với màn hình cảm ứng.

Bây giờ Google tin rằng họ đã làm được điều tương tự. Wiley nói rằng con người ngày nay có rất nhiều công nghệ: những màn hình cảm ứng, cử chỉ, lệnh thoại, thuật toán thông minh. Material Design kết hợp tất cả sự đa dạng này thành một thứ trực quan. Điều này sẽ giúp bạn dễ dàng sử dụng tương tự trên Chrome OS, Android hoặc trên web.

9 nguyên tắc

1. Vật chất là một phép ẩn dụ

Material Design là một hệ thống hợp lý hóa không gian và chuyển động. Thiết kế dựa trên thực tế xúc giác, lấy cảm hứng từ khả năng của giấy và mực, nhưng mở ra trí tưởng tượng và phép thuật.

2. Bề mặt trực quan

Các mặt phẳng và các cạnh truyền tải tín hiệu hình ảnh dựa trên nhận thức của chúng ta về thực tế. Việc sử dụng các thuộc tính xúc giác quen thuộc sẽ tác động vào các phần cơ bản của não và giúp chúng ta nhanh chóng hiểu được những gì đang được tưởng tượng.

3. Kích thước tạo ra sự tương tác

Các nguyên tắc cơ bản về ánh sáng, bề mặt và chuyển động là chìa khóa cho cách các vật thể tương tác. Ánh sáng thực tế phân chia không gian và tập trung sự chú ý vào các bộ phận chuyển động.

4. Thiết kế đáp ứng thống nhất

Một thiết kế cho mọi thứ. Mỗi thiết bị phản ánh quan điểm riêng của mình về cùng một yếu tố cơ bản. Mỗi chế độ xem được điều chỉnh theo kích thước và mức độ tương tác cho từng thiết bị. Màu sắc, hình tượng, thứ bậc và mối quan hệ không gian vẫn không thay đổi.

5. Phông chữ, đồ họa, màu sắc

Thiết kế khác biệt tạo nên sự phân cấp, hiểu biết và giúp tập trung. Màu sắc được lựa chọn đặc biệt, sử dụng không gian từ cạnh này sang cạnh khác, phông chữ lớn và việc sử dụng màu trắng có chủ ý/có chủ ý cho phép bạn đưa người dùng hoàn toàn đắm chìm vào quá trình tương tác, làm cho quá trình tương tác trở nên rõ ràng và dễ hiểu hơn.

6. Hành động chính

Hành động của người dùng là bản chất của thiết kế. Các hành động chính biến đổi toàn bộ thiết kế. Chúng tập trung vào chức năng cốt lõi và ngay lập tức thu hút sự chú ý của người dùng.

7. Người dùng bắt đầu thay đổi

Những thay đổi trong giao diện xảy ra do hành động của người dùng. Chuyển động nâng cao trải nghiệm của hành động chính.

8. Vũ đạo hoạt hình

Mọi hành động diễn ra trong môi trường thống nhất. Các đối tượng mà người dùng nhìn thấy không làm gián đoạn phần còn lại của trải nghiệm người dùng, ngay cả sau khi chuyển đổi và sắp xếp lại.

9. Chuyển động mang lại ý nghĩa

Chuyển động có ý nghĩa và cần thiết để thu hút sự chú ý. Chuyển tiếp có hiệu quả.

Thiết kế là nghệ thuật sáng tạo. Mục tiêu của chúng tôi là đáp ứng nhiều nhu cầu đa dạng của con người. Khi những nhu cầu này phát triển thì các thiết kế, ý tưởng và triết lý của chúng ta cũng phải phát triển theo.

Chúng tôi đã đặt ra cho mình mục tiêu - tạo ra một ngôn ngữ trực quan cho người dùng sẽ kết hợp các nguyên tắc quen thuộc thiết kế cổ điển với sự đổi mới.

Điều gì sẽ xảy ra nếu tuổi thơ của một người dành để nghe những bộ phim trong đó máy tính thông minh hơn chắc chắn sẽ giết chết toàn bộ nhân loại, và khi anh ta lớn lên một chút, chính người này sẽ đọc về NSA và những nhân vật phản diện khác, những người đọc tin nhắn SMS của anh ta suốt ngày đêm và gửi chúng đến Mỹ? Anh ta sẽ cảnh giác với Google.

Cách đây không lâu, Good Corporation đã cho thế giới thấy tầm nhìn của mình giao diện người dùng tương lai. Material Design là một khái niệm thống nhất để xây dựng logic vận hành và hình thức của các dịch vụ và ứng dụng, thống nhất mọi thứ sản phẩm của Googleđể làm cho chúng trở nên dễ dàng và trực quan nhất có thể đối với người dùng.

Ý tưởng này lớn đến mức nó sẽ biến đổi không chỉ diện mạo của tất cả các sản phẩm của Google. Với việc sắp tới khái niệm mới Vai trò của chính công ty trong cuộc sống của mọi người sẽ thay đổi.

Google sẽ trở thành gì?

Đúng, hiện tại Google chỉ là một loạt các dịch vụ. Tuy nhiên, với thiết kế vật liệu, công ty thực sự đang tạo ra thực tế thứ hai bên trong máy tính và thiết bị di động của chúng ta. Với logic riêng của nó, với các quy tắc và định luật riêng, với vật lý riêng của nó.

Khi bạn tạo ra những thứ vật chất, bạn rút ra được kinh nghiệm hàng ngàn năm của con người. Nhưng thiết kế phần mềm chỉ mới ở giai đoạn sơ khai. Chúng tôi xem xét tất cả phần mềm của mình và tự hỏi, nó được làm từ gì? John Wiley, Trưởng nhóm thiết kế tìm kiếm của Google

Bây giờ họ là gì? dịch vụ của Google cho mọi người? Đây có phải là thanh tìm kiếm nằm trong trình duyệt không? Hay đó là thiết bị di động Android của bạn?

Google có thể được định nghĩa theo nhiều cách và nhiều cách trong số đó sẽ đúng. Công ty này đã tạo ra một hệ thống dịch vụ trở thành nền tảng cho cơ sở hạ tầng kỹ thuật số của chúng tôi.

Nhưng trong tương lai gần tương lai của Google sẽ không còn được coi đơn giản là Chrome hay Android nữa.

Các dịch vụ và sản phẩm riêng lẻ của Google đang phát triển thành một kênh thông tin, nơi dữ liệu liên quan đến con người chỉ xuất hiện trên màn hình mong muốn vào đúng thời điểm.

Khi bạn nhìn đồng hồ khi đang đứng ở ga xe lửa, bạn sẽ thấy trên màn hình thời gian đến của chuyến tàu tiếp theo. Tuy nhiên, chiếc đồng hồ này sẽ cảnh báo bạn về một lá thư quan trọng từ ban quản lý nếu bạn nhìn thấy nó tại nơi làm việc. Đồng hồ này sẽ thay thế mật khẩu của bạn để đăng nhập vào tài khoản trên máy tính, màn hình sẽ hiển thị ngay nội dung của máy tính đó lá thư quan trọng từ ông chủ. Bạn có cần phải đi gấp và không có thời gian để hoàn thành nội dung câu trả lời? Không vấn đề gì, vì điện thoại thông minh hoặc máy tính bảng của bạn đã mở giao diện thư với văn bản in được một nửa và thậm chí con trỏ vẫn ở vị trí bạn đã dừng lại.

Ngày làm việc kết thúc và bạn sẽ về nhà. Các màn hình giống nhau hiện thực hiện các chức năng hoàn toàn khác nhau. Họ sẽ nhắc bạn đón con, mua đồ tạp hóa cho bữa tối và thông báo cho bạn khi bạn rời đi loạt phim mới loạt phim yêu thích.

Một loạt các chức năng và nhiệm vụ được thực hiện đáng kinh ngạc như vậy sẽ hoạt động trong một giao diện trực quan duy nhất. thân thiện với người dùng môi trường số, từng bước hòa nhập với thế giới thực.

Một trong ý tưởng chủ chốt Thiết kế Vật liệu là tạo ra trải nghiệm trực quan để người dùng làm việc với các vật thể thực trong môi trường kỹ thuật số. Về cơ bản, đây là sự mô phỏng không gian ba chiều trên mặt phẳng màn hình, nhưng với tất cả những lợi thế mà nó có thể mang lại. Môi trường ảo. Các nút và cửa sổ ở đây, tương tự như những tấm bìa cứng, có thể to ra và co lại, tách ra và tự sắp xếp lại.

Điều ấn tượng nhất về khái niệm này là các thuộc tính và hành vi của các vật thể trên màn hình sẽ dễ đoán và dễ hiểu đối với con người như bất kỳ sự kiện đơn giản nào trong thế giới vật chất. Không giống như các giao diện hiện có, trong đó việc nhấn nút không gây ra bất kỳ thay đổi nào đối với phần còn lại của màn hình, bất kỳ hành động nào trong Android L đều gây ra hiệu ứng tương ứng ảnh hưởng đến toàn bộ giao diện. Chạm vào một ngày cụ thể trên lịch và nó sẽ tăng lên, đẩy khối lượng và khối lượng ngày càng tăng của những ngày còn lại. Nhấn nút phát trong trình phát và nó sẽ mở ra giống như một gói kẹo trong bảng điều khiển.

Khái niệm này là kết quả nghiên cứu cẩn thận của công ty về cách hoạt động của giấy trong thực tế. Nhóm làm việc trong dự án đã tạo ra các biểu tượng ứng dụng vật lý từ giấy thật. Họ muốn xem ánh sáng và bóng tối có thể tương tác như thế nào với một vật liệu phẳng (như màn hình) nhưng thực.

Ngược lại, môi trường ảo cho phép bạn phá vỡ các quy tắc. Chắc hẳn chưa ai từng thấy giấy bị chia thành nhiều phần, các mảnh được sắp xếp lại và hợp nhất lại thành một vật thể duy nhất. Điều này mang lại Tính năng bổ sung, nhưng có nguy cơ tạo ra một hệ thống quá phi thực tế, quá xa rời các định luật vật lý. Để duy trì tính trực quan tự nhiên, tất cả kiểu chữ, hình ảnh và màu sắc đều bị loại bỏ trong quá trình phát triển. Nhóm nghiên cứu chỉ tập trung hoàn toàn vào việc thực hiện bài báo thần kỳ.

Bạn không cần phải là nhà thiết kế mới có thể phát hiện hành vi vi phạm quy tắc trong thế giới thực. Tờ giấy có rơi xuống bàn như một tảng đá không? Rõ ràng là có điều gì đó không ổn ở đây và bất cứ ai cũng sẽ hiểu rõ điều đó.

Dựa trên những luật lệ rõ ràng và dễ hiểu như vậy đối với mọi người, Nhóm Google quyết định sử dụng thế giới thực làm cơ sở cho các khái niệm của họ.

Nếu có một hệ thống quy tắc đủ rõ ràng thì có thể bổ sung thêm các tài liệu mới. Tờ giấy đã sự lựa chọn rõ ràng do sự đơn giản của việc hiển thị trên màn hình. Không có kết cấu rõ rệt, thực tế không có khối lượng. Nhưng hãy thử tưởng tượng, chẳng hạn như vải hoặc chất lỏng.

Triết lý về chủ nghĩa đa dạng mà Apple đã tích cực sử dụng và cuối cùng đã từ bỏ ngay lập tức xuất hiện trong đầu bạn phải không? Cách tiếp cận của Apple cũng nhằm mục đích làm cho thế giới kỹ thuật số trở nên thân thiện hơn với người dùng, nhưng so với Quyết định của Google nó trông khá hời hợt. Tính đa hình của Apple chỉ ám chỉ sự giống nhau của ứng dụng với phiên bản đời thực của nó.

Google không chỉ muốn đưa ra một số phép loại suy để có được nhận thức tốt hơn. Mục tiêu của họ là giải thích cho người dùng điều gì sẽ xảy ra khi một thành phần giao diện cụ thể xuất hiện hoặc biến mất khỏi màn hình.

Material Design không chỉ là nỗ lực tạo ra các dịch vụ được thiết kế giống hệt nhau cho các thiết bị khác nhau. Google đang tạo ra một thế giới song song, mỗi hạt trong đó là một mảnh vật chất nào đó. Khi bạn nhận được tin nhắn trên đồng hồ thông minh từ điện thoại thông minh, bạn không chỉ thấy một đoạn văn bản chết. Đó là một miếng bìa cứng có chứa thông điệp trên đó và thông điệp đó được gửi từ điện thoại thông minh đến cổ tay của bạn.

Sự tương tác thế giới kỹ thuật số hoàn toàn có thể những cách khác. Nó có thể là một cái gì đó hình tròn trên cổ tay của chúng ta hoặc một cái gì đó hình chữ nhật trong tay chúng ta. Material Design nhằm mục đích đảm bảo rằng quyền truy cập vào dữ liệu có liên quan và phù hợp được đảm bảo, bất kể sự kết hợp của các thiết bị mà một người sử dụng.

Đây là cách mà không bị áp đặt hay áp lực, công ty chỉ đơn giản tạo ra các công nghệ dựa trên nguyên tắc then chốt “tập trung vào người dùng và mọi thứ khác sẽ tự đến”.

Chúng tôi quan tâm đến ý kiến ​​​​của bạn. Bạn có coi khái niệm như vậy là xấu xa hay bạn coi những sáng kiến ​​​​đó là một cách tương tác đầy hứa hẹn với môi trường thông tin trong tương lai?

Phong cách “phẳng” đang là xu hướng hiện nay, không ai phủ nhận điều này. Tôi đã phát triển một trò chơi nhỏ được khoảng ba tháng và quyết định sử dụng thiết kế “phẳng” làm phong cách, bởi vì... nó phổ biến nhất hiện nay và cũng rất dễ “sao chép” (từ “vẽ” không phù hợp ở đây, vì tôi là lập trình viên và tôi không biết vẽ gì cả =)). Đó là lý do tại sao tôi quyết định đăng bộ sưu tập Material Design của mình từ Google mà tôi đã thu thập được khi đang phát triển trò chơi mới của mình.

Để bạn hiểu ý chúng tôi Chúng ta đang nói về, đây là một đoạn video ngắn:

Tất nhiên, tài liệu quan trọng nhất để bắt đầu học Thiết kế Vật liệu là hướng dẫn từ Google. Có rất nhiều ví dụ về cách “nên” và cách “không”, đồng thời cũng có các mã nguồn (dành cho Photoshop, v.v.) trong đó bạn có thể tìm hiểu sâu hơn và tìm hiểu xem đó là gì.

Đây là một trang web tốt khác với sự lựa chọn hàng ngày về các khái niệm, ứng dụng, v.v. được thực hiện theo phong cách Material Design - Material Design Daily. Có rất nhiều ví dụ hoạt hình, một số chỉ khiến bạn nghĩ “làm sao cái này có thể được phát minh ra?” Trong một từ - tôi khuyên bạn nên nó.

Một vài lời đáng nói về việc lựa chọn màu sắc trong Material Design. Đây có lẽ là một trong những thành phần chính của thiết kế tốt. Dưới đây là một số trang web sẽ giúp bạn thực hiện điều này: Màu sắc giao diện người dùng phẳng, Pallete vật liệu.