10 чит-кодов для создания интерфейсов

Я бы, вероятно, предположил, что большинство из нас начинали в дизайне пользовательского интерфейса с самым маленьким набором знаний или вовсе без них. Но даже при том, что в начале всё было против нас, мы прошли путь через многочисленные книги и статьи о дизайне, чтобы понять, как цвета, типография, макет и т.д. работают. Я помню, как у нас, в Make Technology, компании, управляемой UX, прижилось, что дизайн не может быть просто объяснен цветами, формами и текстом. Это процесс, который состоит из вопроса "зачем", так что всякий раз, когда мы делаем текст больше, добавляем тень или изменяем цвет, должна быть причина, что бы сделать это.

Таким образом, в этой статье я буду делиться списком вещей, которые я узнал от разных компаний и дизайнеров, вещей, которые я узнал при разработке пользовательских интерфейсов, и новыми открытиями, которые я нашел по пути:

* Отказ от ответственности: приведенные ниже плохие примеры не обязательно означают, что они неверны. Это наша основа того, как мы можем перейти от хорошего дизайнерского решения до очень хорошего 😄

1. Этот текст очень важен, сделайте его больше!

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

Иерархия шрифтов - это не просто о маленьких и больших размерах шрифта. Речь идёт о правильном сочетании размера, толщины и цвета, который создает контраст. Чем больше контраст, тем лучше.

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

• Не используйте одну толщину с различными размерами шрифта для создания контраста и иерархии.
• Вместо этого используйте более темный стиль для основного контента и более светлый для вторичного контента (менее важного).
• Создайте три вида цветов текста, которые варьируются от темного до светлого (см. пример ниже). Обычно я использую свой базовый цвет в качестве цвета основного текста.
• Не бойтесь применять большие промежутки шрифта к вашим элементам (например, заголовок 24px, 16px body text, 10px meta и т. д.). Больший промежуток = лучший контраст.
• Испульзуйте Modularscale онлайн-калькулятор для создания лучшей иерархии шрифтов.
• Помните, что контраст = размер + толщина + цвет.
• И наконец, обязательно проверьте контрастность. Вы можете использовать этот калькулятор, чтобы оценить читабельность.

2. Не создавайте несколько оттенков черного цвета

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

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

3. Сделайте математику для понимания цветов

Большинство из нас плохо выбирают правильные цветовые комбинации, и всякий раз, когда мы видим дизайн с хорошо организованной цветовой палитрой, мы спрашиваем себя: “как они это сделали?” (так же, как и тот, что ниже):

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

Итак, где же происходит сложение и вычитание в HSB?

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

Вариант А

В варианте "А" мы можем видеть, что мы сохранили значение оттенка 123 во всех формах (круг, папка, полоса), в то время как насыщенность и яркость изменяются.

Теперь, когда мы сосредоточимся на насыщенности базового цвета, которая составляет 24, и ее яркости, 96, оба значения изменились, когда мы создали темно-зеленый цвет для папки. Из насыщенности 24 он стал 40 (увеличение +16), а из яркости 96 он стал 82 (уменьшение -14), это демонстрирует нам, что изменение насыщенности, будь то увеличение или уменьшение, требует обратно пропорциональной регулировки яркости, чтобы создать хороший контраст (и наоборот) . И то же самое произошло с полосой, используя насыщенность и яркость папки в качестве базового значения, мы переместились с 40 на 44 (увеличение +04) у насыщенности, и от 82 до 75 (уменьшение -07) у яркости. Таким образом, подводит нас к формуле:

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

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

Вариант Б

В варианте "Б" по-прежнему применяется тот же принцип (формула, которую мы использовали выше), но значения оттенков меняются. И терминологии RGB и CMY, которые мы пропускали в различных обучениях по дизайну, теперь имеют смысл.

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

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

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

Чаще всего RGB приводит к более темным вариациям, а CMY для более светлого

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

Красный, зеленый, синий (RGB) + вариант формулы = более темный вариант. Голубой, пурпурный, желтый (CMY) + вариант A формула = более светлая вариация

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

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

Как то, что гласит закон близости:

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

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

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

Создание внешнего вида строк иногда может быть скучным, так как для этого требуется только дублирование компонента в течение n раз. Но на стороне пользователя, чтение их может быть особенно трудным, если нет большого различия между одной строкой к другой. Таким образом, помимо использования линий, добавление цветного фона в строках может быть очень полезно для пользователей при чтении, а также даст больше удовольствия дизайнеру при создании. :)

6. Умножение вместо тени текста

Создание текста поверх изображения - весьма непростая задача, особенно если фон изображения будет динамическим (или может меняться время от времени).

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

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

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

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

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

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

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

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

Что делает дизайн непоследовательным, так это когда он не основан на компонентах. Именно тогда, когда вы пришли к пониманию, что сделали 5 видов интерфейса карточек, 10 кнопок, 5 стилей заголовка и т. д.

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

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

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

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

10. Повесьте пули

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

Ещё больше статей в Telegram-канале.