Wytyczne dotyczące projektowania materiałów. Co to jest projektowanie materiałów?

W naszym dzisiejszym artykule poruszymy temat, który nie był jeszcze omawiany 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, ile raczej cała filozofia regulująca te relacje. Podobnie jak wiele naprawdę jasnych i świeżych zjawisk ostatnich czasów, wygląd materiału to udana kompilacja pomysłów i koncepcji, które albo już znalazły się osobno w różnych produktach, albo, jak to 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 estetyczny, atrakcyjny, intuicyjny i, wbrew pozorom, 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 wersjami Androida oraz wciąż niska rozpowszechnienie Androida 5.1 Lollipop. 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.

Tezy główne i podstawowe Zasady materialne Projekt

Cała filozofia projektowania materiałów opiera się na czterech podstawowych: jasne zasady:

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 pierwotną powierzchnię reprezentują teraz warstwy wirtualnego, praktycznie namacalnego papieru, logiczne jest naniesienie na nią informacji zgodnych z najlepszymi przykładami produktów poligraficznych. 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 Material Design twórcy całkowicie odtworzyli tę zasadę, a rozmieszczenie kart „papieru cyfrowego” na różnych poziomach, gdy jedna karta nachodzi na drugą, w pełni odpowiada hierarchii treści - powierzchnia znajdująca się na drugiej i rzucająca cień na to jest w ten moment główny, na nim 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 pokazanych przez Google można znaleźć najlepsze próbki typografia klasyczna w wykonaniu wirtualnym.

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łnienie rozmieszczone są w taki sposób, aby uwaga użytkownika skupiona była na treści znajdującej się pośrodku kolumny głównej, a światło i szybki dostęp do dodatkowych elementów jest możliwe dzięki szerokiemu lewemu marginesowi. 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 Programiści 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ę również 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 demonstruje nową politykę kolorystyczną, zwracając uwagę na takie źródła inspiracji jak architektura nowoczesna, 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)

Projektując interfejs Google 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łówny treść tekstu. 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, zwłaszcza 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 wirtualne środowisko system operacyjny.

Podstawą animacji Material Design jest interakcja płaszczyzn, kawałków „cyfrowego papieru”, o których mówiliśmy wcześniej. Te samoloty, lecą dalej różne poziomy we własnym świecie, ograniczonym tylną ścianą smartfona i szybą ekranu, mogą się spotykać, przemieszczając i przesuwając, na polecenie użytkownika wysuwać się na pierwszy plan, powiększając rozmiar 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” , odizolowany 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, użytkownik nie powinien napotkać różnych wersji tej samej aplikacji podczas korzystania z różnych gadżetów. Doświadczenie użytkownika powinno być takie samo na komputerze stacjonarnym, smartfonie lub tablecie. Jedynymi akceptowalnymi i obiektywnymi różnicami są różne rozmiary i proporcje elementów interfejsu aplikacji. Pod każdym innym względem różne wersje tej samej aplikacji powinny zapewniać całkowicie identyczne doświadczenia 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. Google osiągnął dobre wyniki pod względem estetyki i UX, jednak nadal istniała realna rozbieżność pomiędzy wersjami swoich produktów na komputery stacjonarne i na gadżety mobilne z systemem Android. 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 rozproszone bloki

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 dzięki marginesowi rozszerzania i kurczenia się każdego bloku aplikacji, Material Design zapewnia naprawdę skuteczne narzędzie do całkowitego ujednolicenia 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 tym przypadku zmuszeni jesteśmy przenieść część treści na osobne ekrany lub ukryć ją za dodatkowymi elementami – taka praktyka jest szczególnie typowa dla 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 powiązać jedynie z kluczową, główną akcją, w której się przeprowadza konkretnej aplikacji. Na przykład w menedżerze plików pływający przycisk może oznaczać dodanie plików lub utworzenie nowego folderu, w komunikatorze lub aplikacja pocztowa– 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

Pasek akcji uległ poważnym zmianom w porównaniu do poprzednich wersji. W Androidzie Lollipop jego funkcjonalność znacznie wzrosła i teraz zaktualizowany element nazywa się paskiem aplikacji. Dzięki zmianom nowa aplikacja bar to narzędzie umożliwiające pełną kontrolę użytkownika 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 zrozumiały.

