Не изобретайте велосипед: десять проверенных хитростей для дизайнеров интерфейсов

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

Перевод подготовлен командой онлайн-школы английского Skyeng.

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

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

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

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

Иерархия шрифтов — это не просто сочетание крупного шрифта с мелким. Это правильная комбинация размера, визуального веса и цвета, которая создаёт контраст. А чем сильнее контраст, тем лучше.

Не усложняйте себе жизнь большим количеством оттенков чёрного текста на белом фоне.

Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному. Но вместо того чтобы использовать несколько (три или больше) шестнадцатеричных значений цвета (HEX), можно использовать всё тот же чёрный с разной степенью прозрачности (Opacity).

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

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

Например, посмотрите на эту работу дизайн-студии Momo & Sprits:

Однако можно научиться понимать цвета, даже если у вас нет врождённого дара. С помощью манипуляций с HSB (Hue — тон, Saturation — насыщенность, Brightness — яркость) можно делать удивительные вещи (мы будем использовать модель HSB вместо RGB). На примере ниже показано, как можно с лёгкостью избавиться от скучного сочетания белого и цветного фона и стать настоящим Пикассо:

Есть два способа сочетать цвета. В моём примере я использовала один и тот же базовый цвет #B9F4BC (цвет заливки круга). Вся разница — в цветах папки и полоски. Давайте проанализируем эти два способа.

В этом варианте параметр тона остается неизменным для всех элементов. Мы меняем только насыщенность и яркость. Их значения изменились, когда мы сделали зелёный цвет папки темнее. Значение насыщенности поменялось с 24 на 40 (+16), а яркости — с 96 на 82 (-14). Это означает, что для создания правильного контраста изменение насыщенности требует обратного пропорционального изменения яркости и наоборот .

По такому же принципу мы меняем параметры цвета полоски. Взяв за основу насыщенность и яркость папки, мы меняем меняем их с 40 на 44 (+4) и с 82 на 75 (-7) соответственно. Получается формула:

Более тёмное значение — увеличение насыщенности и уменьшение яркости.

Более светлое значение — уменьшение насыщенности и увеличение яркости.

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

RGB — аббревиатура слов Red, Green, Blue — красный, зелёный, синий. CMY (Cyan, Magenta, Yellow) — сине-зелёный, маджента и жёлтый. В начале я не придавала этим терминам особого значения, но потом поняла, как их можно использовать при создании цветовых комбинаций.

Чтобы получить более тёмный вариант базового цвета, мы должны просто передвинуть Color Picker (выбор цвета) к ближайшему RGB или в сторону CMY — для более светлого варианта. Например, так:

Для более тёмного оттенка базового цвета #B9F4BC(цвет фона в круге), который мы будем использоваться в качестве цвета для иконки папки, мы передвинем Color Picker в сторону ближайшего RGB (в этом случае — синий). Но если мы хотим сделать оттенок папки светлее, мы переместимся влево к ближайшему CMY (жёлтый).

После того как мы переместили Color Picker в сторону нужного оттенка, воспользуемся формулой из первого способа и получим такую комбинацию:

Красный, зелёный, синий (RGB) + формула из первого способа = более тёмный вариант.

Сине-зелёный, маджента, жёлтый (CMY) + формула из первого способа = более светлый вариант.

Можно разделить группы с помощью линий, но лучше и проще будет увеличить пространство между ними.

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

В примере выше я визуально отделила заголовок от имени автора, увеличив интервал между ними (24px).

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

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

Сделать хороший заголовок на разноцветном фоне довольно сложно, особенно если изображение анимировано или время от времени меняется.

Самым распространённым решением такой задачи обычно становится Drop shadow (тень), но на самом деле текст от этого не становится более читаемым. Тени добавляют шум, потому что заполняют пространство между буквами. Кто-то в таких случаях накладывает белый текст на черный фон, но мне больше нравится использовать Multiply (умножение).

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

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

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

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

Не нужно изобретать велосипед и создавать новую карточку для Art Group (пример выше), вместо этого можно взять карточку the Article и поместить туда содержимое Art Group. Это сэкономит ваше время и сделает интерфейс понятнее.

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

И последнее. Если вы создаёте дизайн списка (пример ниже), визуально отделите буллеты, глифы и цифры. Это поможет избежать помех при чтении такого списка.

Эту статью я написала, вдохновившись другим материалом на Medium.

#дизайн