Плоский и материальный дизайн. в чем разница? — все про apple устройства

Плоский дизайн и материальный дизайн — что общего?

Плоский дизайн давно уже стал помощником для многих дизайнеров. Наряду с минимализмом, он кажется самым популярным стилем на данный момент.

Плоский дизайн позволяет создавать прекрасные проекты с большой производительностью и высокой скоростью загрузки, что обеспечивает удобство в пользовании.

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

Времена меняются быстро… В прошлом году Google представил свою концепцию материального дизайна и объяснил его принципы дизайнерам приложений. Сначала он появился в дизайне Google App Store. А позже и все службы Google стали выглядеть по последнему писку моды.

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

Но не кажется ли вам, что они выглядят так же, как и в плоском дизайне? Нет? Что ж, давайте устроим мини-батл между плоским и материальным дизайном.

Раунд первый: плоский дизайн против скевоморфизма

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

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

Flat vs. Realism

Плоский дизайн против реализма

Обычно Плоский дизайн ассоциируется с Metro стилем, впервые использованном в юзер-интерфейсе Windows 8. Он отбрасывает все те украшения, которые сделали скевоморфизм близким к реальности. Данный стиль принес в веб-дизайн простоту и свежесть, чего так не хватало дизайну Apple.

Дизайнеры Apple тоже признали, что скевоморфизм устарел.

Старший вице-президент по дизайну компании Apple Джони Айв отметил в одном из своих интервью: “Мы поняли, что люди уже привыкли к экрану, который можно использовать вместо кнопок, и они не нуждаются в подсказках, так как осознали преимущества [сенсорных экранов]».

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

Postbox

Все эти годы плоский дизайн остается популярным благодаря его простоте и вечной элегантности, и для этого не нуждается в тяжелом оформлении и использовании 3D объектов.

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

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

Next Match

Шаблон для бизнеса в плоском стиле

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

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

Используя простые кнопки, иконки и меню пользователь может с легкостью перемещаться по веб-сайту.

Раунд второй: плоский дизайн против материального

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

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

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

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

Шаблон для онлайн-казино с плоскими иконками

Факт остается фактом: длинные тени были первым шагом от обычного плоского дизайна до чего-то более материального. Они добавили чуточку объема простым элементам и сделали их выделяющимися на поверхности. Появились как сторонники, так и ненавистники этого элемента. Идея была настолько популярна, что длинные тени появились в дизайнах таких IT гигантов, как Google и Apple.

World Sports Food Fight

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

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

Казалось, никто не остался равнодушным к этому новшеству.

Keynote Animation Material Design

Главная инновация, которая отличает Материальный дизайн, это использование Z-оси. Подобная трехмерность добавляет объем плоскому объекту и делает его более “реальным”, таким, чтобы вы могли его почувствовать.

Это как плоскость бумаги. Вы когда-нибудь пробовали делать оригами? Именно с ними можно сравнить Материальный дизайн.

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

DiskForYou

Google относится к этому принципу как к метафоре. Они рекомендуют увидеть и использовать Материальный дизайн, как реальный объект, но очень упрощенный, и при этом не относиться к нему, как к цифровому эквиваленту реального предмета. Данная идея тесно связана со вторым принципом Материального дизайна: “Иерархия, значение и фокус“.

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

Это часто упускалось или вообще не определялось в плоском дизайне, и наоборот, в скевоморфизме выделялось слишком навязчиво.

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

Преимущества и недостатки двух стилей

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

Плюсы и минусы плоского дизайна тщательно изучались во многих статьях и обзорах. Давайте укажем наиболее яркие здесь.

Преимущества:

  • Минимализм визуальной составляющей дизайна;
  • Сосредоточенность на юзабилити, а не на эстетической составляющей;
  • Более простой дизайн приводит к более высокой скорости загрузки и увеличивает пропускную способность;
  • Пользователи фокусируются на содержании, а не на визуальных преимуществах;
  • Хорошая адаптированность под мобильные устройства.