Pasek aplikacji nie jest ograniczony do stałego rozmiaru - teraz można go proporcjonalnie powiększyć, umieszczając na nim wszystkie niezbędne elementy sterujące treścią i aplikacją, 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 zaznaczyć, że w tej chwili zwolennicy koncepcji material design nadal stanowią większość Łączna tych, którzy nadal energicznie dyskutują o najnowszym dziele 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 płaska konstrukcja i pewna animowana 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ść notorycznego „powietrza” w projektowaniu materiałów (jak w ogóle we współczesnym projektowaniu) 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 wAndroidZnalezienie pozycji menu, której szukasz, wymaga dodatkowego wysiłku. 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 niedalekiej przyszłości przekonamy się, jaki los czeka material design – czy jeszcze przez jakiś czas pozostanie on narzucaną nam dwuznaczną modą gigantycznego Google’a, czy będzie to po prostu kolejny duży eksperyment w interfejsach, czy też będzie to nowy etap, który wyniesie sztukę interfejsu użytkownika na wyższy 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 nasz krótka recenzja będzie dla zainteresowanych czytelników wprowadzeniem w tak obiecujący kierunek, jak 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.

ewangelista projektowania Google, Mustafa Kurtuldu, na temat wykorzystania ich technologii przy tworzeniu aplikacji Keep i Inbox.

Do zakładek

Tłumaczenie przygotował zespół internetowej szkoły języka angielskiego Skyeng.

Material Design udostępnia zestaw narzędzi i reguł, które pomogą Ci świadomie podejść do projektowania UX podczas tworzenia interfejsu aplikacji.

Ale po co konkretny produkt czy te zasady nie działają? A co robią projektanci Google, gdy opracowują produkt wykraczający poza klasyczne wytyczne?

Wytyczne dotyczące materiałów mają charakter adaptacyjny. W tym artykule przyjrzymy się dwóm aplikacjom Google, Keep i Inbox, aby zrozumieć, w jaki sposób nie tylko odbiegają one od niektórych zasad, ale także kształtują nowe zasady Material Design.

Skrzynka odbiorcza: Siatka modułowa

Rozwój nowych usługi pocztowe- bardzo ambitny cel dla Google, biorąc pod uwagę ugruntowaną już obecność Gmaila na rynku. Celem Inbox było dodanie głębi do projektu interfejsu i stworzenie unikalnego doświadczenia użytkownika styl formy, grając według nowych zasad Material Design.

Kiedy zespół Inbox zbierał wstępne projekty, koncepcja Material Design była wciąż w fazie rozwoju. Dało to Inboxowi doskonałą okazję do ustanowienia standardów Material Design, jednocześnie stawiając czoła wyzwaniom związanym z głębią i objętością interfejsu użytkownika.

Głębokość

Oryginalny projekt Inboxa nie był wystarczająco elastyczny — siatka pozwalała na zmieszczenie tylko siedmiu e-maili na 13-calowym ekranie. To było za mało, zwłaszcza w porównaniu do Gmaila, który mieści 16-20 liter.

Jeśli otworzysz Gmaila i Inbox w sąsiadujących oknach, zobaczysz dużą różnicę w wadze wizualnej. Jednym z największych wyzwań było znalezienie właściwej równowagi między treścią a białą przestrzenią.

Tima Smitha

Główny projektant w Inbox

Zmieniając ustawienia siatki, wysokość linii i wygląd czcionki, projektanci Inboxa byli w stanie osiągnąć optymalną głębokość interfejsu, jednocześnie wyświetlając 12–17 liter, każda wewnątrz karty Material Design. Interfejs aplikacji dopasowuje się do urządzenia użytkownika. Na przykład czcionka w wierszu „Temat” zmienia się w zależności od rozmiaru ekranu.

Kolory, obrazy i ikony

Inną sprawą jest używanie obrazów kontekstowych w grupach e-mailowych cecha wyróżniająca praca. Przykładowo, jeśli użytkownik planuje wyjazd do Nowego Jorku, na karcie z odpowiednią literą zobaczy niebo Manhattanu.

Na lewym pasku nawigacyjnym znajduje się wiele ikon, których kolory odpowiadają ich funkcjom w aplikacji. Gdy użytkownik kliknie zielony przycisk„Ukończono” – tło górnego paska również zmieni kolor na zielony, wskazując, że kontekst się zmienił.

Górny panel

Kolejnym ważnym zadaniem dla zespołu było opracowanie górnego paska aplikacji. Początkowy pomysł polegał na stworzeniu przekształcalnego panelu, który nie rozciągałby się na szerokość okna przeglądarki, ale zmieniałby się w zależności od treści.

