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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бонус

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

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

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

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

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

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

Свежие вакансии
                        Skywaylab Skywaylab After Effects- 2D аниматор на проектные работы удаленно! Фриланс Москва до 20 000 руб за ролик ₽
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
Все вакансии

Оригинал: Slava Shestopalov

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

8
Добавить комментарий
Похожие записи

100 вещей, которые должен знать UX/UI дизайнер

Майкл Соркин недавно умер от коронавируса, и в знак уважения я составил список из 100 вещей, которые должен знать UX / UI-дизайнер

Основы UX: закон Парето или правило 80/20, которое должен знать каждый дизайнер

Вы когда-нибудь замечали, что используете небольшое количество функций на своем телефоне? У него есть сотни функций, но вы когда-нибудь использовали их все?

7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

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