Do You Buy that Girl a Drink

Недостатки:

  • Всегда присутствует опасность создания слишком простого и скучного дизайна для веб-сайта;
  • В связи с его сдержанной природой трудно найти способы для брендирования и промоушена;
  • Отсутствие теней и визуальных акцентов создает сложности в распознавании кликабельных и не кликабельных элементов;
  • В последнее время становится все труднее создавать действительно уникальные и современные веб-сайты из-за популярности плоского.

Материальный Дизайн – это новая тенденция, которая, кажется, вмещает в себе все особенности плоского дизайна. Однако, не все так просто.

Преимущества:

  • Как и плоский, материальный дизайн обеспечивает оформлению элегантный и минималистический внешний вид;
  • Применение Z-оси делает объекты более реалистичными, без перехода в сквеоморфизм;
  • Подробные указания от Google не оставляют места для гадания и помогают в создании материальных дизайнов новичкам и даже профессиональным дизайнерам;
  • Это действительно удобный в использовании стиль, который четко определяет функции любого важного элемента с помощью фишек дизайна;
  • Отличное решение для адаптивных сайтов, так как дизайн совместим со всеми девайсами и мобильными устройствами;
  • Один из главных принципов материального дизайна – движение. Движения и незначительные анимации используются не для оформления, а для улучшения взаимодействия с пользователем.

La Refactoria

Недостатки:

  • Тесно связан с брендом Google. Если вы хотите применить принципы материального дизайна к вашему веб-сайту, все непреднамеренно будут ассоциировать ваш дизайн с Google. Таким образом, создание уникального дизайна становится реальной проблемой;
  • Не каждая система позволяет полностью реализовывать принципы материального дизайна. Следовательно, это сужает выбор софта;
  • Анимация доступна для использования, но замедляет скорость веб-сайта. Но если вы не осуществляете ее – какой же это материальный дизайн;
  • Создание данного дизайна занимает немного больше времени, чем плоского. Хотя, так или иначе, любой проект занимает много времени.

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

Это значит, что материальный дизайн, безусловно, является трендом, который, надеемся, будет популярен и в этом году. Но кто знает, как долго это продлится?

Источник: https://www.motocms.com/blog/ru/plosky-i-materialny-disain/

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

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

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

Cкевоморфизм

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

Читайте также:  Чем telegram x отличается от обычной версии телеграма? - все про apple устройства

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

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

Также нужно было уменьшить их объем для более быстрой загрузки и сфокусировать взгляд пользователя на самом главном и основном.

[/su_box]

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

Плоский дизайн

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

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

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

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

И, соответственно, это многое упрощает как для дизайнера, так и для пользователя.

Плюсы:

  • Одинаковое отображение на всех экранах
  • Отсутствие скевоморфизма позволяет ускорить процесс понимания того, что вы хотели донести до пользователей
  • Удаление всех излишних элементов позволяет ускорить работу сайта
  • Простота плоского дизайна позволяет полностью адаптировать ваш сайт и сделать его отзывчивым

 Минусы:

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

Материал дизайн

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

Для тех кто не знал, материал дизайн зародился в Google, и они сделали небольшую страницу в которой изложены правила материал дизайна. У этого стиля есть бесчисленные и уникальные особенности, но, возможно, одна из самых лучших особенностей — это использование оси Z. По сути, это добавляет немного скевоморфизма, что позволяет двум плоскостям будто «плавать» друг по другу.

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

Плюсы:

  • Трехмерное пространство делает взаимодействие более простым, к примеру, использование теней позволяет понять, что над чем возвышается, и, соответственно, указывает на то, где необходимо сфокусировать взгляд пользователя.
  • Четкий набор правил, который позволяет не гадать, что и как должно выглядеть
  • Если вы вы собрались делать сайт или приложения для Android, то материал дизайн позволяет создать отличный бренд
  • Если вам интересна анимация, то материал дизайн также дает четкий набор правил по ее использованию

