Hi-Tech

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

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

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

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

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

1. Это очень важный текст, сделай шрифт ещё больше

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

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

Как создать контраст

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

  • Вместо этого сделайте основной контент более жирным и тёмным, а второстепенный, менее важный текст — мельче и легче.

  • Обычно я использую базовый цвет для основного текста. Выберите три оттенка цвета текста (от более тёмного к более светлому).

  • Чем больше эта разница — тем сильнее контраст. Не бойтесь сильной разницы в размере шрифтов (24px для заголовка, 16px для основного текста, 10px для метаданных и так далее).

  • Воспользуйтесь онлайн-калькулятором Modularscale, чтобы рассчитать оптимальную иерархию шрифтов.

  • Помните: контраст = размер + визуальный вес + цвет.

  • Например, с помощью этого калькулятора. И не забудьте проверить контрастность.

Взяв за основу базовый цвет, я перехожу от более тёмного оттенка заголовка к более светлым оттенкам для сопутствующего контента

2. Вам не нужно много оттенков чёрного

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

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

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

3. Правильные расчёты помогут разобраться в цветах

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

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

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

Как можно менять параметры HSB

Два подхода к пониманию цветов

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

Первый способ

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

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

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

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

Второй способ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Multiply вместо Drop shadow

Дизайн заголовка

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

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

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

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

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

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

8. Не изобретайте велосипед

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

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

9. Используйте цвета бренда как акцентные

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

10. Правильно расположите буллеты

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

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

#дизайн

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть