Material Design українською – довідник для дизайнерів

Перед вами вільний переклад Material Design українською мовою. Оригінальне джерело: тут. Material — це дизайн-система, яка була створена Google, щоб допомогти всім, хто зацікавлений у створенні високоякісних інтерфейсів для Android, iOS, Flutter та вебу.

Принципи

Поняття «Матеріал» — це метафора

Усе у цій дизайн-системі натхнено фізичним, тобто. нашим реальним світом разом із його текстурами та поверхнями, включаючи і той факт, що світло має відображення, а об'єкти відкидають тіні. «Матеріал» можна сказати переосмислює папір та чорнило.

Сміливий, графічний, свідомий

Вся дизайн-система керується елементами, які прийшли з друкованого дизайну, а саме: типографіка, сітки, простір, масштаб, колір та зображення. Всі ці елементи задають стиль і служать одній простій меті: створити ієрархію, надати сенсу і задати фокус, щоб занурити користувачів у досвід.

Анімації зі змістом

Анімація фокусує увагу і підтримує безперервність дії завдяки ненав’язливому зворотному зв’язку та взаємопов'язаним переходам. Якщо користувач взаємодіє з елементами, то це не заважає і не порушує потік і безперервність досвіду користувача навіть якщо елементи трансформуються, перегруповуються або змінюються яким-небудь чином.

Компоненти

Компоненти — це інтерактивні будівельні блоки для створення інтерфейсу користувача. Вони мають вбудовану (за замовчуванням) систему станів, щоб користувач розумів, коли елемент у фокусі, обраний, активований або коли сталася помилка. Також, компоненти передають стан наведення, натискання, перетягування та відключення. Бібліотеки компонентів доступні для Android, iOS, Flutter та Інтернету.

Компоненти охоплюють та закривають широкий спектр інтерфейсних потреб, наприклад:

• Відображення: розміщення та організація контенту з використанням таких компонентів, як картки (cards), список (list) та набір дій (sheets).
• Навігація: дозволяє користувачам переміщатися продуктом за допомогою таких компонентів, як бічна панель навігації (navigation drawers) та вкладки (tabs).
• Дії: дозволяє користувачам виконувати завдання за допомогою таких компонентів, як плаваюча кнопка (floating action button скорочено FAB).
• Введення: дозволяє користувачам вводити інформацію або робити вибір за допомогою таких компонентів, як текстові поля, chips та елементи вибору (чекбокси, радіо-кнопки та светри).
• Комунікація: оповіщення користувачів про важливу інформацію та повідомлення за допомогою таких компонентів, як snackbars, банери та діалогові вікна.

Темізація інтерфейсу

Колір

Якщо в якості кольору у контейнері використовується «colorPrimary / основний» колір (1), то для внутрішнього вмісту можна використовувати «colorOnPrimary / на основному» (2).

Пояснення до зображення

• colorPrimary — це змінна, що найчастіше відображається на екрані та в компонентах програми. Цей колір повинен проходити рекомендації щодо доступності тексту/іконок при малюванні поверх кольору поверхні або фону.
• colorOnPrimary — це колір, який передає рекомендації щодо доступності для тексту/іконографії при малюванні поверх основного кольору.

Колірна система матеріал — це підхід до застосування кольору до інтерфейсу користувача. У ній всі глобальні колірні стилі мають семантичні назви і певне використання в компонентах — primary (основний колір), secondary (другорядний колір) — припустимо це можуть бути кольори вашого бренду, а також кольори для surface (поверхня), background (фон) та error (Помилка).

Кожен колір також має додатковий колір, який використовується для елементів, розміщених «зверху», щоб надати узгодженість та достатній контраст (наприклад, colorOnPrimary, colorOnSecondary, colorPrimaryVariant, colorSecondaryVariant і т.д.).

Типографіка

Типографіка представлена у вигляді шкали з 13 стилів: від заголовків до основного тексту та дрібних підписів. Кожен стиль має чітке значення та застосування в інтерфейсі.

Важливі атрибути, такі як шрифт, шрифт і регістр літер, можуть бути змінені відповідно до вашого бренду та дизайну.

Форма

Якщо робити різні форми для компонентів, то це може допомогти посилити увагу користувача або явніше виділити/відділити компоненти, а також передати їх стан і висловити ваш бренд.

Усі компоненти згруповані за категоріями в залежності від їх розміру (маленький, середній, великий). Ці глобальні стилі дають змогу швидко змінювати форму компонентів однакового розміру.

Ви можете створювати власні стилі за допомогою інструмента налаштування фігур.

Поверхня «Material»

Material Design тривимірний (елементи розташовані по осях x, y та z) і це відображається у використанні поверхонь, глибини та тіней. У цій частині не плутайся якщо зустрінеш різні формулювання (матеріал, поверхня, елемент — це все одно й те саме).

Фізичний світ

У реальному світі об'єкти можуть нашаруватись один на одного або прикріплені один до одного, але не можуть проходити наскрізь один через одного. Також, у реальному світі об'єкти відкидають тіні та відбивають світло.
Матеріал дизайн спирається на наш реальний світ, тобто він демонструє як поверхня відображається та переміщається всередині інтерфейсу згідно з правилами реального світу. Тому і способи відображення та анімації в рамках дизайн-системи Material повторюють поведінку реального світу. Цей принцип застосовано у всіх додатках.

Глибина

Всі елементи знаходяться у тривимірному просторі (3D), який використовує світло, поверхню та тіні. Всі елементи переміщуються горизонтально (X), вертикально (Y), а також можуть мати різну глибину, тобто переміщатися вздовж осі Z. Глибина описується так: елементи розміщуються на осі z, а точніше на різних рівнях (близько, далі). У веб-просторі тривимірність інтерфейсу можна відтворити, маніпулюючи віссю Y.

Властивості

Усі поверхні у цій системі мають консистентні, постійні властивості і поведінку.

Вимірювання

Елементи можуть мати різні розміри осях x, y (вимірюється в dp) і рівномірну товщину (1dp). Товщина не може бути 0.

Правильно: Елементи можуть бути різної ширини та висоту, але однакової товщини (товщина елементів завжди 1dp)

Неправильно: Елементи різної товщини.

Тіні

Поверхні розташовуються на різній висоті та відкидають тіні

Правильно

Правильно: Тіні демонструють висоту, на якій знаходиться Material поверхня

Неправильно

Неправильно: Не задавай тінь без зміни висоти поверхні

Роздільна здатність.

Матеріал має нескінченну роздільну здатність.

Контент

Контент відображається у будь-якій формі та кольорі на поверхні. Контент не додає поверхні товщини. Контент не є окремим шаром.

Поверхня може приймати будь-яку форму та колір. Контент може поводитися незалежно від поверхні, але обмежений розмірами поверхні.

Поведінка контенту може бути незалежною від поведінки поверхні.

Поведінка контенту може залежати від поведінки поверхні.

Фізичні властивості

Матеріал — це єдине ціле. Будь-яке введення та взаємодія, які робить користувач, не можуть проходити через матеріал.

Правильно: Введення впливають лише на поверхню матеріалу.

Неправильно: Події введення не можуть проходити через поверхню/матеріал

Правильно: Декілька елементів не можуть одночасно займати ту саму точку простору. Тому правильно розділятиме елементи по висоті.

Неправильно: Кілька елементів не можуть одночасно займати ту саму точку простору по висоті.

Поверхня не може поводитися як газ, тобто з’являтися з нізвідки.

Правильно: матеріал може з’являтися або зникати через зміну прозорості, розміру або позиції