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

Posted on by riasevastopol

С момента взлета собственной популярности в 2012 году плоский дизайн (Flat Design) сильно повлиял на вкусы визуальных дизайнеров. Flat сейчас везде: сайты Apple, Amazon, Микрософт а также IBM — плоские.

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

Его UI практически невесом и легко поддерживается устройствами всевозможных размеров.

К сожалению, имеется у этого вида дизайна и серьёзный недочёт: неоднозначность кликов (Click Uncertainty) и низкая эффективность пользователей (User Efficiency). В то время, когда дизайнеры «уплощают» UI, они довольно часто ликвидируют многие указатели (Signifiers), намекающие пользователям, куда необходимо кликать.

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

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

Подходит ли вам полностью плоский дизайн?

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

  • простота и Низкое количество контента информационной архитектуры (Information Architecture). Ультраплоский дизайн прекрасно трудится на маленьких сайтах (от 1 до 10 страниц);
  • отсутствие и Небольшой объём интерактивности сложных функций. интерфейсы и Комплексные приложения с необыкновенными шаблонами сотрудничества не смогут обеспечить обычный пользовательский путь, в случае если дизайнеры сделают UI всецело плоским;
  • Наличие большого числа возвращающихся визитёров (Returning Visitors). При условии возвратов на сайт у пользователей увеличится число шансов изучить интерактивные части, не надеясь на символы-указатели;
  • Целевая аудитория, представленная специалистами в технологической области. В случае если ваши пользователи продвинуты (к примеру, они являются дизайнерами либо разработчиками, или имеют обширный опыт пользования плоским дизайном), у них будет больше шансов разобраться в данном виде дизайна, если сравнивать с простыми людьми.

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

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

Но большая часть цифровых продуктов значительно более сложные и не смогут вместиться в одностраничный маркетинговый сайт. Для таких случаев рекомендуется использование полуплоского (Semiflat) либо плоского в версии 2 (Flat 2.0) дизайна. Эти стили во многом похожи на flat design, но включают легкие тени, выделение отдельных элементов и слои, придающие UI глубину.

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

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

Стратегии, помогающие избежать клик-неоднозначности

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

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

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

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

Следуйте данным рекомендациям, в случае если желаете продемонстрировать, что текст, кнопки, картины, графика, иконки и вкладки доступны для нажимания:

  • Убедитесь, что все кнопки хотя бы отдаленно напоминают настоящие, физические кнопки;
  • Избегайте контурных кнопок (Ghost Buttons) — текста, очерченного узкой линией в прямоугольник;
  • Маленькие объекты должны возрастать при клике;
  • Применяйте для ссылок стандартные узнаваемые иконки. За исключением нескольких случаев, эти иконки должны дополняться поясняющим текстом;
  • Ваши вкладки смогут быть оформлены без теней, но они должны соответствовать определенным рекомендациям в плане дизайна. К примеру, принципиально важно логически разбивать контент по вкладкам, снабжать их текстовыми ярлыками, выделять выбранную вкладку, применять лишь один последовательность и т. д.

Как возможно больше обращайтесь к привычным моделям и традиционной структуре User Interface. Это окажет помощь визитёрам с легкостью осознать суть каждого элемента кроме того при отсутствии вторых сильных указателей. Соединяя стандартную структуру с чистым достаточным количеством и визуальным дизайном белого пространства (White Space), вы еще больше содействуете пониманию, потому, что любая часть сайта делается более выраженной и ясной.

teavana.com. Эта схема перемещения взора, полученная посредством айтрекинг-изучения, показывает, куда наблюдает визитёр в первые пара секунд по окончании захода на страницу. (Красные точки отмечают моменты фиксации взора.) Потому, что Teavana использует несложной визуальный дизайн с довольно классической для eСommerce структурой, пользователи без неприятностей смогут ориентироваться на сайте, не обращая внимания на достаточно плоскую эстетику. Белое пространство и ожидаемое положение панели главной навигации оказывает помощь скоро осознать суть всех элементов

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

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

sabemasson.com. Кнопка главного действия на домашней странице в данном примере достаточно неприметная (и к тому же спорен сам выбор слов — OUR EXPERTISE, «Отечественное экспертное вывод»). Рядом с этим громадным фоновым фото она просто теряется. Этот дизайн возможно легко улучшить, в случае если акцентировать цвет, к примеру, сделать кнопку чуть более чёрной версией светло-голубого цвета, уже использованного в UI

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

Это прояснит связи между элементами.

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

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

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

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

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

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

Заключение

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

Сверяйте любой плоский интерфейс пользователя с данным перечнем залогов хорошего юзабилити:

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

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

По данным: nngroup.com. Источник картины: Robert Streeter

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

Flat Design — #2 — Плюсы и минусы


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

riasevastopol

More Posts