Материальный дизайн: другой, но не лучший

Posted on by riasevastopol

В то время, когда в 2014 году Гугл представила Material Design, многие эксперты удивились тому, с каким усердием компания ринулась улучшать собственные позиции. В этом отношении Apple всегда были на ход в первых рядах, но сейчас обстановка изменилась. Раньше пользователи жаловались на несогласованность дизайна Android, отпугивающие мрачные темы, чрезмерное использование и недостаток документации гамбургер-меню.

Материальный дизайн решил большая часть этих неприятностей, предложив более легкие и красочные ответы, подкрепленные прекрасно продуманными правилами.

И все же, не смотря на то, что цвета в новом визуальном языке смотрятся весьма сочно, а концепция карточек дает хорошее чувство глубины и тактильности, кое-какие признанные специалисты отрасли до сих задаются одним и тем же вопросом: «Разве Material Design вправду превосходит дизайн iOS от Apple»? В сегодняшней статье мы объясним, с чем это связано.

Просматривайте кроме этого: Материальный дизайн — смертельный удар по Apple?

различия и Сходства с iOS

Начнем с трех ключевых принципов iOS: ясности, уважения к пользователю и глубины (Clarity, Deference и Depth). Ясность достигается за счет разборчивого текста, хорошего контраста и заметных иконок и возможно специфичной для конкретной платформы.Материальный дизайн: другой, но не лучший То, что ясно пользователям Android и iOS, сильно зависит от того, с чем они привычны.

Это значит, что обладатели «яблочных» девайсов смогут мгновенно выявить определенный значок, тогда как Android юзерам он покажется незнакомым.

Глубина — это еще один принцип, что разделяют обе платформы, но реализуют они его совсем по-различному. iOS продвигает blur-градиенты и эффекты, а вот Android отдает предпочтение теням (drop shadow) и концепции бумаги.

Скевоморфизм 2.0

Не обращая внимания на то, что говорят большая часть людей, обе платформы копируют настоящую судьбу в главных моментах. Они скевоморфичны, поскольку применяют размытости, тени и анимации, задействуют реализм и физику пространства.

Скевоморфизм разрешал разработчикам представить новые концепции при помощи привычных метафор, но детализированные текстуры и 3D-эффекты определенно вышли из моды. Пользователи переросли его, потому, что технологии стали неотъемлемым элементом отечественной повседневной жизни. на данный момент мы находимся на том этапе, в то время, когда кожаные календари либо виниловые диски кажутся нам менее уместными, чем цифровые концепции.

Сейчас никто не применяет такие календари

Но в каждом из этих дизайн-языков — и Apple, и Гугл — имеется собственные не сильный места. К примеру, в iOS пара слоев размытости, наложенные друг на друга, смотрятся не отлично:

Концепция карточек Гугл не отлично смотрится на круглом экране смарт-часов. Карточка занимает всю ширину, а выравнивание текста думается некорректным из-за наличия безлюдного пространства. Применять перечни на таком дисплее кроме этого очень затруднительно, потому, что скругленные углы скрывают главную часть контента:

Одновременно с этим эти циферблаты часов Android Wear смотрятся великолепно. Тут мы четко видим, что интерфейс пользователя был создан специально для круглого экрана:

Просматривайте кроме этого: Как Google, наконец, создал дизайн

Материальный дизайн не надеется на контент

Для iOS контент постоянно стоит на первом месте, в то время как Гугл принципиально важно оформление — применяя концепцию карточек, дабы сделать контент более осязаемым, он тем самым теряет серьёзное пространство в левой и правой частях экрана. броские цвета в Android кроме этого имеют приоритет над контентом.

Плавающая интерактивная кнопка (FAB) скрывает данные и делается на пути сотрудничества:

Тут выговор сделан на цветах, навигации и CTA-элементах

В противовес этому, цвет интерфейса пользователя iOS более нейтральный и изменяется он в зависимости от контента. броские оттенки употребляются очень редко, по большей части, для активируемых элементов:

Стремительное сравнение между Apple Music и Гугл Music говорит о том, что в материальном дизайне преобладают броские насыщенные изображения и цвета, а в iOS единственным броским элементом на странице есть кнопка «Try now» («Попытаться на данный момент»)

Просматривайте кроме этого: Материальный дизайн: Из-за чего плавающая кнопка действия это плохой UX дизайн?

Панель вкладок (tab bar) против гамбургер-меню

В почтовом клиенте Гугл употребляется гамбургер-меню

Дискуссии на тему целесообразности применения гамбургер-меню начались уже весьма в далеком прошлом, и в действительности они все еще далеки от завершения. Apple время от времени применяют их в собственных дизайнерских проектах, и, однако, на Android e такие элементы мы видим чаще, потому, что в материальном дизайне они поощряются.

Для iOS навигации, наоборот, характерна панель вкладок (tab bar). Сравнительно не так давно Facebook начали использовать такие панели в собственном iOS приложении и заметили большие улучшения в плане пользовательского сотрудничества. Но не смотря ни на что, в некоторых случаях гамбургер-меню может оказаться очень уместным, например, в то время, когда вашим самым серьёзным контентом есть первая страница.

Опции в нее должны быть вторичными, как настройки либо выход из совокупности.

Просматривайте кроме этого: Создание мобильной навигации независимо от гамбургер-меню

Применение цветов