Минусы:

  • Согласны вы с этим или нет, но материал дизайн неразрывно связан с  Google, в следствии чего очень сложно создать уникальную идентичность для вашего сайта или приложения, если вы будете следовать правилам Google.
  • Не все системы в состоянии воспроизвести созданную вами анимацию, и это может отобразиться на общей функциональности вашего продукта
  • Анимации быстрее истощают заряд батареи
  • Четкие правила могут замедлить развитие этого стиля дизайна

Заключение

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

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

Ваш выбор пишите комментариях, посмотрим кого больше!

8 книг, которые должен прочесть каждый дизайнер

400+ отличных полезных сервисов для каждого

Почему дизайнер и программист должны работать вместе

by HyperComments by HyperComments

Источник: http://say-hi.me/design/chem-otlichaetsya-ploskij-dizajn-ot-material-dizajna.html

Плоский дизайн и материальный дизайн – что между ними общего?

Времена меняются быстро… В прошлом году Google представил свою концепцию материального дизайна и объяснил его принципы дизайнерам приложений. Сначала он появился в дизайне Google App Store.

А позже и все службы Google стали выглядеть по последнему писку моды. В последнее время всё больше и больше сайтов добавляют элементы материального дизайна в свои проекты.

Но не кажется ли вам, что они выглядят так же, как и в плоском дизайне? Нет? Что ж, давайте устроим мини-батл между плоским и материальным дизайном.

Раунд первый: плоский дизайн против скевоморфизма

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

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

Плоский дизайн против реализма

Обычно Плоский дизайн ассоциируется с Metro стилем, впервые использованном в юзер-интерфейсе Windows 8. Он отбрасывает все те украшения, которые сделали скевоморфизм близким к реальности. Данный стиль принёс в веб-дизайн простоту и свежесть, чего так не хватало дизайну Apple.

Дизайнеры Apple тоже признали, что скевоморфизм устарел.

Старший вице-президент по дизайну компании Apple Джони Айв отметил в одном из своих интервью: “Мы поняли, что люди уже привыкли к экрану, который можно использовать вместо кнопок, и они не нуждаются в подсказках, так как осознали преимущества [сенсорных экранов]».

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

Все эти годы плоский дизайн остается популярным благодаря его простоте и вечной элегантности, и для этого не нуждается в тяжёлом оформлении и использовании 3D объектов.

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

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

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

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

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

Раунд второй: плоский дизайн против материального

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

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

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

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

Факт остается фактом: длинные тени были первым шагом от обычного плоского дизайна до чего-то более материального. Они добавили чуточку объёма простым элементам и сделали их выделяющимися на поверхности. Появились как сторонники, так и ненавистники этого элемента. Идея была настолько популярна, что длинные тени появились в дизайнах таких IT гигантов, как Google и Apple.

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

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

Казалось, никто не остался равнодушным к этому новшеству.

Главная инновация, которая отличает Материальный дизайн, это использование Z-оси. Подобная трехмерность добавляет объём плоскому объекту и делает его более “реальным”, таким, чтобы вы могли его почувствовать.

Это как плоскость бумаги. Вы когда-нибудь пробовали делать оригами? Именно с ними можно сравнить Материальный дизайн.

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

Google относится к этому принципу как к метафоре. Они рекомендуют увидеть и использовать Материальный дизайн, как реальный объект, но очень упрощенный, и при этом не относиться к нему, как к цифровому эквиваленту реального предмета. Данная идея тесно связана со вторым принципом Материального дизайна: “Иерархия, значение и фокус“.

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

Это часто упускалось или вообще не определялось в плоском дизайне, и наоборот, в скевоморфизме выделялось слишком навязчиво.

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

Преимущества и недостатки двух стилей

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

Плюсы и минусы плоского дизайна тщательно изучались во многих статьях и обзорах. Давайте укажем наиболее яркие здесь.

