Оптические эффекты в пользовательском интерфейсе (для настоящих ботаников)

Как создать визуально сбалансированные иконки, правильно выстроить фигуры и сделать идеальное закругление по краям.

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

1.Величина и оптический размер

Что больше: 400-пиксельный квадрат или 400-пиксельная окружность? С точки зрения геометрии, их ширина и высота одинаковы. Но посмотрите на изображение ниже. Наши глаза сразу дают сигнал в мозг о том, что квадрат перевешивает окружность. Кстати, слова, связанные с весом, больше всего подходят для описания оптических эффектов.

Если вы вдруг мне не верите, что эти фигуры одинаковые, ниже приведена версия с цифрами и ориентирами.

Давайте посмотрим на другое изображение с квадратом и окружностью. Одинаковы ли они с визуальной точки зрения?

Для меня — определенно. По крайней мере, сложно сразу понять, что перевешивает. Неудивительно, ведь я увеличил диаметр окружности на 50 пикселей.

Чтобы показать, почему так происходит, я наложил фигуры из первого (400-пиксельные квадрат и окружность) и второго примера (400-пиксельный квадрат и 450-пиксельная окружность). Как вы можете заметить ниже, квадрат перевешивает окружность в зонах «а», в то время как окружность перевешивает квадрат в зонах «b». Слева квадрат полностью поглощает окружность, охватывая ее со всех сторон. Справа окружность и квадрат сбалансированы: фигуры не поглощают друг друга, каждая из них имеет 4 свободных края. На самом деле, справа у фигур одинаковая зона наложения, хотя ширина и высота — разные.

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

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

Я бы порекомендовал компенсировать «вес» разноформенных иконок за счет увеличения визуально маленьких элементов и увеличения расстояния между тяжелыми иконками (см.рисунок ниже).

А теперь немного настоящих визуально сбалансированных иконок.

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

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

Но иногда мы работаем с уже существующей графикой, например, с логотипами социальных сетей, используемых для функций «поделиться» и «мне нравится». У Facebook и Instagram иконки квадратные, в то время как у Twitter символом является силуэт птички, а у Pinterest — обведенная в кружок буква «Р». Поэтому иконки Twitter и Pinterest немного больше, и таким образом, они выглядят сбалансированно по отношению к иконкам Facebook и Instagram.

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

Но если поменять стиль кнопки, нет нужды увеличивать размер. На рисунке ниже высота кнопки и текстового окна — 80 пикселей, но кнопка справа не откалывается от второго объекта из-за заливки черным.

Важно помнить, что:

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

2. Выравнивание разных фигур

Оптическое выравнивание — это логическое продолжение вопроса об оптическом балансе и явления оптического веса. Посмотрите на полосы ниже. На ваш взгляд, они одной длины?

С пиксельной точки зрения — определенно да. Однако с первого взгляда может показаться, что нижняя полоса короче верхней.

Еще один рисунок. Что-нибудь изменилось?

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

А теперь примеры посложнее, где у полос немного отличается форма.

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

А если нужно выровнять обычный текст с абзацем, у которого есть фон? Все зависит от визуальной прозрачности фона. Если он светлый, можно выровнять выделенный абзац с остальным текстом.

Так как фон светлый, он не мешает восприятию текста.

Если же фон темный, нужно действовать по-другому. На рисунке ниже черный фон выровнен с остальным текстом, поэтому у белого текста на фоне наблюдаются отступы.

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

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

Светлый фон полей для ввода слева может выходить за пределы меток для ввода и пользовательских вставок. Правый край кнопки «Send» не полностью выровнен с правым краем фона для ввода, так как кнопка темнее и выглядит тяжелее с оптической точки зрения.

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

Итак, мы постепенно продвигаемся к еще одному аспекту выравнивания — выравнивание текста и иконок. Посмотрите на кнопки ниже. Выглядит так, словно текст находится посередине, правда?

Фишка в том, что в правом примере я немного передвинул слово влево, так как здесь заостренный правый край. Кроме того, похожая на стрелку кнопка на самом деле на 40 пикселей шире: так, визуально, они кажутся одинаковыми.

Помимо горизонтального выравнивания текстовых кнопок, существует также вертикальное выравнивание слова и фона. Первый прием, о котором я бы хотел поговорить, обычно используется в интерфейсах различных операционных систем, сайтов и приложений. Это выравнивание, основанное на высоте заглавной буквы шрифта (так называемая заглавная высота). Она равна высоте букв «Н» или «П».

