Очікує на перевірку

Material Design

Матеріал з Вікіпедії — вільної енциклопедії.
(Перенаправлено з Material design)
Перейти до навігації Перейти до пошуку
Material design 3 на Android 12

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

Особливості

[ред. | ред. код]

Дослідження, зроблене дизайнерами 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

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

Оновлення

[ред. | ред. код]
Material Design
Material You

Material Design 2 (Google Material Theme)

[ред. | ред. код]

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

Material Design 3 (Material You)

[ред. | ред. код]

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

Див. також

[ред. | ред. код]

Примітки

[ред. | ред. код]
  1. ↑ Spradlin, Liam (11 червня 2014). Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple. Android Police. Архів оригіналу за 23 листопада 2018. Процитовано 2 червня 2017.
  2. ↑ Google Design (28 травня 2015), Making Material Design, архів оригіналу за 31 жовтня 2016, процитовано 2 серпня 2016
  3. ↑ моушн-дизайнер, Мам! Я. (3 вересня 2023). Що таке матеріальний дизайн і як його слід використовувати?. Друкарня. Процитовано 7 листопада 2024.
  4. ↑ Pavlo, Salyga (2 серпня 2016). Web Design and Usability Analysis: Принципи матеріального дизайну і чим він загрошує дизайнерам. Web Design and Usability Analysis. Архів оригіналу за 1 вересня 2017. Процитовано 2 серпня 2016.
  5. ↑ Sholiak, Vitaliia (29 лютого 2024). Що таке Material Design (Матеріальний дизайн). Wizeclub Education (укр.). Процитовано 7 листопада 2024.
  6. ↑ а б моушн-дизайнер, Мам! Я. (3 вересня 2023). Що таке матеріальний дизайн і як його слід використовувати?. Друкарня. Процитовано 7 листопада 2024.
  7. ↑ How Google created a custom Material theme. Material Design (англ.). Процитовано 20 липня 2022.
  8. ↑ Hall, Stephen (26 квітня 2018). What exactly is this so-called ‘Material Design 2,' and what will it look like?. 9to5Google (амер.). Процитовано 20 липня 2022.
  9. ↑ Hall, Stephen (9 травня 2018). Now we know: Google Sans is actually a size-optimized version of Product Sans. 9to5Google (амер.). Процитовано 20 липня 2022.
  10. ↑ https://twitter.com/materialdesign/status/1453409331697885192. Twitter (укр.). Процитовано 20 липня 2022.
  11. ↑ Bohn, Dieter (18 травня 2021). Android 12 preview: first look at Google’s radical new design. The Verge (англ.). Процитовано 20 липня 2022.
  12. ↑ Warren, Tom (10 вересня 2021). Google’s Material You design is coming to Gmail, Calendar, and Docs on Android. The Verge (англ.). Процитовано 20 липня 2022.
  13. ↑ Li, Abner (1 жовтня 2021). Google Photos rolling out Material You redesign [Update: Dynamic Color]. 9to5Google (амер.). Процитовано 20 липня 2022.
  14. ↑ Sattelberg, Will (29 липня 2021). Google Contacts is already getting its Material You UI makeover. Android Police (амер.). Процитовано 20 липня 2022.

Посилання

[ред. | ред. код]


Програмне забезпечення Це незавершена стаття про програмне забезпечення.
Ви можете допомогти проєкту, виправивши або дописавши її.
Отримано з https://uk.wikipedia.org/w/index.php?title=Material_Design&oldid=43842183