Преимущества:

  • Минимализм визуальной составляющей дизайна;
  • Сосредоточенность на юзабилити, а не на эстетической составляющей;
  • Более простой дизайн приводит к более высокой скорости загрузки и увеличивает пропускную способность;
  • Пользователи фокусируются на содержании, а не на визуальных преимуществах;
  • Хорошая адаптированность под мобильные устройства.

Недостатки:

  • Всегда присутствует опасность создания слишком простого и скучного дизайна для веб-сайта;
  • В связи с его сдержанной природой трудно найти способы для брендирования и промоушена;
  • Отсутствие теней и визуальных акцентов создает сложности в распознавании кликабельных и не кликабельных элементов;
  • В последнее время становится всё труднее создавать действительно уникальные и современные веб-сайты из-за популярности плоского.

Материальный Дизайн – это новая тенденция, которая, кажется, вмещает в себе все особенности плоского дизайна. Однако, не всё так просто.

Преимущества:

  • Как и плоский, материальный дизайн обеспечивает оформлению элегантный и минималистический внешний вид;
  • Применение Z-оси делает объекты более реалистичными, без перехода в сквеоморфизм;
  • Подробные указания от Google не оставляют места для гадания и помогают в создании материальных дизайнов новичкам и даже профессиональным дизайнерам;
  • Это действительно удобный в использовании стиль, который чётко определяет функции любого важного элемента с помощью фишек дизайна;
  • Отличное решение для адаптивных сайтов, так как дизайн совместим со всеми девайсами и мобильными устройствами;
  • Один из главных принципов материального дизайна – движение. Движения и незначительные анимации используются не для оформления, а для улучшения взаимодействия с пользователем.

Недостатки:

  • Тесно связан с брендом Google. Если вы хотите применить принципы материального дизайна к вашему веб-сайту, все непреднамеренно будут ассоциировать ваш дизайн с Google. Таким образом, создание уникального дизайна становится реальной проблемой;
  • Не каждая система позволяет полностью реализовывать принципы материального дизайна. Следовательно, это сужает выбор софта;
  • Анимация доступна для использования, но замедляет скорость веб-сайта. Но если вы не осуществляете её – какой же это материальный дизайн;
  • Создание данного дизайна занимает немного больше времени, чем плоского. Хотя, так или иначе, любой проект занимает много времени

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

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

Иван Алексеев
www.motocms.com

Разработка сайтов8-904-572-40-43

www.kireya.ru

Источник: http://www.kireya.ru/publ/8-1-0-200

Плоский дизайн: история, проблемы и эволюция

Плоский дизайн (от англ. flat design) вот уже несколько лет остается главной тенденцией веб-дизайна: его отличает отсутствие глянцевых или визуальных 3D-эффектов в графических элементах страницы, поэтому многие дизайнеры считают этот стиль проявлением минимализма.

Дабы представить, что такое плоский дизайн — нужно понять, чем он не является. «Плоскость» часто противопоставляют 3D-эстетике, скевоморфизму и реалистичности в дизайне. Настоящий плоский интерфейс предполагает полный отказ от использования любых элементов данных стилей.

3D-эффекты

3D-эффект создает иллюзию глубины интерфейса, что помогает пользователям интерпретировать визуальную иерархию и понять, какие элементы являются интерактивными:

  1. Выпуклые элементы выглядят так, будто на них можно нажать (кликнуть мышкой). Эта техника используется, чтобы обозначить на экране кнопку.
  2.  Утопленные и полые элементы — как будто требуют, чтобы их заполнили. Эта техника применяется, чтобы выделить поля ввода или панель поиска.

С первых дней существования графических пользовательских интерфейсов дизайнеры используют псевдо-3D элементы (тени, градиенты, световые эффекты), чтобы помочь пользователям определить доступные действия интуитивно. Однако в ранних версиях интерфейсов они выглядели, как правило, агрессивно и визуально отталкивали.