Pracowaliśmy kilkanaście różne opcje tę koncepcję, aż w końcu dotarli do trybu pełnoekranowego, który widzisz teraz. Zanim wybraliśmy najlepszy styl, stworzyliśmy także kilka koncepcji pasków wyszukiwania.

Tima Smitha

Główny projektant w Inbox

Karty w skrzynce odbiorczej rozszerzają się i kurczą, co oznacza, że ​​format nagłówka zmienia się w zależności od interakcji użytkownika z wiadomością e-mail. Górny pasek wyświetla także pasek wyszukiwania i menu z innymi Aplikacje Google. Takie podejście pozwala Inboxowi zachować elastyczność bez komplikowania interfejsu.

Zachowaj: responsywne próbki nawigacji

Keep to wieloplatformowa aplikacja do robienia notatek, która rozwija i zwija karty na ekranie, skupiając uwagę użytkownika podczas dodawania nowej notatki. Dolny pasek nawigacyjny pozwala szybko utworzyć nową notatkę jednym kliknięciem.

Zaangażowanie, puste ekrany i animacja

Zwykle użytkownik ma do czynienia z pustym ekranem, gdy na stronie nie ma żadnej treści. W Keep ten ekran wygląda jak puste płótno, na którym użytkownik może szybko zanotować swoje pomysły.

Wolna przestrzeń zachęca użytkownika do przeglądania pozycji menu w panelu, który rozwija się, wyświetlając różne filtry reprezentowane w postaci ikon; menu układu umożliwiające przełączanie między listą a siatką oraz lewy pasek nawigacyjny, w którym można zmieniać podstawowe ustawienia aplikacji.

Dużo pracowaliśmy nad animacją – jak notatki są wyświetlane jako strumień, jak się poruszają podczas ich otwierania i zamykania.

Genevieve Cuevas

Wybór odpowiednich elementów materiałowych: Dolny przycisk nawigacyjny lub pływający przycisk akcji

Zwięzłość i łatwość użycia - kluczowe cechy Trzymać. Podczas przeprojektowywania aplikacji programiści przestudiowali wzorce Material Design i ostatecznie wybrali karty, które pomagają odróżnić notatki od siebie, lewy pasek nawigacyjny ułatwiający dostosowywanie aplikacji oraz menu kontekstowe, które zmienia się w zależności od rodzaju notatki – np. notatki z polami wyboru wyświetlającymi menu umożliwiające sprawdzanie i zmianę elementów na liście.

Razem te elementy tworzą przejrzysty i funkcjonalny interfejs, dostosowujący się do konkretnej sytuacji. Przeprojektowując Keep twórcy eksperymentowali z niektórymi podstawowymi elementami nawigacyjnymi aplikacji – w szczególności starali się zastąpić dotychczasową nawigację pływającym przyciskiem akcji.

Oryginalna nawigacja umożliwiała utworzenie nowej notatki jednym dotknięciem, a pływający przycisk akcji wymagał dwóch kliknięć: jednego, aby wyświetlić opcje i drugiego, aby utworzyć notatkę.

Kiedy wprowadziliśmy pływający przycisk, niektórzy z naszych użytkowników skarżyli się, że utworzenie notatki dwoma kliknięciami nie było tak wygodne.

Genevieve Cuevas

Inżynier oprogramowania Google Keep

Wielu użytkowników, którzy korzystali wcześniej z aplikacji i byli przyzwyczajeni do nawigacji jednym kliknięciem, nie zaakceptowało tej zmiany. Testując i ostatecznie odrzucając pływający przycisk, programiści Keep mogli wybrać rozwiązanie, które najlepiej odpowiada interesom ich produktu.

Przewodnik, a nie zbiór zasad

Zespoły Keep i Inbox wykorzystały te wytyczne jako podstawę swoich aplikacji. Kiedy napotkali scenariusz użytkownika, który nie zadziałał, byli w stanie dostosować swój projekt do potrzeb użytkowników.

Material Design oferuje wskazówki oparte na wieloletnim doświadczeniu Google, ale nie jest w stanie rozwiązać absolutnie każdego problemu. Przykłady Keep i Inbox pokazują, że możesz skorzystać z wytycznych Material Design, zmieniając je w zależności od potrzeb swojego produktu.

Ten artykuł jest przeznaczony dla tych, którzy planują zacząć rozwój mobilny. Specjaliści ds. rozwoju już to wszystko wiedzą.

Jabłko

