Co to jest projektowanie materiałów? Dodaj uporządkowane dane

Obecnie coraz większa liczba klientów korporacyjnych wskazuje w kolumnie „Zapytania projektowe” w briefie dotyczącym stworzenia strony internetowej - „ Wygląd materiału" Jednocześnie to nie tyle element wizualny przyciąga uwagę segmentu korporacyjnego, ile fakt, że styl jest modny i znany.

Zanim przejdziemy do przykładów, zrozummy jedną prostą prawdę:

Material Design to styl korporacyjny Korporacja Google. Naśladowanie go jest równie głupie, jak na przykład producent makaronu instant próbujący naśladować markę Ferrari.

Wytyczne Material Design, oprócz samego Google, dotyczą również produktów firm partnerskich, głównie aplikacji na platformę Android. Dla wszystkich innych, którzy nie są związani z Google i platformą Android, zainteresowanie Material Design powinno mieć charakter wyłącznie edukacyjny.

Korporacyjna witryna internetowa wymaga bardziej znaczącego podejścia niż samo stwierdzenie: „Chcę, żeby tak było”. Jeśli strona internetowa jest twarzą marki w Internecie, to powinna posiadać indywidualne cechy i korespondować wizualnie z ogólnym wizerunkiem firmy.

Material Design nie osiągnął jeszcze szczytu swojego rozwoju i dziś niewiele jest witryn, które nie tylko są wykonane w pełni zgodnie z wymogami księgi marki Google, ale także harmonijnie wkomponowują się w własny branding wizualny. Niemniej jednak udało nam się znaleźć kilka udanych przykładów witryn w stylu Material Design.

Przykłady stron internetowych w stylu Material Design

Witryna przeglądarki kiosku jest nie tylko wykonana w stylu Material Design, ale jest również dobrze zoptymalizowana urządzenia mobilne.

Bardzo udane rozwiązanie, które harmonijnie łączy detale i projekty z wytycznych Material Design (cienie, przyciski, płaska konstrukcja, kolory i efekty JS) oraz styl korporacyjny grupy międzynarodowych szkół ISoE.

Platforma lifeaweso została zaprojektowana zgodnie z podstawowymi zasadami Material Design: prostotą, przejrzystością, zrozumiałością. Strona jest wciąż w fazie rozwoju, ale integracja wizualizacji w stylu Material Design wygląda całkiem nieźle.

Znany twórca rozwiązań cyfrowych i usług online Futurice po prostu nie mógł zrobić złej strony internetowej. Pastelowa kolorystyka, płynna nawigacja i elementy funkcjonalne łączą się, tworząc wspaniałe doświadczenie użytkownika.

Ta strona wykorzystuje zasadę prostoty właściwą Material Design i uzupełnia ją żywymi zdjęciami wysokiej jakości. Szczególnie imponujące obrazy tła podczas przewijania.

Tutaj widzimy kluczowy element Material Design – karty. Strona jest bardzo lekka i prosta: nie ma bałaganu w niepotrzebnych elementach, a najważniejsze informacje są wyświetlane w osobnych blokach.

Oprócz innych atrybutów z koncepcji Material Design, znajduje się tu kluczowy element sterujący – przycisk unoszący się nad stroną. Po kartach jest to chyba jeden z najbardziej zapadających w pamięć elementów kierunku projektowania Google.

I oczywiście nie zapominajmy o oryginalnym źródle. Interfejs usługi Alerty Google niedawno zaktualizowany do Material Design, co znacznie poprawiło jego właściwości wizualne i użyteczność.

Co to jest projektowanie materiałów? Jest to zbiór stylów i grafik opracowanych przez Google, a także wytyczne i zasady stosowania tych stylów. Material design został po raz pierwszy zaprezentowany na konferencji programistów Google I/O latem 2014 roku. Styl opiera się na formacie „kartek” i „bloków” - prostych i zwięzłych form elementy graficzne, a także ogólną prostotę i świeżość projektu - spokojne, miękkie kolory, brak objętości, drobne detale i detale w ogóle. Pierwsza „publikacja” dotycząca projektowania materiałów miała miejsce wraz z uruchomieniem usługi Google Now i oficjalnie styl stał się podstawą sali operacyjnej Systemy Android ostatnio w wersji 5.0, znanej również jako Android Lollipop.

Moim zdaniem material design ma kilka bardzo ważnych zalet w porównaniu ze wszystkimi wcześniejszymi próbami Google zmierzającymi do dostosowania projektu systemu operacyjnego i programów do jeden typ, ale i pewne wady. W tym krótkim artykule postaram się przedstawić mój punkt widzenia na ten temat nowy język projekt z Google.

Material design – argumenty ZA

Pierwszym i najważniejszym argumentem za nowym stylem jest moim zdaniem jego wykonanie. Nie chcę znowu wyjść na hejtera technologii i podejścia Apple, ale w tym przypadku nie jest to straszne, ponieważ wyrażam tylko swój punkt widzenia. Zatem moim zdaniem Aktualizacja iOS do wersji siódmej i aktualizacja Androida do wersji piątej to, jak mówią, dwie duże różnice.

W przypadku Apple’a zaobserwowaliśmy typowe przeniesienie dotychczasowej grafiki na płaską formę, żadnego nowego pomysłu, braku chęci wniesienia czegoś świeżego – po prostu wzięli istniejący interfejs, zmiażdżyli go, przerysowali ikony i dodali tęczowe obrazki w tle. To właśnie obrazy tła w nowym iOS 7 i efekty przezroczystości menu są, jak mi się wydaje, wskaźnikiem złego gustu i niechęci projektantów do zrobienia czegoś dobrego i miłego. W „siódemce” po prostu pokazali wszystkim oczy pięknymi efektami animacji i ogólną jasnością nowego interfejsu. Wydaje mi się, że nikt tak naprawdę nie zastanawiał się, czy będzie to wygodne, bo w przeciwnym razie projektanci Apple'a bardziej skupiliby się na aspektach funkcjonalnych niż na tęczowym designie.

