Путь к «чистому» интерфейсу  через закон сниженого акцента.

Улучшите свои визуалы за пару минут
Когда вы думаете о «чистом» интерфейсе, что приходит вам в голову? Многие ассоциируют его с дизайном, который прост и удобен как в использовании, так и визуально. Однако дизайнерам бывает сложно создать интерфейс, который действительно воплощает эту абстрактную концепцию.

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

Кнопок всего пять, но ощущение такое, будто их намного больше. Да, они работают, но выглядят и используются не особенно приятно. Акцент должен ставиться на самом важном элементе, а всё остальное — снижаться по уровню важности. Здесь же выделено буквально всё.

Закон снижения акцента

Чтобы самый важный элемент выделялся, всё остальное должно отходить на второй план.

В данном случае приоритет №1 — текстовые метки. Если пользователь не может их прочитать, он не нажмет на кнопку, и она станет бесполезной. Чтобы переработать кнопки, начните с текста и уберите всё остальное: никакой формы кнопки, рамок или цветов.

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

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

Кроме того, примените более тяжёлое начертание шрифта, например medium или semibold, чтобы текст сильнее выступал на передний план. Bold иногда выглядит слишком тяжелым, поэтому важно найти правильный баланс.

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

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

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

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

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

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

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

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

Заключение

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

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