Оптические эффекты в UI (для настоящих задротов)
Как сделать оптически сбалансированные значки, правильно выравнивать фигуры и идеально закруглить углы. Более 50 картинок с примерами
Наши глаза — странные органы, которые часто нам лгут. Но если вы знаете особенности человеческого зрительного восприятия, вы можете создавать более приятные и изящные дизайны. Не только верстальщики используют оптические трюки для создания читабельности и баланса шрифтов. Это также полезно для UI-дизайнеров, которые проектируют визуальный интерфейс для человеко-машинной коммуникации 😀.
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).
Примечание от Babay:
Для русских букв это не очень актуально, так как большинство строчных букв в русском языке не имеют торчащих или висячих частей. Из торчащих только “б”, а из висячих “р”, “у” “ф”.
Другой подход заключается в выравнивании слова и фона с использованием высоты строчной буквы шрифта (так называемая x-высота). В шрифтах интерфейса sans и sans serif он равен высоте букве «x».
Этот подход также имеет смысл, поскольку основной оптический вес текста сосредоточен в области, где размещаются строчные буквы.
Есть ли разница между этими подходами? Да, есть разница. Однако не такая существенная.
Дополнительные примеры для сравнения ниже. Подход с максимальной высотой, представленный левым столбцом, определенно лучше подходит для «Cancel» и «ОК» — так широко используются кнопки, потому что «Cancel» не имеет нисходящих линий, а в «ОК» — только заглавные буквы. Подход x-высоты, показанный в правом столбце, лучше только для кнопки «Sync», название которой имеет как верхний, так и нижний торчащие элементы; слова «Отмена» и «ОК» кажутся расположенными слишком высоко.
Ситуация со иконками кнопок немного отличается. Давайте поместим популярный значок «Отправить» на круглой кнопке. Какой вариант выглядит более сбалансированным?
Надеюсь, вы заметили, что с левым что-то не так. Это происходит из-за разных методов выравнивания. В первом варианте иконка помещена в квадрат, выравненный в круге. В определенной степени это правильно, потому что, когда вы отправляете SVG или PNG-файл разработчику, это прямоугольный лист с изображением самолетика на нем. Правый вариант показывает, что значок размещен так, чтобы все го острые края имели равноудаленное расстояния от черного фона.
Если вы подготовите файл для разработчика, вам нужно зарезервировать некоторую область, чтобы они могли центрировать значок на фоне правильно.
Та же история с кнопками «Play». Если вы прямо выровняете эти фигуры — округленный прямоугольник и треугольник — они будут выглядеть странно.
Если вы хотите позиционировать треугольник оптически лучше, поместите его в круг и выровняйте этот круг с фоном кнопки.
Важно помнить
- Формы с острыми краями должны быть больше, чтобы выглядеть сбалансированными с соседними прямоугольными объектами.
- Выравнивание по высоте крышки— это эффективный и широко используемый метод позиционирования слов на фоне кнопок.
- Одним из эффективных способов правильного позиционирования треугольной иконки на кнопке является её окружение и выравнивание круга с фоном.
3. Оптическое закругление угла
Что может быть более круглым, чем круг? Можно сказать, что ничего, но, как сказано в начале этой статьи, наши глаза странны и иногда воспринимают вещи не так, как мы ожидаем. Итак, какой круг на картинке ниже выглядит наиболее круглым?
В опросе люди выбирают между 3 и 4. 1 и 2 определенно слишком тощие, 5 слишком пухлые. Если мы пересекаем третий и четвертый варианты — Geometric и Moified — мы узнаем, что второй — более тяжелый, чем первый, и, следовательно, более круглый для наших глаз.
Чтобы показать, что имеется в виду, возьмем буквы «o» из трех известных геометрических шрифтов — Futura, Circe и Geometria. Учитывая, что высококачественные шрифты построены на основе визуального восприятия человека и используют сложную систему оптического построения, можно полагать, что их круговые формы выглядят более круговыми, чем геометрические. Разве эти буквы не приятны для ваших глаз?
Давайте наложим их на геометрические круги. Даже у самой геометрической «о» от Futura есть четыре торчащие части. написание Circe и Geometria, кроме того, шире кругов, но даже если бы они имели равную высоту и ширину, мы могли видеть эти четыре торчащие части
Таким образом, оптически говоря, измененный круг (справа) может выглядеть еще более круглым, чем геометрический (слева).
Как мы можем использовать это явление? Конечно, для округления! Если вы используете встроенную функцию округления в популярном графическом редакторе — Photoshop, Illustrator или Sketch, результат не будет оптически хорошим.
Человеческий глаз сразу обнаруживает точку, где прямая линия внезапно превращается в кривую. И это округление выглядит неестественно.
Исправим этот момент, принимая во внимание наше визуальное восприятие.
Такое округление имеет дополнительную область за пределами геометрического круга, делая точку, где линия искривляется незаметной.
Просто попробуйте почувствовать разницу между этими методами округления.
Теперь мы можем применить этот подход к закругленным кнопкам.
Наверное, вы могли заметить, что кнопки справа имеют более гладкое закругление углов и приятнее для ваших глаз.
Такая же история с иконками приложений. Для достижения идеального результата нужно не просто использовать стандартное округление угла. Но прежде чем погрузиться в эту тему, давайте посмотрим на две разные формы.
Первый — это закругленный прямоугольник, который был создал в Sketch. Вторая форма — это суперэллипс, также известный как кривая Ламе. Он был обнаружен французским математиком Габриэлем Ламе и в зависимости от используемой формулы может варьироваться от чего-то вроде четырехконечной звезды до формы, выглядящей практически как округлый квадрат.
Марк Эдвардс предложил формулу кривой Ламе, которая обеспечила гладкую и оптически совершенную форму. Иконки, начиная с iOS 7, основаны на нем.
Позже эта форма была изменена путем добавления пропорций золотого соотношения и сетки для руководства дизайнеров новых иконок, но это совсем другая история.
Главным преимуществом использования форм, таких как суперэллипс, является их более круглый и гладкий вид. С другой стороны, эти нестандартные формы трудно вставлять в реальный интерфейс. Нужно либо объединить несколько SVG, включив в код специальные формулы или скрипты, либо использовать маски PNG, например как Apple, для своих иконок приложений.
Что касается самого процесса проектирования, есть простое исправление для закругленных углов. Вам нужно преобразовать обратимые эффекты округления в контур, войти в режим редактирования формы и вручную перемещать ручки кривой ближе друг к другу.
Разница еще более заметна с округлением острого угла, что важно для рисования оптически правильных дорог или схем метро.
Важно помнить
- Геометрически закругленные углы выглядят искусственно, потому что вы можете легко увидеть точки, где прямая линия внезапно превращается в кривую.
- Оптически правильное закругление углов требует специальных формул или некоторой ручной регулировки формы.
Бонус
Иногда не идеально геометрический квадрат выглядит более квадратным. Вы можете подумать: «Что за бред?» Итак, что вы думаете о квадратах ниже? Какая форма выглядит более квадратной?
Если вы выбрали левую форму, вам удалось услышать голос вашего непредвзятого оптического восприятия.
На удивление наши глаза более чувствительны к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буквы «o» всегда шире геометрических кругов.