Zacznijmy od być może najbardziej rozbudowanego przewodnika firmy Apple. Na pierwszy rzut oka wszystko wygląda dość skąpo, dla każdego narzędzia czy sekcji są 2-3 obrazki i kilka akapitów: wytyczne są bardzo dobrze opracowane pod względem prezentacji informacji w jednostce tekstu. Możesz w pełni zrozumieć wszystkie zalecenia w ciągu zaledwie kilku godzin.

Z minusów warto zauważyć brak języka rosyjskiego, ale jest tłumaczenie amatorskie. Przeczytaj: medium.com/ios-guidelines-in-russian.

Zapoznaj się z przewodnikiem krok po kroku dotyczącym tworzenia aplikacji na iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Poradnik pomoże osobie, nawet trochę obeznanej z tworzeniem aplikacji, zapoznać się z etapami tworzenia aplikacji. Aby to zrobić, musisz najpierw pobrać główne narzędzie programisty Xcode, a następnie z instrukcjami krok po kroku, jak stworzyć swoje pierwsze mini-arcydzieło.

Łącząc wytyczne z przewodnikiem programisty, możesz uzyskać wstępną wiedzę na temat tworzenia aplikacji na iOS. Do wszystkiego innego, łącznie z przeżuwaniem tego, co czytasz, istnieje zawód - „”.

Google

Material design z Androida to hasło często spotykane w Internecie, ale niestety wielu rozumie je jako tylko zestaw dodatków graficznych Google'a i nic więcej. W rzeczywistości jest to dość rygorystyczne zalecenie, które ma na celu uczynienie aplikacji przejrzystą i łatwą do nauczenia się przez użytkownika.

Wytyczne obejmują ogólne wprowadzenie do stosowania konkretnych narzędzi. Podstawom i pierwszym krokom programisty towarzyszą zdjęcia i filmy: od razu widać, że Google dość ciężko pracował nad tym podręcznikiem.

Z punktu widzenia użyteczności prezentowanych treści można też mówić tylko w pozytywny sposób: każda właściwość narzędzia, każda akcja opatrzona jest tekstem i opis graficzny, także linki do podręcznika programowania. Dlatego nawet bez konkretnych instrukcji działania stwórz poważny Aplikacja materiałowa Projekt może wykonać zarówno początkujący, jak i gotowy specjalista.

telefon Windows

Po dokładnym przestudiowaniu i pracy z podobnymi przewodnikami Google i Apple nie mogę oprzeć się wrażeniu, że wytyczne są nieco „niezgrabne” telefon Windows. Wygląda na to, że twórcy rzeczywiście nie chcieli trzymać się korporacyjnej polityki przygotowywania takiej dokumentacji, ale szefowie nalegali.

Główną zaletą wytycznych jest język rosyjski. Informacje podane są szczegółowo, ale nie mają wygodnej struktury, „wody” jest za dużo jak na taki poradnik. Jeśli jednak potraktować wytyczne nie jako podręcznik, który trzeba najpierw przeczytać, a potem zacząć opracowywać, ale jako kieszonkowy podręcznik, to można przyznać, że taki nadmiar się przydaje.

Wszyscy popularni producenci platformy mobilne Do opracowania głównego podręcznika projektowego podeszliśmy odpowiedzialnie i mądrze. Praca z każdym z nich jest wygodna, przyjemna i co najważniejsze użyteczna. Wystarczy, że nauczysz się tworzyć aplikacje, wtedy wskazówki na pewno się przydadzą.

Co sądzisz o wytycznych? Powiedz nam.

Szkolenie według wytycznych: zawód.

Styl Material Design (material design w wersji rosyjskiej), który zyskał niesamowitą popularność, pozostaje dla większości obiektem niezrozumiałym i nieznanym. Rozwiążemy to z Tobą w prosty i łatwy sposób jasne przykłady czym jest projektowanie materiałów i jak z niego korzystać.

Początkowo projektanci Google postawili sobie trzy globalne cele:

• Stwórz nie tylko nowy styl, ale cały system projektowania, w którym zasady i reguły zostaną jasno określone;
• Zaktualizuj istniejące style (FLAT/Metro, minimalizm i inne) w oparciu o nowe technologie.

Ten system projektowania był wymagany, ponieważ aplikacje i strony mobilne ewoluowały od dodatku do zwykłych stron internetowych do ich integralnej części.

Skąd wziął się Material Design: statystyki internetu mobilnego

Mały ekran telefonu komórkowego stawia znacznie wyższe wymagania w zakresie użyteczności, zmuszając programistów do dokładnego rozważenia wszystkich mechanizmów aplikacji lub adaptacyjnej strony internetowej. Nowy styl Google powstał między innymi po to, by zjednoczyć strony „mobilne” i „desktopowe”, wymyślając dla nich jedną koncepcję.

