Дизайн Вадим Скворцов
13 733

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, которым мы обычно уделяли не слишком много внимания.

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Multiply вместо Drop shadow

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

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

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

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

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

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

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

{ "items": [{"title":"","image":{"type":"image","data":{"uuid":"e1f6fb80-6387-31a8-6ac2-5c3a6d882796","width":800,"height":1069,"size":84103,"type":"png","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"28dbc46a-0eba-805b-1273-7599e978b1fd","width":800,"height":1056,"size":83781,"type":"png","color":"","external_service":[]}}}] }

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

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

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

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

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

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

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

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

#дизайн

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","b9f4bc","000"], "comments": 32, "likes": 44, "favorites": 118, "is_advertisement": false, "subsite_label": "design", "id": 36482, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 36482, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/36482\/get","add":"\/comments\/36482\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/36482"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

32 комментария 32 комм.

Популярные

По порядку

Написать комментарий...
12

еще одна статья бреда

Ответить
8

Ну зачем переводить бред? Многие вещи вырваны из контекста, многие подходят только для одной определенной цели, а не дизайна в целом, что-то вообще подходит ТОЛЬКО для англоязычной аудитории.

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

Количество символов в строке напрямую зависит от размера шрифта.Тем более, что диапазон 45-60 символов - это для английского языка http://prntscr.com/j6sxfj

Ответить
0

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

Количество символов в строке напрямую зависит от размера шрифта.

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

Ответить
5

Противоречивая статья. «Чем сильнее контраст, тем лучше.» «Используйте калькулятор, чтобы проверить доступность» («check its accessibility» — вообще почему-то не переведено) и в другом месте «Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному,» как камнем по голове. Лол, что?!

Люди годами читали и читают чёрный на белом. Контрастный текст лучше читается, особенно когда есть проблемы со зрением (или с экраном, освещением и тому подобным). А здесь предлагается ухудшить восприятие. Если у кого-то утомляются глаза, то надо настроить яркость экрана и окружение. Этим вообще не должен за всех заниматься дизайнер.

«Зебры» тоже не лучший совет: они создают мельтешение и в плохих условиях их также может быть попросту не видно, так как фон очень бледный (иначе сильно снизится контраст).

Ответить
4

При долгом чтении #111 или #222 воспринимаются глазом лучше, чем #000

Ответить
2

Люди годами читали и читают чёрный на белом.

Бумага не светится, в отличие от экрана)

«Чем сильнее контраст, тем лучше.»

и в другом месте «Черный цвет текста (#000) вызывает переутомление глаз

Очевидно же что в первом случае речь про контраст в размерах, а во втором про цветовой

Ответить
0

Хотела поставить минус за контрастность (слишком яркая действительно уматывает глаза. Присмотритесь к разным сайтам или проведите эксперимент: чистый черный на белом читается менее приятно, чем темно-серый. С белым на черном так же.). Но так же хочу поставить плюс за зебры в списке. Они мало где оправданы (если вообще хоть где-то).

Ответить
7

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

Ищем всем отделом оттенки чёрного, нашли один

Ответить
7

Тем временем в SAP

Ответить
6

Режимы наложения в макетах для вэба... Ммммм😏
Can I Use CSS background-blend-mode?

Ответить
4

Много спорно. Что точно бросается в глаза:

Пункт 9 ("Вот решение — используйте эти цвета как акцентные")
Без сопоставления с тем, что будет вокруг этого объекта, принятие решения невозможно (нужно ли поднять визуальный приоритет этого объекта-кнопки или нет относительно окружения).

Пункт 10 ("Это поможет избежать помех при чтении такого списка").
Это точно понизит визуальный приоритет заголовка этого списка, что в ряде случаев может стать проблемой (сначала пользователь увидит чекбоксы, которые бессмысленны для него до тех пор, пока он не в курсе что это за список, какой у него заголовок).

Ответить
2

писанина ради писанины

Ответить
2

в 5 варианте "do" читается хуже первого, потому что серый текст меркнет из-за голубых полосок. надо сделать основной текст черным. да ладно, автор?

Ответить
1

Все по лекалам дриббла, ага. Причем здесь интерфейс — непонятно.

Ответить
1

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

Ответить
1

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

Ответить
1

еще вопрос по верстке. кто-нибудь когда-нибудь видел верстальщика, который ставит опасити на body текст? вся эта статья какой-то полубред.

Ответить
0

Два слова: Material Design)

Ответить
0

наверно, это не тот материал дизайн)

Ответить
1

С этим вообще не согласен, но в целом статья годная.

Ответить
0

да всем вообще пофиг

Ответить
0

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

Ответить
0

Опять завезли переводы статеек с медиума от непойми кого

Ответить
0

а Multiply для текста уже придумали, как реализовывать?

Ответить
0

очевидно же, что текст добавлять картинкой (привет, 2003-й)

Ответить
0

Я сначала так подумала, потом думаю: "ну нееет, не может быть", похоже "даа((("

Ответить
0

CSS Compositing and Blending позволяет это сделать, но поддержка ограниченная конечно.

Ответить
0

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

Ответить
0

Меня раздражает этот чистый белый цвет для фона. Ей богу слепит глаза хуже солнца. Вот 240-220 уже намного приятнее. Но вообще лучше всегда dark версию делать. Весь про софт от Adobe до Autodesk давно уже понимает почему темный дизайн лучше для глаз.

Ответить
0

Срочно нужен web-дизайнер для создания лого и сайта, напишите мне, кто сможет этим заняться +79963032823 (what's up, telegram)

Ответить
0

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

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления