Material Design

Material Design (укр. Матеріальний дизайн; кодова назва Quantum Paper^[1]) — принципи дизайну сайтів, програмного забезпечення і застосунків, а також правила дизайну інтерфейсів для операційної системи Android від компанії Google. Вперше представлений на конференції Google I/O 25 червня 2014 року. Ідея дизайну полягає в інтерфейсі, поведінка і вигляд якого наслідують правила поведінки і вигляду паперових карток в реальному житті. Існує також визначення, що матеріальний дизайн є візуальною чи дизайн мовою.^[2] Загальна мета Material Design полягала в тому, щоб дозволити дизайнерам швидко створювати програми, які були б адаптивними, зручними та масштабованими.^[3]

Material design 3 на Android 12

Особливості

Дослідження, зроблене дизайнерами Google, змінює підхід до інтерфейсу і робить його реальнішим. Інтерфейс перетворюється на живу приємну людині взаємодію.

• Material design за допомогою системи управління тінями створює візуальну ілюзію простору між застосунком та екраном пристрою.
• Була збільшена реалістичність анімації за допомогою прискорення та пригальмовування рухів, пружного стрибання об'єктів.
• Розвинулися інтерактивні іконки.
• З'явилася об'єктна хореографія, при якій елементи здатні впливати на сусідні елементи.^[4]

Основні принципи Material Design

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

Поліграфічний дизайн. Текст і зображення «підкоряються» законам традиційного друкованого дизайну. Це допомагає наголошувати на ключових елементах і позначити ієрархію інтерфейсу.

Продумана анімація. У реальності об’єкти не можуть раптово з’являтися або зникати, тому в Material Design анімація елементів інтерфейсу ретельно продумана, щоб бути природною та інформативною. Крім того, світло і відображення поверхні мають виглядати реалістично і природно, а рухи і трансформації об’єктів – бути синхронізованими і гармонійними.

Адаптивний дизайн. Принципи Material Design мають бути реалізовані на будь-якому пристрої, незалежно від його розміру і роздільної здатності екрана. Це забезпечує однаковість користувацького досвіду на різних платформах.

Графіка, кольори та шрифти. Material Design акцентує на графічних елементах, колірній палітрі та шрифтах. Важливо, щоб усі елементи були збалансовані та гармонійно поєднувалися один з одним. ^[5]

Переваги та недоліки Material Design

Переваги

• вебдизайнери та ui/ux на всіх етапах отримують користь від Material Design, незалежно від того, чи це основа, на якій вони базують свою роботу, чи надійний ресурс, до якого вони час від часу звертаються.
• Він надає вичерпний огляд кожного з ключових компонентів і поведінки інтерфейсу користувача, їхню цінність у дизайні та способи їх використання.
• Це підхід до дизайну, орієнтований на користувача, який усунув багато недоліків своїх попередників у дизайні, де проблемою були зручність використання, розбірливість і доступність.
• Це змушує дизайнерів виходити за межі естетики та розглядати дизайн як щось більш навмисне. В результаті інтерфейси стають більш інтуїтивно зрозумілими , а юзерський досвід покращується.
• Google надає розширену документацію та підтримку для розробників і дизайнерів, які хочуть отримати більше від Material Design.^[6]

Недоліки

• У разі надто суворого дотримання вебсайти (і програми) ризикують стати схожими один на одного.
• Деяким дизайнерам може здатися, що матеріальний дизайн сильно перешкоджає будь-якій свободі чи творчості в дизайні, оскільки він все пояснює для них.
• Є деякі, хто може бути надто наляканим, щоб навіть спробувати використовувати Material Design (або навіть будь-які з його готових компонентів) через наголос на кодуванні.
• Система дизайну спочатку була спрямована на розробників додатків, тому є деякі її частини, які насправді не стосуються вебдизайну. І якщо дизайнер не може використати всю систему, в кінцевому інтерфейсі може здатися, що йому чогось не вистачає.
• Деякі рекомендації щодо дизайну (наприклад, барвисті інтерфейси, широке використання значків і анімації) можуть створювати проблеми зі швидкістю сайту.^[6]

Оновлення

Material Design

Material You

Material Design 2

Після 2018 року Google почав перероблювати більшість своїх застосунків під нові рекомендації дизайну під назвою «Material design 2», яка з'явилася в Android Pie.^[7] Ці рекомендації сильно підкреслюють білий простір, закруглені кути, кольорові піктограми, нижні панелі навігації та використовує спеціальну скорочену версію власного шрифту Google Product Sans під назвою Google Sans.^[8]

Material Design 3 (Material You)

На Google I/O у травні 2021 року Google анонсувала нову концепцію для Android 12, відому як «Material You» (також відома як «Material design 3»^[9]), наголошуючи на збільшеній анімації, більших кнопках і можливості унікальних тем користувацького інтерфейсу, які створюються на основі шпалер користувача.^[10] Протягом наступних місяців Material You поступово з'являвся в різних додатках Google на старіших версіях Android і став основним акцентом на серії смартфонів Pixel 6 та Pixel 6 Pro.^[11][12][13]

Material 3 Expressive

В травні 2025 року на виставці Android Show: I/O Edition Google анонсувала «Material 3 Expressive» для Android 16 та Wear OS 6. Ця версія Material Design подібна до попередника, але має покращені анімації та є більш барвистою і сучасною.^[14]

Див. також

• Список версій Android
• Fluent Design System
• Flat UI Design
• HIG
• Metro (інтерфейс)