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

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

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

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

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

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

Фактический и оптический размер - 2

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

Фактический и оптический размер - 3

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

Фактический и оптический размер - 4

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

Фактический и оптический размер - 5

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

Фактический и оптический размер - 6

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

Фактический и оптический размер - 7

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

Фактический и оптический размер - 8

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

Фактический и оптический размер - 8 - иконки

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

Фактический и оптический размер - 10

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

Фактический и оптический размер - 11

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

Фактический и оптический размер - 12

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

Фактический и оптический размер - 13

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

Фактический и оптический размер - 14

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

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

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

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

Выравнивание различных фигур - 1

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

Выравнивание различных фигур - 2

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

Выравнивание различных фигур - 3

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

Выравнивание различных фигур - 4

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

Выравнивание различных фигур - 5

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

Выравнивание различных фигур - 6Выравнивание различных фигур - 7

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

Выравнивание различных фигур - 8

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

Выравнивание различных фигур - 9

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

Выравнивание различных фигур - 10

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

Выравнивание различных фигур - 11

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

Выравнивание различных фигур - 12

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

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

Выравнивание различных фигур - 13

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

Выравнивание различных фигур - 14

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

Выравнивание различных фигур - 15

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

Выравнивание различных фигур - 16

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

Выравнивание различных фигур - 17

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

Выравнивание различных фигур - 18

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

Выравнивание различных фигур - 19

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

Выравнивание различных фигур - 20

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

Выравнивание различных фигур - 21

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

Выравнивание различных фигур - 22

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

Выравнивание различных фигур - 23

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

Выравнивание различных фигур - 24

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

Выравнивание различных фигур - 25

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

Выравнивание различных фигур - 26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бонус

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

Геометрический квадрат выглядит более квадратным - 1

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

Геометрический квадрат выглядит более квадратным - 2

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

Давайте общаться. Приглашаю посмотреть милые картинки на Dribbble, проекты на Behance и презентации о дизайне на SlideShare.