Wygląd materiału. Wskazówki dotyczące projektowania materiałów

Co się stanie, jeśli dana osoba spędzi swoje dzieciństwo na słuchaniu filmów, w których mądrzejsze komputery nieuchronnie zabijają całą ludzkość, a kiedy trochę podrośnie, ta sama osoba przeczyta o NSA i innych złoczyńcach, którzy przez całą dobę czytają jego SMS-y i wysyłają je Do USA? Będzie uważał na Google.

Nie tak dawno temu Good Corporation pokazała światu swoją wizję interfejsy użytkownika przyszły. Material Design to ujednolicona koncepcja konstruowania logiki działania i wyglądu usług i aplikacji, ujednolicająca wszystkie produkty Google tak, aby były jak najłatwiejsze i intuicyjne w odbiorze dla użytkowników.

Pomysł jest na tyle duży, że odmieni nie tylko wygląd wszystkich produktów Google. Wraz z pojawieniem się nowej koncepcji zmieni się rola samej firmy w życiu ludzi.

Czym stanie się Google?

Tak, na razie Google to tylko zbiór usług. Jednak dzięki Material Design firma tak naprawdę tworzy drugą rzeczywistość wewnątrz naszych komputerów i urządzeń mobilnych. Z własną logiką, z własnymi zasadami i prawami, z własną fizyką.

Tworząc rzeczy fizyczne, czerpiesz z tysięcy lat ludzkiego doświadczenia. Ale projektowanie oprogramowania jest dopiero w powijakach. Przyjrzeliśmy się wszystkiemu, co mieliśmy oprogramowanie i zadaliśmy sobie pytanie, z czego jest zrobiony? John Wiley, kierownik projektu wyszukiwarki Google

Czym są teraz? Usługi Google'a dla ludzi? Czy jest to pasek wyszukiwania znajdujący się w przeglądarce? A może to Twoje urządzenie mobilne z Androidem?

Google można definiować na wiele sposobów i wiele z nich będzie prawdziwych. Firma ta stworzyła system usług, który stał się fundamentem naszej infrastruktury cyfrowej.

Ale w najbliższej przyszłości Przyszłość Google'a nie będzie już postrzegany po prostu jako Chrome lub Android.

Poszczególne usługi i produkty Google ewoluują w kierunku jednego kanału informacyjnego, w którym po prostu pojawiają się istotne dla danej osoby dane żądany ekran we właściwym czasie.

Kiedy spojrzysz na zegarek, stojąc na stacji kolejowej, zobaczysz na ekranie godzinę przyjazdu następnego pociągu. Jednak ten sam zegarek zasygnalizuje Ci ważny list od kierownictwa, jeśli spojrzysz na niego w pracy. Ten zegarek zastąpi Twoje hasło do logowania się do Twojego konto na komputerze, na którego ekranie od razu wyświetli się treść ważnego listu od szefa. Musisz pilnie wyjechać i nie masz czasu na dokończenie tekstu odpowiedzi? Nie ma problemu, ponieważ Twój smartfon lub tablet otworzył już interfejs poczty z w połowie wydrukowanym tekstem, a nawet kursor znajduje się w miejscu, w którym przerwałeś.

Dzień pracy dobiegł końca i wracasz do domu. Te same ekrany pełnią teraz zupełnie inne funkcje. Przypomną Ci o odbiorze dzieci, zrobieniu zakupów na obiad i powiadomią Cię o wyjściu Nowa seria ulubiony serial.

Tak niesamowita różnorodność wykonywanych funkcji i zadań będzie działać w jednym intuicyjnym przyjazny użytkownikowiśrodowisku cyfrowym, stopniowo łączącym się ze światem rzeczywistym.

Jedną z kluczowych idei Material Design jest stworzenie dla użytkownika intuicyjnego wrażenia podczas pracy z prawdziwymi obiektami fizycznymi w środowisku cyfrowym. Zasadniczo jest to emulacja trójwymiarowej przestrzeni na płaszczyźnie ekranu, ale ze wszystkimi zaletami, jakie może zapewnić środowisko wirtualne. Przyciski i okienka, podobnie jak kartonowe karty, mogą rosnąć i kurczyć się, rozpadać i przestawiać.

Najbardziej imponującą rzeczą w tej koncepcji jest to, że właściwości i zachowanie obiektów na ekranie będą tak samo przewidywalne i zrozumiałe dla ludzi, jak każde proste zdarzenie w świecie fizycznym. W przeciwieństwie do istniejących interfejsów, gdzie naciśnięcie przycisku nie powoduje żadnych zmian w pozostałej części ekranu, każda akcja w Androidzie L powoduje odpowiedni efekt, który wpływa na cały interfejs. Stuknij w konkretny dzień w kalendarzu, a on wzrośnie, wypychając pozostałe dni swoją rosnącą objętością i masą. Naciśnij przycisk odtwarzania w odtwarzaczu, a odtwarzacz rozłoży się jak opakowanie cukierka na panelu sterowania.

Koncepcja ta jest wynikiem dokładnych badań firmy nad tym, jak papier sprawdza się w rzeczywistości. Zespół pracujący nad projektem stworzył fizyczne ikony aplikacji z prawdziwego papieru. Chcieli zobaczyć, jak światło i cień mogą oddziaływać na płaski (jak ekran), ale prawdziwy materiał.

Środowisko wirtualne pozwala z kolei łamać zasady. Jest mało prawdopodobne, aby ktokolwiek widział, jak papier rozpada się na części, których kawałki układają się ponownie i ponownie łączą w jeden obiekt. To daje dodatkowe funkcje, ale istnieje ryzyko stworzenia systemu zbyt nierealistycznego, zbyt odległego od praw fizycznych. Aby zachować naturalną intuicyjność, w procesie tworzenia aplikacji odrzucono wszelką typografię, obrazy i kolory. Zespół skupił się wyłącznie na wykonaniu cudownego papieru.

Nie musisz być projektantem, aby dostrzec naruszenie zasad w świecie rzeczywistym. Czy papier spada na stół jak kamień? Oczywiście coś tu jest nie tak i dla każdego będzie to jasne.

Opierając się na tak oczywistych i zrozumiałych dla wszystkich prawach, zespół Google'a postanowił wykorzystać realny świat jako podstawę swoich koncepcji.

Jeśli istnieje wystarczająco jasny system zasad, możliwe staje się dodawanie nowych materiałów. Papier był oczywistym wyborem ze względu na łatwość wyświetlania na ekranie. Brak wyraźnej tekstury, praktycznie brak objętości. Ale spróbuj wyobrazić sobie na przykład tkaninę lub płyny.

Od razu przychodzi na myśl filozofia skeuomorfizmu, z której Apple aktywnie korzystał, a ostatecznie ją porzucił, prawda? Podejście Apple również miało na celu uczynienie cyfrowego świata bardziej przyjaznym dla użytkownika, ale w porównaniu z Google wydaje się to raczej powierzchowne. Skeuomorfizm Apple’a jedynie sugerował podobieństwo aplikacji do jej prawdziwego odpowiednika.

Google nie chce po prostu narysować analogii dla lepszej percepcji. Ich celem jest wyjaśnienie użytkownikom, co się dzieje, gdy dany element interfejsu pojawia się lub znika z ekranu.

Material Design to nie tylko próba stworzenia identycznie zaprojektowanych usług dla różne urządzenia. Google tworzy świat równoległy, którego każda cząstka jest fragmentem czegoś materialnego. Kiedy na smartwatchu otrzymasz wiadomość ze smartfona, nie widzisz tylko martwego fragmentu tekstu. To kawałek kartonu z wiadomością, która trafia ze smartfona na nadgarstek.

Interakcja cyfrowy świat być może w zupełnie inny sposób. Może to być coś okrągłego na nadgarstku lub coś prostokątnego w dłoni. Material Design ma na celu zapewnienie dostępu do odpowiednich i istotnych danych, niezależnie od kombinacji urządzeń, z których korzysta dana osoba.

W ten sposób, bez narzucania i nacisków, firma po prostu tworzy technologie w oparciu o kluczową zasadę „skoncentruj się na użytkowniku, a wszystko inne przyjdzie samo”.

Jesteśmy ciekawi Twojej opinii. Czy uważacie taką koncepcję za złą, czy też takie inicjatywy postrzegacie jako obiecujący sposób interakcji? środowisko informacyjne w przyszłości?

W naszym dzisiejszym artykule poruszymy temat, który nie był jeszcze poruszany na temat Rusability. Gwoli ścisłości, zauważamy, że w RuNet jako takim zainteresowanie tym tematem dopiero zaczyna nabierać tempa, mimo że sama koncepcja narodziła się w zeszłym roku. Mówimy o rewelacyjnym i, jak niektórzy uważają, rewolucyjnym kierunku projektowania, który Google nazwał material design.

Material design to nie tyle nowe podejście do budowania relacji pomiędzy użytkownikiem a środowiskiem wirtualnym, co raczej cała filozofia regulująca te relacje. Podobnie jak wiele naprawdę jasnych i świeżych zjawisk ostatnich czasów, material design jest udaną kompilacją pomysłów i koncepcji, które albo już spotkały się osobno w różnych produktach, albo, jak mówią, wisiały w powietrzu. Wciąż toczą się dyskusje na temat tego, czy material design to dobry kierunek, a także skrupulatne i skrupulatne poszukiwanie wszelkiego rodzaju niedociągnięć, ale chyba nikt nie zaprzecza, że ​​koncepcja ta jest bardzo trafnym odzwierciedleniem ducha czasu i aspiracji współczesnego świata. zwykli użytkownicy. Jest estetycznie wykonany, atrakcyjny, intuicyjny i najwyraźniej bardzo łatwy w obsłudze. „Projektowanie materiałów jest fajne” – ten rodzaj emocji jednoczy zarówno entuzjastyczną publiczność, jak i bardziej krytyczną, wskazując na wady projektowania materiałów.

Material design można postrzegać jako pierwszy poważny i dość przewidywalny krok w kierunku masowej unifikacji interfejsów, a co za tym idzie, ujednolicenia doświadczenia użytkownika jako takiego. Cecha ta jest kluczowa w projektowaniu materiałów – jest uniwersalna i jednolita. Jako sekunda cecha charakterystyczna W projektowaniu materiałów należy postawić na intuicyjność, która jest kolejnym najważniejszym aspektem po kompleksowej unifikacji. Tak naprawdę te dwa elementy – ujednolicenie interfejsów i maksymalna intuicyjność – mają za zadanie sprawić, że projektowanie materiałów stanie się zjawiskiem prawdziwie masowym.