Panel powiadomień wywoływany od góry i panel sterowania wywoływany od dołu to wyraźne przykłady bezużytecznego „uaktualnienia” w iOS7. Pierwsza nigdy nie została wyjaśniona - wszystkie powiadomienia są spiętrzone i jest ich za dużo, druga została zrobiona w połowie, przełączniki pozwalają na włączanie/wyłączanie interfejsów, ale nie przystępują do ich konfigurowania i wybieranie sieci

Android 5.0 został także bardzo poważnie zaktualizowany pod względem graficznym w porównaniu do 4.x właśnie w związku z przeniesieniem systemu operacyjnego do Material Design. I na pierwszy rzut oka zmiany są tutaj podobne do tych, które miały miejsce w iOS - ostateczna zmiana stylu na płaski, ogólnie lżejszy design, zewnętrzna prostota. Ale wtedy zaczynają się różnice. W Androidzie 5.0 interfejs jest bardziej całościowy dzięki materiałowej konstrukcji – wszystko odbywa się w jednym spokojnym stylu, nic się nie wyróżnia i nie wygląda kolorowo czy przesadnie jaskrawo. Podstawowa zasada projektowania materiałów wyklucza pierwszeństwo efekty graficzne w interfejsie przed jego praktycznością? i to jest bardzo fajne.

Reasumując pierwszy argument – ​​material design już wygląda bardzo całościowo, tego właśnie brakowało systemowi operacyjnemu od Google’a i CO – integralności i ogólności. Kiedy otwierając każdy program, czy to kontakty, przeglądarkę, klienta poczty e-mail czy coś innego, widzisz tę samą animację, tę samą paletę kolorów i po prostu rozpoznawalne elementy. Dzięki temu łatwiej jest przyzwyczaić się do nowego systemu operacyjnego i po prostu przyjemnie się z nim pracuje.

Drugi argument jest taki, że jeśli korzystałeś już ze smartfona na Lollipopie lub widziałeś zrzuty ekranu, to zapewne zauważyłeś, że interfejs stał się wizualnie większy. Konsolidacja interfejsu w urządzeniach dotykowych trwa już od dłuższego czasu. Jeśli porównamy pierwsze wersje Androida z „wczesnymi” Windows Mobile– widać, że Android był większy i prostszy, zmieścił się na ekranie mniej informacji, ale wygodniej było też sterować smartfonem. W Material Design niektóre elementy zostały zastąpione „kartami”, nieznacznie zwiększono czcionki, ikony i rozmiary linii, a cały interfejs stał się większy. Podoba mi się to, pewnie dlatego, że się starzeję, żarty na bok, ale im jestem starsza, tym mniej mam ochoty patrzeć na „mililizowane” ikony i elementy, nawet mając dobry wzrok. Swoją drogą właśnie dlatego nie lubię iPhone'a 5 i niczego mniejszego. Kompaktowość jest niewielka, ale nawet na ekranie o przekątnej 4,5 cala chcesz oglądać normalne rozmiary elementów, zamiast studiować je przez szkło powiększające. Jest to po prostu wygodniejsze w wielu sytuacjach, szczególnie podczas pracy np. ze smartfonem w ruchu. Dlatego ogólne powiększenie interfejsu w Androidzie 5.0 w oparciu o Material Design wydaje mi się dobrym krokiem.

Trzecim argumentem za tym jest to, że Google nie tylko przestawił Androida na nowy projekt, ale także od razu przygotował niezbędne przewodniki wizualne pokazujące realizację głównych elementów dla twórców oprogramowania. Mówiąc najprościej, jeśli tworzysz nowy program lub chcesz przekonwertować stary na nowy projekt, ty strona internetowa i zapoznaj się z rekomendacjami Google.

Na przykład mówi, jakich kolorów użyć. pokazane są czcionki i sposób ich użycia. I zalecenia dotyczące używania prawidłowego obrazy graficzne w programie.

Material design – argumenty PRZECIW

Jednak trzeci argument na rzecz material designu jest jednocześnie argumentem przeciwko niemu. Tak, Google jest świetne, że nie porzuca programistów i daje im obszerny przewodnik nad prawidłowym użyciem nowego języka projektowania, ale w tym przypadku, powiedzmy, nie można było myśleć o użytkownikach. Programy napisane według wszelkich zasad material designu lub zmodyfikowane zewnętrznie zgodnie z wytycznymi Google, będą wyglądać bardzo harmonijnie w Androidzie 5.0, a nie tak bardzo we wcześniejszych wersjach systemu. I odwrotnie – wszelkie aplikacje nie przestrzegające zasad Material Design będą wyglądać nieco obco na smartfonie z Androidem Lollipop. A w ciągu najbliższych sześciu miesięcy takich programów, zaryzykuję przypuszczenie, będzie wiele. Jednak nie każdy twórca popularnego programu, szczególnie jeśli jest on skomplikowany i wymaga ciągłych aktualizacji i ulepszeń, rzuci wszystko i zacznie konwertować go na Material Design.

Dobry przykład stary projekt w bardzo aktualnym programie - WhatsApp. Jak długo wniosek nie zostanie przekazany do md? Dobre pytanie

Okazuje się, że niektórzy programiści teraz naprawdę zrezygnują ze wszystkiego i przeniosą swoje programy na projektowanie materiałów, a inni nie. A także w Google Play Są programy w starszej, powiedzmy konstrukcji, ale też czasami niezbędne w pracy. W rezultacie okazuje się, że pragnieniem Google (niewątpliwie słuszne!) jest wprowadzenie Androida Ogólny wygląd To nie wystarczy, trzeba coś zrobić z setkami tysięcy programów. Pytanie - co?

Drodzy czytelnicy, co sądzicie o pomyśle Google, aby wszystkie swoje usługi i aplikacje sprowadzić do wspólnej formy, opierając się na material designie?

Na konferencji dla Programiści Google I/O 2018, z wyjątkiem zaktualizowanego Androida i głębszej integracji sztuczna inteligencja do swoich usług wprowadził Google nowy standard w projektowaniu systemów i aplikacje mobilne- Projektowanie materiałów 2.0. Co nowego?

