Оптический баланс | Основы в UI-дизайне


12.06.2020 Время чтения - 2 минуты 1351

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

 

Размер

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

 

Оптический баланс
Оптический баланс

 

Цвет

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

 

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

 

Оптический баланс
Баланс цвета

 

Позиционирование

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

 

Баланс позиции

 

Оригинал статьи.

Читайте так же: Как выбрать цветовую палитру за 3 простых шага