25 czerwca 2014 r. firma Google zaprezentowała publicznie projekt materiałów jako projekt nowego system operacyjny Androida, który później stał się znany jako Lollipop. Pełne wykorzystanie material designu możliwe jest jedynie w ramach tworzenia aplikacji dla Lollipopa, jednak niektóre aplikacje na Androida 4 można też przeprojektować w stylu materialnym, jednak z pewnymi ograniczeniami. Głównym i prawdopodobnie jedynym czynnikiem znacząco ograniczającym swobodę twórców aplikacji dla Lollipopa jest słaba kompatybilność koncepcji Material Design z wcześniejszymi Wersje Androida a Android 5.1 Lollipop nadal nie jest powszechnie stosowany. W każdym razie wyeliminowanie ostatniej wady jest tylko kwestią czasu.

Android Lizak

Wydanie koncepcji Material Design wiązało się z pojawieniem się koncepcji szczegółowej, przystępnej i dokładnej wytyczne Google. Gdy w naszym artykule będziemy omawiać projektowanie materiałów, będziemy regularnie odwoływać się do tego obszernego i ciekawego przewodnika opracowanego przez projektantów Google.

Główne punkty i podstawowe zasady Wygląd materiału

Cała filozofia projektowania materiałów opiera się na czterech podstawowych i zrozumiałych zasadach:

  1. Powierzchnie. Powierzchnie te, urzeczywistnione w formie kart utworzonych z „papieru cyfrowego”, całkowicie podlegają prawom świata fizycznego, reagują dotykowo i zapewniają silne sprzężenie zwrotne przy dużej intuicyjności.
  2. Drukowanie typografii. Zamiast wymyślać koło na nowo, dlaczego nie skorzystać z ponad stuletniego doświadczenia w dziedzinie poligrafii? Biorąc pod uwagę, że oryginalna powierzchnia jest teraz reprezentowana przez warstwy wirtualnego, praktycznie namacalnego papieru, logiczne jest nałożenie na nią informacji zgodnie z najlepszymi próbkami produkty poligraficzne. Mówiąc bardziej przesadnie, Google zaadaptował zasady „prawdziwej” typografii na ekrany urządzeń mobilnych.
  3. Animacja. Animacja w material designie musi podporządkować się prawom fizyki, a co za tym idzie, intuicyjnym oczekiwaniom użytkownika. Relacje poruszających się obiektów, ich wzajemne oddziaływanie, sposób w jaki się pojawiają i poruszają – wszystko to musi być realne, logiczne i przewidywalne.
  4. Projekt adaptacyjny. Bardzo główny aspekt, o którym mówiliśmy na początku artykułu. Responsywny projekt ma na celu ujednolicenie doświadczenia użytkownika i zapewnienie jego spójności na wszystkich platformach.

Łącząc te dość proste i oczywiste zasady, Google stworzył potężny i wybitnie logiczny system, z którego prawdopodobnie będziemy korzystać w takiej czy innej formie przez co najmniej następne pięć lat. Przyjrzyjmy się bliżej każdemu z czterech aspektów projektowania materiałów.

Powierzchnie, ich właściwości i funkcje

Sama materialność koncepcji Google'a koncentruje się we właściwościach powierzchni. Sama konstrukcja interfejsu jest jak najbardziej realistyczna – posiada głębokość ograniczoną grubością urządzenia. Na przykład urządzenie o grubości 1 cm zgodnie z projektem materiału będzie zawierać świat wewnętrzny o tej samej grubości. Jest to bardzo podobne do cienkiego akwarium, które ma tylną ścianę i przednią szybę, ale zamiast życia morskiego unoszącego się wokół tego akwarium, to akwarium ma powierzchnie przypominające kawałki papieru i rozmieszczone warstwami na całej grubości akwarium. I podobnie jak podwodni mieszkańcy, te powierzchnie kart całkowicie podlegają prawom fizyki – czasami wydaje się, że są one więcej niż rzeczywiste, zamknięte pomiędzy tylną ścianką smartfona a szkłem wyświetlacza.

Przekrojowy projekt materiału

OśZna świeciemateriał projekt odpowiedzialny za głośność interfejsu

W świecie projektowania materiałów powierzchnie istnieją na różnych poziomach głębokości. A jeśli w płaskiej konstrukcji, która jest jednym z poprzedników materiału, nie było śladu objętości, to w materialnej konstrukcji prawie niezauważalne, jasne cienie tworzą niesamowicie realistyczną głębię.

Jak wyświetlać cienie w Material Design

Wyobraź sobie, że na Twoim biurku leżą kawałki zwykłego papieru, pocięte w kształt prostokątów o różnej wielkości. Przesuwając je po powierzchni stołu i nakładając na siebie, wyraźnie zobaczysz, która karta papierowa znajduje się nad drugą. Dzieje się tak na skutek lekkiego cienia rzucanego przez krawędzie papieru. W projektowaniu materiałów twórcy całkowicie odtworzyli tę zasadę i rozkład kart „cyfrowego papieru”. różne poziomy, gdy jedna karta zachodzi na drugą, w pełni odpowiada hierarchii treści – powierzchnia znajdująca się nad drugą i rzucająca na nią cień jest obecnie powierzchnią główną, na niej skupia się uwaga użytkownika.

Powierzchnia priorytetowa wysuwa się na pierwszy plan, rzucając cień na dolny „liść”

Sama powierzchnia jest tak naprawdę płaszczyzną o określonym kształcie (w większości przypadków prostokątnym), która może rzucać cień. Powierzchnia służy jako platforma dla treści, czysta kartka papieru, na której później pojawią się inne elementy. W projektowaniu materiałów nie ma na myśli nic więcej niż powierzchnia – kawałki „papieru cyfrowego” nie mają i nie mogą mieć żadnych przejść teksturowych ani gradientowych.

Cechy typografii w Material Design

Jak już wspomnieliśmy, typografia w material designie jest tak samo „prawdziwa” jak powierzchnie. Oznacza to, że wykorzystuje wszystkie zasady i podejścia, jakie stosowane są w druku. W przykładach zaprezentowanych przez Google można znaleźć najlepsze przykłady klasycznej typografii w wirtualnym wykonaniu.

Przykłady typografiiwygląd materiału

Czcionki

Czcionka standardowa, przez długi czas używany w Androidzie - Roboto. Nowy system operacyjny Lollipop i Material Design również używają jej jako głównej czcionki. Oprócz Roboto aplikacje na Androida mogą wykorzystywać także czcionkę Noto, przeznaczoną dla tych języków, które nie mają własnych wersji Roboto. Pomimo ogólnego stylu aplikacji na Androida i zaleceń dotyczących czcionek podanych w wytycznych, w niektórych przypadkach całkiem dopuszczalne jest użycie własnej, autorskiej czcionki zamiast Roboto, zaprojektowanej tak, aby wywoływała odpowiednie skojarzenia u użytkownika.

CzcionkaRoboto

Jedną z najbardziej zauważalnych cech typograficznych w projektowaniu materiałów jest użycie kontrastujących rozmiarów czcionek. Ten technika klasyczna widać na wielu przykładach z Google – nagłówki na ekranach są pisane bardzo dużą czcionką i dzięki temu wyraźnie wyróżniają się na tle reszty tekstu. W pewnym stopniu, dzięki dużym, widocznym z daleka nagłówkom, użytkownik może łatwo poruszać się pomiędzy ekranami aplikacji i szybko uchwycić istotę bieżących treści. Oprócz tego nagłówki w tym formacie wyglądają naprawdę fajnie.

Typografia o wysokim kontraście w akcji

Układ treści lub zasada układu wmateriał projekt

Sposób umieszczenia treści w koncepcji Material Design odpowiada także zasadom projektowania druku. Głównym i kształtującym styl elementem wirtualnego układu w projektowaniu materiałów jest lokalizacja pól. Marginesy i wypełnienia zostały tak rozmieszczone, aby uwaga użytkownika skupiła się na treści znajdującej się pośrodku kolumny głównej, a łatwy i szybki dostęp do dodatkowych elementów umożliwił szeroki lewy margines. Podobną zasadę można zaobserwować na łamach wielu publikacji drukowanych.

Struktura i układ pól w projektowaniu materiałów

Ikony

Ikonografia stosowana w material designie stanowi logiczne rozwinięcie idei maksymalnego uproszczenia, którą można było zobaczyć m.in. wcześniejsze wersje Android. Google opisuje ikony materiałów jako proste, przejrzyste i przyjazne. Jednocześnie idea materialności może dotyczyć także ikon – sam Google konsekwentnie ucieleśnia ideę materialności w ikonach swoich produktów. Na przykład ikona Gmaila na papierowej kopercie pochodzi od jej prawdziwego odpowiednika. W środowisku projektowania materiałów uproszczony obraz koperty wydaje się prawie tak realny jak „prawdziwy” prototyp — na ikonie widoczne są charakterystyczne cienie reprezentujące krzywizny i fizyczną strukturę kartki papieru złożonej w kształt koperty.

Wirtualny prototyp koperty papierowej i gotowa ikonaGmaila

Warto zauważyć, że materialne podejście do tworzenia ikon jest dozwolone tylko w przypadku tych ikon, które symbolizują konkretny produkt, np. Gmail. Inne, ikony systemowe (lub ikony interfejsu użytkownika) wypełniające aplikacje, mają mniej materialny charakter. Są naprawdę minimalne, jednolite i proste. Ze względu na swoją prostotę i symbolikę są czytelne nawet po znacznym zmniejszeniu. W ikonach tych dominują kształty geometryczne.

IkonyAndroid Lizak– czy może być coś bardziej minimalistycznego i prostego?

Dla programistów Google oferuje imponujący zestaw ikon wykonanych w stylu Material Design. W tej kolekcji można znaleźć być może wszelkie ikony niezbędne do tworzenia aplikacji z projektowaniem materiałów. Zestaw ikon projektowania materiałów firmy Google jest dostępny w GitHub. Wspomnę także o zasobach materialdesignicons.com, gdzie można znaleźć nie tylko ikony innych autorów, ale także zaoferować te, które sam opracowałeś.

Filozofia koloru

