Spojrzenie na materiałowy projekt Google

2019

Podczas ostatniego wydarzenia I / O 2014, Google wrócił z nowymi niespodziankami. Oprócz oficjalnej premiery nowej aktualizacji Androida o kryptonimie Lollipop, Google wprowadziło również nowy, nowy język projektowania, Material Design . Jest to system projektowania, który nie jest przeznaczony tylko do ulepszeń interfejsu użytkownika Lollipop, ale także do urządzeń i środowisk.

Material Design ma kilka głównych cech, które wyróżniają go spośród innych trendów w zakresie projektowania z wykorzystaniem własnych, unikalnych sposobów. Podobnie jak nazwa, została zainspirowana prawdziwymi materiałami i połączyła je w jeden system projektowy, aby stworzyć eleganckie, intuicyjne, piękne i najbardziej interaktywne doświadczenie użytkownika. W tym poście przyjrzymy się temu, co znajduje się w Material Design i podamy krótki przewodnik, jak go wdrożyć. Cytując blog Google'a, powiem "To jest Material Design".

Wstęp

Material Design to ujednolicony system projektowania, co oznacza, że został stworzony do pracy ze wszystkimi dostępnymi obecnie urządzeniami i platformami. Od tabletu, smartfona po komputer i od Androida, iOs, Windows po platformy internetowe. Wszystkie wygląd i wygląd powinny wyglądać tak samo, niezależnie od tego, gdzie się znajdują.

Główne zasady

Istnieją trzy główne zasady, które konstruują Material Design. Są to najbardziej podstawowa część oferty Materiałów w ogóle.

Materiał jest metaforą . Rozwój materiału był inspirowany badaniem dotykowych elementów, które używamy na co dzień, papieru i tuszu . Sprawia, że obiekt, światło, powierzchnia i ruchy są lepsze podczas interakcji ze sobą.

Odważny, graficzny i celowy . Typografia, siatki, przestrzeń, skala, kolor i wykorzystanie obrazów, które zostały użyte w podstawowym projekcie opartym na druku, powoduje, że zawartość Materiału jest lepsza.

Ruch zapewnia znaczenie . To jedna z najbardziej znanych rzeczy. W materiałach powinieneś mieć sensowny i odpowiedni ruch, subtelne i wyraźne informacje zwrotne oraz skuteczne i spójne przejście.

Części

Material Design zwraca uwagę na każdy szczegół jego elementów, dzięki czemu można ich używać uniwersalnie. Te komponenty pomogą Ci zbudować niesamowitą aplikację i witrynę. Jest tak wiele komponentów dostarczanych przez materiał, takich jak przyciski, przełącznik, karta, wprowadzanie tekstu, fab (zmienny przycisk akcji), okno dialogowe, toast, podmenu, karta i inne. Każdy z nich ma swoją własną regułę i przewodnik, jak je zbudować, abyś nie miał żadnych nieistotnych elementów.

Wzory Rzecz

Oprócz komponentów, Materiał zapewnia również kilka podstawowych wzorów dla dodatkowego interfejsu użytkownika. Wzorce te poprawią interfejs użytkownika utworzony za pomocą komponentów Materiał. Wzorce zawierające format danych, szufladę nawigacji, błędy, gesty, technikę przewijania, wyszukiwanie, ustawienia, ładowanie obrazów, przesuwanie w celu odświeżenia i inne.

Material Design Colors

Kolory w Materiałach zostały zaprojektowane w taki sposób, aby nie sprawiały, że czujesz się nieswojo, dziwnie i płasko. Inspirując się codziennym otoczeniem, takim jak znaki drogowe, współczesna architektura, taśma do znakowania nawierzchni i boiska sportowe, Material Design oferuje nieoczekiwane i pełne humoru kolory. Istnieje tak wiele palet kolorów do wyboru, które zapewniają większą wygodę podczas tworzenia aplikacji lub witryn. Możesz również pobrać próbki kolorów do użytku lokalnego, np. Do kolekcji Photoshop.

Ikona materiału

