У минулому 2014 році I / O подія, Google повернувся зі своїми новими сюрпризами. Крім офіційно випущеного нового оновлення Android з кодовим ім'ям Lollipop, Google також представила свою нову мову дизайну, Material Design . Це система дизайну, яка не просто призначена для нових поліпшень інтерфейсу користувача Lollipop, але й для різних пристроїв і середовищ.
Матеріал Дизайн має деякі основні особливості, які відрізняють його серед інших тенденцій дизайну з його власними унікальними способами. Так само, як і його назва, вона була натхнена реальними матеріалами і об'єднала їх в одну конструкторську систему для створення гладкого, інтуїтивного, красивого і найбільш інтерактивного користувальницького досвіду. У цій посаді ми розглянемо те, що знаходиться в розділі Material Design, і надамо короткий посібник щодо його реалізації. Цитуючи блог Google, я хочу сказати: "Це матеріал".
Вступ
Матеріальний дизайн є єдиною системою проектування, що означає, що він був створений для роботи з усіма наявними сучасними пристроями і платформами. Від планшетів, смартфонів до робочого столу та від платформ Android, iOs, Windows до веб-платформ. Весь дизайн виглядає і відчуває себе таким же, де б він не був.
Основні принципи
Існують три основні принципи побудови матеріалу Design. Це найважливіша частина того, що Матеріал пропонує в цілому.
- Матеріал - метафора . Розвиток матеріалу було натхнене вивченням тактильних елементів, якими ми користуємося щодня, папером і чорнилом . Це робить об'єкт світлом, поверхнею і рухами краще при взаємодії один з одним.
- Сміливий, графічний і навмисний . Типографіка, сітки, простір, масштаб, колір і використання зображень, які використовуються в основоположному дизайні на основі друку, покращує вміст матеріалу.
- Рух забезпечує сенс . Це одна з найбільш помітних речей. У матеріалі «Матеріал» ви повинні мати чіткий і належний рух, тонкий і чіткий відгук, а також ефективний і послідовний перехід.
Компоненти
Матеріальний дизайн приділяє увагу кожній деталі його компонентів, щоб їх можна було використовувати універсально. Ці компоненти допоможуть вам створити дивовижну програму та сайт. Матеріал містить багато компонентів, таких як кнопки, перемикач, картка, введення тексту, fab (кнопка з плаваючою дією), діалогове вікно, тост, підменю, вкладка тощо. Кожен з них має своє власне правило і керівництво щодо того, як їх будувати, щоб у вас не було ніяких незначних елементів.
Шаблони річ
Крім компонентів, матеріал також надає деякі основні шаблони для додаткового інтерфейсу. Ці шаблони покращать інтерфейс користувача, створений за допомогою компонентів Material. Шаблони, включаючи формат даних, ящик навігації, помилки, жести, техніку прокрутки, пошук, налаштування, завантаження зображень, проведіть пальцем для оновлення та багато іншого.
Кольори дизайну матеріалу
Кольори в матеріалі були оформлені таким чином, що не змусять вас відчувати себе незручно, дивно і рівно. Натхнення з нашого повсякденного середовища, як дорожні знаки, сучасна архітектура, стрічка для маркування дорожнього одягу та спортивні майданчики, Material Design приносить вам несподівані та насичені кольори. Є так багато колірної палітри, щоб вибрати, що дає вам більше зручності при розробці додатків або сайтів. Можна також завантажити зразки кольорів для місцевого використання, наприклад, для колекції Photoshop.
Значок матеріалу
Якщо ви розробник Android, ви повинні бути знайомі з деякими безкоштовними пакетами значків, наданими Google. Зазвичай вони використовуються лише для основного елемента та панелі дій. Хоча для інших ресурсів, ми повинні шукати інші іконки, як для папки, файли, копіювати і вставляти і т.д. вручну. У Material Design Google вирішила проблему з тоннами іконок, які можна використовувати.
Кожна з ікон пройшла певний підхід до дизайну, який також використовує вивчення тактильних матеріалів. Вони є і збереженням Матеріального принципу теж, що є послідовним. Ви можете завантажити ці іконки на GitHub, вони поставляються з деякою опцією для різного використання, як для iOs, web, Android або svg. Якщо ви хочете отримати більш широкий варіант для легкого налаштування, ви, мабуть, захочете побачити пакунки значків Material Design на FlatIcon. Всередині пакета ви отримаєте векторну іконку (SVG & EPS), версію PSD та PNG.
Анімація матеріалу
Це особливості матеріалу, які мені найбільше подобаються. Анімації в матеріалі настільки реальні і інтуїтивні. Кожна анімація має змістовний, послідовний і правильний перехід часу. Gif-демонстрація, показана нижче, - це лише одна з прекрасних Material animation. Щоб забезпечити привабливу та чуйну взаємодію, команда Google також створює анімацію, подібну до пульсацій, для ефекту вводу користувача. В основному використовується на кнопках і картках.
Ці функції, які я пояснив, є лише частиною того, що пропозиція Material Design. Щоб дізнатися більше про матеріал Material, просто перейдіть на сторінку документації.
Реалізація
За замовчуванням, Material Design поставляється як нове оновлення інтерфейсу для Android Lollipop. Всі керівні принципи, які Матеріал був застосований в ньому. Оскільки матеріал спрямований на всі види середовищ, реалізація його в іншій системі не буде важкою. І завдяки спільнотам, це ще набагато простіше з деякими інструментами, які вони створили.
Це декілька способів досягти, щоб отримати матеріал Design за межами Android, веб-наприклад.
Використання CSS Frameworks
Це найпростіший спосіб, якщо ви хочете реалізувати Material Design в веб-платформі. З фреймворками, все, що вам потрібно зробити, це ініціалізувати, а потім написати потрібні вам елементи. Є багато фреймворків, які можна використовувати як Materialize, Material UI або Polymer, щоб назвати декілька. Мій особистий вибір потрапляє до матеріалізації. Це простіше у використанні та розумінні та має велику документацію з приємною демонстрацією.
Дотримується Керівних принципів
Якщо ви хочете реалізувати Матеріал без допомоги каркаса і волієте скористатися самими кодами, то ви повинні дотримуватися Матеріалів. Там ви знайдете все, що потрібно, і що не потрібно, щоб ви помітили, щоб досягти матеріальних принципів. Ви побачите все основне керівництво для створення компонентів, макета, анімації, кольору, шаблонів тощо. Ви можете побачити певний перелік матеріалів для полегшення розробки.
Висновок
Матеріальна конструкція є чудовою системою проектування і стала однією з найбільш очікуваних тенденцій року. У наступні кілька місяців ми можемо побачити це скрізь. Більше додатків і веб-сайту буде оновлено за допомогою нового оновлення дизайну Google.
А за допомогою Material Design Google довів свою перевагу як одну з найбільших технологічних компаній. Це робить Google не просто лідером в області пошукових і мобільних ОС, а й у сфері розробки. Наразі немає інших компаній, які розробляють цю велику річ, як Google. Але досвід говорить, що це не триватиме довго. Давайте просто почекаємо, що інші компанії реагують на Google Design Material.