W nowym projekcie Lollipop kolor odgrywa większą rolę niż w poprzednich wersjach Androida. Nawet w tym aspekcie projektu zauważalna jest materialność, o której mówimy w całym artykule. Sam Google osobno manifestuje nową politykę kolorystyczną, zwracając uwagę na takie źródła inspiracji, jak nowoczesna architektura, znaki drogowe a nawet taśmy do oznakowania chodników. Jednocześnie jasne, stworzone przez człowieka kombinacje kolorów w projektowaniu materiałów współistnieją z naturalnymi, stonowanymi naturalnymi odcieniami. Pod wieloma względami podejście to jest ponownie zgodne z kanonami drukarskimi, zgodnie z którymi kolor ma szczególny wpływ na odbiór informacji przez czytelnika.

Główną ideą pracy z kolorem w projektowaniu materiałów jest podział odcieni na odcienie główne i akcentujące. Google sugeruje użycie 500 różnych odcieni jako kolorów podstawowych, które razem tworzą paletę podstawową. Wszystkie inne kolory nie zawarte w tej palecie mogą być użyte jako kolory akcentujące.

Przykłady kolorów podstawowych zPodstawowypalety i powiązane kolory akcentujące (pokazane w dolnych blokach, z oznaczenie literowe Jak "A" przed numerem odcienia)

Podczas rozwoju Interfejs Google'a sugeruje ograniczenie się do maksymalnie trzech kolorów z palety głównej i jednego koloru akcentującego. Kolory podstawowe nanoszone są na elementy takie jak pasek akcji, a także (podobnie jak w przypadku bieli) nanoszone na powierzchnię zawierającą główną treść tekstową. Warto zauważyć, że kolorując pasek akcji aplikacji jednym z kolorów, musimy pokolorować pasek stanu ciemniejszym odcieniem tego samego koloru:

Status barnabiera kolorudziałanie bar, ale nadal wyróżnia się bogatszym, ciemniejszym odcieniem

Do tworzenia akcentów używa się naprawdę jasnych i przyciągających wzrok kolorów w materiale design. Takich akcentów kolorystycznych potrzebują aktywne elementy aplikacji, przede wszystkim oczywiście pływający przycisk akcji. Oprócz tego konieczne jest pomalowanie różnych suwaków i przełączników w jasnych kolorach akcentujących.

Aktywne elementy, takie jak pływający przycisk i suwaki, są bardzo intuicyjne, w dużej mierze dzięki zastosowaniu akcentujących kolorów, które zachęcają użytkownika do działania.

Animacja

Suprematystyczny Ruch Kwadratowy, Kazimierz Malewicz (1920) iZnaczący Ruch, Google Materiał Projekt (2014)

Animacja w material designie to jeden z jego najciekawszych aspektów. To właśnie dzięki szczegółowej animacji, zgodnej z prawami fizyki realnego świata, urządzenia z Androidem 5 na pokładzie tak wciągają i sprawiają, że użytkownik ma ochotę majstrować przy nich godzinami, szczególnie na początku po ich poznaniu. Funkcjonalnym celem animacji w projektowaniu materiałów jest ciągłe pokazywanie użytkownikowi konsekwencji jego działań. Animacja przyciąga wzrok i wyraźnie, wymownie pokazuje użytkownikowi, co dokładnie dzieje się w danym momencie.

Podobnie jak wszystkie inne elementy projektowania materiałów, animacja podlegająca prawom fizycznym nie jest czymś zasadniczo nowym – twórcy po prostu dostosowali zasady klasycznej animacji do wirtualnego środowiska systemu operacyjnego.

Podstawą animacji Material Design jest interakcja płaszczyzn, kawałków „cyfrowego papieru”, o których mówiliśmy wcześniej. Te płaszczyzny, poruszające się na różnych poziomach w swoim świecie, ograniczonym tylną ścianą smartfona i szkłem ekranu, mogą się spotykać, przemieszczać i przesuwać, na polecenie użytkownika wysuwać się na pierwszy plan, powiększając się i wypełniając ekran.

Podobnie jak w klasycznej animacji, wszystkie ruchy płaszczyzn regulowane są ścisłymi regułami, dzięki czemu dokładnie symulowany jest ruch powierzchni w świecie rzeczywistym.

Po pierwsze, wszelkie obiekty w prawdziwym świecie mają masę, a zatem pewien opór. Aby poruszyć obiekt, należy przyłożyć do niego siłę. W tym przypadku obiekt (w naszym przypadku powierzchnia) nie zacznie się poruszać od razu – ze względu na swoją masę i opór będzie przez pewien czas przyspieszał, a następnie po zakończeniu głównego ruchu spowodowanego przyłożeniem siły, będzie również zwalniał przez pewien czas, poruszając się dzięki bezwładności. Stosując te proste prawa, otrzymujemy interfejs z niezwykle realistycznymi ruchami powierzchni.

Ruchome powierzchnie mają zdolność naturalnego poruszania się, zapewniając przewidywalny opór ruchu

Przeniesienie warstwy „papier cyfrowy” w galerii

Po drugie, material design bardzo skutecznie wskazuje pojawienie się lub odejście nowego obiektu z ekranu. Podobnie jak w prawdziwym świecie, w środowisku materialnego projektowania przedmioty nie pojawiają się znikąd i nie idą donikąd. W Lollipop OS pojawienie się nowego obiektu na pierwszym planie wiąże się z ciekawymi metamorfozami – obiekt bowiem nie pojawia się nagle znikąd, lecz wysuwa się, stopniowo rozciągając i przybierając kształt powierzchni. W tym przypadku nie ma mowy o poszanowaniu proporcji, gdyż proporcjonalne i symetryczne zwiększanie lub zmniejszanie powierzchni będzie sprawiało wrażenie zbliżania się lub oddalania, podczas gdy my będziemy musieli wskazać pojawienie się na ekranie nowego kawałka „papieru cyfrowego” , izolowany i niezależny.

Aby zrealizować ten efekt pojawienia się nowego obiektu, projektowanie materiałów oferuje dwa podejścia o różnym stopniu oczywistości. Najbardziej wyraziste i jednoznaczne wskazanie pojawienia się nowej powierzchni realizowane jest za pomocą rosnącej kropli – po dotknięciu palcem i wywołaniu obiektu powierzchnia zaczyna rozprzestrzeniać się po ekranie niczym fala.

Rozlewająca się kropla tworząca nową powierzchnię roboczą to jeden z najbardziej wizualnych efektów w projektowaniu materiałów.

Efekt rozłożonej powierzchni może być bardzo elegancki i kolorowy.

Innym sposobem pokazania użytkownikowi zasady przejść jest asymetryczne, nierównomierne powiększenie prostokątnej powierzchni spowodowane przez użytkownika. Prostokąt powierzchniowy jest nieproporcjonalnie rozciągany przed akwizycją podana forma. Technika ta pozwala przyciągnąć uwagę użytkownika aktywnym, nieliniowym ruchem i zwrócić jego uwagę na zasadę pojawiania się nowych powierzchni.

Przykład animacji podstawowych ikon wAndroid Lizak

WszechobecnyMarszczyć-Efekt

Kolejnym zjawiskiem jest efekt Ripple, czyli falowy ruch cieni w miejscach, w których palec dotyka ekranu urządzenia. ważny aspekt informacja zwrotna. W Lollipop efekt Ripple jest stosowany niemal wszędzie. Dotykając interfejsu nowego systemu operacyjnego, fale w większości przypadków się rozchodzą, czy to naciśnięcie przycisku, czy przeglądanie galerii zdjęć. Z technicznego punktu widzenia, gdy tylko system otrzyma informację wejściową (dotknie palcem wyświetlacza), system natychmiast potwierdza przyjęcie tej informacji poprzez falowe rozprzestrzenianie się „cyfrowego atramentu”.

Marszczyć-efekt pojawiający się po szybkim dotknięciu ekranu palcem

Marszczyć-efekt pojawiający się przy próbie przeniesienia obrazu wewnątrz galerii

Techniczny aspekt animacjimateriał projekt lub koperta naturalna

Jak już powiedzieliśmy, w świecie rzeczywistym, aby wyprowadzić obiekt ze stanu spoczynku, należy przyłożyć do niego siłę, przy czym główną fazę ruchu obiektu poprzedzi jego przyspieszenie, podobnie jak całkowite zatrzymanie będzie poprzedzone hamowaniem. Stale wchodząc w interakcję ze światem materialnym jesteśmy przyzwyczajeni do tego stanu rzeczy, dlatego wszelkie inne sposoby poruszania obiektów, takie jak natychmiastowe przyspieszenie i gwałtowne zatrzymanie bez bezwładności, wydają nam się nienaturalne, dziwne i często irytujące. Biorąc ten aspekt pod uwagę, twórcy material designu ciężko pracowali nad „fizyką” animacji, maksymalnie przybliżając ją do prawdziwego życia.

W środowisku material designu obiekty wyprowadzone ze stanu spoczynku szybko (ale nie natychmiast!) przyspieszają i delikatnie, powoli zwalniają. Interakcja z tym rodzajem ruchu i animacji jest przyjemna, ponieważ odpowiada naszym doświadczeniom ze światem rzeczywistym.

Wykres ruchu animowanych obiektów: szybkie przyspieszenie i płynne hamowanie

Projekt adaptacyjny

Najważniejszy, kluczowy aspekt projektowania materiałów. Filozofia projektowania materiałów zakłada całkowitą unifikację doświadczenia użytkownika. Innymi słowy, podczas korzystania użytkownik nie powinien mieć do czynienia z różnymi wersjami tej samej aplikacji różne gadżety. Doświadczenie użytkownika powinno być takie samo na komputerze stacjonarnym, smartfonie lub tablecie. Jedyne dopuszczalne i obiektywne różnice to różne rozmiary i proporcje elementów interfejsu aplikacji. Wszystko inne różne wersje jedna aplikacja powinna stworzyć całkowicie identyczne doświadczenie użytkownika.

Google jako jeden z pierwszych zdał sobie sprawę z konieczności ujednolicenia i opracowania jednolitego doświadczenia użytkownika. W praktyce realizacja ta przerodziła się w tzw. Projekt Kennedy'ego, kiedy w 2011 roku firma rozpoczęła prace nad jednym typem interfejsu dla wszystkich swoich aplikacji. Pod względem estetyki i UX Google osiągnął jednak dobre wyniki pomiędzy wersją desktopową a mobilną swoich produktów, Sterowanie Androidem nadal istniała prawdziwa przepaść. Właściwie samo projektowanie materiałów jest kolejną po projekcie Kennedy'ego próbą stworzenia prawdziwie ujednoliconego interfejsu.

