Плоский дизайн: истоки, проблемы и почему Flat 2.0 лучше
Плоский дизайн: истоки, проблемы и почему Flat 2.0 лучше
14 мая 2016

Flat design: куда идёт индустрия и почему минимализм так прочно засел в нашем сознании.

Резюме: Плоский дизайн в веб разработке стал популярным в 2012 году и до сих пор активно используется. Его главным недостатком является проблема удобства для пользователя. Одной из самых больших проблем является размещение кликабельных элементов. Flat 2.0 обеспечивает лучшую альтернативу обычному плоскому дизайну.

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

Трехмерные эффекты, Skeuomorphism и реализм

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

Трехмерные эффекты

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

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

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

Skeuomorphism

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

Реализм

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

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

Происхождение плоского дизайна

Выпуск дизайнерского языка Metro design language и Windows 8 были одними из причин популяризации плоского дизайна. Использование Microsoft этого стиля заинтересовало множество дизайнеров. В отличии от skeuomorphic, плоский дизайн был способом исследовать цифровой носитель, не пытаясь воспроизвести внешний вид физических вещей. Компания Apple также использовала плоский дизайн для домашней страницы своей компании. Это также послужило причиной роста популярности данного стиля.

 

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

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

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

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

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

Эта цитата демонстрирует, как люди понимают термин кликабельности:

  • Традиционный подчеркнутый текст, выпуклые кнопки;
  • То, что напоминает нам традиционное понятие – подчеркнутый текст например;
  • Контекстные элементы – к примеру, текст размещённый в верхней части страницы.

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

Развитие плоского дизайна

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

Одним из примеров такого стиля является Google’s Material дизайн. Здесь правильно расположены приоритеты: используются последовательные метафоры и принципы, что заимствованы из физики. Это помогает пользователям разобрать интерфейс и интерпретировать визуальную иерархию содержания.

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

Многие известные компании отказываются от тяжелых и лишних элементов дизайна. Чем меньше излишеств, тем выше удобство использования сайта. Но не стоит переусердствовать, чтобы сайт не стал экстремально плоским. Стиль Flat 2.0 даёт возможность компромиссно-визуальной простоты, не жертвует пользовательскими элементами.

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Давайте ускоримся
Давайте ускоримся

Продолжаю делиться с Вами историями из своего опыта в дизайне.

14.02 0
Точно по брифу
Точно по брифу

Друзья, хочу поделиться с Вами одной историей из своей практики.

10.02 0
Что нужно знать дизайнеру перед присоединением к стартапу
Что нужно знать дизайнеру перед присоединением к стартапу

Как правильно искать работу дизайнеру в стартапах. На что обращать внимание при приёме на работу и какие вопросы нужно задавать стартапу чтобы не потратить время зря.

13.11 0
JavaScript, Flash и типографика - когда это вредно?
JavaScript, Flash и типографика - когда это вредно?

Как JavaScript, Flash и неудачная типографика могут обернуться катастрофой для посетителей вашего сайта.

16.05 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.