Материальный дизайн умело применяет цвета. Они смотрятся превосходно, совершенно верно равно как и цветовая палитра плоских (flat) пользовательских интерфейсов. Пастельные цвета выглядят весьма здорово в большинстве обстановок, в отличие от примечательных оттенков, каковые устанавливаются по умолчанию в CSS либо Xcode.

Слева направо: iOS цвета, палитра плоского дизайна, палитра материального дизайна

Но материальный дизайн задействует эти цвета в собственных хедерах, время от времени кроме того замещая контент. В то время, когда вы используете через чур много соперничающих цветовых ответов, это деприоритезирует другие элементы:

Показывает ли цвет на интерактивность хедера? Стоит ли тут применять изображение, дабы выразить сущность продвигаемого продукта? Из-за чего заголовок «Goals» того же цвета, что и ссылки?

Цвета имеют значения, но эти значения смогут быть очень ограничены (к примеру, красный свидетельствует тревогу, желтый — предупреждение и т. д.). В цветах вы высказываете бренд, но в пользовательском интерфейсе программы брендинг не должен выводиться на передний замысел. В действительности, самым подходящим местом для реализации брендинга есть иконка приложения, исходя из этого перед тем как применить один цвет в вашем хедере, быть может, вам захочется разглядеть что-то более ясное.

То, что смогло бы донести до пользователя сокровище вашего приложения.

Опять-таки, это может иметь суть в Android, но не в iOS.

Просматривайте кроме этого: их значение и Цвета при создании дизайна сайта

Одна платформа либо кроссплатформенность

Многие уверены в том, что применение одного дизайна, что трудится стабильно на всех платформах — это наиболее хороший вариант, но в действительности этот подход не весьма действен. В случае если в попытках достигнуть таковой кроссплатформенности вы создадите Android-приложение, задействовав правила визуального языка iOS, пользователям это не понравится, поскольку с данной ОС они не привычны.

Главная цель материального дизайна содержится в объединении всех платформ, и такие смелые упрочнения хороши восхищения. Но разве это вправду лучший метод?

Вправду ли плавающие кнопки действия подходят для Сети?

Трудится ли концепция карточек в часах от Android, каковые в некоторых случаях имеют круглый экран? Данный дизайн-язык определенно не создавался с мыслью о девайсах. Наоборот, складывается чувство, что о гаджетах разработчики думали в последнюю очередь.

Если вы посмотрите на Apple Watch, то заметите, что Apple всецело переосмыслили дизайн и приспособили его под наручные часы. Это значит, что они столкнулись с новыми парадигмами интерфейса пользователя, каковые должны были быть рассмотрены для разработки Force Touch, колесика Digital Crown и функции Wrist Detection (обнаружение запястья).

Просматривайте кроме этого: Закат эры «золотой лихорадки» в UX-дизайне

Материальный дизайн более определенный

Ключевые принципы работы с материальным дизайном, и данные о том, как должны комбинироваться цвета, возможно отыскать в соответствующем управлении от Google.

Как разместить любой элемент дизайна, дабы создать последовательную структуру и тени

Тут указана своеобразная способы сочетания и цветовая палитра цветов

Материальный дизайн предоставляет полный комплект системных иконок

Преимуществом строгого управления есть то, что с ним тяжело совершить ошибку. Подобно Bootstrap у, оно предлагает последовательную и эргономичную совокупность. Одновременно с этим его главный недочёт содержится в том, что он будет ограничивать креативность и сделает большая часть приложений однотипными.

Просматривайте кроме этого: Иконки и стартовые комплекты для материального дизайна

Чем материальный дизайн лучше?

Не смотря ни на что, многие вещи в материальном дизайне реализованы верно.

Во-первых, его новая дизайн-спецификация предоставляет высококлассные советы по разнообразным дизайнерским тематикам, каковые принесут вам пользу и за пределами этого визуального языка.

Управления по цвету и анимации в материальном дизайне легко превосходны

Концепция карточек достаточно эластичная и определенно может использоваться в сети — дизайнеры применяли ее задолго перед тем, как наступила «мобильная эра». И все-таки многие из них уверены в том, что чем меньше экран, тем менее целесообразной она делается.

Как мы и говорили, пастельные цвета чуть ли были чем-то новым, но плоские материальный дизайн и пользовательские интерфейсы популяризировали их.

Анимации в материальном дизайне элегантны и восхитительны, не смотря на то, что и не столь инновационны, как это может показаться на первый взгляд. До выхода iOS 7 переходные интерфейсы были еще относительно новым понятием. Оба управления продвигают более плавные и прогрессивные анимации, каковые направляют пользователей, а не отчаянно пробуют привлечь их внимание:

Содержательная анимация в материальном дизайне

Просматривайте кроме этого: 10 примеров материального веб-дизайна

Совершенного дизайна не существует

Вряд ли кому-то посчастливится создать совершенный визуальный язык либо шаблон. В данной статье мы перечислили сильные и не сильный стороны материального и плоского дизайнов, и вам остается только выбрать то, что сработает оптимальнеедля вашего продукта. Легко экспериментируйте и старайтесь постоянно учитывать потребности людей либо девайсов, для которых вы разрабатываете.

Высоких вам конверсий!

По данным: medium.com

Случайные статьи:

Material Design: Урок 1. Основные принципы


Подборка похожих статей:

riasevastopol

More Posts