Wizualna prostota materiału pozwoliła nam opracować szereg zasad i metod, które ułatwiają adaptację aplikacji tworzonych w stylu Material Design na różne platformy.

Po pierwsze, aplikacje wykonane zgodnie z koncepcją Material Design mają strukturę blokową. Analizując interfejs takich aplikacji widać, że charakteryzuje się on przejrzystym rozmieszczeniem bloków wzdłuż siatki modułowej. Zamiast urozmaiconego, nie zawsze oczywistego i zagmatwanego projektu interfejsu, otrzymujemy swego rodzaju konstruktor, którego poszczególne części można stosunkowo łatwo przenosić i dostosowywać do konkretnego wyświetlacza.

Siatka modułowa i bloki rozproszone

Dzięki blokom, z których każdy ma obiektywny limit rozszerzania lub kompresji, możemy sprawić, że interfejs aplikacji będzie bardzo czytelny i łatwy w obsłudze na każdym ekranie. To właśnie ze względu na swobodę rozszerzania i kurczenia się, każdy blok aplikacyjny ma ten materiał, który zapewnia naprawdę skuteczne narzędzie do całkowitej unifikacji interfejsów różnych produktów programowych.

Interfejs zaprojektowany zgodnie z założeniamimateriał projekt, uniwersalny dla każdego ekranu

Po drugie, dostosowanie interfejsu aplikacji do różnych urządzeń wiąże się z ilością informacji wyświetlanych na ekranie. Oczywiście im mniejszy ekran, tym mniej szczegółowych informacji możemy na nim zaprezentować. W takim przypadku zmuszeni jesteśmy przenieść część treści na osobne ekrany lub ukryć ją za sobą dodatkowe elementy– Ta praktyka jest szczególnie typowa w przypadku aplikacji przystosowanych do smartfonów.

Elementy

Pływający przycisk w wersji normalnej lub mini

Ruchomy działanie przycisk. Pływający przycisk to jeden z najbardziej charakterystycznych i rozpoznawalnych elementów material designu. To jest to, co użytkownik zauważa jako pierwszy. Pływający przycisk to bardzo dobry sposób na popchnięcie użytkownika do jakiejś kluczowej akcji; za jego pomocą osoba szybko uzyskuje dostęp do tych funkcji, które są dla niej w danym momencie najbardziej istotne. Przycisk pojawia się zazwyczaj w różnych miejscach ekranu i choć najczęściej znajduje się w dolnym rogu, to można go umieścić w dowolnym miejscu ekranu.

Należy pamiętać, że pływający przycisk można skojarzyć jedynie z kluczową, główną akcją wykonywaną w konkretnej aplikacji. Na przykład w menedżer plików pływający przycisk może oznaczać dodanie plików lub utworzenie nowego folderu w komunikatorze lub aplikacji pocztowej - utworzenie nowej wiadomości lub listu, w sieć społeczna– zaznacz „lubię to” i tak dalej. Główna akcja jest zawsze powiązana z pływającym przyciskiem, chociaż istnieją pewne ograniczenia.

Nie każdy ekran potrzebuje pływającego przycisku. Niektóre czynności można łatwiej wykonać, wchodząc w bezpośrednią interakcję z zawartością aplikacji. Najbardziej typowym przykładem takiego wyjątku jest galeria zdjęć. Podczas przeglądania zdjęć łatwiej jest wchodzić w bezpośrednią interakcję z obrazami, bez pośrednictwa pływającego przycisku.

Będąc w galerii, użytkownik nie potrzebuje pływającego przycisku – główną akcją jest wybieranie i przeglądanie zdjęć

Pływający przycisk zawsze ma kształt koła, rzuca mały cień i jest tym samym fragmentem „cyfrowego papieru”, co inne powierzchnie. Przycisk ma jasny akcent kolorystyczny, który nie przecina się z głównymi kolorami podstawowy paleta, dzięki czemu zawsze pozostaje głównym i najbardziej zauważalnym elementem na ekranie. Jego dominację podkreśla także jego położenie względem pozostałych warstw interfejsu – pływający przycisk znajduje się zawsze na górze i nie można na niego nakładać innych elementów aplikacji.

Pływający przycisk akcjiV działanie

To, co najlepiej charakteryzuje pływający przycisk, to fakt, że można go kojarzyć wyłącznie z pozytywnymi działaniami, takimi jak tworzenie, dodawanie czy poruszanie się w obrębie nawigacji. Kojarzenie pływającego przycisku z destrukcyjnymi lub nietypowymi działaniami – kasowaniem, regulacją głośności czy wywoływaniem menu ustawień – jest nielogiczne i psychologicznie bezpodstawne.

Działania pozytywne i negatywneRuchomy działanie przycisk

I na koniec ostatnia ważna kwestia: na ekranie może znajdować się tylko jeden pływający przycisk. Obecność kilku pływających przycisków akcji na jednym ekranie całkowicie niszczy cały sens pływającego przycisku – realizację kluczowej akcji w aplikacji.

Aplikacja barkto zastąpiłdziałanie bar

Poważnie zmienił się w porównaniu do poprzednie wersje, pasek akcji. W Androidzie Lollipop jego funkcjonalność znacznie wzrosła i teraz zaktualizowany element nazywa się paskiem aplikacji. Dzięki zmianom nowy pasek aplikacji daje użytkownikowi pełną kontrolę nad aplikacją i podobnie jak w przypadku innych aspektów projektowania materiałów, a w szczególności nowego Lollipop OS, pasek aplikacji jest w pełni intuicyjny i przejrzysty.

Pasek aplikacji nie jest ograniczony do stałego rozmiaru - teraz można go proporcjonalnie zwiększać, umieszczając całość wymagana treść oraz elementy sterujące aplikacji, takie jak menu rozwijane, filtry, formularz wyszukiwania i tak dalej.

Podstawowa wersja zaktualizowanej wersjidziałanie bar, zawierający niezbędne elementy do sterowania aplikacją

Odcienieaplikacja bar, zaproponowałGoogle

Aktualny stan rozwoju aplikacji Android Lollipop i AppCompat v21

Głównym problemem związanym z przejściem na Material Design jest słaba kompatybilność nowych interfejsów ze starszymi wersjami Androida. Wielu programistów niechętnie poświęca tę kompatybilność i z tego powodu zastosowanie aplikacji do projektowania materiałów jest nadal dość ograniczone. Taki stan rzeczy będzie się utrzymywał jeszcze przez jakiś czas, dopóki przeważająca liczba urządzeń z Androidem będzie działać na jego starszych wersjach.

Jednak programistom, którzy chcą, aby ich aplikacje były kompatybilne ze starszymi wersjami Androida, Google oferuje zestaw narzędzi umożliwiających wykorzystanie elementów Material Design w aplikacjach poprzedników Lollipopa. Na odpowiednim blogu programiści proszeni są o zapoznanie się z biblioteką AppCombat, za pomocą której można wprowadzić istotne elementy do starszych wersji Androida.

Jedną z najciekawszych funkcji jest wyposażenie aplikacji działającej pod wcześniejszymi wersjami Androida w pełnoprawny pasek aplikacji, który jest krytycznym elementem projektu Lollipopa. Wraz z nowym widżetem stare aplikacje otrzymują wszystkie zaawansowane funkcje, które odróżniają pasek aplikacji od poprzedniego paska akcji.

Widżetaplikacja bar

Krytyczne spojrzenie na projektowanie materiałów

Pomimo całej oczywistej nowości i udanego wdrożenia, projektowanie materiałów (w razie potrzeby) może mieć pewne niedociągnięcia. Chociaż, jak we wszystkich tego typu kwestiach, każdy sam decyduje, czy wymienione punkty są wadami. Warto zauważyć, że w tej chwili zwolennicy koncepcji material design nadal stanowią większość tych, którzy w dalszym ciągu aktywnie dyskutują o najnowszym pomyśle Google. Jednak bardziej sceptyczna opinia publiczna ma następujące skargi dotyczące interfejsu Lollipop.

Microsoftu Płaski Projektbyło o wiele bardziej praktyczne i skutecznemateriał projekt. Jak już powiedzieliśmy, projektowanie materiałów to nic innego jak udana kompilacja podejść i technik, które zostały już opracowane i wykorzystane przez kogoś innego. Jedną z koncepcji, która została przyjęta przez twórców projektowania materiałów, jest tak zwany „płaski projekt” firmy Microsoft. Sam pomysł porzucenia ekscesów na rzecz płaskiej przestrzeni cyfrowej pojawił się po raz pierwszy w produktach Microsoftu. Płaska konstrukcja oznaczała całkowite odrzucenie skeomorfizmu w którymkolwiek z jego przejawów. Material design to złagodzona wersja tej koncepcji, symulująca „papier cyfrowy” i „atrament cyfrowy”. Material design łączy w sobie to, co najlepsze z obu światów - płaskie i minimalistyczne przestrzenie z flat design oraz pewną animowaną objętość ze skeomorfizmu.

Microsoftu Płaska konstrukcja

Jednak nie wszyscy uważają projektowanie materiałów za środek i bardziej przyjazną wersję płaskiego projektowania. Dość bogata animacja i objętość w material designie są przez wielu użytkowników i programistów uważane za nadmiar, który odwraca uwagę użytkownika i ładuje go niepotrzebnymi informacjami wizualnymi. Projektowanie materiałów jest również obwiniane za wysokie wymagania dotyczące zasobów używanych do animacji wszystkich elementów.

Nieefektywne wykorzystanie przestrzeni ekranu, za dużo pustej przestrzeni. Obfitość słynnego „powietrza” w projektowaniu materiałów (jak np nowoczesny design ogólnie) jest przedmiotem najbardziej gorącej debaty pomiędzy projektantami, programistami i zwykłymi użytkownikami. Kwestia pustych przestrzeni we współczesnych interfejsach jest zresztą dość kontrowersyjna, gdyż stosunek do ilości wolnego miejsca na ekranie zależy przecież od indywidualnych preferencji. Wielu użytkowników chce zobaczyć wszystkie (lub większość) niezbędne informacje przed sobą, starając się nie uciekać do przewijania i odwracania. Takich użytkowników szczerze irytują duże wcięcia i przerwy między treściami, a także konieczność ciągłego przewijania. Zgrupowane treści, inteligentnie rozmieszczone na całym obszarze ekranu, to ich wybór.

