Storydesk — мой несуществующий чудо-проектировщик

c481b091e9f04a9597fc3ecf2c38ccdf.png
Позавчера, на второй неделе возни с инструментами для проектирования и анимации прототипов, у меня накипело: мои изначальные пожелания к инструментам синтезировались с тем, что я увидел и пощупал, образовав экспериментальную модель проектировщика, с которой я спешу поделиться с вами.
***

Ключевой постулат модели, по залёту которого и началось рождение инструмента, состоит в другом подходе к организации цифрового рабочего пространства: я привык работать не с экранами приложения, а с его полотном в разных состояниях.
2effb82a431142caac6e768f05c89460.png
Экраны и полотно в разных состояниях

Это не вопрос привычки, сформированной инструментом и временем: с самого детства я с удовольствием смотрел на работу мультипликатора у какой-то волшебной доски, на которой листались кальки с персонажами, запечатляя различные сцены мультфильма, потому что такой подход не только очаровывал детское воображение, но и казался логичным для самого процесса. Волшебная доска мультипликатора, как оказалось, называется световым (просветным) столом или стеклофоном.
ec008665bd714c3397dfa2740b21bf25.gif
Просветный стол

Да, в процессе над созданием мультфильма используется раскадровка (storyboard), чтобы запечатлеть основной ход событий, но основная проработка ведётся на стеклофоне.
41189a06aeab4bc6afe7dad734b868ac.jpg
Сюжетная доска «Пиноккио»

Таким образом, есть два подхода к созданию взаимосвязанной истории: линейный (storyboard) и совмещённый (стеклофон). Второй подход позже закрепится мной под понятием «линия истории» (storyline), а «storydesk» станет кодовом словом концепции моего несуществующего проектировщика.

***

Первым делом я обратил внимание на то, что схожую реализацию я периодически кое-где когда-то да использовал:
fecc8514f8394a7789f639522a201a0e.png
Layer Comps

Когда я разобрал на детали механизм Layer Comps, то увидел в нём зачаток будущего функционала — объект обладает поведением на определённом экране (состоянии полотна):
7460796a8451445396788c5e3b81b07f.png
Поведение объекта на определённом экране

Но мне захотелось не только наделять объект более разнообразными движениями, чем простое появление и исчезновение в разных местах полотна …
3da86b86575847a8a731086d667d84b1.png
Вариация появления-исчезновения объекта

…, но и наделять объект отзывчивостью на мои действия, жесты:
71d47736e2bc49e48c7c7aa49340bfcd.png
Объект начинает реагировать на мои действия

Реакция объекта в такой модели состоит из причины (моего действия, жеста) и следствия (что должно произойти или куда я должен попасть, если объект обладает свойствами обычной ссылки):
9984124b8d77450192eddf2e9adf8869.png
Составляющие реакции объекта: я указываю объекту на что (нажатие) и как надо реагировать (переключаем экран)

Как и движения объекта, я бы хотел не только задавать разнообразную реакцию, но и делать это не единожды, т.е. наделять объект мультиреакцией:
f51e675402d54badb0fbec620992f651.png
Разнообразная и комплексная реакция объекта

Наделение объекта поведением в программной парадигме Фотошопа становится похожим на придание эффекта для слоя:
59483cdb3c814233b4eb5eed2aa7a34c.png
Меню добавления поведения и результат на слое в Фотошопе

Таким образом, в моём инструменте я хотел бы видеть обогащённый функционал Layer Comps, задавая объекту (актёру) не только различные движения появления-исчезновения, но и реакцию на мои действия в определённых экранах (сценах) моего монументального полотна:
5e9b872ab5634722a214c6265e853d55.png
Работа с объектом в Layer Comps и в Storydesk

Обратите внимание, как начинают мутироваться понятия: слой становится объектом, экран — сценой.
21f786fa26ab420ba2497a4a53ba73eb.png

***

Весь процесс начинает базироваться на управлении сюжетной линией истории моего приложения, которая, как и любая линия произведения, состоит из сцен, схожих или отличных друг от друга:
7788a98a5d5c4113963627bf953809a7.png

Со сценами на такой линии я смогу выполнять стандартные режиссёрско-монтажёрские операции:
d6f35633eb4d423cbbc0da13941ae003.png

Сцены будут проигрываться и записываться в чистовик поочерёдно или произвольно:
55fd410d99294117acc3d23dec5bca0e.png

Помимо списка сцен, кликабельно и само полотно с объектами:
8b0547db3e5f41a0bed57777704fa6b9.png

Репетировать и транслировать свою историю я смогу не только на экране проектировщика, но и на других проигрывателях:
2ec26e53065746b993d2efca0772649e.png

Постепенно подбираясь к функционалу трансляции, я увидел сходство макросценария Storydesk с вышедшим в марте Adobe Expirience Design, где в режиме Design я работаю с объектами, в Prototype — с сюжетом, на Share — транслирую свою историю в разных форматах.
3ed081c7d48a42c59f9fefe990ce1e72.png
Макросценарии Adobe XD и Storyline

Единственное и большое дополнение — наличие контроля обратной связи от моей истории. Таким образом, рабочий процесс моего проектировщика-небылицы складывается следующим образом:
3d10a50c5e7f45d7a574f61241c3aaab.png

Objects и Story можно объединить под одну вкладку, обозначающую созидательный аспект, чтобы вычленить базовые операции с любой историей: создавать, распространять, получать обратную связь.
647677b60b054c03a06a7ce147c892d9.png

В идеале, создавая универсальный продукт, я бы добавил возможность обзора сцен (экранов) стандартным линейным (storyboard), добавив этот режим на вкладке Story, чтобы можно было переключаться между режимами board и line, но пока решил оставить всё как есть.
999b718a32e44f2e8c51a08d8eb5aa4a.png

И пока моя губа катится да раскатывается, помимо добавления объектов с подгружаемым реальным контентом, я бы хотел распространять свою историю всеми возможными способами: выгружать и отправлять в разных видах и форматах, обсуждать с аудиторией и тестировать на ней.
711f51226fc94a519303c30be229d6b3.png

***

Мечты должны сбываться! И если для кого-то вышеизложенная концепция проектирования — мечта, которую можно воплотить в реальность: буду рад услышать, как и где это может произойти ;)

И напоследок, пока я перевожу эту статью на мой интермедияте-английский для Medium, можете пощёлкать прототип общей модели Storydesk — несуществующего проектировщика историй ваших продуктов.
c481b091e9f04a9597fc3ecf2c38ccdf.png
Прототип Storydesk

© Habrahabr.ru