„Materiał” w projektowaniu: co to jest?

Podstawą stylu była koncepcja materiału. Jest to główny „element konstrukcyjny”, z którego są montowane bloki funkcyjne projekt. W skrócie można to opisać następująco:

• Powinieneś chcieć tego dotknąć;
• Jest interaktywny, a na ekranie monitora zachowuje się tak, jak zachowywałby się jakiś fizyczny obiekt za życia;
• Wygląda jak papier;
• Tworzy cienie, wygina się, porusza się jak prawdziwy.

Przykład nakładania warstw „papieru cyfrowego”

Warunki te są całkiem zrozumiałe: zapewne zauważyłeś - nie raz - że coraz częściej masz ochotę kliknąć na „smaczny”, trójwymiarowy przycisk, który po naciśnięciu zachowuje się jak prawdziwy. Ponieważ ekran komputera transmituje tylko obrazy wizualne, osoby o innym systemie percepcji (słuchowym i kinestetycznym) czują się pozbawione i nie otrzymują wrażeń, do których są przyzwyczajeni. Projektant może jedynie symulować: sprawić, aby przycisk ten wywołał w wyobraźni odwiedzającego wrażenie, jakby dotykał tego przycisku i czuł jego szorstkość, kąty, objętość. Ma to znaczenie np. w przypadku kinestetyków – są to osoby szczególnie podatne na doznania dotykowe.

Oczywiście takie właściwości były już wykorzystywane w projektowaniu: na przykład duże błyszczące przyciski z podświetleniami były popularne w stylu Web 2.0. Ale w projekcie materiału właściwości są wyraźnie określone. W szczególności wszystkie elementy mają tę samą „grubość”: nie ma już przycisków internetowych, które wyróżniałyby się na tle pozostałych bloków strony.

Przycisk w stylu projektowania materiałów i Przycisk WWW 2.0

Ponadto, zgodnie z zasadami, które projektanci Google wymyślili dla projektowania materiałów, poszczególne elementy„leżą” blisko siebie i nie wiszą w powietrzu. W rezultacie cienie są zawsze małe i mają wyraźne kontury (zamiast na przykład cieni pochodzących z pobliskiego rozproszonego światła).

Kolejną ważną różnicą nowego stylu jest jego dynamika. Powodem jest znowu to samo telefony komórkowe i tablety: ograniczony rozmiar ekranu nie pozwala pomieścić wszystkich niezbędne informacje a elementy sterujące są widoczne, a użytkownik musi dużo się poruszać, przewijać i klikać. Google zapewnił jasne schematy projektowania materiałów: każdy ruch ma swoje znaczenie - jest to albo przesuwane menu, albo element, który można usunąć przesuwając palcem i tak dalej.

Błędy i nieporozumienia

Pierwszy. Aby stworzyć materialny projekt, wystarczy zastąpić wszystkie elementy i tła na stronie teksturami. NIE! Jeśli to zrobisz, otrzymasz brudną i brzydką witrynę, która nie dorówna nawet poziomowi witryn internetowych.

Drugi. W projektowaniu należy używać realistycznych materiałów. Niekoniecznie! Ważne jest, aby zachowywali się jak prawdziwi ludzie. Nie ma znaczenia, czy jest to faktura prawdziwego drewna, czy tekstura „syntetyczna” stworzona w Photoshopie za pomocą narzędzia Szum.

Trzeci. Materiał i jego interakcja to jedyne rzeczy, które wyróżniają ten styl. NIE! Aby osiągnąć „kanoniczny” projekt materiałowy, taki jak Google, musisz przestrzegać innych zasad:

• Obrazy są rysowane bez przerw, od krawędzi do krawędzi;
• Duże, łatwe do odczytania czcionki bezszeryfowe;
• Kodowanie kolorami;
• Ikony wykonane według tych samych zasad projektowania materiałów;
• Układ adaptacyjny.

Pełną listę zasad znajdziesz w oficjalnej sekcji Google poświęconej projektowaniu materiałów.

Projektowanie materiałów na Androida

W użyciu Główne zasady Aplikacje mobilne również mają swoją specyfikę. Pamiętasz, jak rozmawialiśmy o cieniach? Początkowo elementy Material Design dla Androida naprawdę leżą jeden na drugim, jak kawałki papieru. Ale dzięki interakcji każdy element, czy to okno dialogowe, czy przycisk nawigacyjny, wznosi się na sam szczyt. W ten sposób ten styl podkreśla aktywne bloki. Wykorzystuje tę samą zasadę, która została osadzona w technologii wyskakujących okienek od czasów Web 2.0.