Biała przestrzeń i przezroczystość Jedną z najbardziej zauważalnych zmian w nowym projekcie materiału jest minimalna ilość nasyconych kolorów i szarego tła, tylko jednolite Biała przestrzeń i przezroczystość. Moim zdaniem wygląda bardzo świeżo, przenosząc tym samym system operacyjny i oprogramowanie na nowy poziom percepcja wzrokowa. Od teraz seryjnego Androida P, bez dodatków graficznych obcych producentów, słusznie uważam to za najpiękniejsze rozwiązanie wśród interfejsów. IMHO Nowe narzędzia dla programistów: Temat materiału

Wtyczka Material Theme do programu Sketch to w zasadzie biblioteka czcionek, ikon i kolorów korporacyjnych udostępniona przez nowe wytyczne Google dla systemu Android P. Ponadto podczas programowania możesz w ciągu kilku chwil edytować kształt komponentów i typografię w swoim projekcie kliknięć. Więcej zaokrągleń i minimalizmu

Jak wielu zauważyło, wygląd stał się bardzo podobny do Apple iOS 10 i 11, ale zdecydowanie ten krok firma podjęła specjalnie z myślą o producentach i posiadaczach smartfonów bezramkowych, których liczba z roku na rok nieubłaganie rośnie, bo taki wygląd systemu i oprogramowania idzie znacznie lepiej z zaokrąglonymi wyświetlaczami.

Nowe czcionki

W nowym projekcie logo i usług markowych programiści i projektanci Google zastosowali krój czcionki Product Sans. Dla nich utworzono specjalny oddział Google Sans. Opiera się na wspomnianej już czcionce, która zastąpiła standardowy Roboto.

Więc już niedługo możemy poczekać przeprojektowanie na dużą skalę wszystkie usługi internetowe i mobilne Google. NA ten moment W sklepie z aplikacjami takimi pierworodnymi są Gry Google Play, Zadania Google oraz aplikacja dla uczestników konferencji Google I/O 2018.

• Zaktualizowany styl ilustracji korporacyjnych

• Używanie czterech podstawowych kolorów logo jako języka wizualnego

Przykład, nowa wersja Gmaila:

Koncepcje Material Design 2.0

Oczywiście społeczność projektantów zareagowała na nadchodzące zmiany projektowe ze strony Google i dokładnie miesiąc temu użytkownik Reddita pod pseudonimem Morphicsn0w przedstawił swoją wizję witryny Google Play.

Oprócz zmian wizualnych w postaci zaokrąglonych kart prezentujących aplikacje, autor zrezygnował jego zdaniem ze zbędnych sekcji, takich jak ostatnio pobierane aplikacje, czyniąc tym samym interfejs sklepu prostszym i bardziej informacyjnym.

Na ekranach opisów aplikacji Morphicsn0w skupił się na opisach aplikacji, odwracając uwagę od informacji o liczbie pobrań i ocenach użytkowników.

Projektant przeprojektował także system wyszukiwania w Google Play, dodając sortowanie znalezionych wyników według ceny, daty aktualizacji, oceny i liczby pobrań. Obecność takiego sortowania znacznie ułatwiłaby wyszukiwanie potrzebnego oprogramowania w sklepie, czekam i mam nadzieję na wdrożenie takiego od Google.

Nie został pominięty uwielbiany YouTube, autor portalu 9to5Google i dorywczo dobry projektant Alex Brooks, który również fantazjował o tym, co można by zmienić w istniejącym kliencie hostingu wideo. Wynik osobiście bardzo mnie zainspirował.

Pierwszą rzeczą, którą Alex przeprojektował, był pasek nawigacji na ekranie głównym, malując go na jasne, wesołe kolory. Za pierwszym punktem znajduje się przeprojektowany pasek wyszukiwania, który nie jest już osobnym przyciskiem, ale zajmuje całą powierzchnię użytkową górnej części aplikacji, ułatwiając tym samym dostęp do niej. Natomiast na dole znajduje się pasek z liczbą subskrybentów, przycisk umożliwiający subskrypcję kanału i powrót do poprzedniego poziomu w oczach autora, co jest rozwiązaniem przydatnym także ze względu na wygodę obsługi.

Projektant połączył sekcję biblioteki (historia obejrzanych filmów, zarządzanie pobranymi filmami, polubionymi filmami itp.) z sekcją ustawień profilu użytkownika; teraz dostęp do obu parametrów można uzyskać, klikając zdjęcie użytkownika. Moim zdaniem, choć jest to kontrowersyjne, w pewnym stopniu nadal takie jest prawidłowe rozwiązanie, gdyż ułatwia to interakcję użytkownika z serwisem i czyni aplikację bardziej zrozumiałą dla nowych użytkowników, dopiero poznających świat technologie mobilne.

Więcej dokładna informacja o koncepcji YouTube od Alexa przeczytaj oryginalny artykuł Koncepcja Google Graj muzykę w Material Design 2.0

Zainspirowany prezentacją i dziesiątkami prac innych projektantów, postanowiłem spróbować zrobić coś własnego, opierając się na jednej z aktualnych usług Google i mój wybór padł na Muzykę Play. Nigdy wcześniej nie współpracowałem z tą usługą, szczególnie jako platformą do streamingu, ale z obowiązku musiałem. Usługa wywołała niezwykle pozytywne wrażenia, choćby dlatego, że sama aplikacja działa poprawnie i w przeciwieństwie do niej nie zawiesza się Muzyka Apple, z którego korzystam od czasu jego wydania na Androida.

Generalnie usługi są podobne i obie realizują swoje podstawowe zadanie – odtwarzanie muzyki. Obaj mają skargi dotyczące interfejsu, ale skoro dzisiaj mówimy o Google, odpowiednio rozważymy ich usługę. Ekran główny

Pierwszy zarzut do głównego ekranu jest taki, że nie podoba mi się, że tak ogromną przestrzeń zajmują wyłącznie pasek wyszukiwania i okładki playlist z wyborami. Właściwie to przede wszystkim postanowiłem to naprawić.

