Sự khác biệt giữa phong cách phẳng và phong cách thiết kế vật liệu của thành phố là gì?


20

Sau khi Windows 8 xuất hiện, tất cả đã nói về "Giao diện người dùng Metro" và sau đó là về "Thiết kế phẳng". Bây giờ, sau khi Android Lollipop ra mắt, tất cả đều nói về "Thiết kế vật liệu". Ai đó có thể giải thích sự khác biệt giữa "Thiết kế vật liệu" và "Phong cách phẳng" không?

Câu trả lời:


20

Thiết kế vật liệu không liên quan đến thiết kế phẳng trong các nguyên tắc của nó. Thiết kế vật liệu không đồng nhất ở chỗ nó là một nỗ lực để làm cho thiết kế web trở nên thực tế hơn trong cách nó mô tả các yếu tố, sử dụng các lớp và hoạt hình theo cách có ý nghĩa bên ngoài trình duyệt. Hiện tại thiết kế phẳng và thiết kế vật liệu tương tự nhau, nhưng thiết kế vật liệu có thể được áp dụng cho các thiết kế khác với thiết kế giống như phẳng.

Nó tuân theo 3 nguyên tắc

  1. Vật chất là phép ẩn dụ
  2. Hãy mạnh dạn, đồ họa, có chủ ý
  3. Cung cấp ý nghĩa với chuyển động

Phân lớp trong thiết kế vật liệu được thực hiện thông qua các yếu tố di chuyển tiến hoặc lùi dọc theo trục z, đến và từ người dùng và thêm bóng thực tế để truyền đạt ý nghĩa hơn. Các yếu tố hoạt hình, chẳng hạn như có một vị trí ảnh hưởng đến hoạt hình khi một mục danh sách bị xóa, có nghĩa là để cải thiện lưu lượng và sự hiểu biết của người dùng trong khi làm cho trải nghiệm mượt mà hơn. Khi làm như vậy, nhiều ý nghĩa có thể được miêu tả thông qua thiết kế vật liệu hơn là thiết kế phẳng


Các nhà thiết kế của Google đã tạo ra các mô hình giấy để tìm ra lớp và bóng cho thiết kế vật liệu của họ.

Có các hướng dẫn thiết kế khác bao gồm khoảng cách, màu sắc, tính khả dụng và chi tiết hơn về định vị và hoạt hình mà bạn có thể xem trong trang web của Google về chủ đề này .

Một cách tốt để tìm hiểu thêm về thiết kế vật liệu và cách triển khai là sử dụng các ứng dụng mà Google đã tạo bằng thiết kế vật liệu và để đọc về các chi tiết thiết kế , đây là của Brian Lovin trên ứng dụng Hộp thư đến.

Mọi người có thể cho rằng thiết kế vật liệu là một loại mở rộng của thiết kế phẳng, nhưng trên thực tế các nguyên tắc là khác nhau. Xu hướng hiện nay là tạo ra thiết kế phẳng, giống như hiện tại mà Google sử dụng, nhưng các nguyên tắc thiết kế vật liệu vượt qua các giới hạn đó và cũng có thể được áp dụng cho các phương pháp thiết kế khác.


Trong Thiết kế Vật liệu đó, về mặt trực quan, sử dụng rất nhiều biểu tượng và kiểu dáng thiết kế phẳng, tôi muốn nói rằng chúng chắc chắn có liên quan theo nghĩa đó. Thiết kế Vật liệu, tất nhiên, nhiều hơn cái nhìn trực quan như bạn chỉ ra, mặc dù.
DA01

@ DA01 Cảm ơn, tôi đã cố gắng làm rõ quan điểm của mình trong lần chỉnh sửa gần đây nhất
Zach Saucier

Về một lưu ý liên quan, bài viết này rất phù hợp để so sánh iOS với Thiết kế Vật liệu và tìm hiểu thêm về từng loại.
Zach Saucier

5

Thiết kế phẳng = một thuật ngữ chung để chỉ thẩm mỹ UI hiện đại hợp thời trang của các biểu tượng phẳng khối và khối màu.