Teraz „zasada warstwowa przeniosła się z wyskakujących okienek na cały interfejs

Co ciekawe, twórcy Material Design w Google nawet jasno zdefiniowali wszystkie parametry dla każdego z możliwych elementów interfejsu!

Kolory w projektowaniu materiałów

Podejście do kolorystyki nawiązuje do stylu FLAT. Są to dość jasne, bogate, naturalne kolory. Projektowanie materiałów polega na zastosowaniu trzech głównych rodzajów kolorów:

• Główny kolor, który dominuje na wszystkich ekranach interfejsu;
• Dodatkowy kolor, który zwykle oznacza bloki powiązane z główną treścią, wyjaśniające ją lub uzupełniające. Często jest to po prostu jaśniejszy lub ciemniejszy odcień koloru głównego.
• Kolor akcentujący, który służy do podkreślenia przycisków, elementów konwersji i innych ważnych rzeczy.

Kolory projektowania materiałów: paleta Google

Grafika Google umożliwia wyszukiwanie informacji w Internecie w formie wizualnej. Nowe funkcje, takie jak podpisy obrazów, dobrze widoczne ikony i strony AMP w wynikach wyszukiwania, pomogą użytkownikom szybko znaleźć to, czego potrzebują.

Dodając obrazy z dodatkowymi informacjami, osiągniesz większą dokładność wyszukiwania i przyciągniesz do swojej witryny więcej zainteresowanych użytkowników. Zoptymalizuj swoje strony i znajdujące się na nich obrazy, aby zwiększyć prawdopodobieństwo ich znalezienia obrazy Google. Aby to zrobić, postępuj zgodnie z poniższymi zaleceniami.

Zakaz klikalnych linków w wynikach wyszukiwania obrazów

Jeśli chcesz, możesz uniemożliwić wyświetlanie klikalnych linków w wynikach wyszukiwania Grafiki Google, tak aby obrazy w pełnym rozmiarze nie były wyświetlane na stronie wyników.

Instrukcje

1. Żądając obrazu, sprawdź nagłówek HTTP Referer.
2. Jeśli żądanie pochodzi z domeny Google, wyślij odpowiedź z kodem HTTP 200 (OK) lub 204 (Brak treści).

Google nadal będzie w stanie wykryć obraz podczas indeksowania strony, ale w wynikach wyszukiwania będzie widoczna miniatura obrazu utworzona podczas indeksowania. Z takiego zakazu można skorzystać w każdej chwili, a ponowne przetwarzanie zdjęć znajdujących się w serwisie nie będzie konieczne. Nie jest to uważane za kamuflaż i nie będzie skutkować sankcjami.

Spraw, aby witryna była przyjazna dla użytkownika

Aby poprawić ranking treści w wynikach wyszukiwania obrazów, twórz strony przede wszystkim dla użytkowników, a nie dla Wyszukiwarki . Oto kilka porad:

• Pamiętaj, że kontekst jest ważny. Upewnij się, że treść wizualna jest związana z tematem, którego dotyczy strona. Wskazane jest używanie tylko tych obrazów, które uzupełniają resztę treści w znaczeniu. Zdecydowanie odradza się wyświetlanie tekstu z obrazami na stronie, chyba że treść któregokolwiek typu jest oryginalna.
• Bądź mądry w wyborze miejsca docelowego. Jeśli to możliwe, umieszczaj obrazy obok tekstu, który ilustrują. Czasami warto umieścić kluczowy obraz na górze strony.
• Nie umieszczaj ważnego tekstu bezpośrednio na zdjęciach. Staraj się nie używać tekstu na obrazach, ponieważ nie jest on dostępny dla wszystkich użytkowników w tej formie. Dotyczy to przede wszystkim tak ważnych elementów tekstowych, jak nagłówki stron i pozycje menu. Między innymi tekst na obrazach nie jest rozpoznawany przez narzędzia służące do tłumaczenia stron na inne języki. Aby mieć pewność, że Twoje treści będą tak łatwe do odczytania i znalezienia, jak to możliwe, dodawaj tekst do strony tylko wtedy, gdy znaczniki HTML, a także nie zapomnij wpisać opisów zdjęć w atrybutach alt.
• Twórz dobre, informacyjne strony internetowe. Treść strony jako całości jest tak samo ważna podczas wyszukiwania w Grafice Google, jak sama treść wizualna, ponieważ pozwala na efektywniejsze jej przetwarzanie. Na przykład fragmenty tekstu z konkretna strona. Google bierze także pod uwagę jakość informacji prezentowanych w serwisie podczas rankingu zdjęć.
• Twórz witryny zoptymalizowane pod kątem urządzeń mobilnych. Użytkownicy chętniej przeszukują Grafikę Google na urządzeniach mobilnych niż na komputerach stacjonarnych. Dlatego ważne jest, aby Twoja witryna była łatwa do przeglądania na urządzeniach wszystkich typów i rozmiarów. Sprawdzenie łatwości przeglądania na urządzeniach mobilnych pomoże Ci dowiedzieć się, czy strony wyświetlają się poprawnie i czy nie ma na nich błędów.
• Uważaj na strukturę adresów URL swoich obrazów. Oprócz nazw plików Google podczas przetwarzania treści wizualnych bierze pod uwagę ścieżki URL. Spróbuj poćwiczyć obwód logiczny dla adresów URL obrazów.