В диалоговом окне Windows-95 3D-эффект создавался за счет использования тяжелых теней и света. Обратите внимание, как выглядят активные и неактивные кнопки. Также понятно, какая из трех вкладок выбрана. Тем не менее, тяжелые тени легко могут сделать интерфейс визуально непривлекательным

  • 5 принципов визуальной привлекательности современного веб-дизайна

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

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

Например, в ранних моделях планшета Kindle Fire от Amazon операционная система на базе Android использовала скевоморфный дизайн для виртуального книжного шкафа с 3D-полками и древесными текстурами.

Эта метафора позволяет активизировать представления пользователей о книжной полке, как месте хранения и организации физической среды. Хотя полки и текстуры дерева не влияют на функциональность системы, но служат для улучшения взаимодействия. Позже Amazon удалил скевоморфный дизайн из UI.

Скевоморфный дизайн приложения в Kindle Fire

  • 10 примеров материального веб-дизайна

Реализм

Реалистичный дизайн имитирует физические предметы или текстуры из эстетических соображений.

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

Как и в первых планшетах Kindle Fire, на сайте продуктовой сети используются деревянные структуры 3D. Реализм в этом дизайн-проекте служит для создания эстетической привлекательности, а не для того чтобы помочь пользователям понять, как работает интерфейс, имитируя какой-то объект реального мира

  • Примеры использования пастельных тонов на посадочных страницах

История возникновения плоского дизайна

Релизы интерфейса Metro компанией Microsoft и Windows 8 в 2011 году во многом способствовали популяризации плоского дизайна. В документации Microsoft новый стиль назван «подлинно цифровым». Это словосочетание очень точно передает суть плоского дизайна.

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

Выбор плоского дизайна для домашней страницы Apple демонстрирует рост популярности тренда. Скевоморфизм и реализм долгое время были отличительными знаками дизайна Apple — вплоть до 2013 года дизайнеры компании сопротивлялись «плоскому» тренду:

Домашняя страница Apple в 2007 году: панель навигации глянцевая, имеются 3D вкладки

[/su_box]

2012 год: метафора вкладок осталась в прошлом, но панель навигации по-прежнему глянцевая и скругленная (это скорее пример реализма, чем скевоморфизма).

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

Домашняя страница Apple в 2012 году

2015 год: вся панель навигации, в том числе логотип, полностью плоская — нет явных теней, текстур или бликов. Элементы 3D, реалистичные или скевоморфные эффекты также отсутствуют. Единственный способ понять, что разделы меню кликабельны — яркая полоска в верхней части веб-страницы:

Домашняя страница Apple в 2015 году

  • 16 примеров интернет-магазинов с плоским дизайном

Проблемы юзабилити

С появлением плоского дизайна в 2011 году компания Nielsen Norman Group критически высказалась о проблемах, присущих его юзабилити.

Главное возражение против плоского дизайна заключалось в том, что он приносит удобство пользователей в жертву современной модной эстетике. За многие годы люди привыкли к традиционным кликабельным ссылкам голубого цвета с подчеркиванием, 3D-эффектам на кнопках и т. д.

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

В ходе исследования в рамках курсов «Дизайн для миллениалов» (Designing for Millennials) 22-летнюю жительницу Канады спросили, как она понимает, куда можно кликать на сайте, и она ответила:

«Если текст выделен голубым цветом или подчеркнут, значит, на него можно кликать. Иногда это понятно из контекста. Но подчеркивание реально помогает. Удобно, когда есть кнопка — но на ней необязательно должно быть написано “Нажмите сюда”, или другой текст: “Купить” ,“Купить сейчас”, “Добавить в корзину”».

Эта цитата очень точно иллюстрирует типы сигналов, по которым люди понимают, что им нужно делать:

  1. Традиционные знаки (например, текст, подчеркнутый голубым цветом, кнопки).
  2. Нечто, напоминающее традиционные знаки (например, подчеркивание текста любым цветом, текст в рамке).
  3. Контекстные подсказки (например, текст, на который можно кликнуть, размещенный в верхней части страницы).