Thiết kế Metro = Thiết kế giao diện người dùng mới của Microsoft (hiện được gọi là ngôn ngữ thiết kế của Microsoft ) cho Windows 8 sử dụng thẩm mỹ thiết kế trực quan phẳng .

Thiết kế Vật liệu = Google thiết kế giao diện người dùng mới cho Android sử dụng thiết kế thẩm mỹ trực quan thiết kế phẳng .

(Lưu ý rằng cả Metro và Vật liệu không chỉ đơn thuần là về thẩm mỹ thiết kế phẳng. Họ cũng nói về thiết kế tương tác, dòng chảy, thư viện mẫu, v.v.)

Cảm ơn Johannes đã lưu ý thay đổi tên cho UI của Microsoft.


Tôi không nghĩ rằng điều này đi sâu vào chi tiết về những gì họ thực sự . Nó dường như là nhiều hơn những gì họ đang sử dụng trên
Zach Saucier

@ZachSaucier đúng. OP đã hỏi chủ yếu về sự khác biệt. Tôi muốn nói rằng sự khác biệt là một là một thuật ngữ chung cho phong cách trực quan, hai cái còn lại là các thuật ngữ cụ thể cho các nguyên tắc UI có thương hiệu.
DA01

1
@ DA01, chỉ muốn chỉ ra rằng UI của Microsoft đã không được đặt tên là Metro kể từ năm 2012. Nó được gọi là nguồn "Ngôn ngữ thiết kế của Microsoft" . Tôi nhận ra rằng câu hỏi của OP cũng đề cập đến nó bằng tên này nhưng điều đó không chính xác.
Hanna

@Johannes vâng, đó là một lưu ý tốt.
DA01

Thiết kế Vật liệu có thể được sử dụng không chỉ với Android mà còn thiết kế ứng dụng Web & Thiết kế ứng dụng Máy tính để bàn.
vovahost 8/03/2015

3

Thiết kế vật liệu không bằng phẳng, đó là một loạt các "vật liệu" phẳng được đặt cách nhau một chút trên trục Z. Điều này có nghĩa là những vật thể này có bóng và được cho là đến từ một nơi nào đó khi chúng xuất hiện trên màn hình và rời khỏi nơi nào đó khi không cần thiết nữa. Điều đó có nghĩa là chúng không chỉ mờ dần trong và ngoài.

Ngoài ra còn có một loạt các hướng dẫn thiết kế chỉ định màu sắc, khoảng cách và nhiều khía cạnh khác trong bố cục của bạn.

Dưới đây là một số trong số họ, nhưng bạn có thể tìm thấy nhiều hơn với một vài tìm kiếm google.

http://www.google.com/design/spec/m vật liệu-design / int sinhtion.html #


-1

"Thiết kế phẳng" là như họ đã giải thích cho bạn ở đó, và thiết kế "Thiết kế Vật liệu" không thực sự là "đa dạng" mà là "Thiết kế phẳng Skeuom định hình". "Thiết kế Vật liệu" sử dụng vật phẳng và căn chỉnh theo trục Z để có "Thiết kế phẳng 3D". Tôi hy vọng nó đã giúp.


-2

Trên thực tế, thiết kế phẳng sẽ xuất hiện đơn giản hơn trên nền tảng của vật liệu, bên cạnh đó, tất cả các hình ảnh động này đều nhắm nhiều hơn vào sự tương tác của người dùng với thiết bị di động, thay vì với trang web. Ngoài ra, không ai cấm sử dụng hai cách tiếp cận này trong một sản phẩm, nếu tiếp cận công việc trên thiết kế một cách có ý thức và triết học hơn. Đối với tính đa dạng, nó đã cố gắng đưa các yếu tố của giao diện theo một cách thân thiện hơn, thân thiện hơn với người dùng: cách vật thể này hoặc vật thể đó trông như thế nào trong thế giới thực, nhưng nhiều người có quan điểm khác nhau về những thứ xung quanh, do đó, tạo ra một thứ duy nhất Phong cách tiếp cận như vậy gần như không thể. Một số thông tin cần thêm Sự khác biệt: Thiết kế phẳng so với Thiết kế Vật liệu

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.