Сибирикс

История моушена в вебе и 12 правил Уолта Диснея

Материалом для этой статьи послужила хорошая презентация двух ребят из frog Milan — дизайнера и разработчика. Сами себя они предпочитают называть Interaction Designer и Design Technologist, подчеркивая общность целей.

Те, кто читал замечательную статью про историю кнопки — могут лениво проскроллить сразу к правилам Диснея, первая часть во многом схожа с уже читанной вами статьей. Приятного чтения, в любом случае.

Часть I. История движения и взаимодействия

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

Не движется — значит не взаимодействует

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

Начиналось всё со статичных интерфейсов и физических контроллеров...

...В настоящее время мы пришли к мощным девайсам, которые сделали реальностью динамические интерфейсы и беcконтактное управление.

Итак, от истоков к нынешним дням.

С чего всё началось

Видеоигры использовали моушен для визуализации эффекта взаимодействия в «цифровом пространстве».

Веб 1.0: Java и Gif

На заре веба, некоторые технологии позволяли «оживлять» веб-страницы (и в большинстве случае это делалось просто для «красивой картинки»).

Золотой век Flash

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

Несколько примеров, потрясшие умы (на тот момент это было действительно круто):

Веб-технологии развивались, а с выходом на арену смартфонов — нашли применение в мобильных приложениях.

Мобильные приложения

Моушен становится неотъемлемым языком взаимодействия с пользователем. Ограниченность рабочего пространства и средств взаимодействия заставляют дизайнеров напряженно искать самые удачные модели, придумывать визуальные «подсказки» пользователям.

Перезагрузка веба

С появлением новых спецификация w3c (Worl Wide Web Consortium), html5 и сss3 — началась новая жизнь моушена и динамики в вебе.

Жесты и моушен

Технология распознавания жестов стала новой вехой в истории взаимодействия «интерфейс-пользователь» и определила появление нового типа аффордэнс («завлекающих» элементов интерфейса, побуждающих к взаимодействию с ними).

Итоговая (но далеко не конечная!) таблица эволюции моушен-взаимодействия

Часть II. Двенадцать правил анимации Уолта Диснея

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

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

Расширение

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

Вариации эффекта «складывания»:

Ориентация

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

Упреждение

Если пользователь сталкивается с пока-что незнакомым ему паттерном поведения, используется принцип упреждения — анимация помогает подготовить пользователя к результату его действия. Всем знакомый «slide to unlock» (слайдер разблокировки на телефоне) — образец упреждающей анимации. Еще пример анимации.

Отдача

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

Подсветка

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

Пробуждение

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

Итого

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

Вот, кстати, та самая книга художников студии Диснея, которая вдохновляла авторов.
Андрей Веб-дизайнер

Несколько лет назад в вебе была мода на «карамельный дизайн» (eye-candy design), еще раньше — на флеш-анимацию. Всё это было просто игрой в технологии, пробой пера, не имеющей под собой цели решать бизнес-задачи. Сейчас моушен-дизайн потому и оформился в самостоятельное направление, что ситуацию нужно было переосмыслить, а накопленные навыки «рисовать сайты» и «делать анимацию» привести к стройной системе, выработать стиль. Нынешние сайты немыслимы как без качественной графики, так и без анимации — и притом они не должны быть оторванными от задач компании, миссии бренда. Понимание этого постепенно приходит ко всем, и это радует.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.