![](https://habrastorage.org/files/c48/1b0/91e/c481b091e9f04a9597fc3ecf2c38ccdf.png)
Позавчера, на второй неделе возни с инструментами для проектирования и анимации прототипов, у меня накипело: мои изначальные пожелания к инструментам синтезировались с тем, что я увидел и пощупал, образовав экспериментальную модель проектировщика, с которой я спешу поделиться с вами.
***
Ключевой постулат модели, по залёту которого и началось рождение инструмента, состоит в другом подходе к организации цифрового рабочего пространства: я привык работать не с экранами приложения, а с его полотном в разных состояниях.
![](https://habrastorage.org/files/2ef/fb8/2a4/2effb82a431142caac6e768f05c89460.png)
Экраны и полотно в разных состояниях
Это не вопрос привычки, сформированной инструментом и временем: с самого детства я с удовольствием смотрел на работу мультипликатора у какой-то волшебной доски, на которой листались кальки с персонажами, запечатляя различные сцены мультфильма, потому что такой подход не только очаровывал детское воображение, но и казался логичным для самого процесса. Волшебная доска мультипликатора, как оказалось, называется световым (просветным) столом или стеклофоном.
![](https://habrastorage.org/files/ec0/086/65b/ec008665bd714c3397dfa2740b21bf25.gif)
Просветный стол
Да, в процессе над созданием мультфильма используется раскадровка (storyboard), чтобы запечатлеть основной ход событий, но основная проработка ведётся на стеклофоне.
![](https://habrastorage.org/files/411/89a/06a/41189a06aeab4bc6afe7dad734b868ac.jpg)
Сюжетная доска «Пиноккио»
Таким образом, есть два подхода к созданию взаимосвязанной истории: линейный (storyboard) и совмещённый (стеклофон). Второй подход позже закрепится мной под понятием «линия истории» (storyline), а «storydesk» станет кодовом словом концепции моего несуществующего проектировщика.
***
Первым делом я обратил внимание на то, что схожую реализацию я периодически кое-где когда-то да использовал:
![](https://habrastorage.org/files/fec/c85/14f/fecc8514f8394a7789f639522a201a0e.png)
Layer Comps
Когда я разобрал на детали механизм Layer Comps, то увидел в нём зачаток будущего функционала – объект обладает поведением на определённом экране (состоянии полотна):
![](https://habrastorage.org/files/746/079/6a8/7460796a8451445396788c5e3b81b07f.png)
Поведение объекта на определённом экране
Но мне захотелось не только наделять объект более разнообразными движениями, чем простое появление и исчезновение в разных местах полотна …
![](https://habrastorage.org/files/3da/86b/865/3da86b86575847a8a731086d667d84b1.png)
Вариация появления-исчезновения объекта
… но и наделять объект отзывчивостью на мои действия, жесты:
![](https://habrastorage.org/files/71d/477/36e/71d47736e2bc49e48c7c7aa49340bfcd.png)
Объект начинает реагировать на мои действия
Реакция объекта в такой модели состоит из причины (моего действия, жеста) и следствия (что должно произойти или куда я должен попасть, если объект обладает свойствами обычной ссылки):
![](https://habrastorage.org/files/998/412/4b8/9984124b8d77450192eddf2e9adf8869.png)
Составляющие реакции объекта: я указываю объекту на что (нажатие) и как надо реагировать (переключаем экран)
Как и движения объекта, я бы хотел не только задавать разнообразную реакцию, но и делать это не единожды, т.е. наделять объект мультиреакцией:
![](https://habrastorage.org/files/f51/e67/540/f51e675402d54badb0fbec620992f651.png)
Разнообразная и комплексная реакция объекта
Наделение объекта поведением в программной парадигме Фотошопа становится похожим на придание эффекта для слоя:
![](https://habrastorage.org/files/594/83c/db3/59483cdb3c814233b4eb5eed2aa7a34c.png)
Меню добавления поведения и результат на слое в Фотошопе
Таким образом, в моём инструменте я хотел бы видеть обогащённый функционал Layer Comps, задавая объекту (актёру) не только различные движения появления-исчезновения, но и реакцию на мои действия в определённых экранах (сценах) моего монументального полотна:
![](https://habrastorage.org/files/5e9/b87/2ab/5e9b872ab5634722a214c6265e853d55.png)
Работа с объектом в Layer Comps и в Storydesk
Обратите внимание, как начинают мутироваться понятия: слой становится объектом, экран – сценой.
![](https://habrastorage.org/files/21f/786/fa2/21f786fa26ab420ba2497a4a53ba73eb.png)
***
Весь процесс начинает базироваться на управлении сюжетной линией истории моего приложения, которая, как и любая линия произведения, состоит из сцен, схожих или отличных друг от друга:
![](https://habrastorage.org/files/778/8a9/8a5/7788a98a5d5c4113963627bf953809a7.png)
Со сценами на такой линии я смогу выполнять стандартные режиссёрско-монтажёрские операции:
![](https://habrastorage.org/files/d6f/356/33e/d6f35633eb4d423cbbc0da13941ae003.png)
Сцены будут проигрываться и записываться в чистовик поочерёдно или произвольно:
![](https://habrastorage.org/files/55f/d41/0d9/55fd410d99294117acc3d23dec5bca0e.png)
Помимо списка сцен, кликабельно и само полотно с объектами:
![](https://habrastorage.org/files/8b0/547/db3/8b0547db3e5f41a0bed57777704fa6b9.png)
Репетировать и транслировать свою историю я смогу не только на экране проектировщика, но и на других проигрывателях:
![](https://habrastorage.org/files/2ec/26e/530/2ec26e53065746b993d2efca0772649e.png)
Постепенно подбираясь к функционалу трансляции, я увидел сходство макросценария Storydesk с вышедшим в марте Adobe Expirience Design, где в режиме Design я работаю с объектами, в Prototype – с сюжетом, на Share – транслирую свою историю в разных форматах.
![](https://habrastorage.org/files/3ed/081/c7d/3ed081c7d48a42c59f9fefe990ce1e72.png)
Макросценарии Adobe XD и Storydesk
Единственное и большое дополнение – наличие контроля обратной связи от моей истории. Таким образом, рабочий процесс моего проектировщика-небылицы складывается следующим образом:
![](https://habrastorage.org/files/3d1/0a5/0c5/3d10a50c5e7f45d7a574f61241c3aaab.png)
Objects и Story можно объединить под одну вкладку, обозначающую созидательный аспект, чтобы вычленить базовые операции с любой историей: создавать, распространять, получать обратную связь.
![](https://habrastorage.org/files/647/677/b60/647677b60b054c03a06a7ce147c892d9.png)
В идеале, создавая универсальный продукт, я бы добавил возможность обзора сцен (экранов) стандартным линейным (storyboard), добавив этот режим на вкладке Story, чтобы можно было переключаться между режимами board и line, но пока решил оставить всё как есть.
![](https://habrastorage.org/files/999/b71/8a3/999b718a32e44f2e8c51a08d8eb5aa4a.png)
И пока моя губа катится да раскатывается, помимо добавления объектов с подгружаемым реальным контентом, я бы хотел распространять свою историю всеми возможными способами: выгружать и отправлять в разных видах и форматах, обсуждать с аудиторией и тестировать на ней.
![](https://habrastorage.org/files/711/f51/226/711f51226fc94a519303c30be229d6b3.png)
***
Мечты должны сбываться! И если для кого-то вышеизложенная концепция проектирования – мечта, которую можно воплотить в реальность: буду рад услышать, как и где это может произойти ;)
И напоследок, перед статьёй на моём интермедияте-английском для Medium, можете пощёлкать прототип общей модели Storydesk – несуществующего проектировщика историй ваших продуктов.
![](https://habrastorage.org/files/c48/1b0/91e/c481b091e9f04a9597fc3ecf2c38ccdf.png)
Прототип Storydesk