Piękne wdrożenia Material Design w aplikacjach mobilnych

Wiele osób w dzisiejszych czasach szuka inspiracji w pięknych wdrożeniach Material Design w aplikacjach mobilnych.

Tak, Material Design pojawił się i zmienił historię projektowania, aw ciągu ostatnich dwóch lat był dość popularny w projektowaniu aplikacji mobilnych i istnieje wiele pięknych wdrożeń Material Design w aplikacjach mobilnych.

Ale zanim to nastąpi, zrozummy, czym jest Material Design i dlaczego stał się najpopularniejszym i odnoszącym sukcesy językiem projektowania.

Czym jest projektowanie materiałów?

Material Design to język projektowania opracowany w 2014 roku przez Google. Rozwijając motywy „karty”, które zadebiutowały w Google Now, Material Design w bardziej liberalny sposób wykorzystuje układy oparte na siatce, responsywne animacje i przejścia, dopełnienie i efekty głębi, takie jak oświetlenie i cienie.

Od 2015 r. większość aplikacji mobilnych Google na Androida wykorzystywała nowy język projektowania, w tym Gmail, YouTube, Dysk Google, Dokumenty, Arkusze i Prezentacje Google, Mapy Google, Inbox.

Wszystkie aplikacje sygnowane marką Google Play oraz w mniejszym stopniu przeglądarka Chrome i Google Keep. Zawierają go również komputerowe interfejsy internetowe Dysku Google, Dokumentów, Arkuszy, Prezentacji i Skrzynki odbiorczej.

Kanoniczna implementacja Material Design dla interfejsów użytkownika aplikacji internetowych nosi nazwę Polymer.

Składa się z biblioteki Polymer, podkładki, która zapewnia interfejs API Web Components dla przeglądarek, które nie implementują standardu natywnie, oraz katalogu elementów, w tym „kolekcji elementów papierowych”, która zawiera wizualne elementy Material Design.

System, który koncentruje się na układach opartych na siatce, efektach przejścia i głębi, wkrótce trafił do aplikacji na Androida i doprowadził system do standardu projektowania iOS.

Zasady projektowania materiałów

Inspiracje wizualne

Google używa terminu „rzeczywistość dotykowa”, aby opisać swoją filozofię projektowania, ponieważ powierzchnie i krawędzie w projektowaniu materiałów są inspirowane prawdziwymi studiami nad papierem i tuszem.

Pomaga to użytkownikom wizualnie zrozumieć interfejs cyfrowy na ich ekranie bez żadnych trudności. Design osadzony w rzeczywistości sprawia, że ​​obiekty na ekranie są rozpoznawalne i łatwe w interakcji.

Odważna estetyka

Wybór kolorów w projektowaniu materiałów jest odważny i przemyślany. Przyciągające wzrok schematy kolorów współpracują z podstawowymi technikami projektowania opartymi na druku, aby zanurzyć użytkownika w doświadczeniu.

Celowe odstępy, obrazy od krawędzi do krawędzi i duża typografia służą do położenia nacisku na działania użytkownika. W ten sposób użytkownik szybko rozumie cel i funkcjonalność interfejsu na swoim ekranie.

Powiązany post: Najczęstsze błędy w projektowaniu aplikacji mobilnych

Znaczenie stworzone przez ruch

Zamiast sztucznych i mechanicznych animacji ruch w material designie wydaje się płynny i naturalny. Google zaleca zrobienie tego na kilka różnych sposobów:

• Naturalne przyspieszanie i zwalnianie: aby uniknąć nienaturalnego ruchu, elementy na stronie powinny płynnie przyspieszać i zwalniać. Nagłe ruszanie, zatrzymanie i zmiany kierunku są drażniące i rozpraszające użytkownika.
• Ciągłość wizualna: przejście między dwoma stanami wizualnymi powinno być płynne i bez wysiłku, aby użytkownik nie był zboczony z drogi. Zbyt wiele dzwonków i gwizdów, gdy strona internetowa lub aplikacja przechodzi z jednej strony na drugą, jest niepotrzebnych.
• Hierarchiczny timing: elementy, które zawierają najważniejszą treść, należy uwydatnić, umieszczając je na najłatwiejszej ścieżce, którą może podążać oko. Innymi słowy, ważne jest zwrócenie uwagi na ważne elementy.
• Spójna choreografia: animowane elementy nie powinny przechodzić losowo, ponieważ może to rozpraszać. Zamiast tego powinni podążać uporządkowanymi ścieżkami, które mają sens.