Przeciwnie, inny typ użytkownika z zadowoleniem przyjmuje rzadką treść, obecność „powietrza” i czystą, wolną przestrzeń. Nie są obciążeni koniecznością korzystania z przewijania i częstszego przewracania wirtualnych stron, a obecność dużych wcięć uważają za warunek konieczny do szybkiego i łatwego podkreślania żądany element od całkowitej masy treści. Ponadto użytkownicy ci uważają „powietrze” za uzasadnione i korzystne z estetycznego punktu widzenia.

Dla przykładu porównajmy interfejs menu Ustawienia dla Androida i iOS:

Porównanie interfejsówiOSIAndroid– triumf subiektywnego postrzegania. Niektórzy użytkownicy biorą pod uwagę lokalizację treściiOSbardziej racjonalny i uzasadniony - wszystko jest pod ręką, podczas gdy wAndroidtrzeba dołączyć dodatkowy wysiłek aby znaleźć żądaną pozycję menu. Z kolei kolejna część użytkowników znajduje interfejsiOS zbyt przeciążony i trudny do zrozumienia oraz interfejsAndroid– łatwiejszy i bardziej dostępny.

Dyskusja na temat zalet i wad projektowania materiałów wciąż trwa, użytkownicy i programiści zwracają uwagę na kontrowersyjne kwestie i niedociągnięcia, a także szukają sposobów efektywne wykorzystanie koncepcje projektowania materiałów. Już w najbliższym czasie przekonamy się, jaki los czeka material design – czy pozostanie przez jakiś czas niejednoznaczną modą narzuconą nam przez giganta Google, czy stanie się po prostu kolejnym wielkim eksperymentem w dziedzinie interfejsów, czy może będzie to nowy etap, który przenosi sztukę interfejsu użytkownika na nowy poziom?

Wniosek

Jeśli planujesz poważnie zaangażować się w projektowanie materiałów i chcesz zobaczyć całą koncepcję materiału w całości, musisz przestudiować prosty, przystępny i wizualny Wytyczne Google. Mamy nadzieję, że nasza krótka recenzja stanie się dla zainteresowanych czytelników wprowadzeniem w tak obiecujący kierunek, jakim jest projektowanie materiałów. Rozumiejąc filozofię nowego projektu Google, będziesz mógł nie tylko wdrożyć swoje pomysły w tym świeżym i praktycznym formacie, ale także być może udoskonalić i ulepszyć samą koncepcję materialną, opracować własne „sztuczki” i ulepszyć związek użytkownika z interfejsem cyfrowym.

Od autora: za Ostatnio Material Design stało się dość dużym ruchem. Dziś w wielu zastosowaniach można już znaleźć różne komponenty materiał projektowy: od kart po ulepszoną animację.

Było to już omawiane wiele razy, z jednej strony jest to doskonały przykład ewolucji. Stworzenie naprawdę spójnego projektu jest łatwiejsze niż kiedykolwiek. Z drugiej strony istnieje opinia, że ​​​​w tym kierunku panuje całkowity brak oryginalności, ponieważ wszyscy używają materiałów projektowych.

W tym samouczku pokażemy, jak przyjąć koncepcje materiałów projektowych jako podstawę i wykorzystać je do stworzenia znacznie ulepszonego interfejsu, który jednocześnie znacznie wyraźniej oddaje jego istotę.

Projektowanie materiałów jako podstawa

Po pierwsze, nikt nie zabrania projektowania interfejsów z wykorzystaniem Material Design. W rzeczywistości takie podejście pomaga ustawić podstawę, fundament, do którego od dawna jesteśmy przyzwyczajeni Użytkownicy Androida.

„Kiedy chcesz stworzyć coś atrakcyjnego dla użytkownika, nie powinieneś wymyślać koła na nowo”

Stosowanie standardów jest dobrą gwarancją, że Twój projekt faktycznie zadziała. W takim przypadku nigdy nie będziesz mieć problemów ze strukturą interfejsu i jego wzajemną interakcją. Nie oznacza to jednak, że nie będziesz mieć błędów lub że nie stworzysz czegoś lepszego.

Używanie kart w projektowaniu

Cały sens Material Design sprowadza się do użycia kart. Karty są dziś z pewnością elementem, który ma zastosowanie w wielu sytuacjach, a co za tym idzie, jest niezwykle przydatne. Jednocześnie dużym wyzwaniem jest przemyślenie, jakie elementy mogłyby zastąpić karty. Coraz więcej witryn korzysta z kart treści, dlatego warto zastanowić się, czym je zastąpić.

Weźmy na przykład kalendarz. Karta wyświetla konkretne wydarzenia zamiast listy dni, podczas gdy aplikacja Sunrise wyświetla kombinację miesiąca i nadchodzących wydarzeń w tygodniu.

Po lewej: koncepcja kalendarza z wykorzystaniem Material Design; Po prawej: wschód słońca

Jeśli chcesz zainspirować się nowymi, unikalnymi interfejsami, gry są do tego idealne. Dla inspiracji możesz zajrzeć do interfejsu strony internetowej UIMovement.

„Czy karty są najlepszym rozwiązaniem do tworzenia interfejsów, czy może istnieją ciekawsze sposoby rozwiązania tego problemu?”

Każda aplikacja rozwiązuje ten problem na swój własny, unikalny sposób. Kontynuując tę ​​myśl, możemy dodać, że być może w Twoim przypadku potrzebne jest inne podejście do tworzenia interfejsu. Więc, co zrobisz? Wszystko zaczyna się od treści i menu, opowiem o tym bardziej szczegółowo poniżej.

Uważaj na pływające przyciski

Przykład pływającego przycisku w skrzynce odbiorczej Google

Kolejnym wzorcem w Material Design są pływające przyciski. Przyciski te działają świetnie i można ich użyć do dodania nowych akcji do interfejsu. Ale jednocześnie mogą być jednym z najgorszych mechanizmów w projektowaniu. Istnieje wiele sposobów nieprawidłowego użycia pływających przycisków:

Umieszczanie przycisku na ekranie wielozadaniowym

Umieszczenie menu w pływającym przycisku

Przypisz krytyczne elementy projektu do przycisku

Osobiście widzę kilka przykładów, w których pływające przyciski pasują idealnie, przede wszystkim w aplikacjach z jednym interfejsem. Innym dobrym przykładem są komunikatory internetowe, sam Uber.

Sztuka polega na tym, aby zrozumieć, czy te przyciski są potrzebne w twoim projekcie. Nie należy zakładać, że jeśli tak element standardowy projekt, będzie idealnie pasować do Twojej aplikacji. Oraz w przypadku bardziej złożonych projektów, gdzie użytkownik musi wykonać wiele różne działania, pływające przyciski nie są już odpowiednie.

Konwersja użytkowników i strategie utrzymania użytkowników w Twojej witrynie

Przy zbyt dużym entuzjazmie w dziedzinie Material Design dość łatwo zapomnieć o podstawach. Jak z góry zdecydować, których komponentów Material Design użyć i co poprawić?

„Wyraźny wybór konkretnych elementów projektu na wczesnym etapie może zamknąć Cię w pudełku”.

Poniżej stworzyłem ostateczna lista konkretne elementy, które wymagają jasnego zrozumienia tego, co z nimi następnie zrobisz.

Menu

Jakie jest najważniejsze działanie, jakie podejmuje użytkownik w mojej aplikacji?

Na jakich ekranach to się dzieje?

Jaki jest schemat blokowy mojej aplikacji?

Logicznym wnioskiem jest to, że projektując menu kieruję się dwiema zasadami.

Zasada 1: 80/20

Stosuj zasadę 80/20. 80% użytkowników będzie korzystać tylko z 20% funkcjonalności mojej aplikacji. Jak mogę dokładnie zidentyfikować te 20% i ułatwić do nich dostęp?

Zasada 2: Spójność

Jeśli istnieje wiele sposobów otwarcia określonego ekranu w aplikacji, upewnij się, że wszystkie punkty dostępu są spójne. Na przykład przejście z ekranu z krótki przegląd do bardziej szczegółowego ekranu.

W oparciu o powyższe zasady możesz zdecydować, jaki sposób poruszania się po aplikacji będzie najbardziej optymalny dla użytkowników. Jeśli masz niezwykle złożoną i zagmatwaną aplikację, odpowiednie będzie dla Ciebie przesuwane menu. Czy masz prostą usługę? Następnie możesz używać zakładek. Aby uzyskać bardziej szczegółowe informacje na temat nawigacji i Material Design, polecam przeczytać przewodnik.

Treść

Ulepszenia interfejsu

Jesteśmy teraz na etapie, w którym położyliśmy już podwaliny pod naszą aplikację i wiemy, z jakich elementów Material Design skorzystamy. Teraz czas na urozmaicenie wszystkiego. Istnieje kilka sposobów na ulepszenie interfejsu Twojej witryny, a niektóre z nich zostały przedstawione poniżej.

Typografia

Odpowiednia czcionka ma ogromny wpływ na wygląd Twojej witryny. Używając niestandardowej czcionki, możesz skutecznie ulepszyć swój projekt i nadać swojej witrynie niepowtarzalny wygląd bez niej szczególny wysiłek. Jednak wybór wymaganej czcionki nie jest zadaniem łatwym i z reguły jest to kwestia gustu. Moim ulubionym źródłem czcionek jest Typewolf.

Ikony

Najwięcej wysiłku wymaga stworzenie unikalnej, jedynej w swoim rodzaju animacji. Jednak jak fajnie jest zobaczyć jak to działa na żywo na Twojej stronie. Unikalna animacja, zbudowana w oparciu o niestandardowy i bardzo prosty interfejs, to bardzo rzadkie i cenne zjawisko, jakie można spotkać w sieci.

Unikalna kolorystyka

Aplikacja wykorzystuje koncepcję Material Design w nietypowy sposób schemat kolorów. .

Material Design posiada bardzo szeroką gamę kolorystyczną. Ale to nie znaczy, że nie możesz wymyślić czegoś własnego.

Małe ostrzeżenie

Nie bez powodu większość interfejsów, z którymi się spotykamy, ma dość prostą i prymitywną konstrukcję. Takie podejście działa i ułatwia użytkownikom poruszanie się po lekkim, bezpretensjonalnym interfejsie.