Jeśli jesteś programistą Androida, musisz zapoznać się z darmowymi pakietami ikon Google. Zazwyczaj są one używane tylko dla głównego elementu i paska akcji. W przypadku innych zasobów musimy ręcznie przeszukać inne ikony, takie jak folder, plik, kopiowanie i wklejanie itp. W Material Design Google naprawił problem z mnóstwem pakietów ikon, z których możesz korzystać.

Każda z ikon została poddana pewnym projektom, które wykorzystują również badania dotykowych materiałów. Oni także utrzymują zasadę Materialności, która jest spójna. Możesz pobrać te ikony na GitHub, są one dostępne z różnymi opcjami, takimi jak iOS, web, Android lub svg. Jeśli chcesz szerszej opcji łatwego dostosowywania, prawdopodobnie będziesz chciał zobaczyć pakiety ikon Material Design na FlatIcon. Wewnątrz paczki otrzymasz wektor ikon (SVG i EPS), PSD i PNG.

Animacja materiału

To cechy materiału, które najbardziej lubię. Animacje w Materiałach są tak rzeczywiste i intuicyjne. Każda animacja ma sensowne, spójne i właściwe przejścia czasowe. Pokazane poniżej demo gif to tylko jedna z pięknych animacji Material. Aby zapewnić interakcję angażującą i elastycznie reagującą, zespół Google tworzy również animację przypominającą marszczyć wodę dla efektu wejścia użytkownika. Jest używany głównie na przyciskach i kartach.

Te cechy, które wyjaśniłem, to tylko niewielka część oferty Material Design. Aby dowiedzieć się więcej o świecie materiałów, przejdź do strony dokumentacji.

Realizacja

Domyślnie Material Design jest nową aktualizacją interfejsu dla Androida Lollipop. Wszystkie wytyczne, które Materiał został zastosowany w środku. Ponieważ materiał jest przeznaczony dla wszystkich rodzajów środowisk, wdrożenie go w innym systemie nie będzie trudne. A dzięki społecznościom jest to o wiele łatwiejsze dzięki niektórym narzędziom, które stworzyli.

Można to osiągnąć na kilka sposobów, aby uzyskać Material Design poza Androidem, np. W Internecie.

Korzystanie ze struktur CSS

Jest to najprostszy sposób, jeśli chcesz zaimplementować Material Design na platformie internetowej. W przypadku frameworków wszystko, co musisz zrobić, to zainicjować go, a następnie napisać elementy, których potrzebujesz. Istnieje wiele struktur, które możesz wykorzystać, np. Materialise, Material UI lub Polymer, aby wymienić tylko kilka. Mój osobisty wybór należy do Materialise. Łatwiej jest używać, rozumieć i mieć świetną dokumentację z ładnym demo.

Postępuje zgodnie z wytycznymi

Jeśli chcesz zaimplementować Materiał bez pomocy frameworka i wolisz bardziej bałaganić z kodami, musisz przestrzegać Wytycznych dotyczących materiałów. Tam znajdziesz wszystkie instrukcje i ostrzeżenia, które powinieneś zauważyć, aby osiągnąć Zasady Materialne. Zobaczysz wszystkie podstawowe instrukcje dotyczące tworzenia komponentów, układu, animacji, kolorów, wzorów i innych elementów. Możesz chcieć zobaczyć listę materiałów dla łatwiejszego rozwoju.

Wniosek

Material design to świetny system projektowania i stał się jednym z najbardziej oczekiwanych trendów roku. W ciągu najbliższych kilku miesięcy możemy zobaczyć go wszędzie. Więcej aplikacji i witryny zostanie wypolerowanych dzięki nowej aktualizacji projektu Google.

Dzięki Material Design Google udowodniło swoją wyższość jako jedna z największych firm technologicznych. Dzięki temu Google nie tylko prowadzi w wyszukiwarkach i mobilnym systemie operacyjnym, ale również w dziedzinie projektowania. Do tej pory nie ma innych firm, które rozwinęłyby taką wielką rzecz jak Google. Ale doświadczenie mówi, że to nie potrwa długo. Poczekajmy, aż inne firmy zareagują na Material Design Google.