W mojej koncepcji główny ekran to ten sam, ale nieco przemyślany kanał z wyborem albumów, utworów, list odtwarzania w oparciu o gusta użytkownika, tylko teraz, aby wyświetlić zawartość i przejść do odtwarzania żądanego utworu, nie musisz wykonywać dodatkowego kliknięcia i wychodzić z głównego ekranie, to samo dotyczy przechodzenia pomiędzy sekcjami (strona główna, ostatnie, parada hitów itp.), co można teraz wykonać za pomocą przeciągnięć po ekranie. Gracz

Drugim punktem, który moim zdaniem nie powiódł się w projektowaniu, jest odtwarzacz. W oficjalnej aplikacji Google Play Music covery utworów rozciągnięte są na całą przekątną ekranu smartfona, przez co na urządzeniach z wyświetlaczami o wysokiej rozdzielczości wyglądają bardzo niechlujnie i rozmazane. Rozwiązanie problemu przedstawiłem następująco:

Teraz okładki są starannie rozmieszczone pośrodku, a przy lewej i prawej krawędzi wyświetlany jest podgląd poprzedniego i następnego utworu, jakby sugerując możliwość przełączania ich za pomocą machnięcia.

Trzecią rzeczą, która mi się nie podoba w Muzyce Play, jest układ i wystrój biblioteki multimediów. Moim zdaniem jego konstrukcja jest zbyt skomplikowana. Na przykład, aby uzyskać dostęp ta sekcja z ekranu głównego musisz wykonać aż cztery czynności: przesuń, aby zadzwonić Pasek boczny; kliknij, aby wybrać sekcję „Biblioteka muzyczna”; przesuń palcem po liście, aby wybrać żądaną zakładkę (listy odtwarzania, stacje radiowe, artyści, albumy).

Dlatego też przycisk z dostępem do dodanych utworów przeniosłem na dolny dok, a gdy się otworzy, domyślnie wyświetli się zakładka albumy z możliwością sortowania ich według daty wydania, dodatku i alfabetu.Menu/Pasek boczny

Zgodnie z nowymi zasadami projektowania Aplikacje Google'a, przeniosłem zwykłe menu z dostępem do ustawień do prawego górnego rogu.

Prezentacja koncepcji Muzyki Google Play na Behance. Podsumowanie

Podsumowując, chcę powiedzieć, że jestem bardzo zadowolony z drogi, którą Google stara się podążać. Oprócz dużego skoku w rozwoju i wygodzie swoich usług, firma postępuje naprzód ze swoim kodem projektowym. Pisząc pół roku temu artykuł na temat doświadczeń z korzystania z iOS 6 w 2018 roku, przyłapałem się na myśleniu, że na przestrzeni lat mobilne systemy operacyjne Android i iOS niewiele ewoluowały pod względem wizualnym i koncepcyjnym projektu interfejsu, ale teraz nie jestem całkowicie przekonany co do mojego stanowiska, przynajmniej w odniesieniu do Androida.

Dziękuję za uwagę!

Nota autora: w 2014 r. firma Google opublikowała specyfikację Material Design – języka wizualnego, którego celem jest połączenie ustalonych zasad projektowania, płynnych doświadczeń użytkowników na różnych platformach i urządzeniach oraz innowacji technologicznych i naukowych.

Jeśli używasz Bower jako menedżera, możesz wpisać następujące polecenie, aby zainstalować MDL w folderze bower_components: bower install material-design-lite –save

Jeśli używasz npm, aby zainstalować MDL w folderze node_modules, musisz wpisać następującą komendę: npm install material-design-lite –save

Google zaleca używanie plików CSS i JS znajdujących się w CDN. To jest metoda, którą zastosowaliśmy w wersji demonstracyjnej. Przede wszystkim w nagłówku dokumentu HTML musisz się połączyć Plik CSS Ikony MDL, Material Design i style projektów, w których możesz wprowadzać własne zmiany:

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < link rel = "stylesheet" href = "css/styles.css" >

Typografia w materiale Projektowanie Lite

Dla po angielsku i podobnych (znaki łacińskie, greckie i cyrylica) w projekcie materiału wybrano czcionki Roboto i Noto.

Noto obsługuje także pisma „gęste”, takie jak chiński, japoński i koreański, a także pisma „wysokie”, takie jak języki z Azji Południowo-Wschodniej i Bliskiego Wschodu, tj. arabski, hindi itp. Aby uwzględnić czcionkę Roboto w swoim projekcie, dodaj znacznik linku na górze nagłówka dokumentu HTML:

< link rel = "stylesheet" href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" >

W przypadku znaków łacińskich, greckich i cyrylicy specyfikacja Material Design zaleca skale typograficzne 12, 14, 16, 20 i 34. Zasady typograficzne MDL można zastosować, dodając zestaw klas specjalnych do znaczników. Na przykład .mdl-typography — display-2 dla h1 i .mdl-typography — display-1 dla

Ustawi rozmiar czcionki odpowiednio na 45px i 34px:

Tytuł

Podtytuł

< h1 class = "mdl-typography--display-2" >Tytuł< / h1 > < p class = "mdl-typography--display-1" > Podtytuł < / p >

MDL ma sporo klas ze skalami typograficznymi, dostępnością i czytelnością. Klasy ułatwiają wyświetlanie treść tekstu, co sprawia wówczas przyjemność czytania niezależnie od urządzenia, z którego przeglądana jest witryna.

Jak wybrać kolor dla swojego projektu w MDL

Przyjrzyj się plikowi MDL biblioteki material.indigo-pink.min.css. Nazwa pliku odnosi się do palety kolorów Material Design w stylach. Domyślna paleta kolorów wykorzystuje indygo jako kolor główny i różowy jako kolor akcentujący. Ale w żadnym wypadku nie jesteś ograniczony do tych kolorów. Poniżej znajdują się wskazówki dotyczące projektowania materiałów, jak opracować własną paletę kolorów i jak ją wykorzystać w MDL.

Zasady doboru kolorów w Material Design

Material design lubi łączyć jasne i stonowane kolory, cienie i rozjaśnienia: „Kolor powinien być nieoczekiwany i jasny
Specyfikacja projektu materiałów Google”