Zwróć uwagę na tytuł i opis strony

Grafika Google automatycznie tworzy tytuły i opisy obrazów, dzięki czemu użytkownik rozumie, w jaki sposób dany wynik wiąże się z jego zapytaniem. Pomaga to użytkownikom zdecydować, czy kliknąć wynik, czy nie.

Niezbędne informacje pozyskujemy z różnych źródeł, łącznie z tytułem i metatagami każdej strony.

Aby mieć pewność, że tworzone przez nas tytuły i opisy mają charakter opisowy, postępuj zgodnie ze wskazówkami przedstawionymi w tym artykule.

Dodaj uporządkowane dane

Jeśli dodasz uporządkowane dane, Twoje obrazy pojawią się w Grafice Google jako wyniki z elementami rozszerzonymi (w tym dobrze widoczne ikony). Dzięki temu użytkownicy lepiej zrozumieją Twoją witrynę, co sprawi, że odwiedzą ją ci, którzy są najbardziej zainteresowani odwiedzeniem Twojej witryny. Dane strukturalne są obsługiwane w przypadku następujących typów treści:

W Grafice Google logo AMP pomaga użytkownikom wybierać strony, które ładują się szybciej. Spróbuj przekonwertować stronę, na której znajdują się Twoje obrazy, do formatu AMP. Pamiętaj, że strona docelowa to ta, na którą trafia użytkownik po kliknięciu wyniku wyszukiwania.

Dodaj zdjęcia wysokiej jakości

Użytkownicy wolą zdjęcia dobrej jakości. Wyraźne miniatury w wynikach wyszukiwania również z większym prawdopodobieństwem przyciągną odwiedzających do Twojej witryny.

Umieść obrazy prawidłowo w tekście i wybierz dla nich znaczące nagłówki, nazwy plików i podpisy

Google wyodrębnia informacje o temacie obrazu z innych treści na stronie, w tym z tytułów i podpisów obrazów. Jeśli to możliwe, umieszczaj obrazy na stronach poświęconych danemu tematowi i obok tekstu, którego dotyczą.

Nazwa pliku może pełnić tę samą funkcję, co nagłówki z podpisami. Dlatego pies.jpg jako preferowane imię IMG00023.JPG.

Dodaj opisy obrazów do atrybutów alt

Tekst alternatywny w atrybutach alt udostępnia treść użytkownikom, którzy nie mogą widzieć obrazów na stronach (na przykład dlatego, że korzystają z czytników ekranu lub mają wolne połączenie internetowe).

Określając temat obrazu, Google bierze pod uwagę opisy w atrybutach alt, a także wyniki rozpoznawania obrazu i treść strony. Dodatkowo tekst alternatywny można przekształcić w tekst łącza, jeśli zdecydujesz się użyć w tym celu obrazu.

Postaraj się stworzyć jak najbardziej informacyjny opis, pasujący do zawartości strony. Nie nadużywaj słów kluczowych, ponieważ powoduje to złe wrażenie na użytkownikach i może zostać odebrane jako spam.

• Zła opcja (atrybut alternatywny nie wypełnione):
• Zła opcja (nadużycie słowa kluczowe):
• Lepsza opcja:
• Najlepsza opcja:

Użyj map witryn dla obrazów

Obrazy są ważnym źródłem informacji o ogólnej zawartości witryny internetowej. Możesz podać dodatkowe informacje na temat obrazów i podać Adresy Google te, które w przeciwnym razie nie zostałyby odkryte, znajdują się w mapie witryny.