« Eksperymentalny projekt może zniszczyć Twoją witrynę”

Jednak nawet przy niewielkich zmianach, takich jak czcionka i paleta kolorów, można posunąć się dość daleko i zaprojektować własny, niepowtarzalny projekt.

Wniosek

Material Design to świetne zabezpieczenie, jeśli napotkasz problemy projektowe. Możesz sam zdecydować, jak powinien działać Twój interfejs. Snapchat ma wbudowaną logikę gestów, Facebook Paper (iOS) przeprojektował układ, hierarchię i animację, a Medium niezwykle skutecznie minimalizuje interfejs i skupia uwagę użytkowników na czytaniu (i pisaniu).

Dzisiaj porównamy dwa podobne style projektowania, z których pierwszy jest gorącym nowym produktem, a drugi stopniowo zyskuje na popularności. Pierwsza jest adaptowana spontanicznie, natomiast druga ma jasne zasady. Być może znasz walkę między nimi, która toczy się w dzisiejszych czasach.

Ale tak naprawdę, jaka jest między nimi różnica? Pod jakim względem pierwszy jest lepszy od drugiego? Który projekt najlepiej zastosować do bieżących zadań? W rzeczywistości niektórzy ludzie często zastanawiają się, ile różnic istnieje między tymi dwoma stylami projektowania. Na początek należy przypomnieć, że podstawą każdego z nich jest skeuomorfizm.

Skeuomorfizm

Skeuomorfizm to projekt, który stara się wyświetlić na ekranie rzeczy, które znamy, tak jak wyglądają w rzeczywistości. W pewnym momencie ten styl dominował w projektowaniu interfejsów.

Problem w tym, że taki sposób przedstawiania elementów nie jest do końca wygodny, choć kiedyś uważany był za sposób doskonały. A to wszystko dlatego, że kiedyś inaczej patrzyli na projektowanie.

Ostatecznie świat designu doszedł do wniosku, że trzeba usunąć wszystkie elementy dekoracyjne i pozostawić tylko to, z czym wygodnie będzie wchodzić w interakcję. Konieczne było także zmniejszenie ich objętości na większą szybkie ładowanie i skupić wzrok użytkownika na tym, co najważniejsze i podstawowe. W ten sposób usunięto wszystko, co niepotrzebne ze skeuomorfizmu, a w projekcie pojawił się nowy styl, który zaczęto nazywać płaską konstrukcją.

Płaska konstrukcja

Płaska konstrukcja jest pod wieloma względami uproszczona i zaprzecza obecności cieni, gradientów i tekstur. Ta technika pozwala skupić wzrok na ikonach, kolorach i czcionkach.

Jest to przede wszystkim styl dla urządzenia cyfrowe– jest bardzo przyjazny dla użytkownika i świetnie sobie radzi, umożliwiając użytkownikom łatwą interakcję z Twoim produktem, ponieważ usuwa wszystkie niepotrzebne rzeczy.

Płaska konstrukcja stara się skupić na łatwej interakcji z witryną. Prostota ikonografii pozwala na uproszczoną funkcjonalność, ponieważ użytkownicy mogą wchodzić w interakcję z witryną nawet za pomocą samych obrazów. Jednocześnie ich użycie przyspiesza ładowanie elementów serwisu. Dobrze się skalują, dzięki czemu wyglądają dobrze na każdym urządzeniu, niezależnie od jego rozdzielczości. W związku z tym znacznie upraszcza to zarówno projektanta, jak i użytkownika.

Plusy:

  • Ten sam wyświetlacz na wszystkich ekranach
  • Brak skeuomorfizmu pozwala przyspieszyć proces zrozumienia tego, co chciałeś przekazać użytkownikom
  • Usunięcie wszystkich zbędnych elementów pozwala na przyspieszenie działania serwisu.
  • Prostota płaskiej konstrukcji pozwala całkowicie dostosować witrynę i sprawić, że będzie responsywna

Wady:

  • Płaski projekt może być zbyt ograniczony uproszczoną kolorystyką, cieniami, ikonografią
  • Bardzo łatwo jest stworzyć stronę internetową, która będzie zbyt niewyraźna i nudna.
  • Niektóre aplikacje i strony internetowe wymagają bardziej złożonych skojarzeń wizualnych, które poprowadzą użytkownika przez korzystanie z produktu – to główna wada płaskiego projektu. Inną częstą skargą jest brak cieni i widoczności, co czasami utrudnia zrozumienie, czy element można kliknąć.
  • Jego powszechne użycie czasami nie pozwala na uczynienie interfejsu wyjątkowym
  • Brak konkretnych, stałych zasad (w przeciwieństwie do projektowania materiałów)

Wygląd materiału

Krytycy płaskiej konstrukcji twierdzą, że posunęła się ona za daleko. Wydzielenie warstwy cieniami i animowanymi elementami pozwala nam na bardziej intuicyjne zrozumienie elementów strony.

Dla tych, którzy nie wiedzieli, projektowanie materiałów zaczęło się w Google i przygotowali mały zarys strony zasady materiał projektowy. Ten styl ma niezliczone i unikalne cechy, ale być może jedną z najlepszych jest użycie osi Z. Zasadniczo dodaje to trochę skeuomorfizmu, który sprawia, że ​​dwie płaszczyzny sprawiają wrażenie, jakby „unosiły się” nad sobą.

Jest to również standard dla aplikacji na Androida. Czy należy go używać na iOS? To pytanie jest nadal aktualne gorący temat do dyskusji, choć niektórzy twierdzą, że lepiej pozostawić ten styl w ramach, w jakich jest obecnie zawarty. Cóż, każdy jak zwykle ma swoje zdanie w tej kwestii.

Plusy:

  • Trójwymiarowa przestrzeń ułatwia interakcję, np. zastosowanie cieni pozwala zrozumieć, co jest ponad czym i odpowiednio wskazuje, gdzie należy skupić wzrok użytkownika.
  • Przejrzysty zbiór zasad, który pozwala uniknąć zgadywania jak i jak ma wyglądać
  • Jeśli planujesz wykonanie strony internetowej lub aplikacji na Androida, to material design pozwala na stworzenie doskonałej marki
  • Jeśli interesujesz się animacją, to material design daje również jasny zestaw zasad jej stosowania

Wady:

  • Niezależnie od tego, czy się z tym zgadzasz, czy nie, projektowanie materiałów jest nierozerwalnie powiązane z Google, co bardzo utrudnia stworzenie unikalnej tożsamości dla Twojej witryny lub aplikacji, jeśli przestrzegasz zasad Google.
  • Nie wszystkie systemy są w stanie odtworzyć stworzoną przez Ciebie animację, co może mieć wpływ na ogólną funkcjonalność Twojego produktu
  • Animacje szybciej wyczerpują baterię
  • Jasne zasady mogą spowolnić rozwój tego stylu projektowania

Wniosek

Projektowanie materiałów nie różni się zasadniczo od projektowania płaskiego, oba są czyste i minimalistyczny. Bardziej prawdopodobne jest, że zagłosujesz na interfejs materialny, ponieważ płaska konstrukcja jest bardziej uproszczona. I chociaż animacja projektowania materiałów jest powszechnie chwalona, ​​służy ona głównie uproszczeniu interakcji z produktem. Nic jednak nie stoi na przeszkodzie, aby połączyć te dwa style.

Uważam, że witryny o płaskiej konstrukcji są bardziej praktyczne i ładują się szybciej niż witryny wypełnione animacjami i ciężką grafiką. Jeśli tworzysz stronę internetową nastawioną na prostotę, to flat design jest zdecydowanie dla Ciebie, natomiast jeśli bardziej interesuje Cię tematyka animacji, to radzę sięgnąć po material design.

Napiszcie swój wybór w komentarzach, zobaczymy kto ma więcej!

  • Instruktaż
„Czy ten nudny dialog jest naprawdę potrzebny?”


W tym artykule nakreśliłem główne zasady Material Design i udzieliłem porad, jak je wdrożyć. Tekst powstał po kursie mistrzowskim dla programistów, który my, Robots, zorganizowaliśmy wspólnie z rosyjskim biurem Google (Think Mobile).


Dawno, dawno temu wszystkie produkty Google wyglądały źle na różne sposoby. Nawet jeden produkt wyglądał niespójnie na różnych platformach.

Wszystko zaczęło się zmieniać w 2011 roku, kiedy Google zaczął ciężko pracować nad ujednoliceniem wizualnej części ekosystemu swoich produktów i nazwał to Project Kennedy.

Co ma z tym wspólnego Kennedy?

Legenda jest taka: Prezydent Kennedy zainicjował program wysłania człowieka na Księżyc (jeśli wierzyć, że taki lot w ogóle miał miejsce). A wielki szef Google, Larry Page, wyznaje zasadę, że nie ma sensu ulepszać produktów o 10% – powinny być 10 razy lepsze od produktów konkurencji. Jeśli zamierzasz wypuścić produkt na rynek, leć prosto na Księżyc. Tutaj również zdecydowano się radykalnie przerobić wszystko.



Wynik wpłynął przede wszystkim na sieć, ale także na niektóre produkty mobilne. Jednocześnie trwały osobne prace nad projektem Androida – Holo, który zastąpił niezbyt estetyczne interfejsy starego Androida.
Ale był jeden problem: Holo wciąż różniło się od Projektu Kennedy.


Użytkownicy musieli dostosować się do nowego interfejsu podczas przełączania, przyzwyczaić się do wyglądu, układu elementów sterujących i tak dalej.
Dlatego w pewnym momencie zebrała się grupa projektantów z różnych części Google i zaczęła zmagać się z tym problemem, aby raz na zawsze go rozwiązać.

W 2014 roku na konferencji I/O zaprezentowano nowy system projektowania, podejście o nazwie Material Design. Nowy system projektowania pozwala stworzyć spójne doświadczenie użytkownika na wszystkich ekranach: komputerze stacjonarnym, smartfonie, tabletach, zegarkach, telewizorach, samochodach. W przypadku aplikacji na Androida Material Design stanowi ewolucję języka wizualnego i wytycznych projektowych Holo. Pod wieloma względami jest to system bardziej elastyczny, zaprojektowany z myślą, że będą z niego korzystać inni projektanci – Google był dopiero pierwszym użytkownikiem.

Material Design pozwala przyjąć bardziej obiektywne podejście do podejmowania decyzji projektowych: jak coś wygląda, jak coś działa, jak jest wykonywana animacja i tak dalej. Ustala rozsądne granice, ale nie niepotrzebne ograniczenia.