Обычно расстояние над и под заглавной буквой и краями кнопки одинаково. Это важно, поскольку имена команды пишутся с заглавных букв, а в английском букв с верхним выносным элементом (l, t, d, b, k, h) больше, чем с нижним (y, j, g, p).

Следующий прием — это выровнять имя и фон, опираясь на высоту строчной буквы (так называемая х-высота). В интерфейсных шрифтах без засечек это высота — как ни странно — буквы «х».

Такой прием не менее полезен, так как главный оптический вес текста сконцентрирован на области скопления строчных букв.

Есть ли между этими приемами какая-то разница? Да, есть. Однако, не очень большая.

Ниже приведено чуть больше примеров для сравнения. Прием заглавной высоты в левой колонке однозначно более уместен для так часто используемых кнопок «Cancel» и «OK», так как в «Cancel» нет букв с нижним выносным элементом, а «OK» состоит из прописных букв. Прием х-высоты в правой колонке больше всего подходит только кнопке «Sync», так как в слове содержатся как слова с верхними выносными элементами, так и с нижними; «Cancel» и «OK» кажутся выше.

Ситуация с кнопками-иконками немного другая. Давайте поместим нашу горячо любимую иконку «Send» в круглую кнопку. Какой вариант кажется более сбалансированным?

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

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

То же самое с кнопками «Play». Если вы выровняете фигуры — закругленный прямоугольник и треугольник — они будут выглядеть странно.

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

Важно помнить:

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

3. Визуальное закругление по углам

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

Люди, которых я спрашивал до этого, выбирали 3 и 4 варианты. Первая и вторая окружности узковаты, пятая какая-то слишком круглая. Если мы совместим 3 и 4 варианты — геометрическую окружность и слегка видоизмененную окружность — мы увидим, что четвертая лишь на немного тяжелее третьей, а, следовательно, визуально кажется круглее.

Чтобы показать, что имею в виду, я взял буквы «о» из трех знаменитых геометрических шрифтов: Futura, Circe и Geometria. Учитывая, что эти шрифты основываются на человеческом визуальном восприятии и используют замысловатую систему оптической конструкции, я думаю, их форма выглядит круглее, чем геометрическая окружность. Разве вам не приятно смотреть на эти буквы?

Давайте соединим их с геометрической окружностью. Даже у самой геометричной «о» в шрифте Futura 4 части выходят за края. А буквы «о» в шрифтах Circe и Geometria, к тому же, шире окружности, и, несмотря на то, что у них одинаковая ширина и высота, нельзя не заметить эти «разъевшиеся бока».

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

Как нам может быть это полезно? Конечно же, при угловом закруглении! Если вы воспользуетесь встроенным инструментом закругления в популярных графических редакторах — Photoshop, Illustrator или Sketch — результат будет не самым впечатляющим.

Человеческий глаз моментально распознает точку, где прямая линия внезапно превращается в кривую. Такое закругление выглядит неестественно.

Я исправил это, опираясь на особенности нашего визуального восприятия.

У такого вида закругления есть дополнительно пространство, выходящее за рамки геометрической окружности, что позволяет сделать линию пересечения прямой и кривой незаметной.

Просто попробуйте почувствовать разницу между этими двумя способами.

Теперь опробуем этот метод на закругленных кнопках.

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

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

Первая фигура — это прямоугольник, который я сделал в Sketch. Вторая фигура — это суперэллипсис, известный также как кривая Ламэ. Она была открыта французским математиком Габриэлем Ламэ. В зависимости от используемой формулы, она может варьироваться от чего-то похожего на четырехконечную звезду до фигуры, подобной округлому квадрату.

Марк Эдвардс предложил формулу для кривой Ламэ, в результате чего получилась округлая и идеальная с оптической точки зрения фигура. Она послужила основой для всех иконок, начиная с iOS 7.

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

Самое главное преимущество использования фигур наподобие суперэллипсиса — это более округлый и приятный внешний вид. С другой стороны, такие нестандартные фигуры сложно вводить в настоящий интерфейс. Иконка должна либо сочетать несколько SVG, включая специальные формулы или скрипты, либо применять PNG-маску, как, например, делает Apple.

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

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

Важно помнить:

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

Бонус

Иногда неидеальный с точки зрения геометрии квадрат выглядит квадратнее. Вы, должно быть, думаете: «Что за бред?». Итак, каково ваше мнение об этих двух квадратах? Какая форма выглядит квадратнее?

Если вы выбрали левый, вы все-таки прислушались к голосу своего беспристрастного оптического восприятия.