Есть ли название, термин или практика для смещенных предметов, основанных на объеме, а не на ширине и высоте?


11

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

Рассмотрим кнопку воспроизведения, которая находится в коробке:

введите описание изображения здесь

Спустя месяцы после того, как я задал этот вопрос, я разрабатывал элементы управления видео и понял, что это идеальный пример. Это изображение геометрически центрировано, но в моем интерфейсе я переместил значок примерно на 15% вправо от его фактического геометрического центра, чтобы центрировать его по объему, потому что геометрически центрированный (как вы можете наблюдать на изображении выше) не ' Я чувствую себя совершенно правильно.

Обычно я просто предполагаю, что значок центрируется по объему, но могу поспорить, что правильный центр может быть определен математически, отсюда мое любопытство к названию, в случае, если я найду инструмент или плагин, который поможет мне сделать это с моими инструментами дизайна, такими как InDesign ,

Сверху головы я бы назвал это «Объемное центрирование», но это только предположение. Есть ли официальное название / термин для этой техники?


Физический термин будет центром масс en.wikipedia.org/wiki/Center_of_mass
Dax Fohl

Ответы:


9

Называется "Оптический центр"

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

Это не фактический геометрический центр. Сделайте 2 линии от угла к углу по прямоугольнику и точке, где линии встречаются, и это геометрический центр. Оптический центр будет немного выше геометрического центра.

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

Взято из этой статьи

введите описание изображения здесь


4
Это, безусловно , не описанный эффект в этом вопросе.
KRyan

Почти там ... не совсем правильное понятие.
штатское

4

Оптическая коррекция / компенсация

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

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

Пуантилистское изображение с увеличенными точками цвета

Вы найдете другую форму компенсации воспринимаемого объема в греко-римской архитектуры.

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

Используйте свои глаза

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


3

Это называется Оптическое выравнивание. введите описание изображения здесь Вот отличная статья, в которой обсуждается сама проблема: https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175 Надеюсь, это поможет!


Вау, классная статья.
Viziionary

@JonathanTodd верно? Я только что прочитал это на днях и сохранил его, подумал, что кому-то это понадобится, и вот мы хаха
Стэнли В.М.

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

1
Отличная статья! Я годами оптически центрировал вещи только с собственными глазными яблоками. Я не могу поверить, что меня никогда не учили (или я сам не разобрался) в круговой уловке. Я второй запрос DA01, чтобы вы добавили изображения / текст из сообщения в свой ответ, отличные вещи.
Вики

1
@joojaa Я был слишком занят рисованием на всем своем переплете. ;)
Вики,

0

Ответ Optical Alignment - отличный ответ, и я подозреваю, что это то, что вам нужно, но когда вы упомянули «баланс» в своем вопросе, я подумал об Occult Balance (AKA, асимметричный баланс).

Вот ссылка, которую я нашел ... http://www.revolutionarygardens.com/principles-of-design-balance-in-the-landscape/

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.