Так, домашняя страница сайта Trader Joe`s демонстрирует разнообразие кликабельных элементов:

  • подчеркнутый текст традиционного голубого цвета для ссылки «Смотреть все»;
  • плоский, красный фон для кнопки «Искать», понятной даже без реалистичных или 3D-эффектов;
  • черные разделы-ссылки в панели навигации (узнать, что они кликабельны, можно только по их расположению).

Обратите внимание, что в целом «плоская» страница имеет один скевоморфный элемент — деревянную полку под ассортиментом продуктов:

Домашняя страница компании Trader Joe`s

  • Как сделать кликабельные элементы лендинга интуитивно-понятными?

Эволюция плоского дизайна: версия 2.0

Недавно дизайнеры начали осознавать проблемы юзабилити плоского дизайна. В результате, появилась его более продуманная и сбалансированная версия. Разработчики считают, что теперь он стал «подлинно цифровым» и представляет уникальные возможности в цифровой среде без ущерба юзабилити.

Новую версию иногда называют «полуплоским дизайном», «почти плоским дизайном» или «плоским дизайном 2.0». Этот стиль в основном такой же, как раньше — но отныне возможно использование теней, световых эффектов и слоев для создания иллюзии глубины в пользовательском интерфейсе:

Плоский дизайн элементов с длинными тенями стал популярен в 2013 году. Длинные тени — пример того, что в версии 2.0 3D-эффекты служат исключительно эстетике и не несут никакой значимой информации для пользователей. К счастью, они уже не столь популярны, хотя значки с длинными тенями все еще используются в некоторых плоских интерфейсах

Material design от Google — один из примеров плоского дизайна 2.0 с правильно расставленными акцентами: в нем используются последовательные метафоры и заимствованные из физики принципы, помогающие людям разобраться в интерфейсе и интерпретировать визуальную иерархию контента:

Приложение Evernote для Android — хороший пример преимуществ плоского дизайна 2.0. Несмотря на наличие в основном плоского интерфейса, в приложении есть тени на панели навигации и плавающая кнопка “Добавить”.

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

  • Эволюция веб-дизайна — 20 лет за 5 минут!

Вместо заключения

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

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

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

nngroup.com 

Источник: https://lpgenerator.ru/blog/2015/11/05/ploskij-dizajn-istoriya-problemy-i-evolyuciya/

Как улучшить пользовательский опыт, если вы используете flat дизайн

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

Пик популярности плоского дизайна пришелся на 2012 год, но и до сих пор он применяется очень широко. Без него сейчас не обходится ни одна крупная компания: Apple, Amazon, Microsoft и даже IBM работают в стиле flat. Очевидно, что это уже не просто модная тенденция.

Плоский дизайн, особенно в сочетании с минимализмом — сильный эстетический инструмент в арсенале дизайнера. Flat дизайн создает ощущение дорогого и современного продукта, и в ряде случаев применяется для привлечения внимания молодых пользователей.

Флэт дизайн отличает простой пользовательский интерфейс. Он легко адаптируется под любые устройства. К сожалению, у плоского дизайна есть существенный недостаток: зачастую пользователь не знает, куда кликнуть, что, в результате, снижает эффективность его работы.

Выбирая плоский интерфейс, дизайнеры, как правило, удаляют очевидно активные элементы, и пользователь не знает, «куда жать». Несмотря на недостатки, плоский дизайн может быть очень классным. Воспользуйтесь нашими советами, и ваши пользователи скажут вам «спасибо».

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

Небольшое количество текста и простота информационной архитектуры. Ультраплоский дизайн оптимален для небольших сайтов объемом 1−10 страниц.

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

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

Целевая аудитория пользователей уровня «эксперт в области технологий». Если ваша аудитория состоит исключительно из дизайнеров, разработчиков или опытных пользователей, они с легкостью разберутся с навигацией на вашем сайте с дизайном в стиле flat.

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

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

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

