Главное Свежее Вакансии   Проекты
Комментируемое:
😼
Выбор
редакции
399 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

Хэй, дизайнер! Больше подборок и увлекательных статей ищи в нашем блоге или Telegram


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

Размер


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


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

Цвет


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

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


Баланс цвета

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


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


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

Источник

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

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.