Mapy witryn dla obrazów, w przeciwieństwie do zwykłe pliki ten typ może zawierać adresy URL z innych domen. Dzięki temu webmasterzy mogą używać CDN (sieci dostarczania treści) do hostowania plików graficznych. Zalecamy sprawdzenie Nazwa domeny SDK w Search Console, abyśmy mogli powiadomić Cię o wykryciu błędów indeksowania.

Obsługiwane formaty graficzne

Grafika Google obsługuje następujące formaty: BMP, GIF, JPEG, PNG, WebP, SVG i osadzone obrazy.

Obrazy wbudowane to zbiór bajtów danych graficznych w tagu . Przykładowy kod takiego obrazka:

dane obrazu…">

Zamiast danych obrazu należy zastąpić ciąg zakodowany w formacie Base64.

Chociaż obrazy wbudowane mogą zmniejszyć liczbę żądań HTTP, webmasterzy powinni dokładnie rozważyć swoje decyzje, ponieważ mogą one skutkować znacznym obciążeniem strony. Więcej informacji na temat zalet i wad osadzonych obrazów można znaleźć w witrynie Web Design Fundamentals.

Responsywne obrazy

Responsywne strony internetowe są zazwyczaj łatwiejsze w użyciu, ponieważ można je najczęściej przeglądać różne urządzenia. Wskazówki dotyczące pracy z obrazami na responsywnej stronie internetowej znajdują się w odpowiedniej sekcji naszego zasobu „Podstawy projektowania stron internetowych”.

Zdjęcia są publikowane na responsywna strona za pomocą tagów Lub Jednak nie wszystkie przeglądarki i wyszukiwanie robotów rozpoznają te tagi, dlatego zalecamy dodanie zastępczego adresu URL jako wartości atrybutu .

Używanie tagu

Atrybut srcset umożliwia określenie w elemencie wiele wersji tego samego obrazu dla różnych rozmiarów ekranu.

Przykład

Używanie tagu

Element Jest kontenerem, w którym grupowane są tagi Z różne znaczenia dla tego samego obrazu. W rezultacie przeglądarka może wybrać odpowiednia opcja obrazy na podstawie cech urządzenia, takich jak gęstość pikseli i rozmiar ekranu. Dodatkowo element obrazkowy umożliwia wygodne wykorzystanie na stronach nowych formatów graficznych, które można wyświetlić w uproszczonej formie, jeśli dany klient nie obsługuje jeszcze takich formatów.

Zoptymalizuj swoje obrazy pod kątem filtra SafeSearch

SafeSearch to funkcja, która umożliwia blokowanie lub zezwalanie na wyświetlanie obrazów, filmów i witryn zawierających treści o charakterze jednoznacznie seksualnym w wynikach wyszukiwania Google. Aby odpowiednie ustawienia zostały zastosowane prawidłowo, należy je podać Informacje Google o typie zawartości Twoich obrazów.

Zdjęcia przeznaczone wyłącznie dla osób pełnoletnich zamieszczaj pod osobnym adresem

Jeśli Twoja witryna zawiera treści wizualne przeznaczone wyłącznie dla osób dorosłych, my wysoce zalecane umieść go osobno. Przykład: http//www.example.com/adult/image.jpg.

Dodaj metadane do stron z treściami dla dorosłych

Jeśli użytkownik zastosował filtr SafeSearch, algorytmy Google na podstawie różnych danych określają, które wyniki nie mają być wyświetlane. W przypadku obrazów pewną rolę odgrywa uczenie maszynowe, ale pod uwagę brane są także dość proste czynniki, jak np. to, gdzie i w jakim kontekście dany obraz był już wcześniej używany.

Najbardziej pomocnym sposobem na odróżnienie treści tylko dla dorosłych jest specjalny znacznik. Jeśli publikujesz takie treści, zalecamy dodanie do kodu swoich stron następujących metatagów:

Wielu użytkowników nie chce, aby w wynikach wyszukiwania pojawiały się treści dla dorosłych, zwłaszcza jeśli z tego samego urządzenia korzystają dzieci. Dlatego też, używając jednego z tych metatagów, masz pewność, że użytkownicy nie będą musieli oglądać nieodpowiednich treści.

Jak każdy inny algorytm, filtr SafeSearch może popełniać błędy. Jeśli uważasz, że Twoje obrazy lub strony zostały przez pomyłkę wykluczone z wyników wyszukiwania, .

I w końcu

Czy ten artykuł był pomocny?

Jak można ulepszyć ten artykuł?