Зрение человека не менялось вместе с носителями. То, что удерживало взгляд на холсте четыреста лет назад, удерживает его и на экране телефона: контраст, направление линий, пустое пространство вокруг главного объекта. Поэтому у дизайнера интерфейсов есть большой запас готовых решений — их накопили живопись и фотография, и брать их оттуда дешевле, чем изобретать заново. Ниже разбираем, что переносится на экран напрямую, как этим пользоваться в работе и где аналогия перестаёт действовать.
Что общего у картины, кадра и экрана
Во всех трёх случаях зритель видит плоскость ограниченного размера и за первую секунду решает, куда смотреть. Решение это не осознанное: взгляд сам цепляется за самое контрастное пятно, за лица, за линии, ведущие вглубь. Дизайнер, как и художник, управляет этим выбором — размером, тоном, расположением и количеством пустого места.
Разница в том, что у картины нет следующего шага, а у страницы есть. Интерфейс не просто удерживает взгляд, он ведёт его к действию. Но первый этап — притянуть внимание к нужному элементу — устроен одинаково, и именно на этом этапе чаще всего ошибаются.
Приёмы, которые переносятся напрямую
| Приём в живописи и фотографии | Как это выглядит на сайте | Частая ошибка |
|---|---|---|
| Композиционный центр | Один главный элемент на первом экране | Три равнозначных блока, каждый претендует на главный |
| Направляющие линии | Взгляд ведут к заголовку и кнопке | Линии уводят за край экрана |
| Тональный контраст | Важное темнее или крупнее окружения | Акцент задан цветом при одинаковой светлоте |
| Ритм и повтор | Одинаковые карточки, шаг отступов | Каждый блок со своими отступами |
| Воздух вокруг объекта | Пустое место выделяет главное | Плотная упаковка экрана до края |
| Кадрирование | Обрезка фотографии под пропорции блока | Кадр обрезан по лицам и подписям |
| Правило нечётного | Три карточки читаются лучше четырёх | Сетка ради сетки, содержимое подгоняется |
Свет и цвет: акцент работает только в связке
В живописи яркое пятно заметно не само по себе, а потому, что вокруг него приглушённые тона. Художник гасит фон, чтобы освободить место для главного. В интерфейсе действует тот же закон: кнопка выделяется не насыщенностью краски, а тем, что рядом ничего не спорит за внимание.
Практическое следствие простое. Акцентный цвет в проекте один, максимум два, и он не используется в декоративных целях. Как только акцентом окрашены заголовок, иконки, рамка карточки и кнопка, ни один из них не выделяется. Мы обычно рассуждаем так: акцент — это разрешение, которое выдаётся элементу с конкретным действием, и выдаётся один раз на экран.
Вторая идея из живописи — ограниченная палитра. Мастера писали большие полотна четырьмя-пятью красками и получали богатый результат за счёт смешения и тональных переходов. В интерфейсе то же: несколько оттенков одного цвета плюс нейтральные серые дают более собранный вид, чем десяток разноцветных плашек.
Как человек смотрит: путь взгляда
Зритель картины не сканирует её слева направо построчно. Он делает скачки: сначала на самое контрастное, потом на лица, потом на детали, и возвращается к главному. Исследования движения глаз по веб-страницам показывают ту же картину — люди читают не всё подряд, а цепляются за опорные точки.
Из этого следует вывод, который экономит много споров о вёрстке: важное должно быть самым контрастным элементом экрана, а не просто стоять первым в разметке. Заголовок, набранный тем же кеглем, что и текст вокруг, не работает, даже если он сверху. И наоборот, крупная фотография в середине страницы перетянет внимание на себя, чего бы вы ни писали выше.
Кадрирование и работа с фотографией
Фотография на сайте почти никогда не используется в исходных пропорциях: её обрезают под блок, под мобильную версию, под превью в списке. Здесь помогает фотографический навык — понимать, где у кадра смысловой центр и что можно отрезать без потери.
- Выбирайте снимки с запасом по краям: их можно кадрировать под разные пропорции, а тесно скомпонованные — нет.
- Задавайте точку фокуса для каждой картинки, если система это позволяет: при обрезке под мобильную версию центр кадра часто оказывается не в центре файла.
- Проверяйте, как снимок выглядит в маленьком размере. Сложный многодетальный кадр в превью превращается в кашу; простой силуэт читается.
- Следите за тем, куда направлен взгляд человека на фотографии: если он смотрит за край экрана, туда же уйдёт и внимание посетителя.
- Соблюдайте единый характер снимков в одном разделе — одинаковый свет, схожая насыщенность. Разнобой заметнее, чем качество каждого отдельного кадра.
Ритм, повтор и пауза
В картине повторяющиеся элементы задают ритм, а пауза между ними даёт глазу отдых. На странице роль ритма выполняет сетка: одинаковые карточки, повторяющийся шаг отступов, предсказуемая высота блоков. Роль паузы — крупные пустые промежутки между секциями.
Ошибка, которую мы видим чаще других, — равномерная плотность по всей странице. Когда все отступы примерно одинаковы, страница читается как сплошная лента, и посетитель не понимает, где кончилась одна мысль и началась другая. Разница между внутренним отступом блока и промежутком между блоками должна быть заметной, в два-три раза, иначе группировка не считывается.
Три упражнения из практики
- Чёрно-белый тест. Переведите скриншот страницы в оттенки серого и прищурьтесь. Что выделяется первым? Если это не то, что вы хотели показать, меняйте размер и контраст, а не добавляйте новые элементы.
- Тест на расстоянии. Отодвиньтесь от экрана на два-три метра. Останется композиция из крупных пятен. Она должна оставаться понятной: заголовок, изображение, действие.
- Разбор чужого кадра. Возьмите любую понравившуюся фотографию и разметьте на ней композиционный центр и линии. Через десяток разборов вы начнёте видеть то же самое в макетах — и в своих, и в чужих.
Чего из искусства переносить не стоит
Художественная неоднозначность в картине — достоинство: зритель возвращается и находит новое. В интерфейсе она ошибка. Человеку нужно за секунду понять, где кнопка, что произойдёт после нажатия и как вернуться назад. Всё, что требует разгадывания, увеличивает нагрузку и снижает шанс, что до заявки дойдут.
То же с авторским жестом. Необычная навигация, нестандартные иконки, оригинальная механика прокрутки — это высказывание дизайнера, а не помощь посетителю. Иногда оно уместно, обычно нет. Красота в вебе следует за понятностью, а не наоборот: сначала человек понимает, куда попал и что делать, и только потом замечает, что сделано аккуратно.
Наконец, не стоит переносить длительность восприятия. Картину рассматривают минутами, страницу — секундами. Всё, что рассчитано на долгое разглядывание, на сайте просто не увидят.
Если нужен взгляд со стороны
Иерархию, ритм и работу с изображениями мы закладываем на этапе прототипа, до того как макет отрисован и свёрстан. Если хотите, чтобы главное на страницах читалось с первого взгляда, посмотрите наше проектирование пользовательских интерфейсов — обсудим задачу и покажем, как это выглядит в работе.
