Я думаю, что многие из нас начинали работать в 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. Выделите список
Если вы создаете дизайн со списком, создайте отступ между элементами списка и остальным текстом. Это сделает список более понятным и не будет нарушать процесс чтения текста.