Jaka jest różnica między „płaskim stylem” a „materiałowym designem”?

20

Po wydaniu systemu Windows 8 wszyscy mówili o „Metro UI”, a później o „Płaskim projekcie”. Teraz, kiedy pojawił się Android Lollipop, wszyscy mówią o „Material design”. Czy ktoś może wyjaśnić różnicę między „materiałem konstrukcyjnym” a „stylem płaskim”?

użytkownik3631654
źródło

Odpowiedzi:

20

Projektowanie materiałowe w swoich zasadach nie ma związku z projektowaniem płaskim. Projektowanie materiałów jest skeuomorficzne , ponieważ jest próbą uczynienia projektowania stron bardziej realistycznym w sposobie, w jaki przedstawia elementy, przy użyciu warstw i animacji w sposób, który ma sens poza przeglądarką. Wizualnie płaska konstrukcja i materiał są w tej chwili podobne, ale materiał można zastosować do projektów innych niż płaskie.

Kieruje się 3 zasadami

  1. Materiał to metafora
  2. Bądź odważny, graficzny, celowy
  3. Nadaj sens ruchowi

Nakładanie warstw w projektowaniu materiału odbywa się poprzez przesuwanie elementów do przodu lub do tyłu wzdłuż osi Z, do i od użytkownika, oraz dodawanie realistycznych cieni, aby przekazać więcej znaczenia. Elementy animacyjne, takie jak animacja wpływająca na pozycję po usunięciu elementu listy, mają na celu usprawnić przepływ i zrozumienie użytkownika, a jednocześnie sprawić, by wrażenia były płynniejsze. Czyniąc to, można projektować więcej znaczenia poprzez projektowanie materiałów niż w projektach płaskich


Projektanci Google stworzyli modele papierowe, aby dowiedzieć się, jakie są warstwy i cienie.

Istnieją inne wytyczne dotyczące projektowania dotyczące odstępów, kolorów, użyteczności i więcej szczegółów na temat pozycjonowania i animacji, które można sprawdzić na stronie Google na ten temat .

Dobrym sposobem, aby dowiedzieć się więcej o projektowaniu materiałów i o tym, jak je wdrożyć, jest skorzystanie z aplikacji stworzonych przez Google za pomocą projektowania materiałów i przeczytanie szczegółów projektu , to jest autorstwa Briana Lovina w aplikacji Inbox.

Ludzie mogą założyć, że projektowanie materiałów jest swego rodzaju przedłużeniem płaskiego projektu, ale w rzeczywistości zasady są różne. Obecny trend polega na tworzeniu czystego, płaskiego projektu, z którego korzysta obecnie Google, ale zasady projektowania materiałów wykraczają poza te granice i mogą być stosowane również do innych metod projektowania.

Zach Saucier
źródło
W tym projekcie materiałowym wizualnie wykorzystuje wiele płaskich ikon i stylów, powiedziałbym, że są one z pewnością powiązane w tym sensie. Material Design to oczywiście coś więcej niż tylko wizualny wygląd, o którym wspominasz.
DA01
@ DA01 Dzięki, starałem się wyjaśnić swój punkt widzenia w najnowszej edycji
Zach Saucier
W powiązanej notatce ten artykuł jest świetny do porównywania iOS z Material Design i zdobywania dodatkowych informacji o każdym z nich.
Zach Saucier
5

Płaska konstrukcja = ogólny termin odnoszący się do modnej nowoczesnej estetyki interfejsu użytkownika blokowych płaskich ikon i bloków kolorów.

Metro Design = nowy projekt interfejsu użytkownika Microsoft (obecnie nazywany językiem projektowania Microsoft ) dla systemu Windows 8, który wykorzystuje płaską konstrukcję wizualną.

Material Design = nowy projekt interfejsu użytkownika Google dla Androida, który wykorzystuje płaską estetykę wizualną.

(Zauważ, że zarówno Metro, jak i Materiał to znacznie więcej niż tylko estetyka płaskiego projektu. Mówią także o projekcie interakcji, przepływach, bibliotekach wzorców itp.)

Dziękujemy Johannesowi za odnotowanie zmiany nazwy interfejsu użytkownika Microsoft.

DA01
źródło
Nie sądzę, żeby to w wystarczającym stopniu odzwierciedlało to, czym naprawdę . Wydaje się, że jest to bardziej użyteczne
Zach Saucier,
@ZachSaucier prawo. OP pytał głównie o różnicę. Powiedziałbym, że różnica polega na tym, że jeden jest ogólnym terminem określającym styl wizualny, a pozostałe dwa są specyficznymi terminami dla markowych wytycznych interfejsu użytkownika.
DA01
1
@ DA01, chcę tylko zaznaczyć, że interfejs użytkownika Microsoftu nie nosi nazwy Metro od 2012 r. Zamiast tego jest nazywany źródłem „Microsoft design language” . Zdaję sobie sprawę, że pytanie OP również wspomniało to pod tą nazwą, ale to nieprawda.
Hanna
@Johannes tak, to dobra uwaga.
DA01
Material Design może być używany nie tylko z Androidem, ale także do projektowania stron internetowych i aplikacji komputerowych.
vovahost
3

Konstrukcja materiału nie jest płaska, to wiązka płaskich warstw „materiału”, które są nieco rozstawione na osi Z. Oznacza to, że te obiekty mają cienie i powinny skądś przyjść, gdy pojawią się na ekranie, i odejść gdzieś, gdy nie są już potrzebne. Co oznacza, że ​​nie tylko znikają.

Istnieje również szereg wskazówek projektowych, które określają kolor, odstępy i wiele innych aspektów twojego układu.

Oto niektóre z nich, ale możesz znaleźć znacznie więcej za pomocą kilku wyszukiwań w Google.

http://www.google.com/design/spec/material-design/introduction.html#

Zach Saucier
źródło
-1

„Płaska konstrukcja” jest tak, jak to tam wyjaśnili, a „Material Design” nie jest tak naprawdę „skeuomorficzny”, ale „Skeuomorphed Flat Design”. W „Material Design” używaj płaskich rzeczy i ustaw je w osi Z, aby uzyskać „3D Flat Design”. Mam nadzieję, że to pomogło.

luharanu
źródło
-2

W rzeczywistości płaska konstrukcja wydaje się bardziej uproszczona na tle materiału, poza tym wszystkie te animacje mają bardziej na celu interakcję użytkownika z urządzeniami mobilnymi niż z witryną. Ponadto nikt nie zabrania stosowania tych dwóch podejść w jednym produkcie, jeśli podejdzie do pracy nad projektem bardziej świadomie i filozoficznie. Jeśli chodzi o skeuomorfizm, próbował on przybliżyć elementy interfejsu w bardziej znany, przyjazny dla użytkownika sposób: jak ten lub inny obiekt wyglądałby w prawdziwym świecie, ale wiele osób ma różne poglądy na otaczające rzeczy, więc stworzenie jednego styl takiego podejścia był prawie niemożliwy… Kilka informacji do dodania. Jaka jest różnica: Płaska konstrukcja vs. Material Design

Jim
źródło