Після виходу Windows 8 всі говорили про "Metro UI", а пізніше про "Плоский дизайн". Тепер після виходу Android Lollipop всі говорять про "Матеріал дизайну". Чи може хтось пояснити різницю між "Матеріал дизайну" та "Плоский стиль"?
Чим відрізняється «плоский стиль» від «матеріального дизайну»?
Відповіді:
Матеріал дизайну не пов'язаний з плоским дизайном у своїх принципах. Матеріал дизайну скауоморфний тим, що це спроба зробити веб-дизайн більш реалістичним у зображенні елементів, використовуючи шари та анімацію таким чином, що має сенс поза браузером. Візуально плоский дизайн і дизайн матеріалу на даний момент схожі, але дизайн матеріалів можна застосовувати і для конструкцій, відмінних від плоских.
Слідує 3 принципам
- Матеріалом є метафора
- Будьте сміливими, графічними, навмисними
- Забезпечте значення рухом
Накладення дизайну матеріалу здійснюється за допомогою переміщення елементів вперед або назад по осі z, до та від користувача та додавання реалістичних тіней для передачі більшого сенсу. Елементи анімації, такі як анімація, що впливає на позицію, коли елемент списку видаляється, мають на меті покращити потік користувачів та розуміння, зробивши при цьому більш чітким досвід. При цьому більше сенсу можна зобразити в матеріальному дизайні, ніж у плоскому дизайні
Дизайнери Google виготовляли паперові моделі, щоб визначити шари та тіні для їх матеріального дизайну.
Існують інші керівні принципи дизайну, що стосуються відстані, кольорів, зручності використання та більше детальних відомостей про розміщення та анімацію, які ви можете переглянути на веб- сторінці Google про цю тему .
Хороший спосіб дізнатися більше про дизайн матеріалів та як його реалізувати - це використовувати додатки, створені Google за допомогою дизайну матеріалів, та читати про деталі дизайну , це Брайан Ловін у додатку Inbox.
Люди можуть припустити, що конструкція матеріалів - це свого роду розширення плоского дизайну, але насправді принципи різні. Сучасна тенденція полягає в тому, щоб зробити чистий, плоский дизайн, який Google використовує зараз, але принципи дизайну матеріалів виходять за ці межі і можуть бути застосовані і до інших методів дизайну.
У тому матеріальному дизайні візуально використовується багато плоских іконок та стилів, я б сказав, що вони, безумовно, пов'язані в цьому сенсі. Матеріальний дизайн - це, звичайно, більше, ніж візуальний вигляд, як ви вказуєте.
—
DA01
@ DA01 Дякую, я спробував зробити свою точку зору в останній
—
редакції
Плоский дизайн = загальний термін, що відноситься до модної сучасної естетичної інтерфейсу інтер'єру блокадних плоских значків та кольорових блоків.
Metro Design = Нова конструкція інтерфейсу Microsoft (тепер називається мовою дизайну Microsoft ) для Windows 8, яка використовує візуальну естетику плоского дизайну .
Матеріал дизайну = новий дизайн інтерфейсу Google для Android, який використовує візуальну естетику плоского дизайну .
(Зауважте, що Metro і Material - це набагато більше, ніж просто про естетику плоского дизайну. Вони також говорять про дизайн взаємодії, потоки, бібліотеки шаблонів тощо).
Дякуємо Йоханнесу за те, що помітили зміну імені для інтерфейсу Microsoft.
Я не думаю, що це входить достатньо детально про те, що вони є насправді . Здається, це більше, чим вони користуються
—
Зак Сосьє
@ZachSaucier справа. ОП питали головним чином про різницю. Я б сказав, що різниця полягає в тому, що один є загальним терміном для візуального стилю, а інші два - конкретні терміни для фірмових інструкцій щодо інтерфейсу користувача.
—
DA01
@Johannes так, це хороша примітка.
—
DA01
Дизайн матеріалів можна використовувати не тільки для Android, але і для веб-дизайну та дизайну настільних додатків.
—
vovahost
Матеріал конструкції не плоский, це купа плоских шарів "матеріалу", які трохи розташовані на осі Z. Це означає, що ці об’єкти мають тіні і повинні походити звідкись, коли вони з’являються на екрані, і залишаються кудись, коли вони вже не потрібні. Що означає, що вони не просто зникають і не згасають.
Існує також ряд рекомендацій щодо дизайну, які визначають колір, інтервал та багато інших аспектів вашого макета.
Ось деякі з них, але ви можете знайти набагато більше за допомогою кількох пошукових запитів Google.
http://www.google.com/design/spec/material-design/introduction.html#
Насправді плоский дизайн буде здаватися більш спрощеним на тлі матеріалу, до того ж, всі ці анімації спрямовані більше на взаємодію користувачів з мобільними пристроями, а не на сайті. Крім того, ніхто не забороняє використовувати ці два підходи в одному продукті, якщо підходити до роботи над дизайном більш свідомо та по-філософськи. Що стосується скеуоморфізму, то він намагався вивести елементи інтерфейсу більш звичним, зручним для користувачів способом: як той чи інший об’єкт виглядатиме в реальному світі, але багато людей мають різні погляди на навколишні речі, тому створення єдиного Стиль такого підходу був майже неможливим… Деякі відомості додати. Яка різниця: Плоский дизайн та дизайн матеріалу