Поглед към Материалния дизайн на Google

2019

В последното събитие през 2014 г. Google се върна с новите си изненади. Освен официално пуснатия нов Android ъпдейт с кодово име Lollipop, Google представи и новия си език за дизайн, Material Design . Това е система за дизайн, която не е предназначена само за новите подобрения на потребителския интерфейс на Lollipop, но и за устройства и среди.

Материалният дизайн има някои основни характеристики, които го отличават между другите тенденции в дизайна със своите уникални начини. Също като името му, тя е вдъхновена от реални материали и ги комбинира в една дизайнерска система, за да създаде елегантен, интуитивен, красив и най-интерактивен потребителски опит. В тази публикация ще разгледаме какво е в дизайна на материалите и ще ви дадем кратко ръководство как да го приложите. Като цитирам блога на Google, ще кажа: "Това е материалният дизайн".

Представяне

Материалният дизайн е унифицирана дизайнерска система, означава, че е направена да работи с всички налични съвременни устройства и платформи. От таблета, смартфона до работния плот и от платформите Android, iOs, Windows и Web. Всички дизайн изглежда и трябва да бъде същото, където и да е.

Основни принципи

Има три основни принципа, които изграждат Материалния дизайн. Това са най-съществената част от това, което Материалът предлага като цяло.

Материалът е метафората . Развитието на материала е вдъхновено от изучаването на тактилни елементи, които използваме всеки ден, хартия и мастило . Това прави обекта светлина, повърхност и движения са по-добри, когато взаимодействат помежду си.

Смели, графични и преднамерени . Типографията, решетките, пространството, мащаба, цвета и използването на изображения, които се използват в основата на дизайна на печатния дизайн, подобряват съдържанието на материала.

Предложението дава смисъл . Това е едно от най-забележимите неща. В Материал трябва да имате смислено и подходящо движение, фина и ясна обратна връзка и ефективен и последователен преход.

Компонентите

Материалният дизайн обръща внимание на всеки детайл от неговите компоненти, така че те могат да се използват универсално. Тези компоненти ще ви помогнат да създадете невероятно приложение и сайт. Има толкова много компоненти, предоставени от Материал като бутони, превключвател, карта, въвеждане на текст, Fab (плаващ бутон за действие), диалог, тост, подменю, раздел и др. Всеки от тях има собствено правило и ръководство как да ги изгради, така че няма да има никакви несъществени елементи.

Шаблони

Освен компонентите, материалът ви предоставя и някои основни модели за допълнителен потребителски интерфейс. Тези модели ще подобрят потребителския интерфейс, който сте създали с компонентите на материал. Моделите, включително формата на данните, чекмеджето за навигация, грешките, жестовете, техниката за превъртане, търсенето, настройките, зареждането на изображения, неточен удар за обновяване и др.

Цветове за дизайн на материалите

Цветовете в материалите бяха проектирани по такъв начин, че няма да ви накара да се почувствате неудобно, странно и плоско. Вдъхновявайки се от ежедневната ни среда, като пътни знаци, съвременна архитектура, ленти за маркиране на тротоар и спортни кортове, Material Design ви носи неочаквани и енергични цветове. Има толкова много цветови палитри, които да ви дадат по-голямо удобство при разработването на приложения или сайтове. Можете също така да изтеглите цветни мостри за местна употреба, като например за вашата колекция от Photoshop.

Икона на материала

Ако сте разработчик на Android, трябва да сте запознати с някои безплатни пакети с икони, предоставени от Google. Обикновено се използват само за главен елемент и лента за действия. Докато за други ресурси, ние трябва да търсите други икони като за папка, файл, копиране и поставяне и т.н. ръчно. В Material Design Google е решил проблема с тонове икони пакети, които можете да използвате.

Всяка от иконите е преминала през някакъв дизайнерски подход, който също използва изучаването на тактилни материали. Те са и поддържат Материалния принцип, който е последователен. Можете да изтеглите тези икони на GitHub, те идват с опция за различна употреба, като например за iOs, web, Android или svg. Ако искате по-широка опция за лесно персонализиране, вероятно ще искате да видите пакети с икони на Material Design на FlatIcon. Вътре в пакета ще получите вектор на икони (SVG & EPS), PSD и PNG версия.

Анимация на материала

Това са характеристиките на материала, които ми харесват най-много. Анимациите в Материал са толкова реални и интуитивни. Всяка анимация има смислени, последователни и правилни времеви преходи. Gif демонстрацията, показана по-долу, е само една от красивите анимации на материали. За да осигури интерактивно и отзивчиво взаимодействие, екипът на Google също създава анимация, наподобяваща водни пулсации за ефекта от потребителското въвеждане. Най-често се използва за бутони и карти.

Тези функции, които обясних, са само малка част от офертата на Material Design. За да научите повече за материалния свят, просто отидете на страницата с документацията.

изпълнение

По подразбиране, Material Design идва като новата UI актуализация за Android Lollipop. Всички насоки, които Материалът е използвал в него. Тъй като Материалът е предназначен за всякакви среди, прилагането му в друга система няма да е трудно. И благодарение на общностите, това е още по-лесно с някои инструменти, които са създали.

Това са няколко начина, по които можете да постигнете, за да получите Материал Дизайн извън Android, уеб например.

Използване на CSS Frameworks

Това е най-лесният начин, ако искате да внедрите Material Design в уеб платформата. С рамки, всичко, което трябва да направите, е да го инициализирате, след което да напишете елементите, от които се нуждаете. Има много рамки, които можете да използвате като Materialize, Material UI или Polymer, за да назовем само няколко. Личният ми избор попада в материализирането. Това е по-лесно за използване и разбиране и имат голяма документация с хубава демонстрация.

Следва Указанията

Ако искате да внедрите Материал без помощта на рамката и предпочитате да се забърквате с кодовете най-много, тогава трябва да следвате Материалните указания. Там ще намерите всички неща, които трябва да забележите, за да постигнете Материални принципи. Ще видите основното ръководство за създаване на компоненти, оформление, анимация, цвят, модели и др. Може би искате да видите някакъв контролен списък за по-лесно разработване.

заключение

Материалният дизайн е страхотна дизайнерска система и се превърна в една от най-очакваните тенденции за годината. През следващите няколко месеца може да го видим навсякъде. Още нови приложения и сайтове ще бъдат изгладени с новата актуализация на дизайна на Google.

И с Material Design, Google доказа своето превъзходство като една от най-големите компании за технологии. Това прави Google не само водещ в областта на търсачките и мобилните операционни системи, но и в областта на проектирането. Вече няма други компании, които да развият това голямо нещо като Google. Но опитът казва, че няма да продължи дълго. Нека просто изчакаме други компании да отговорят на материалния дизайн на Google.