Что интерфейсы позаимствовали из кино

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

#самизнаетекакиекнопки

Принцип целостности видеоряда

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

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

Выделяют четыре категории непрерывности:

Непрерывность контента. Все, что отображается в сцене, должно повторятся от кадра к кадру.
Непрерывность движения. При склейке кадров движение не должно прерываться.
Соблюдение местоположений. Объекты, находящиеся в кадре, не должны менять своего местоположения.
Постоянство времени. Имеется в виду время суток — оно не должно меняться в течение одной сцены.

Принцип целостности и разработка пользовательского интерфейса

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

Если в кинематографе непрерывность сохраняет посыл картины, при этом раскрывая некоторые детали, то в мире пользовательских интерфейсов непрерывность играет роль клея, соединяя все части системы воедино.

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

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

Прекрасным примером такого интерфейса являются мобильные почтовые клиенты. Если тапнуть по одному письму из списка, то справа выплывет полный текст этого письма. Вернуться назад можно нажатием на кнопку «Назад» — тогда анимация вернет список всех писем.

Как использовать принцип целостности в разработке пользовательского интерфейса

Анимации и жесты стали важным инструментом взаимодействия с мобильными устройствами после прихода на рынок Apple и Google. Однако разработка сайтов для компьютеров не позаимствовала подобные принципы у своих младших братьев. Некоторые сайты и в настоящее время представляют собой собрание бессвязных разделов, в которых легко заблудиться.

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

Cutting to continuity

В эту категорию попадают сайты, имеющие «глобальную» навигацию. Пользование подобными сайтами представляет собой переходы из одного раздела к другому без какой-либо связи между ними. О связи между разделами говорит только схожий внешний вид и одна и та же тематика.

Такие сайты составляют большинство сайтов в современном интернете и работают по принципу «кликни для перехода».

Single take

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

Анимация, соблюдающая все физические законы — основа подобных сайтов:

Эффективное использование

Использование принципа целостности неоднозначно. Если Apple придерживается реалистичности и создает свои интерфейсы в соответствии с физикой, то у Google другая стратегия.

Впервые игнорирование законов природы появилось в операционной системе Android Lollipop. Например, превращение кнопки в некий новый интерфейс при нажатии.

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