7 небольших UI-исправлений, которые могут сделать продукт более привлекательным

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

Они дорабатывают мельчайшие детали.

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

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

1. Последовательные интервалы

Большинство интерфейсов выглядят дешево не из-за цвета или типографики.

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

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

Решение

Выберите масштаб отступов и придерживайтесь его. Что-то предсказуемое, например, 4, 8, 12, 16. Неважно, какой масштаб, главное — придерживаться. Если в вашем макете отступы выглядят как 7, 13, 19, 22 и 9 пикселей, смешанные вместе, поздравляю, вы только что создали визуальный хаос.

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

2. Уменьшите количество размеров шрифта

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

«Маркетинг предпочитает 22 пикселя. Инженеры предпочитают 14 пикселей. Внутренний отдел предпочитает 17.5 пикселей».

Отлично. Теперь продукт выглядит как шведский стол.

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

Решение

Уменьшите количество размеров шрифта до тех пор, пока их нельзя будет пересчитать по пальцам одной руки. Серьезно. Максимум пять.

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

3. Используйте меньше цветов, а не больше

Этот пункт обижает людей. Дизайнеры любят цвета. Разработчики любят цвета. Менеджеры по продуктам ОЧЕНЬ любят цвета. Не успеешь оглянуться, как у тебя их уже двадцать.

• Зеленый — для успеха
• Красный — для опасности
• Синий — для информации
• Желтый — для предупреждения
• Фиолетовый — потому что кто-то настоял, что это «выглядит современно»
• Оранжевый — потому что операционный директор однажды сказал что-то об «энергии»

Стоп.

Премиум-дизайн — это чистота. Контролируемость. Целенаправленность.

Решение

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

Вам не нужна радуга, чтобы показать все, что вам нужно.

4. Последовательные скругления

Я знаю, это звучит смешно. Но непоследовательные радиусы углов — это как несоответствующие носки.

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

Если ваши кнопки имеют радиус 4 пикселя, поля ввода — 10 пикселей, карточки — квадратные, а выпадающие меню — полностью скругленные, ваш интерфейс будет выглядеть неорганично.

Решение

Выберите один стиль.

Четкий. Слегка закругленный. Мягкий. В форме таблетки. Что угодно, что подходит вашему бренду.

Затем примените его везде.

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

5. Упростите свои иконки

Хаос иконок — это реальность.

Ничто так быстро не портит премиальный интерфейс, как использование:

• Одной заполненной иконки
• Одного контурной
• Двух иконок с толстыми линиями
• Одной иконки с тонкими линиями
• Одной случайной иконки, которую кто-то скачал в 3 часа ночи из неизвестного уголка интернета

Премиальный дизайн основан на единообразии.

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

Решение

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

Исправьте это, и весь интерфейс будет выглядеть более чистым.

6. Уменьшите рамки, используйте контраст и интервалы

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

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

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

Вместо этого они используют:

• Интервалы
• Нежные тени
• Мягкий контраст
• Светлые разделители
• Умную группировку

Это делает пользовательский интерфейс открытым и современным. Рамки повсюду делают его тяжелым и тесным.

Решение

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

7. Улучшите выравнивание текста

Ничто так не выдает неаккуратный интерфейс, как невыровненный текст.

Особенно на мобильных устройствах.

Особенно когда кто-то делится экраном и увеличивает изображение.

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

• Выровняйте метки
• Выровняйте компоненты
• Выровняйте иконки
• Выровняйте кнопки

Если что-то выглядит не так, как надо, то, скорее всего, так и есть.

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

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

Решение

Используйте сетку для дизайна.

Используйте правильное выравнивание: по левому краю, по центру или по правому краю.

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

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

Настоящий секрет: премиальный интерфейс — это, в основном, дисциплина

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

Премиум = контролируемый, последовательный и продуманный.

Дешевый = случайный, непоследовательный и хаотичный.

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

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

И ваш клиент посмотрит на него и скажет: «Вау, теперь он выглядит так премиально».

Хотя вы внутри знаете, что на самом деле все, что вы сделали, это:

• Отрегулировали интервалы
• Удалили рамки
• Исправили размеры шрифтов
• Почистили иконки
• И выровняли текст

Мелочи. Большой эффект.

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

Источник