Material Design nie tylko tworzy porządek, tworzy porządek mający cel i znaczenie. To zmysłowy wyraz marki Google.

Jeśli znajdzie zakup, może być pierwszym poważnym zagrożeniem dla pozornego monopolu Apple na wysublimowane wrażenia użytkownika. Jako wielbiciel iPhone'a muszę przyznać, że po raz pierwszy zacząłem rzucać z ukosa spojrzenia w kierunku Androida.

Paraliżująca umysł specyfika Material Design jest odpowiedzią na dwa fakty:

• Jeśli deweloper może zrujnować interfejs użytkownika, to zrobią.
• Alternatywą dla dobrego projektu nie jest brak projektu, to zły projekt.

Oto niektóre z najpiękniejszych implementacji Material Design w aplikacjach mobilnych.

Kto może lepiej wdrożyć Material Design niż ci, którzy go stworzyli. Kalendarz Google to jedna z najpiękniejszych implementacji Material Design w aplikacjach mobilnych. Z ponad 1 000 000 pobrań z pewnością rozkręci imprezę.

kalendarz Google

Na początek, aplikacja Google w końcu zrezygnowała z konwencjonalnego skeuomorficznego projektu, którego używa większość aplikacji kalendarza, który naśladuje układ fizycznego planera.

Nie ma już ograniczeń związanych z koniecznością spisania naszego harmonogramu na papierze. Kalendarz Google ma układ pionowy i umieszcza bieżący dzień na górze strony.

W ten sposób widzisz tylko nadchodzące dni i wydarzenia. Dni, w których nic się nie dzieje, są skondensowane, co dodatkowo usprawnia wrażenia, aby pokazać tylko to, co jest naprawdę przydatne.

Ta pojedyncza zmiana w interfejsie jednocześnie pozwala użytkownikowi pozostać w centrum doświadczenia, dzięki czemu interfejs użytkownika porusza się wokół niego. Wrzuć trochę przewijania paralaksy i masz naprawdę świetnie wyglądającą aplikację, która się łączy.

Evernote

Evernote jest często chwalony za podejście do projektowania materiałów i jest przyciągającym wzrok przykładem pięknych implementacji Material Design w aplikacjach mobilnych

Aplikacja ma silną i spójną kolorystykę i jest równie dobrze zaprojektowana, jak i funkcjonalna. Ikony wyraźnie i skutecznie oznaczają, czy jest to notatka tekstowa, odręczna notatka czy zdjęcie, które zamierzasz zrobić.

Ikona słonia jest prosta i elegancka, a strona internetowa, aplikacje na iOS i Windows 10 są równie przemyślane i rozplanowane.

Zdrowie firmy Microsoft

Microsoft Health jest w rzeczywistości jednym z najlepszych przykładów w Sklepie Play.

Aplikacja została zaprojektowana do współpracy z urządzeniem do monitorowania kondycji Band i wyświetla wszystkie statystyki w prostym układzie pionowym wraz z płaskimi białymi ikonami. Po kliknięciu jednego z tych nagłówków panel „otworzy się”, aby wyświetlić statystyki.

Interfejs użytkownika doskonale nadaje się do szybkiego przeglądania, a w razie potrzeby umożliwia zagłębienie się w głąb, co jest cechą charakterystyczną dobrego projektowania aplikacji.

Fantastyczny: motywuj mnie

Wiele osób uważa, że ​​Fabulous: Motivate Me to najbardziej precyzyjna i przemyślana implementacja Material design w aplikacjach mobilnych.

Aplikacja bada nowe zasady projektowania materiałów na wszystkie normalne sposoby dzięki wyraźnym, płaskim obrazom i odważnym kolorom, ale ma też jedne z najbardziej atrakcyjnych animacji w Sklepie Play.

Lista nie byłaby kompletna bez aplikacji mobilnej Facebook Live.

Aplikacja jest bardzo minimalistycznym, ale skutecznym przykładem Material Design. Używa cieniowania w sposób, który nie jest zwykle widoczny; używając jasnych cieni zamiast ciemnych, aby zapewnić głębię.

Ciekawie wykorzystuje ikonografię, animację i projektowanie interakcji – kluczowe aspekty Materiału.