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

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

1. Важность не за счет размера

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

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

Как создать лучший контраст?

• Не используйте одну и ту же насыщенность с разными размерами шрифтов.
• Создайте три разных оттенка, самый темный из которых можно использовать для основного текста.

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

2. Не создавайте разные тона черного

Использование черного цвета (#000) вызывает напряжение глаз у читателя. Чтобы создать разные цвета, применяйте шрифты с разным значением прозрачности вместо того, чтобы использовать разные оттенки.

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

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

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

Вариант А

В первом варианте значение тона в 123 сохраняется во всех фигурах, а меняются насыщенность и яркость. При создании более темного цвета для папки мы изменяем насыщенность с 24 на 40, а яркость — с 96 на 82, что показывает, что положительное или отрицательное изменение насыщенности должно сопровождаться противоположным изменением яркости, и наоборот. То же самое происходит для полосы: используя значения оттенков папки, насыщенность мы изменяем с 40 на 44, а яркость — с 82 на 75. Это приводит нас к формуле:

Темный оттенок = Повышение насыщенности + снижение яркости

Светлый оттенок = Снижение насыщенности + повышение яркости

Вариант В

Тот же самый принцип применяется и во втором варианте, но значение тона меняется. Здесь мы будем использовать терминологии RGB и CMY, которые не были важны для меня, когда я только начинал работать, пока я не нашел такое применение RGB и CMY для сочетания цветов.

Если в варианте В мы хотим создать более темную вариацию основного цвета, для этого мы будем перемещать ползунок в инструменте выбора цвета в сторону ближайшего оттенка RGB, а если мы создаем более светлую вариацию — в сторону ближайшего тона CMY.

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

После этого мы можем применить формулу из первого варианта, что приводит нас к этому цветовому сочетанию:

Красный, зеленый, синий (RGB) + формула из варианта А = темная вариация

Бирюзовый, маджента, желтый (CMY) + формула из варианта А = светлая вариация

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

Использование большого интервала — это простое решение для разделения групп. В примере выше моей целью было разделить заголовок и имя автора при помощи большого интервала в 24px.

5. Используйте цвета, чтобы разделить строки

Создание интерфейсов с несколькими строками может быть скучным, так как от вас требуется вставить компонент N раз. Но чтение такого интерфейса может быть ещё более сложной задачей, если один ряд не отличается от другого. Цветной фон может помочь пользователям в чтении, а также сделать работу дизайнера немного интереснее.

6. Используйте умножение вместо текста с тенью

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

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

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

7. Длина строк

Часто дизайнеры удлиняют строки, чтобы они подходили под страницу. Но для удобства чтения лучше сохранять длину строки в 45–65 символов. Но если вы укорачиваете строку, то может оказаться, что справа возникает большое пустое пространство:

В таком случае сделайте выравнивание по центру всего текста.

8. Не изобретайте колесо

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

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

9. Используйте цвета компании в качестве акцентов

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

10. Выделите список

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