Визуальная компенсация или как можно получить красивую форму?

Разное JetBit
11-04-2019
259
Визуальная компенсация или как можно получить красивую форму?

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

Это некое базовое знание, с которого часто начинаются любые курсы по дизайну.

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

 

 

 

поле и кнопка в одну строку

                                                                             поле и кнопка в одну строку

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

Два поля и кнопка в столбик

                                                                          два поля и кнопка в столбик

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

Форма с кнопкой увеличенной высотой и общего размера

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

Размер кнопок в библиотеке элементов

                                                                                размер кнопок в библиотеке элементов

В случаях, когда у проекта имеется библиотека элементов, достаточным вариантом будет просто взять оттуда кнопку, которая будет больше всего на один размер. Например, в форме поля, размер которых S, значит, кнопку необходимо взять размером М, ну а если размер полей М, соответственно размер кнопки необходимо взять L. Данный принцип очень прост.

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

Разница размеров по высоте может варьировать от 8 до шестнадцати пикселей -  все зависит от вашего усмотрения.

Популярные статьи в разделе Разное
Разное
Разное
22-06-2017
Сравнение 3 вариантов фулфилмента: дропшиппинг, 3PL и самостоятельная реализация MakeBeCool
Чтобы принять правильное решение, нужно понимать, как работает каждая модель. Это поможет распред...
Разное
Разное
20-06-2017
Что такое digital агентство? Impulse Design
В этой статье мы расскажем что собой представляет digital агентство и почему данный вид компаний ...
Разное
Разное
13-07-2017
Как рассчитать KPI для сотрудников IT-компании? TrendLine
Сейчас модно подсчитывать ключевые показатели эффективности программиста, верстальщика или аккаун...