181

Оптические эффекты в пользовательском интерфейсе

Всем привет!


Расскажу вам немного про интерфейсы и занятные оптические приёмчики. Если интересно — накидаю ещё.


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


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



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


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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

В случае, если вы не верите, что эти формы нарисованы точно, это версия с направляющими

и цифрами.

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

Пример иконок, сбалансированных оптически.

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

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

Оптические эффекты в пользовательском интерфейсе Дизайн, Ui, Интерфейс, Длиннопост

ВАЖНО ПОМНИТЬ


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


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


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



Ну, на этом я закончу, а если будет интересно, то впереди будет ещё про выравнивание разилчных форм, текстовых блоков и прочее

Найдены возможные дубликаты

+14

А  могу вам ответить почему так - потому что глаз меряет не "длину ширину в пикселях", а в количестве задействованных колбочек/палочек. Т.е. он меряет площадь объекта, объем.

При всё при том зрительно натренированный человек(веб дизайнер к примеру) сможет определить примерный объём в пикселях :)


PS при мне знакомый углядел несоответствие в 2 пикселя :D

раскрыть ветку 14
-4

Не биолог, не смогу ни подтвердить, ни опровергнуть

раскрыть ветку 13
+3

Ну, это в статье описано - вес объекта :D


Вот если б вы предоставили алгоритмы увеличения объектов :D

раскрыть ветку 12
+6

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

раскрыть ветку 3
-3

Не совсем так. Речь идёт о визуальном восприятии фигур. Одинаковая площадь не обязательно гарантирует их визуальную равность

раскрыть ветку 2
+1

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

раскрыть ветку 1
+4

вот ссылка на первоисточник https://habrahabr.ru/post/338780/

раскрыть ветку 8
+6

Спасибо. Автор, можешь не трудиться, я посмотрел в завтрашний день и увидел все твои будущие посты.

ещё комментарии
0
Комментарий удален. Причина: данный аккаунт был удалён
-3

Это не первоисточник, в первой строке хабра указан как раз исходник. Переводы разнятся, к тому же

раскрыть ветку 4
+2
Комментарий удален. Причина: данный аккаунт был удалён
раскрыть ветку 3
+2

Ну это вроде как элементарно из геометрии)) "зрительный объем" это и есть площадь фигуры) И круг с диаметром 400 фактически, а не просто "зрительно" меньше квадрата со стороной 400))

раскрыть ветку 1
-4

Для удобства примеры ставятся на простых фигурах. Сравнивать площади сложных фигур — муторное занятие

0
Просто, понятно, удобоваримо, плюсую, пиши ещё.
0

какая то погоня за письками.

раскрыть ветку 1
-3
И в чём это выражается?
0
Отличная статья, тс молодец, жду продолжения
0

Спасибо, познавательно

раскрыть ветку 1
-1

Пожалуйста

-1

Вот поэтому логотип своего приложения нужно делать с нарушением этих всех правил, чтобы он не сливался с другими :)

раскрыть ветку 3
-2

Логотип приложения и набор иконок — это разные вещи. И в наборе иконок ваш логотип должен подчиняться общим правилам набора

раскрыть ветку 2
0

Что мне мешает нарушить эти правила?

раскрыть ветку 1
Похожие посты
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: