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

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

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

1. Фактический и оптический размер

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

Вот версия с направляющими и цифрами.

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

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

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

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

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

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

А теперь несколько реальных примеров сбалансированных иконок.

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

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

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

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

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

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

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

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

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

В плане пикселей ответ — однозначное «да». Однако на первый взгляд нижняя полоса выглядит короче верхней.

Еще одна картина с этими двумя полосками. Что-то изменилось?

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

Еще несколько сложных примеров с полосами различной формы.

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

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

Поскольку фон светлый, он не прерывает обычный поток текста.

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

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

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

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

И здесь мы приближаемся к еще одному аспекту выравнивания — выравниванию текста и значков кнопок. Посмотрите на кнопки ниже. Текст выглядит центрированным, не так ли?

Фокус в том, что на правой кнопке я немного переместил слово влево, так как правый край треугольный. Более того, кнопка в форме стрелки на 40 пикселей шире, чтобы выглядеть оптически равной прямоугольной кнопке.

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

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

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

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

Есть ли разница между этими подходами? Да, разница есть. Однако, она не велика

Дополнительные примеры для сравнения ниже. Подход с высотой прописных букв, представленный левым столбцом, определенно лучше подходит для слов «Cancel» и «OK» — широко используемых кнопок — потому что слово «Cancel» не имеет нижних выносных элементов, а «OK» написано только прописными буквами. Подход с x-высотой, показанный в правом столбце, лучше только для кнопки «Sync», название которой имеет как верхние, так и нижние выступающие элементы. Слова «Cancel» и «OK» кажутся расположенными слишком высоко.

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

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

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

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

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

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

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

3. Оптическое закругление углов

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

Люди, которых я опросил, выбирали между номерами 3 и 4. Номера 1 и 2 определенно слишком «тощие», пятый вариант слишком «пухлый». Если мы наложим друг на друга третий и четвертый варианты — геометрический круг и модифицированный круг — мы увидим, что второй слегка больше первого, и кажется более гладким и обтекаемым для наших глаз.

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

Давайте наложим их на геометрические круги. Даже у самой геометрической «о» шрифта Futura есть четыре выступающие части. Буквы шрифтов Circe и Geometria, кроме того, что имеют выступающих части, еще и шире кругов.

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

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

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

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

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

Просто попробуйте и почувствуйте разницу.

Теперь мы можем применить этот подход к скругленным кнопкам.

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

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

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

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

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

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

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

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

Бонус

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

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

Я лично был удивлен, узнав, что наши глаза более чувствительны к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буквы «o» всегда шире геометрических кругов, а вертикальные линии букв «H» всегда толще горизонтальных. Давайте общаться. Приглашаю посмотреть милые картинки на Dribbble, проекты на Behance и презентации о дизайне на SlideShare.