4 zasady projektowania materiałów



Material Design opiera się na czterech głównych zasadach:
  1. Powierzchnie dotykowe. W Material Design interfejs składa się z namacalnych warstw tak zwanego „papieru cyfrowego”. Warstwy te znajdują się na różnych wysokościach i rzucają na siebie cienie, co pomaga użytkownikom lepiej zrozumieć anatomię interfejsu i sposób, w jaki z nim współdziałają.
  2. Projekt wydruku. Jeśli pomyślimy o warstwach jak o kawałkach „papieru cyfrowego”, to jeśli chodzi o „atrament cyfrowy” (wszystko, co jest przedstawione na „papierze cyfrowym”), stosuje się podejście zaczerpnięte z tradycyjnego projektowania graficznego: na przykład czasopismo i plakat projekt.
  3. Znacząca animacja. W prawdziwym świecie przedmioty nie pojawiają się znikąd i nie znikają donikąd – to zdarza się tylko w filmach. Dlatego w Material Design stale myślimy o tym, jak wykorzystać animację na warstwach i cyfrowy atrament, aby dać użytkownikom wskazówki dotyczące działania interfejsu.
  4. Projekt adaptacyjny. Chodzi o to, jak zastosujemy poprzednie trzy koncepcje różne urządzenia o różnych rozdzielczościach i rozmiarach ekranu.

Przejdźmy więc do porządku.

Powierzchnie dotykowe



Zacznijmy od powierzchni dotykowych. To te same kawałki „papieru cyfrowego”, które w odróżnieniu od zwykłego papieru mają supermoce – mogą się rozciągać, łączyć i zmieniać swój kształt. W przeciwnym razie zachowują się w pełnej zgodności z prawami fizyki i ustawodawstwem Federacji Rosyjskiej.

Powierzchnia



Co to jest powierzchnia? Zasadniczo jest to „pojemnik” z cieniem i niczym więcej. Ale to wystarczy, aby odróżnić jeden obiekt od drugiego i pokazać, jak są one umiejscowione względem siebie. Filozofia Material Design dąży do prostoty i „czystego” projektowania.

Nie ma potrzeby posuwać się za daleko i używać tekstury lub gradientów, aby zobrazować światłocień. Nie ma co nadawać wizualnych właściwości skóry jak drzwi do mieszkania babci – schludny cień może wyrazić wiele. Ale każda powierzchnia ma swoją wysokość - położenie na osi Z i każda z powierzchni rzuca cień na dół, tak jak w prawdziwym świecie.

Głębokość



W tradycyjnym „płaskim designie” unika się takich cieni jako przejawu objętości, pełnią one jednak ważną funkcję wskazywania struktury i hierarchii elementów na ekranie. Na przykład, jeśli wzniesienie elementu jest większe, wówczas jego cień jest większy. Ta zwiększona głębia pomaga skupić uwagę użytkownika na najważniejszych rzeczach i zrobić to z wdziękiem.

Głębia dostarcza również wskazówek na temat interakcji. Tutaj, gdy użytkownik przewija, zielony kafelek przykleja się do górnej warstwy i dodawany jest cień. To pokazuje, że nie tylko „atrament” się porusza, ale białe tło znajduje się poniżej i porusza się całkowicie.

Należy pamiętać, że głębokość ma „dno”. Zakłada się, że jest ona ograniczona grubością urządzenie przenośne. Oznacza to, że jeśli na smartfonie od szyby do tylnej ściany jest centymetr, a w interfejsie masz kartę kredytową, to nie możesz jej po prostu obrócić - będzie opierać się o szybę i tylną ścianę.

Uwaga!
  1. Głębia musi mieć sens. Zadaj sobie pytanie: „Dlaczego jest tak, a nie inaczej?” Jeśli nie ma odpowiedzi, warto poszukać innego rozwiązania.
  2. Zadbaj o logistykę. Pływające przyciski, paski narzędzi i okna dialogowe znajdują się na określonej wysokości. Czasami muszą poruszać się wzdłuż osi Z, aby uniknąć kolizji, gdy coś się stanie. Z tą choreografią trzeba być niezwykle ostrożnym.
  3. Nie ma potrzeby naciskania przycisku. Bardzo charakterystycznym elementem jest pływający przycisk. Wiele osób uważa, że ​​warto dodać go do interfejsu: od razu staje się to Material Design. Należy go jednak używać tylko do kluczowej akcji w aplikacji. Jeśli chcesz zamknąć okno lub potwierdzić akcję, nie musisz używać pływającego przycisku. Do tego służą inne elementy.
  4. Nie wszystko musi być na karcie. Jeśli obiekt ma wiele form i zawiera wiele różnych treści, odpowiednia jest karta. A jeśli nie, to może lepiej byłoby zrobić to za pomocą zwykłego tekstu lub listy tekstowej?
  5. Czy ten nudny dialog jest naprawdę potrzebny? Projektanci Google próbowali ulepszyć okna dialogowe, ale arkusze dolne nadal lepiej nadają się do większości zadań. Są też Snackbary. Okna dialogowe służą jedynie do zadania użytkownikowi pytania.
  6. Użyj rozwinięcia listy. Jest to wzór niedoceniany, ale jest to całkiem niezły materiał i dobrze rozwiązuje problem.

Projekt wydruku


Ponieważ w Material Design nazywamy powierzchnie „papierem cyfrowym”, wszystko, co jest na nim umieszczone – tekst, obrazy, ikony – jest drukowane „atramentem cyfrowym”. Material Design wykorzystuje klasyczne zasady projektowania druku przy projektowaniu interfejsów.

Elegancka typografia

W projektowaniu do druku typografia odgrywa fundamentalną rolę. Weź do ręki dowolne czasopismo, a zauważysz, że typografia spełnia dwie ważne funkcje. Po pierwsze, wybór i kompozycja czcionki jest elementem stylotwórczym marki publikacji. Po drugie, typografia wyznacza strukturę treści.


Na tym ekranie jest dość dużo tekstu. Ale jeśli odrzucisz ikony i zamienisz tekst w szare bloki, stanie się oczywiste, że struktura jest dość rozpoznawalna.

Mamy duży nagłówek i zestaw mniejszych elementów, które wyróżniają się nasyceniem – te ważniejsze są ciemniejsze. Jednocześnie wyraźnie rozróżniamy grupowanie ze względu na to, że niektóre prostokąty są położone blisko siebie, a pomiędzy blokami występuje znaczne wcięcie. Ogólnie rzecz biorąc, wszystko jest w najlepszych tradycjach!

Rozmiar czcionki


Strona google.com/design/spec posiada standardową paletę czcionek, z której możesz bezpiecznie korzystać. Paleta wykorzystuje czcionkę Roboto, ale można ją zastąpić własną czcionką sygnaturową, aby wesprzeć markę. Ważne jest, aby wszystko dokładnie przetestować, ponieważ renderowanie czcionek może działać inaczej na różnych urządzeniach. Zazwyczaj czcionki OTF działają lepiej niż TTF.

Kontrastowa typografia


Kolejną zasadą ze świata poligrafii, która dobrze wpisuje się w Material Design, jest kontrastująca typografia – naprawdę zauważalny kontrast pomiędzy wielkością czcionki tytułu a tekstem składu. Jest piękny i dobrze podkreśla to, co najważniejsze.

Siatka modułowa i prowadnice



Przejdźmy teraz do lokalizacji treści na ekranie. W projektowaniu druku stosuje się siatki modułowe, w projektowaniu ekranów są to bardziej podstawowe siatki o bardzo małych modułach. Zatem Material Design wykorzystuje siatkę z krokiem 8dp. DP to piksel niezależny od gęstości, jednostka podobna do jednostki punktowej w iOS.

Ale najważniejsze cecha wyróżniająca rozmieszczenie treści zgodnie z zasadami Material Design – rozmieszczenie kluczowych prowadnic. Ustawiają wcięcia od krawędzi ekranu, porządkując informacje i kontrolując wzrok użytkownika. Jeśli znasz się na projektowaniu publikacji wielostronicowych lub czytałeś Tschicholda, to prawdopodobnie wiesz dużo o siatce i marginesach oraz rozumiesz, skąd pochodzą nogi.

Tak naprawdę widzimy kolumnę tekstu pośrodku i duży margines po lewej stronie, co pozwala skupić się na głównej treści i pozostawić elementy pomocnicze na marginesach.

Ikonografia geometryczna



A skoro już o ikonografii mowa, w Androidzie już od jakiegoś czasu używane są proste ikony, jednak w Material Design stały się one jeszcze prostsze i bardziej przyjazne. W nieoficjalnych zasobach materialdesignicons.com projektanci mogą znaleźć ikony do swoich celów i wnieść swój wkład, jeśli to możliwe.

Kolor


Podobnie jak w przypadku projektowania druku, kolor jest ważnym środkiem wyrazu w projektowaniu interfejsu. W starym Androidzie kolor był czymś dodatkowym, ale teraz odgrywa bardziej znaczącą rolę. W Material Design domyślna paleta kolorów aplikacji składa się z koloru podstawowego i koloru akcentującego.

Główny jest używany do dużych obszarów, takich jak pasek akcji, a pasek stanu jest pomalowany w ciemniejszej odmianie. Jaśniejszy kolor akcentujący zastosowano w miejscach na elementach sterujących, przyciskach, paskach, wskaźnikach itp. Akcentujący kolor ma za zadanie przyciągnąć uwagę użytkownika kluczowe elementy, na przykład pływający przycisk.

Ile koloru użyć? Akcenty rozmieszczone są punktowo, w małych ilościach. Aby pokolorować resztę interfejsu, istnieje prosty sposób podstawowa zasada. Gdy tekstu jest dużo, np. na liście mailingowej, warto pozostawić pasek aplikacji w standardowym rozmiarze i pokolorować go tak, aby użytkownik mógł skupić się na treści. Jeśli nie ma zbyt wielu treści, na przykład szczegółowe przeglądanie element indywidualny, zdjęcie lub kalkulator, to jest to doskonała okazja do wykorzystania dużych kolorowych wykrojników - 2x lub 3x wysokość paska aplikacji.

Android obsługuje bibliotekę o nazwie Palette, która pozwala wyodrębnić kolor ze zdjęć. Oznacza to, że istnieje możliwość dynamicznego kolorowania interfejsu na podstawie ilustracji fotograficznych w aplikacji.

