Веб-студия Laweb

г.Киев, ул. Драгоманова, 4а

Наши Статьи

Делимся своим опытом и размышлениями.

Лучшие практики плоского дизайна

ПЛОСКИЙ ДИЗАЙН

С момента своего роста популярности в 2012 году, плоский дизайн оказал влияние на визуальный дизайн в Интернете. Они сейчас повсюду - Apple, Amazon, Microsoft.

17.12.2018
276

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

Стратегии предотвращения неопределенности кликов

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

  1. Убедитесь, что ваши кнопки хотя бы смутно выглядят как физические кнопки.

  2. Избегайте призрачных кнопок - текст с тонким прямоугольным контуром.

  3. Убедитесь, что мелкие предметы увеличатся при нажатии.

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

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

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

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

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

 

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

  1. Контрольный список

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

  3. Связанные элементы заметны, имеют соответствующий контраст и заметны.

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

  5. Там нет «красных селедок» - нет ложных целей, которые выглядят кликабельными, но не являются таковыми.

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