Вы читаете перевод статьи "Optical Effects in User Interfaces (for True Nerds)". Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
Странный орган, наши глаза. С одной стороны, они часто нам врут. С другой стороны, разобравшись в особенностях зрительного восприятия, мы сможем создавать более чистые и простые в использовании дизайны. Оптическими трюками часто пользуются дизайнеры-шрифтовики, чтобы создавать читабельные и сбалансированные шрифты. Но дизайнеру интерфейсов эти штуки тоже пригодятся.
В 1920-х годах появилась Гештальт теория визуального восприятия. Она объясняет, как наши глаза воспринимают различные образы, и как их интерпретирует наш мозг и как это связано с оптическими иллюзиями в дизайне интерфейсов. Возможно, вы уже слышали о “законе близости” или о “принципе общей судьбы”? В этой статье мы коснемся некоторых аспектов Гештальт-теории, ориентируясь скорее на их практическое применение, нежели на научные исследования.
1. Реальный и оптический размер
Что больше: квадрат размером 400 пикселей или круг размером 400 пикселей? С геометрической точки зрения, высота и ширина этих фигур одинакова. Но посмотрите на картинку. Взгляд мгновенно отмечает, что квадрат перевешивает круг.
![](https://ux-journal.ru/wp-content/uploads/2019/03/1.png)
Вот версия с направляющими линиями.
![](https://ux-journal.ru/wp-content/uploads/2019/03/2.png)
Давайте посмотрим на еще одну пару фигур. Как вам кажется, они равны по визуальному весу?
![](https://ux-journal.ru/wp-content/uploads/2019/03/3.png)
Ну, как минимум, сразу не скажешь, кто из них тяжелее. И неудивительно, ведь я увеличил диаметр круга.
![](https://ux-journal.ru/wp-content/uploads/2019/03/4.png)
Я наложил друг на друга фигуры из первого и второго примера. Слева мы видим, что площадь квадрата в 400 пикселей больше, чем площадь круга с тем же радиусом. Поэтому он и кажется нам визуально более тяжелым. Круг и квадрат справа выглядят сбалансированно. По сути, увеличив диаметр круга, я сравнял их площадь.
![](https://ux-journal.ru/wp-content/uploads/2019/03/5.png)
Тот же эффект можно заметить у ромбов и треугольников. Чтобы добиться визуального баланса с квадратами, нужно делать их шире и выше, чтобы площади фигур сравнялись. Этот подход отлично работает с простыми формами.
![](https://ux-journal.ru/wp-content/uploads/2019/03/6.png)
Как это можно применить в интерфейсе? К примеру, если вы создаете набор иконок, очень важно, чтобы они все были сбалансированы: не бросались в глаза, но и не терялись на фоне других. Если просто вписывать каждую иконку в квадратную рамку, то, естественно, квадратные иконки будут казаться тяжелее.
![](https://ux-journal.ru/wp-content/uploads/2019/03/7.png)
Перевес квадратных иконок можно компенсировать. Например, мы можем позволить иконкам других форм “свешиваться” за границы квадратной рамки. Или, как вариант, оставлять небольшой зазор между квадратной иконкой и рамкой.
![](https://ux-journal.ru/wp-content/uploads/2019/03/8.png)
А вот несколько настоящих оптически-сбалансированных иконок.
![](https://ux-journal.ru/wp-content/uploads/2019/03/9.png)
Теперь понятно, почему область иконки всегда больше, чем тело иконки — чтобы можно было немного увеличить визуальный вес неквадратных иконок.
![](https://ux-journal.ru/wp-content/uploads/2019/03/10.png)
Самый простой способ проверить визуальный баланс — размыть иконки. Если кляксы получились более-менее одинаковые, значит с визуальным весом все в порядке.
![](https://ux-journal.ru/wp-content/uploads/2019/03/11.png)
Но иногда мы работаем с уже существующей графикой: к примеру, с иконками соц.сетей для кнопок “Поделиться” и “Нравится”. Иконки Facebook и Instagram — квадратные, но вот Pinterest — это буква P вписанная в круг, а Twitter вообще силуэт птички. Поэтому иконки Twitter и Pinterest нужно немного увеличить, чтобы сравнять их визуальный вес с Facebook и Instagram.
![](https://ux-journal.ru/wp-content/uploads/2019/03/12.png)
Еще один пример оптического баланса — это текстовое поле рядом с круглой кнопкой. Когда диаметр кнопки равен высоте поля, она кажется нам мелковатой. Слегка увеличив кнопку, мы сбалансируем конструкцию.
![](https://ux-journal.ru/wp-content/uploads/2019/03/13.png)
Но если мы поменяем стиль кнопки, не понадобится ничего увеличивать. На картинке ниже и у кнопки, и у текстового поля одинаковая высота — 80 пикселей, но благодаря черной заливке кнопка не “теряется”.
![](https://ux-journal.ru/wp-content/uploads/2019/03/14.png)
Что стоит запомнить
- Оптический вес — это то, как наши глаза воспринимают размер и важность объекта, независимо от его площади и количества пикселей.
- Круги, ромбы, треугольники и другие неквадратные формы должны быть выше и шире, чтобы соответствовать визуальному весу квадратных форм.
- Задавая область под иконку, оставляйте немного пространства для оптического балансирования форм. Это особенно важно, если вы создаете набор иконок, где все должно быть согласовано.
2. Выравнивание разных фигур
Оптическое выравнивание — логическое продолжение темы оптического баланса. Посмотрите на полоски на рисунке ниже. Они выглядят одинаковыми по длине?
![](https://ux-journal.ru/wp-content/uploads/2019/03/15.png)
Если смотреть по пикселям, то они, конечно, равны. Но внешне кажется, что нижняя полоска короче.
![](https://ux-journal.ru/wp-content/uploads/2019/03/16.png)
А вот еще две полоски. Ну как, что-то изменилось?
![](https://ux-journal.ru/wp-content/uploads/2019/03/17.png)
На этот раз я сделал оптическую компенсацию. Проще говоря, я немного подвинул нижнюю полоску, чтобы зубчики выступали буквально на 20 пикселей за линию выравнивания. Благодаря этому, визуально полоски выглядят ровнее.
![](https://ux-journal.ru/wp-content/uploads/2019/03/18.png)
А вот несколько примеров полосок более сложных форм.
![](https://ux-journal.ru/wp-content/uploads/2019/03/19.png)
Так что если будете использовать такие полоски с текстом для оформления постеров, или, скажем, добавлять яркую ленточку “Скидка” на карточку продукта в онлайн магазине, следите за оптическим балансом. Острые зубцы должны немного выступать за пределы фигуры, особенно если сама фигура прямоугольной формы.
![](https://ux-journal.ru/wp-content/uploads/2019/03/20.png)
А как выравнивать простой текст и текст с цветной подложкой? Тут все зависит от визуальной плотности фона. Если фон светлый, то можно выровнять выделенный параграф с остальным текстом.
![](https://ux-journal.ru/wp-content/uploads/2019/03/21.png)
Поскольку фон светлый, он не прерывает привычный ритм чтения.
![](https://ux-journal.ru/wp-content/uploads/2019/03/22.png)
Когда фон темный, мы будем выравнивать относительно основного текста уже фон, а текст внутри будет напечатан с небольшим отступом.
![](https://ux-journal.ru/wp-content/uploads/2019/03/23.png)
Темный фон, в отличие от светлого, имеет достаточно большой визуальный вес, так что если вы хотите ненавязчиво вписать текст с темной подложкой в общий блок текста, лучше выбрать такой вариант:
![](https://ux-journal.ru/wp-content/uploads/2019/03/24.png)
Тот же принцип работает и с кнопками и полями ввода. Конечно, это не догма, а скорее рекомендация, основанная на особенностях нашего восприятия.
![](https://ux-journal.ru/wp-content/uploads/2019/03/25.png)
На картинке слева у полей ввода светлый фон. Он может слегка “вылезать” за линию, по которой выровнены названия полей и текст, вводимый пользователем. Что касается кнопки, она скругленная, то есть по идее ее бы полагалось двинуть немного за край фона, чтобы визуально сбалансировать. Однако, как вы видите, кнопка темная, и это придает ей дополнительного веса — а, значит, в данном случае можно просто выровнять ее с прямоугольным фоном.
Справа у полей ввода есть четкие границы. Я выровнял названия полей по этим границам, а уже вводимый текст будет идти с небольшим отступом. У кнопки “Send” есть одна треугольная грань, а, значит, кнопку нужно немного подвинуть вправо, чтобы сбалансировать с прямоугольной рамкой поля ввода.
![](https://ux-journal.ru/wp-content/uploads/2019/03/26.png)
А сейчас мы подходим к еще одному аспекту выравнивания — выравнивание текста внутри кнопки. Посмотрите на кнопки на рисунке ниже. Кажется, что текст расположен по центру, не правда ли?
![](https://ux-journal.ru/wp-content/uploads/2019/03/27.png)
Фишка в том, что на правой кнопке я слегка подвинул текст влево, поскольку правый край кнопки треугольный. Интересно, что хотя кнопка-стрела на 40 пикселей шире, оптически она “весит” столько же, сколько и прямоугольная кнопка.
![](https://ux-journal.ru/wp-content/uploads/2019/03/28.png)
Текст внутри кнопки выравнивается не только горизонтально, но и вертикально. Первый подход, с которым я бы хотел вас познакомить, используют в интерфейсах операционных систем, сайтов и приложений. Это выравнивание относительно высоты заглавной буквы шрифта: как правило, это буквы “H” или “I”.
![](https://ux-journal.ru/wp-content/uploads/2019/03/29.png)
По сути, расстояние между верхним и нижним краем заглавной буквы и соответствующими краями кнопки одинаково. Это логично, поскольку в английском языке названия кнопок, как правило, пишутся с большой буквы, а еще в английских буквах больше элементов поднимающихся над строкой (как в l, t, d, b, k, h), чем "свисающих" под строкой (как в y, j, g, p).
![](https://ux-journal.ru/wp-content/uploads/2019/03/30.png)
Еще один подход — выравнивание по высоте строчной буквы. В английских интерфейсных шрифтах с засечками и без эта высота принимается равной высоте буквы “x”.
![](https://ux-journal.ru/wp-content/uploads/2019/03/31.png)
В этом подходе тоже есть своя логика, ведь основной оптический вес кнопки сосредоточен именно в строчных буквах.
![](https://ux-journal.ru/wp-content/uploads/2019/03/32.png)
Насколько отличаются эти подходы? Отличаются, конечно, но не так уж сильно.
![](https://ux-journal.ru/wp-content/uploads/2019/03/33.png)
Вот вам больше примеров, чтобы посравнивать. Выравнивание по заглавным буквам (левая колонка) однозначно лучше смотрится для кнопок “Cancel” и “OK”, потому у “Cancel” нет свисающих элементов, а “OK” в принципе состоит из заглавных. Выравнивание по строчным лучше смотрится для “Sync”, потому что там есть и верхние и нижние элементы; но “Cancel” и “OK” при таком выравнивании кажутся поднятыми слишком высоко.
![](https://ux-journal.ru/wp-content/uploads/2019/03/34.png)
Для кнопок с иконками немного другая ситуация. Давайте разместим популярную иконку “Send” на круглом фоне кнопки. Какой вариант выглядит более сбалансированным?
![](https://ux-journal.ru/wp-content/uploads/2019/03/35.png)
Надеюсь, мы заметили, что с левой иконкой что-то не так. Причина тому — разные способы выравнивания. На левой картинке иконка принимается за прямоугольник и выравнивается с круглым фоном. В какой-то мере это правильно, ведь именно так выглядит SVG или PNG файл иконки, который мы отправляем разработчику — просто прямоугольный рисунок бумажного самолетика.
А вот справа иконка расположена так, что все ее острые углы равноудалены от краев фона.
![](https://ux-journal.ru/wp-content/uploads/2019/03/36.png)
Чтобы воспроизвести этот оптически-сбалансированный вариант в дизайне, вам нужно подготовить для разработчика специальный файл, где вокруг иконки будет оставаться пустое место.
![](https://ux-journal.ru/wp-content/uploads/2019/03/37.png)
Та же история с кнопкой “Play”. Если просто выровнять ее с прямоугольным фоном, она будет выглядеть странно.
![](https://ux-journal.ru/wp-content/uploads/2019/03/38.png)
Если хотите оптически сбалансировать положение треугольничка “Play”, заключите его в круг и выравнивайте этот круг с прямоугольным фоном кнопки.
![](https://ux-journal.ru/wp-content/uploads/2019/03/39.png)
Что стоит запомнить
- Фигуры с острыми краями нужно делать больше или длиннее, чтобы выровнять их вес с прямоугольными объектами.
- Выравнивание по заглавной букве — эффективный метод расположения текста на кнопках.
- Один из самых эффективных способов выровнять треугольную иконку относительно прямоугольного фона — вписать ее в круг и выравнивать круг.
3. Оптическое скругление углов
Что может быть круглее, чем круг? Раньше я думал, что ничего, но, как я уже говорил вначале, наши глаза часто врут нам. Итак, какой круг, по-вашему, самый круглый?
![](https://ux-journal.ru/wp-content/uploads/2019/03/40.png)
Мои собеседники обычно выбирают между 3 и 4. Круги 1 и 2 явно слишком худые, а пятый — слишком пухлый. Если наложить третий (геометрический) круг на четвертый (модифицированный), мы увидим, что четвертый немного тяжелее, чем третий — и, как следствие, кажется нам более гладким и ровным.
![](https://ux-journal.ru/wp-content/uploads/2019/03/41.png)
Чтобы продемонстрировать, о чем я говорю, я взял буквы “о” из трех популярных геометрических шрифтов — Futura, Circe и Geometria. Если учесть, что эти шрифты создавались с учетом человеческого восприятия форм и сложной системы оптического конструирования, можно предположить, что их округлые формы должны выглядеть более округлыми, чем геометрические. Ну разве эти буквы не радуют глаз?
![](https://ux-journal.ru/wp-content/uploads/2019/03/42.png)
Давайте наложим на них геометрические круги. Даже у самой геометрической из всех — “o” шрифта Futura — есть выступающие части. А буквы в Circe and Geometria еще и шире геометрического круга. Но даже если вы они были одной ширины и высоты, их “сытые” бока все равно свисали бы.
![](https://ux-journal.ru/wp-content/uploads/2019/03/43.png)
Так что, с оптической точки зрения, модифицированный круг (справа) может выглядеть даже более “круглым”, чем геометрический (слева).
![](https://ux-journal.ru/wp-content/uploads/2019/03/44.png)
Как же нам применить этот феномен в дизайне? Для скругления углов, разумеется! Если скруглять углы встроенными средствами редактора, результат может оказаться не таким уж красивым с оптической точки зрения.
![](https://ux-journal.ru/wp-content/uploads/2019/03/45.png)
Человеческий глаз мгновенно видит точку, где прямая линия вдруг становится закругленной. Такое скругление выглядит неестественно.
![](https://ux-journal.ru/wp-content/uploads/2019/03/46.png)
Принимая во внимание наше визуальное восприятие, я исправил эту проблему.
![](https://ux-journal.ru/wp-content/uploads/2019/03/47.png)
При таком скруглении добавляется дополнительный объем поверх геометрического круга, и за счет этого точка перехода прямой в кривую становится незаметна.
![](https://ux-journal.ru/wp-content/uploads/2019/03/48.png)
Просто сравните эти два метода скругления.
![](https://ux-journal.ru/wp-content/uploads/2019/03/49.png)
Вот как можно применить этот подход к кнопкам.
![](https://ux-journal.ru/wp-content/uploads/2019/03/50.png)
Возможно, вы заметили, что кнопки справа выглядят более гладкими и гармоничными.
Та же история с иконками приложений. Стандартным скруглением тут идеального результата не добьешься. Но прежде чем мы нырнем в эту тему, давайте посмотрим на две скругленные фигуры:
![](https://ux-journal.ru/wp-content/uploads/2019/03/51.png)
Первая фигура — прямоугольник с закругленными углами, я нарисовал его в Sketch. Вторая фигура — суперэллипс или кривая Ламе. Суперэллипс был “изобретен” французским математиком Габриелем Ламе. В зависимости от формулы, форма суперэллипса может варьироваться: от четырехконечной звезды, до квадрата с закругленными краями.
![](https://ux-journal.ru/wp-content/uploads/2019/03/52.png)
Марк Эдвардс предложил формулу кривой Ламе, при которой фигура выглядит ровно и идеально с оптической точки зрения. Иконки в iOS, начиная с версии 7, построены по этой формуле.
![](https://ux-journal.ru/wp-content/uploads/2019/03/53.png)
Позднее в фигуру добавили пропорции золотого сечения и сетку для дизайнеров, но это уже другая история.
![](https://ux-journal.ru/wp-content/uploads/2019/03/54.png)
Самый большой плюс суперэллипса — его гармоничный внешний вид. С одной стороны, эту нестандартную форму сложно внедрить в реальный интерфейс. Придется комбинировать несколько SVG файлов, вставлять специальные формулы или скрипты в код, или использовать PNG маски, как делает Apple для своих иконок.
Что касается непосредственно процесса дизайна, есть простой способ работы со скругленными углами. Вам нужно превратить эффект скругления углов в контур, войти в режим редактирования формы и вручную перемещать маркеры скругления ближе друг к другу.
![](https://ux-journal.ru/wp-content/uploads/2019/03/55.png)
Разница еще заметнее при скруглении острых углов, которые часто используются, например, в картах или схемах метро.
![](https://ux-journal.ru/wp-content/uploads/2019/03/56.png)
Что стоит запомнить
- Геометрически скругленные углы выглядят неестественно, потому что мы сразу видим точку, где прямая линия переходит в кривую.
- Чтобы скругление выглядело естественно, нужно использовать специальные формулы или вручную редактировать форму.
Бонус
Иногда даже геометрически неидеальный квадрат может выглядеть более “квадратным”. “Что за чушь?” — скажете вы. А вот поглядите на квадраты ниже. Какая форма квадратнее?
![](https://ux-journal.ru/wp-content/uploads/2019/03/57.png)
Если вы выбрали левый квадрат, то вам удалось услышать истинный голос визуального восприятия.
![](https://ux-journal.ru/wp-content/uploads/2019/03/58.png)
Лично я очень удивился, когда узнал, что глаза более восприимчивы к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буква “o” всегда шире, чем геометрический круг, а вертикальные штрихи буквы “H” толще, чем вертикальные.
Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.