Zrobiliśmy zdjęcie, a algorytm zidentyfikował na jego podstawie 6 kolorów o różnych cechach:
- dostępne są 3 bogate i 3 stonowane kolory;
- są podzielone na odcienie jasne, standardowe i ciemne;
- każdy kolor tła ma swój własny kolor tekstu, którego również można użyć.

Piękne zdjęcia


Wreszcie, podobnie jak projektowanie druku, Material Design zachęca do korzystania z fotografii i ilustracji w całej okazałości. Zdjęcia najczęściej umieszczane są bez ramek, często „na wskroś”. Nawet pasek stanu jest specjalnie przezroczysty, aby nie przeszkadzać. Co więcej, każda kropla „cyfrowego atramentu” na ekranie ma jakąś funkcję; prawie nic nie służy wyłącznie do dekoracji.

Uwaga!
  1. Marka z przyjemnością. Google ma lepszą pozycję, jeśli chodzi o używanie jasnych kolorów w brandingu, ale nie powinno to być postrzegane jako problem. Możesz wybrać kolory z księgi znaku firmowego i ogólnie używać logo.
  2. Nie zapomnij o wcięciach i „dodaj trochę powietrza”. Siatka podstawowa o wartości 8 dp i lewym marginesie o wartości 72 dp jest w zasadzie regułą. Niech treść będzie dobra i darmowa.
  3. Wyraziste zdjęcia robią różnicę. Fotografie i ilustracje są naszym wyborem jako środek wyrazu.

Znacząca animacja


W prawdziwym świecie przedmioty nie mogą po prostu pojawiać się znikąd lub znikać. To spowodowałoby zamieszanie i dezorientację ludzi. Dlatego też Material Design wykorzystuje znaczącą animację, aby pokazać dokładnie, co się właśnie wydarzyło.

Przykład 1. Animacja pokazuje, że ta konkretna karta po kliknięciu pojawiała się na pierwszym planie, otwierała się i pojawiało się więcej informacji.

Przykład 2. Wydarzenie w kalendarzu po kliknięciu odchodzi od powierzchni, zamienia się w osobną warstwę „papieru”, zaczyna ulegać przemianom i ujawnia się w postaci szczegółowych informacji o wydarzeniu.

Ciekawostką jest to, że aktywny ruch przyciąga wzrok – jest to naturalne dla naszego wzroku. Za pomocą animacji kontrolujemy uwagę użytkownika.

Asymetria

Ponieważ głębokość interfejsu jest ograniczona grubością urządzenia, wszelkie przekształcenia obiektu muszą odbywać się w płaszczyźnie. Oznacza to również, że animacja transformacji musi być asymetryczna – czyli zmiana szerokości i wysokości obiektu musi być niezależna. W przeciwnym razie powstaje iluzja poruszania się bliżej lub dalej od widza i to na bardzo dużą odległość.

Reakcja

Kolejny bardzo ważna zasada animacje w Material Design - reakcja na działania użytkownika. Tam, gdzie to możliwe, epicentrum zmian interfejsu powinno dotykać ekranu urządzenia. Na przykład fala, która pojawia się i odchodzi od punktu kontaktu z palcem. Efekt ten jest realizowany bez problemów w systemie Android L.

Mikroanimacje


W Androidzie L możemy animować każdy element aplikacji – czy to przejścia pomiędzy treściami, czy małe ikony akcji. Każdy szczegół aplikacji jest ważny, a mikroanimacje dodają większej szczegółowości i responsywności każdemu działaniu użytkownika.

Jasność i ostrość

I ostatnia, kluczowa zasada animacji: ruch powinien być szybki i wyraźny. W przeciwieństwie do banalnego przyspieszenia na początku i spowolnienia na końcu, krzywa animacji w Material Design jest bardziej naturalna i interesująca. Obiekty reagują szybciej i osiągają stan docelowy, szybciej wracają, ale osiągnięcie stanu spoczynku zajmuje nieco więcej czasu. W rezultacie użytkownik musi krócej czekać (mniej irytująco). Jednocześnie tam, gdzie obiekt opuścił już sferę zainteresowań użytkowników, pozwala sobie na bardziej naturalne zachowanie.

Uwaga!
  1. Nie zostawiaj animacji na koniec. Animacji nie należy zostawiać na sam koniec – może ona mieć kluczowe znaczenie dla doświadczenia użytkownika i powinna być przemyślana z wyprzedzeniem.
  2. Poznaj swoje ograniczenia. Nadmiar animacji też jest zły. Kontroluj się i pamiętaj, że to musi mieć sens.

Projekt adaptacyjny



Ostatnim ważnym aspektem Material Design jest koncepcja responsywnego projektowania. To znaczy, jak zastosować wszystkie trzy pierwsze koncepcje na różnych urządzeniach i ekranach w różnych obudowach.

Od ogółu do szczegółu



Najpopularniejszą techniką jest zmniejszenie ilości informacji wyświetlanych na ekranie i jednoczesne zmniejszenie rozmiaru ekranu. Jeśli włączone duży ekran możemy sobie pozwolić na wyświetlenie zarówno listy, jak i szczegółowych informacji o wybranym elemencie, podczas gdy na smartfonach najpierw wyświetla się lista, a do szczegółów potrzebny jest osobny ekran. W przypadku tabletów pasek aplikacji można czasami powiększyć, aby chociaż w niewielkim stopniu poradzić sobie z nadmiarem wolnego miejsca.

Wcięcia



Umieszczanie treści za pomocą bloków znacznie ułatwia pracę wolna przestrzeń na dużych ekranach. Znamy zawartość każdego bloku, rozumiemy jak szeroki może być, aby nie stracić czytelności, a także jak wąski, aby nie było za ciasno. Na szerokich ekranach bloki są rozciągane do granic ich czytelności, a następnie od krawędzi dodawane są marginesy, które mogą być duże. Można je wypełnić pływającym przyciskiem i kolorowymi wykrojnikami.

Białe ramki



Pomysły na organizację przestrzeni i odstępy dla różne ekrany można obejrzeć na stronie google.com/design/spec w sekcji Białe ramki. To świetne miejsce na rozpoczęcie, zrozum Ogólne znaczenie a następnie kontynuuj własne eksperymenty.

Przewodniki



Prowadnice dają nam wcięcia na „atrament” na osobnych kartkach „papieru”. W smartfonie mamy po lewej stronie jedną kartkę i jedno dobre wcięcie, natomiast na tablecie są ich dwie i w obu przypadkach jest wcięcie. Ważne jest, aby wcięcie było różne dla tych dwóch czynników kształtu. Na tablecie jest to 80dp, a na smartfonie 72dp. Różnią się także marginesy od krawędzi ekranu.

Wymiary



Zaleca się przyjęcie wielu proporcji dla wszystkich elementów. W szczególności wybór rozmiaru paska aplikacji jest znacznie wygodniejszy, jeśli ustawisz go na wielokrotność: 1x, 2x, 3x. Rozmiar ten jest inny na smartfonach i tabletach, ale aplikacja dostosowuje się bez problemów.

Bloki



Myślenie blokami może być ogólnie pomocne. Jeśli zapytasz o coś takiego siatka modułowa z bloków podzielnych przez 8dp uzyskasz doskonały rytm wizualny i wygodniej będzie podejmować decyzje. Wejdź na stronę z białymi ramkami i obejrzyj materiały.

pasek narzędzi



Pasek akcji to jedna z najważniejszych części interfejsu. Zawiera nagłówek, przyciski akcji i nawigację. W Androidzie Lollipop pasek akcji zmienił się z ograniczonego paska u góry w pełnoprawny widżet - funkcjonalny i piękny blok zarządzanie aplikacją. Stało się to możliwe dzięki temu, że teraz możesz umieścić na pasku narzędzi wiele funkcjonalnych elementów, o których wcześniej nawet nie mogłeś marzyć:
- pola wejściowe, formularze;
- pływający główny przycisk akcji;
- pasek narzędzi jest ukryty przez rozszerzoną nawigację, ale tutaj widzimy w pełni funkcjonalny widget;
- pasek narzędzi jest wygodny w zarządzaniu, jeśli to konieczne.
Uwaga!
  1. Szuflada nawigacyjna nie zawsze jest potrzebna. Google bardzo często korzysta w swoich aplikacjach z nawigacji wysuwanej, więc możesz to zobaczyć w różnych przykładach. Ale Google ma wiele problemów, które można rozwiązać za jego pomocą: publikowanie pomocy, ustawienia, logowanie/wylogowanie, informacje o użytkowniku i tak dalej. Jeśli masz podobne zadania, to wszystko jest w porządku, ale jeśli robisz proste narzędzie, to nie warto.
  2. Bądź odważniejszy i dowcipniejszy dzięki paskom narzędzi. Możliwość dynamicznej zmiany rozmiaru paska narzędzi, dzięki czemu będzie on dwukrotnie lub potrójnie większy, jest bardzo fajna i wygodna. Większość projektantów boi się z tym zmierzyć i raz na zawsze wybrać jeden rozmiar, jednak tutaj można i należy działać odważniej.
  3. Nie ma potrzeby tworzenia getta z dolnego rogu dla pływającego przycisku. Pływający przycisk może znajdować się w dowolnym miejscu: na dole, na górze, w prawo, w lewo. Oczywiście w rogu może być wygodnie do niego dotrzeć, ale nie jest to jedyna opcja. Przycisk można przenosić z miejsca na miejsce w zależności od zadania.
  4. Zarówno smartfony, jak i tablety; zarówno w pionie jak i w poziomie. Gama urządzeń z Androidem jest duża, co nie ułatwia życia programistom. Ale prawda jest taka, że ​​użytkownicy mają wszystkie te urządzenia, które obracają w tę i tamtą stronę (nawet jeśli mówimy o smartfonach). Ten moment trzeba przepracować.

To jest projektowanie materiałów. Nie bój się eksperymentować i popełniać błędów: nie skupiaj się na kopiowaniu istniejących rozwiązań. Spróbuj!

Tagi: Dodaj tagi

Komentarze 121

                    • Czy podobnie jak Google trzymasz telefon tylko poziomo?

                      W pionie wykorzystywane jest tylko 50-70% ekranu


                      • Na tym ekranie jest dość dużo tekstu.

                        Czy to dużo tekstu? Co Twitter zrobił z ludźmi...