1. От общего к частному
Люди принимают информацию по частям и воспринимают картинку от общего к частному. Например, попробуйте прочитать текст на картинке ниже. Скорее всего, вы сделаете это без проблем. Наш мозг отлично работает с частичной информацией и идет от общего к частному.
Важно уметь управлять вниманием пользователя: когда нет визуальной иерархии, ему будет тяжело ориентироваться и он не будет понимать, куда же ему нужно смотреть.
Если же визуал будет спроектирован правильно, то пользователь поймет, что именно считается главным, а что второстепенным.
2. Правило близости
Основное, что позволяет работать с вниманием пользователя и появлением логических блоков на графике – правило близости.
Например, в левой части картинки расположены 9 одинаковых точек, которые воспринимаются как одна единая группа. В правой части они немного раздвинуты: теперь мозг автоматически считывает, что это две группы точек (из 6 и из 3), в то время как сами точки никак не изменились.
Регулируя расстояние между группами, мы можем задавать насколько эти группы похожи друг на друга. Если мы увеличим расстояние, то будет казаться, что это совсем две разных группы.
Таким образом, управляя расстоянием между элементами, мы указываем, что одни элементы имеют общие характеристики, а другие – нет. Всё, что должно восприниматься как одно целое, должно быть аккуратно расположено поближе друг к другу.
3. Правило замкнутой области
Следующий способ показать, что объекты являются группой – правило замкнутой области. Чаще всего его используют не очень опытные дизайнеры для выделения групп, рисуя рамочку. Как правило, её лучше заменять на какую-нибудь подложку.
Если вы хотите сгруппировать элементы, то лучше сначала использовать правило близости. Если его уже не хватает, то можно дополнительно использовать правило замкнутой области.
Также данное правило работает для более необычного разделения на группы: если нужно сгруппировать элементы по смыслу в одном разрезе, и еще по другому правилу. Мозгу будет понятно, что есть элементы, относящиеся к верхней строке, и те, которые разделены на два группы расстоянием.
4. Правило сходства/контраста
Помимо этого, существует правило сходства и контраста. Если что-то выделено цветом, формой или имеет другой размер, то мы сразу выделяем это в отдельную группу. При этом размер влияет не только на разбиение на группы, но и на восприятие: сначала мы смотрим на большие объекты, а затем – на маленькие. Это свойство очень важно, поскольку задает иерархичность на графическом полотне.
5. Правило чтения
Правила чтения, имеющиеся в культурах, сильно влияют на то, как мы считываем информацию с экрана, дисплея и т.д. Сначала мы читаем левый верхний угол, т.е. слева-направо, сверху-вниз.
Слева находится пример, где внимание распределено равномерно: сначала идет заголовок, а дальше – 6 одинаковых блоков с другой информацией.
Сверху будут более важные показатели, но в целом внимание распределено более-менее равномерно между 6 блоками.
Вот такой не обычной, но очень важной для дизайнера информацией я хотела с вами поделиться.
При создании карточек товаров для маркетплейсов я использую эти навыки для распределения пространства и правильной расстановки элементов.
Пишите комментарии, ставьте лайки и дизлайки, советуйте своим друзьям.
Ваш дизайнер … и не только … Яна Анцыборова
