Лого vc.ru

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cutting to continuity 

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

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

Single take 

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

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

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

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

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

как же я обожаю интерфейсы плееров с каверами...

Непросто читать статью, когда постоянно что-то мелькает, то снизу, то сверху.

Но спасибо.

надо было под кат эти тяжелые гифки, прочитал -навел -раскрылось -как Реклама вайбера тут мелькала на ЦП и tjournal

0

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

А этот - те, кто за умеренную анимацию в приложении :)

Зерно истины в статье есть, но коробит подход автора mobile first - почему веб-приложения, рассчитанные на мониторы персональных компьютеров, должны уподобляться приложениям для маленьких экранов мобильных устройств? Неужели нельзя быть более объективным...

1

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

0

Не понимаю, как ваш ответ соотносится с моим комментарием.

0

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

0

Мысль ясна.

Но я хочу выступить за ту часть пользователей, которых не устраивают ущербные в плане управления и функционала мобильные версии сайтов. Я хочу иметь все те вкладки, кнопки и прелести, которые прекрасно умещаются на моем мониторе 24 ''

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

Полноценный интерфейс для ПК + мобильный интерфейс = рецепт успеха. Благо, наши тут теоретические рассуждения никого и не интересуют. Компании по всему миру так и делают. Тем более, что мобильные интерфейсы уже давно делаются адаптивными и те, кому их достаточно, могут пользоваться ими же с ПК.

0

Скорость смены кадров в последней гифке может вызвать эпилептический припадок.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Дмитрий Афонин
D8II

Такое ощущение что сайт показывает рандомные байки просто опираясь на цену. Как еще можно объяснить выбор 2-литрового дорожника или спортивной ракеты для категории "Езда по городу" или "На работу"..

«Омоймот» — сайт для подбора мотоциклов с блогами пользователей
0
Борис Мартынов

Без лоха жизнь плоха

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Sasha Zivers

Ничего не заставит.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Ну да, приравнивать жену к предментам, ок-ок. )

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Господа, ну вы чо. Есть же известный эксперимент, когда создали условия, близкие к райским. И известно, чем он закончился.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Показать еще