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”?
Jaka jest różnica między „płaskim stylem” a „materiałowym designem”?
Odpowiedzi:
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
- Materiał to metafora
- Bądź odważny, graficzny, celowy
- 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.
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
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.
Nie sądzę, żeby to w wystarczającym stopniu odzwierciedlało to, czym naprawdę są . 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
@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
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#
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