Nie oznacza to jednak, że na stronie internetowej można używać dowolnych kolorów. Jest zupełnie odwrotnie.
Oferty projektowania materiałów szeroki wybór piękne harmonijne palety kolorów. Aby ułatwić dobór kolorów, każdy kolor w palecie ma kilka poziomów i wartości system szesnastkowy. W wytycznych dotyczących projektowania materiałów znajduje się 500 kolorów podstawowych. Inne kolory najlepiej nadają się do akcentowania.

Przy opracowywaniu własnej palety Material Design zaleca użycie trzech odcieni z palety podstawowej i jednego koloru akcentującego z palety dodatkowej. Przykład:

Kiedy już zrozumiesz zasady stosowania kolorów w projektowaniu materiałów, czas wybrać fajną paletę kolorów dla swojego projektu MDL. Poniżej powiem Ci jak to zrobić.

Jak dostosować domyślną paletę kolorów w Material Design Lite

Przełącz z natywnego paleta kolorów Róż indygo można nałożyć na jeden z poniższych sposobów. Jeśli korzystałeś z Google CDN jak w powyższej wersji demonstracyjnej, musisz:

Ustaw adres URL pliku stylu MDL w atrybucie href łącza w nagłówku dokumentu HTML.

Zastąp indygo i róż odpowiednio kolorami podstawowymi i akcentującymi.

Na przykład wybrałeś turkusowy jako kolor główny i żółty jako kolor akcentujący w palecie. Poniżej przedstawiono wygląd adresu URL stylów MDL w sieci CDN:

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" >

To wszystko! Jeśli przechowujesz skompilowany i zminimalizowany Pliki MDL na swoim serwerze, wtedy strona MDL Ci pomoże. Znajdziesz tam narzędzie Dostosuj i podgląd, które pozwala wybrać kolory główne i akcentujące za pomocą interaktywnego koła palety. Następnie możesz pobrać plik CSS z wybranym motywem i wkleić go bezpośrednio do swojego projektu:

Demo HTML tego artykułu wykorzystuje domyślną paletę koloru indygo-różowego, ale możesz eksperymentować z różnymi kolorami na jeden z dwóch sposobów.

Warstwa komponentów MDL

MDL oferuje wiele powszechnie używanych komponentów sieciowych, w tym warstwy, przyciski, karty, przyciski opcji itp. Zacznij budować strukturę swojego szablonu HTML, korzystając z warstw Material Design Lite. Warstwa MDL rozciąga się na cały kontener za pomocą klas.mdl-layout .mdl-js-layout. Zacznij od poniższego kodu i wklej go zaraz po otwierającym tagu treści:

Aby utworzyć warstwy w MDL, użyj Flexbox CSS. Znacznik z class.mdl-layout to elastyczny kontener z właściwością flex-direction: kolumna. Warstwa składa się z następujących podzespołów:

Warstwa nawigacyjna

Jak używać zakładek do nawigacji

Możesz utworzyć menu, korzystając z jednej z następujących metod: następujące metody:

Przezroczysty nagłówek

Naprawił panel boczny bez nagłówka

Naprawiono nagłówek

Naprawiono nagłówek i pasek boczny

Przewijany nagłówek

Kaskadowy nagłówek

Zachęcamy do przejrzenia wszystkich powyższych opcji w sekcji nawigacji MDL, a także poeksperymentowania z każdą z nich w swoim projekcie.

Jeśli chodzi o demonstrację na początku artykułu, tam wybrałem komponent Tabs jako menu. Wielką zaletą kart jest to, że chociaż treść jest podzielona na osobne ekrany w sekcjach, wszystkie sekcje są fizycznie umieszczone na tej samej stronie. Oznacza to, że gdy użytkownicy klikną łącze do karty, nie będą czekać na załadowanie serwera Nowa strona w przeglądarce. Treść jest dostępna natychmiast, co zapewnia przyjemne doświadczenie odwiedzającym witrynę.

Aby szybko utworzyć nagłówek z zakładkami, będziesz potrzebować: Dodaj dwie kolejne klasy do utworzonego wcześniej kontenera - .mdl-layout —fixed-header i .mdl-layout —fixed-tabs.

< div class = "mdl-layout Mdl-js-layout mdl-layout--fixed-header Układ Mdl--stałe karty" > < / div >

Zwróć uwagę, jak MDL wykorzystuje klasy CSS z przestrzeni nazw BEM.

Twój tytuł Zakładka 1 Zakładka 2

< header class = "mdl-layout__header" > < div class = "mdl-layout__header-row" > < ! -- Title -- > < span class = "mdl-layout-title" >Twój tytuł< / span > < / div > < ! -- Tabs -- > < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" > < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" >Zakładka 1< / a > < a href = "#fixed-tab-2" class = "mdl-layout__tab" >Zakładka 2< / a > < / div > < / header >

Pozostaje tylko dodać odpowiednie panele z treścią:

panel treści 1 panel treści 2

< main class = "mdl-layout__content" > < ! -- Panel 1 -- > < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" > < div class = "page-content" > < ! -- контентпанели1 -- > panel treści 1 < / div > < / section > < ! -- Panel 2 -- > < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" > < div class = "page-content" > < ! -- контентпанели2 -- > panel treści 2 < / div > < / section > < / main >

Panel z id="fixed-tab-1" ma ustawioną klasę na .is-active i będzie domyślnie wyświetlany.

Jak umieścić dodatkową zawartość na pasku bocznym

Demo wykorzystuje również sekcję szuflady. Szuflada to pasek boczny, który można ukryć lub wyświetlić, klikając przycisk. Możesz także sprawić, że panel będzie otwarty i nieruchomy, tak aby jego zawartość była zawsze widoczna.

Twój tytuł

< div class = "mdl-layout__drawer" > < span class = "mdl-layout-title" >Twój tytuł< / span > < / div >

Obejrzyj te fragmenty kodu w akcji lub obejrzyj ukończoną wersję demonstracyjną z zakładkami i paskiem bocznym.

Siatka w Material Design Lite