focuslist.co: Единственная цель сайта – продвижение приложения для повышения производительности. Самые простые сайты, подобные этому, могут выиграть благодаря плоскому дизайну (хотя его нельзя считать полностью плоским из-за тени за скриншотом).Большинство цифровых продуктов намного сложнее, чем одностраничный маркетинговый сайт. В таких случаях мы рекомендуем использовать полуплоский формат или формат Flat 2.0. Он представляет из себя эволюцию стиля, который, хотя и похож на плоский дизайн, однако включает полутени, блики и градиенты для создания эффекта глубины.

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

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

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

(Красные круги означают точки фиксации).

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

В результате, они фактически снижают целевую доступность сайта.

1. Никогда не делайте одинаковым обычный и кликабельный текст

Например, если для ссылок вы используете жирное начертание, или определенный цвет, то не следует использовать жирное начертание или такой же цвет текста просто так. Используйте визуальный дизайн, чтобы четко обозначить активные и неактивные кнопки и элементы. Будьте постоянны.

2. Четко обозначайте активные элементы

Активными элементами могут быть: текст, кнопки, изображения, графические элементы, вкладки и иконки.

  • Кнопки должны хоть немного быть похожи на настоящие.
  • Если вы выбрали дизайн в стиле flat, воздержитесь от использования прозрачных кнопок (они выглядят как текст, заключенный в тонкую прямоугольную рамку).

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

3.

Используйте традиционные макеты и стандартные шаблоны сайтов

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

На карте фиксированных точек по результатам изучения движения глаз пользователя показаны первые несколько секунд после захода пользователя на сайт teavana.com. (Синие круги означают точки фиксации).

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

Белое пространство и соответствующее ожиданиям расположение верхней строчки меню помогают пользователям легко распознать цель и задачи сайта.

4. Уделите внимание контрасту

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

Главная активная кнопка 'See more' на первом экране уже не так заметна, и на фоне крупного изображения она «потеряна» для пользователя. Улучшить дизайн страницы можно, добавив цветовой акцент, например, более темный оттенок голубого, который уже используется в пользовательском интерфейсе.

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

[/su_box]Материальный веб-дизайн (Material Design) — визуальный язык, созданный компанией Google, был представлен в 2014 году.

Лучшее качество материального дизайна — это тщательно продуманная структура с четкими правилами, действиями и визуальными свойствами. К сожалению, его не всегда правильно применяют на деле.

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

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

Скриншот приложения LiquidText

В довольно плоском по форме приложении для аннотаций для iOS используются едва видимые тени. Они попадают под интерактивные элементы и панель инструментов и разделяют элементы пользовательского интерфейса от текста.

6. Сомневаетесь? Добавьте ссылку

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

В обзоре «Наши приоритеты» на сайте пользователи должны навести курсор на уменьшенное превью сайта, чтобы увидеть текст и ссылку. К сожалению, на самом деле ссылку имеет только иконка, изображающая маленькую стрелку. В таком случае добавьте ссылки в каждый связанный элемент.

Плоский дизайн — мощное направление в дизайне — но только при правильном применении.

Помните, что если пользователь не уверен, на какой элемент интерфейса он должен кликнуть, он не только не сможет выполнить поставленные задачи, но и рискует пропустить важные действия, которые способствуют достижению бизнес-целей.

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

Рассмотрите каждый элемент на соответствие этому чеклисту, чтобы проверить удобство пользования:

Подсказки, какие элементы кликабельные, постоянны по всему сайту.

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

Кликабельные элементы находятся именно там, где пользователи ожидают их найти.

Отсутствуют элементы, которые выглядят кликабельными, хотя таковыми не являются.

Все элементы, относящиеся к одному и тому же фрагменту контента (иконка, изображение, текст), связаны и указывают на одну и ту же страницу.

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

Оригинальный текст: Kate Meyer / nngroup.comПеревод: Светлана Граудт

Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Источник: http://tilda.education/articles-flat-design

Ссылка на основную публикацию