MDL wykorzystuje 12-kolumnową siatkę komputery osobiste, 8-kolumnowa siatka dla tabletów (do 800px) i 4-kolumnowa dla ekranów urządzeń mobilnych (do 500px). Możesz przekształcić kontener w siatkę, dodając klasę .mdl-grid:

Domyślnie kontener na kolumny siatki zajmuje całą szerokość ekranu. Jeśli Ci się to nie podoba, ogranicz szerokość za pomocą stylów. Na przykład w wersji demonstracyjnej tego artykułu zaimplementowano obie opcje, zarówno siatkę pełnoekranową, jak i wyśrodkowany blok:

Wynik ten można osiągnąć, jeśli każdą sekcję owiniesz różnymi elementami .mdl-grid i dodasz niestandardową klasę z CSS max-width: 960px do osobnej sekcji.

< div class = "mdl-grid intro-section" > < ! -- контентненавесьэкран-- > < / div >

Sekcja wstępna (maksymalna szerokość: 960px; )

Wprowadzenie - sekcja ( maksymalna szerokość: 960px;

Także jeśli chcesz się pozbyć marginesy margines pomiędzy kolumnami siatki, MDL ma cudowną klasę, którą należy dodać do kontenera kolumn - .mdl-grid—no-spacing:

< div class = "mdl-grid mdl-grid--no-spacing" > < ! -- контент-- > < / div >

Otrzymasz coś takiego:

< div class = "content-grid mdl-grid" > < div class = "mdl-cell" > < ! -- контент-- >

Material Design to koncepcja projektowa stworzona w celu ujednolicenia usług, interfejsów i innych produktów. Koncepcja została opracowana przez firmę Google i zaprezentowana szerokiej publiczności 25 czerwca 2014 r. na konwencji Google I/O. W centrum rozwoju schemat kolorów, właściwości i elementy obiektów projektowych. Material Design jest regularnie uzupełniany i aktualizowany przez programistów. Krótko mówiąc, podstawową ideą jest projekt blokowy, który otwiera się i składa w kostki niczym karty, wykorzystując efekt cienia. Same karty powinny płynnie przełączać się między sobą.

Strategia stojąca za tym projektem polega na stworzeniu całościowego charakteru doświadczenie użytkownika, możliwość jak najszerszego dotarcia usług różne obszary aktywność życiowa użytkownika komputera PC.

Tworząc przedmioty czerpiemy z wielowiekowego doświadczenia i na nim się opieramy. Ale projektowanie Oprogramowania– To produkt raczkujący i systematycznie rozwijający się. Patrząc na to całościowo, zadawaliśmy sobie pytanie: z czego się składa?

– John Wiley, dyrektor ds. projektowania w wyszukiwarce Google

Główne zasady

Do głównego Zasady materialne Projekt obejmuje powierzchnie dotykowe, projekt druku, znaczącą animację i responsywny projekt.

Powierzchnie dotykowe. Interfejs składa się z „papieru cyfrowego”. Warstwy tego „papieru” układane są jedna na drugiej i rzucają cienie. Dzięki tym cieniom użytkownicy komputerów PC lepiej rozumieją podstawy pracy z interfejsem.

Projekt wydruku. „Papier cyfrowy” wyświetla „atrament cyfrowy”. W przypadku obrazów wykonanych tuszem cyfrowym stosuje się podejście tradycyjnego projektowania czasopism lub plakatów. Głównymi elementami projektu druku są skala, siatka, kolor i przestrzeń. Z nich tworzone są skupienie, hierarchia i znaczenie. Dzięki kolorowi, czcionkom, rozmiarom, tłu i innym elementom powstaje sam projekt interfejsu. Korzystanie z niego skupia uwagę na głównej funkcjonalności, kluczowych punktach zarządzania produktem lub usługą.

Znacząca animacja. Przejrzystość i zrozumiałość animacji aplikacji bezpośrednio determinuje czas spędzony przez użytkownika komputera osobistego na zrozumieniu wyników działań zastosowanych w tym programie. Animacja jest swego rodzaju podpowiedzią dotyczącą zarządzania interfejsem Material Design.

Projekt adaptacyjny. Jedną z cech Material Design jest jego wszechstronność, czyli możliwość wykorzystania trzech komponentów opisanych powyżej różne urządzenia takie jak komputer, telefon, tablet itp.

Powierzchnie dotykowe

Powierzchnie dotykowe to te same kawałki „cyfrowego papieru”, które w przeciwieństwie do zwykłego papieru mają supermoce – mogą się rozciągać, łączyć i zmieniać swój kształt.

Powierzchnia

Powierzchnia to część elementu projektu, która rzuca cień odróżniający jeden element od drugiego. Material design dąży do maksymalnej prostoty i „czystego” designu.

„Czysty” projekt nazywany jest zwykle zdolnością do przekazania właściwości obiektu poprzez gradient lub cień, bez użycia struktury. Wszystkie powierzchnie mają swój własny cień i pewną wysokość.

Głębokość

W „płaskim projekcie” starają się nie używać cieni, które pokazują objętość. Jednocześnie cienie wyznaczają pewną hierarchię i strukturę elementów interfejsu. Głęboki cień podkreśla kluczowy temat i skupia na nim uwagę w subtelny i elegancki sposób.

Głębia jest wskazówką dotyczącą interakcji obiektów. W momencie przewijania użytkownika zielona płytka przyczepiona jest do górnej warstwy i tworzy cień. To wyraźnie pokazuje nie tylko ruch „atramentu”, ale także ruch białe tło znajduje się poniżej.

Dolna warstwa głębi jest „dnem”.

• Pamiętaj o logistyce. Różne okna dialogowe, pływające okna, paski narzędzi mają określoną wysokość. Aby uniknąć kolizji, muszą okresowo poruszać się wzdłuż osi Z.
• Nie naciskaj przycisków. Pływającego przycisku należy używać tylko w przypadku pilnej potrzeby, ponieważ jego użycie natychmiast wprowadza do projektu efekt Material Design. Nie należy go używać do potwierdzania jakichkolwiek działań lub zamykania okien.
• Nie wszystko musi być na karcie. Używanie karty jest właściwe tylko wtedy, gdy obiekt zawiera wiele form i dużą ilość treści. W przypadku innych opcji rozsądniej jest używać tradycyjnego tekstu lub list.
• Minimalizm w oknach dialogowych. Okna dialogowe powinny być używane wyłącznie do potwierdzania działań użytkownika w przypadku pojawienia się pytań.

Projekt wydruku

Wszystkie obiekty znajdujące się na powierzchni materiału projektowego nanoszone są „atramentem cyfrowym”. Obiektami tymi są obrazy, testy, piktogramy. Układ tych obiektów jest zgodny z zasadą projektowania poligraficznego.

Elegancka typografia

Typografia jest ważna w projektowaniu druku. Ustala strukturę treści i wpływa na kształtowanie się stylu danej marki.

Typografia tworzy strukturę elementów, które mają swoją wielkość, czcionkę, hierarchię.Za ich pomocą wizualnie rozumiemy, które elementy są ważniejsze i dlaczego niektóre z nich są kluczowe, a inne drugorzędne.

Kontrastowa typografia

Jeszcze jeden ważna zasada druk jest kontrastem typografii. Łatwo to zauważyć duży nagłówek i ciemna czcionka oznaczają coś ważnego i podstawowego, natomiast mniejszy tekst i jaśniejszy ton oznaczają informacje drugorzędne. Kontrast pozwala podkreślić główne punkty, nadając całości estetykę treści.

Siatka modułowa i prowadnice

Podczas gdy projekt ekranu wykorzystuje podstawowe siatki, projekt druku wykorzystuje siatki modułowe. W przypadku Material Design używana jest siatka z krokiem 8dp.

Charakterystyczną cechą rozmieszczenia treści w Material Design jest rozmieszczenie podstawowych wytycznych. Dzięki nim od krawędzi ekranu powstają wcięcia, wpływające na strukturę treści strony i kontrolę wzroku użytkownika. W rezultacie na środku ekranu widzimy tekst główny i dodatkowe elementy położonych poza nim, na granicach.

Ikonografia geometryczna

Najprostsze ikony są od dawna używane w oparciu o system Android. W Material Design wyglądają jeszcze prościej i przyjemniej wizualnie.

Na przykład wskaźniki i przyciski są wyróżnione bogatymi, jasnymi kolorami. Dzięki tej kolorystyce kładą nacisk na główne elementy sterujące (pływające przyciski itp.). W przypadku konieczności wprowadzenia do projektu dodatkowych kolorów, zaleca się zastosowanie podstawowych, dyskretnych odcieni.

Pobierz ikony na ten temat:

Kolor

Kolor w projektowaniu odpowiada za wyrazistość. Wcześniej w Androidzie schemat kolorów był drugorzędny, ale teraz jest przypisany jeden z kluczowe role. W Material Design podstawowa paleta kolorów składa się z odcieni akcentujących i podstawowych.

Pasek akcji jest pomalowany głównym kolorem, a pasek stanu jest podświetlony bardziej nasyconym tonem. Kolor akcentujący jest używany do pasków, wskaźników, pływających przycisków. Zwraca na to uwagę kluczowe elementy tablica.

Akcenty są rozmieszczone punktowo i w małych ilościach. W pozostałej części interfejsu kolory stosowane są zgodnie z zasadą: pozostaje duża ilość tekstu (lista listów pocztowych) standardowy rozmiar i dodaj kolor, aby przyciągnąć uwagę użytkownika komputera; niewielka ilość tekstu (kalkulator, zdjęcie) jest zwiększana 2-3 razy i dodawane są kolorowe kostki.

W systemie Android istnieje możliwość dynamicznego kolorowania interfejsu, czyli wyróżniania głównych kolorów z całości zdjęcia.

Piękne zdjęcia

W Material Design można, a nawet trzeba wykorzystywać różne zdjęcia i ilustracje. Często zdjęcia nie mają ramek. Sam pasek stanu jest bezbarwny, aby nie odwracać uwagi od obrazów. „Atrament cyfrowy” zawsze służy nie tylko urodzie, ale także funkcjonalności projektu.

• Zalecane jest oznakowanie marki.
• Nie możemy zapomnieć o wcięciach i wolnej przestrzeni (dla siatki bazowej 8dp, dla wcięć - 72 dp).
• Używaj jasnych obrazów.

Znacząca animacja

Material Design, podobnie jak świat fizyczny, wykorzystuje znaczącą animację, aby pokazać użytkownikowi, co wydarzyło się w danej chwili. Oznacza to, że użytkownik powinien zobaczyć, że żaden obiekt nie pojawia się znikąd i nie znika.

Przykład 1. Animacja pokazuje, że ta konkretna karta po kliknięciu wyszła na pierwszy plan, otworzyła się i ukazało się więcej informacji.

Przykład 2. Po kliknięciu na datę w kalendarzu wyskakuje wydarzenie, które płynnie odrywa się jako warstwa od ogólnego kalendarza, zamienia się w osobny blok i ujawnia się w szczegółowym osobnym bloku z opisem tego wydarzenia .

Animacja pomaga skoncentrować uwagę użytkownika i skupić jego wzrok na działaniach interfejsu.

Reakcja

Kolejnym kluczowym punktem animacji w Material Design jest reakcja na określone działania użytkownika komputera. Zmiany w interfejsie Androida L następują po dotknięciu palców. Zmiany te odzwierciedlają się w działaniu przypominającym falę.

Mikroanimacje

Mikroanimacje są niezwykle ważne. Są wykorzystywane jako odpowiedź na wszelkie manipulacje użytkownika. Dzięki temu interfejs jest bardziej szczegółowy i responsywny.

Jasność i ostrość

Ostatnią zasadą animacji jest klarowność i ostrość akcji. Material Design ma interesującą krzywą animacji. Wszystkie obiekty szybko reagują na działania użytkownika, gwałtownie powracają, ale ich zamrożenie i przejście do ostatecznego spokojnego stanu zajmuje trochę więcej czasu. Ostatecznie użytkownik nie traci czasu na czekanie, co oznacza, że ​​nie denerwuje się i nie odbiera negatywne emocje podczas interakcji z interfejsem.

• Przemyśl animację z wyprzedzeniem.
• Używaj animacji optymalnie (odradza się nadmierne używanie, ponieważ każda animacja musi mieć znaczenie).

Projekt adaptacyjny

Ostatnim kluczowym aspektem Material Design jest koncepcja projekt adaptacyjny. Oznacza to możliwości zastosowania pozostałych trzech aspektów różne ekrany urządzenia (telefon, komputer, telewizor itp.).

Od ogółu do szczegółu

Najpopularniejszą metodą jest kompresja ilości informacji wraz z kompresją samego ekranu. Na telewizorze możesz zmieścić wiele treści. Telefon najpierw wyświetla listę, którą można kliknąć, aby wyświetlić szczegółowe informacje.

Wcięcia

NA duże ekrany treść jest umieszczana za pomocą bloków. Wypełniają się sobą wolna przestrzeń i można go rozciągnąć na szerokość. Rozciąganie następuje z myślą o czytelności treści. Na pozostałej części ekranu tworzone są wcięcia, na których można umieścić pływające przyciski lub kafelki.

Przewodniki

Wcięcia ustawia się za pomocą prowadnic. Szerokość wcięć w smartfonach, tabletach, komputerach i telewizorach będzie zupełnie inna. Zatem dla tabletu jest to 80 dp, a dla ekranu smartfona tylko 72 dp.

Wymiary

Wszystkie elementy interfejsu muszą mieć wiele proporcji. Rozmiary ekranów tabletów i smartfonów różnią się od siebie, ale aplikacje korzystające z elementów o wielu parametrach dostosowują się do każdego rozmiaru urządzenia.

Bloki

Modułowa siatka bloków pomaga ustalić wizualny rytm umożliwiający podejmowanie optymalnych decyzji.

pasek narzędzi

Pasek akcji jest jednym z głównych elementów interfejsu. Zawiera przyciski akcji i nagłówki. W Androidzie L pasek akcji stał się atrakcyjny i blok funkcyjny kierownictwo. Osiągnięto to dzięki temu, że na pasku narzędzi można umieścić formularze, pływające przyciski i wysuwaną nawigację z wygodnymi kontrolkami.

• Nie powinieneś używać szuflady nawigacji do proste narzędzia. Zalecane jest używanie nawigacji tylko w przypadku wielu zadań w aplikacji.
• Odważ się używać pasków narzędzi.
• Umieść pływający przycisk w najbardziej optymalnym miejscu. Nie przyciągaj ściśle do dolnego rogu.
• Przećwicz elementy interfejsu zarówno dla pionowych, jak i poziomych ekranów urządzeń.

Materiał jako metafora

Deweloperom Google udało się połączyć dobry, atrakcyjny design z innowacyjnością. nowoczesne technologie i nauka.

Materializm w sfera cyfrowa To nie pierwszy raz, kiedy zostały użyte. Dlatego Apple ostatnio wykorzystał filozofię skeuomorfizmu (naśladowanie percepcji obiektów wizualnych z otaczającego nas świata materialnego) w projektowaniu interfejsów.

Dobrym tego przykładem jest aplikacja Kiosk. Tutaj wizualizowaliśmy znane nam przedmioty: gazety, czasopisma stojące na półkach. Przeglądając te czasopisma, symulujemy prawdziwe przeglądanie zwykłej książki Życie codzienne. W ten sposób tradycyjne prawdziwe życie jest powielane w „cyfrowym”.

Rozwój projektowania cyfrowego

Zdecydowana większość użytkowników codziennie wchodzi w interakcję ze środowiskiem cyfrowym. Nie wymagają już dokładnych podobieństw między obiektami wirtualnymi a światem rzeczywistym. Im szybciej wszyscy użytkownicy przyzwyczają się do tego momentu, tym szybciej projektowanie cyfrowe zacznie aktywnie iść do przodu.

W związku z tym na Material Design nie ma już tak dużego wpływu skeuomorfizm. Teraz jest to po prostu nowy krok w ewolucji obiektów wirtualnych.

Widoczność jako podstawa

Powierzchnie i twarze różne elementy elementy sterujące w Material Design tworzą wskazówki dotyczące orientacji i kontroli interfejsu, podobne do działań w prawdziwym życiu.

Cechy dotykowe obiektów pomagają odróżnić obiekty kluczowe od dodatkowych i określić relacje między nimi.

Podstawy projektowania materiałów obejmują również zasady projektowania druku. Nacisk położony jest nie tylko na estetykę, ale także na stworzenie specjalnej struktury, hierarchii i stworzenie prostego systemu zarządzania.

Element wizualny Material Design opiera się na: bogatej kolorystyce, wyraźnych krawędziach, dużej typografii i duże wcięcia pomiędzy różnymi elementami.

Znacząca dynamika

Główna uwaga skupiona jest na zachowaniu (działaniach) użytkownika. Jego interakcja z projektowaniem odbywa się w oparciu o zgromadzone doświadczenia użytkownika i nic więcej.

Przykłady stron internetowych w stylu Material Design

Gdy tylko koncepcja ukazała się w sieci, w sieci pojawiło się wielu przedstawicieli Material Design.

Przykładowe strony tworzone są ściśle według podstawowych zasad Material Design. Są proste i przejrzyste, zawierają pływające przyciski, cienie, jasne kolory i efekty wizualne, płynna nawigacja. Wszystko to składa się na doskonałe doświadczenie użytkownika.

Filmy

Zainteresowało mnie Material Design ogromna publiczność. Pokazuje, jak poprawnie stworzyć UI, aby był całkowicie zrozumiały i przejrzysty dla użytkownika, podobnie jak znajomy przedmiot ze świata rzeczywistego, którego można dotknąć rękami.

Roman Nurik, jeden z projektantów w zespole Google, wyjaśnił, jak aplikacja I/O 2014 zmieniała się w procesie rozwoju, aby była zgodna z zasadami Material Design. Specjalnie dla Ciebie przetłumaczyliśmy jego film.

Film z kanału Google Design.