РАЗРАБОТКА ПРОГРАММНОГО РЕШЕНИЯ ДЛЯ ГЕНЕРАЦИИ АНИМИРОВАННЫХ СЕКВЕНЦИЙ И РЕПЛИЦИРОВАНИЯ СТАТИЧЕСКИХ ОБЪЕКТОВ В ДИНАМИЧЕСКИЕ ПРЕДСТАВЛЕНИЯ

ВВЕДЕНИЕ 4
1. ПОСТАНОВКА ЗАДАЧИ 7
1.1. Функциональные требования к плагину 7
1.1.1. Прототипирование с разной степенью детализации 7
1.1.2. Прототипирование с помощью итераций 8
1.1.3. Синхронизация макета и прототипа 9
1.2. Задачи 10
1.3. Обзор аналогов 10
1.3.1. Apple Keynote 11
1.3.2. Facebook Origami 12
1.3.3. Google Form 12
1.3.4. Principle 13
1.3.5. Flinto 14
1.3.6. Framer Studio 14
2. РАЗРАБОТКА ПЛАГИНА ДЛЯ ПО SKETCH 16
2.1. Получение API для экспорта изображения 16
2.2. Архитектура плагина 17
2.2.1. Команда Simulate Keynote 18
2.2.2. Команда Generate States 19
2.2.3. Команда Replicate Layers 20
2.2.4. Класс Layer 21
2.2.5. Класс State 22
2.2.6. Класс Action Inventory 22
2.2.7. Класс Order Inventory 23
2.2.8. Класс Type Inventory 24
2.2.9. Класс Generate Inventory 25
2.2.10. Класс Describe Inventory 25
2.3. Система анализа слоев и состояний 26
2.4. Система анализа иерархии слоев 30
2.4.1. Определение иерархии слиянием 31
2.4.2. Определение иерархии на основе индексов 31
2.5. Вид генерируемого кода прототипов 33
2.5.1. Мобильные оптимизации 33
2.5.2. Описание слоев и состояний 34
2.5.3. Обработчик переходов 35
2.6. Система тестирования плагина 35
2.7. Пользовательский интерфейс плагина 37
3. СТАТИСТИКА ИСПОЛЬЗОВАНИЯ ПЛАГИНА 40
3.1. Для линейных прототипов 40
3.2. Для высоко детализированных прототипов 41
ЗАКЛЮЧЕНИЕ
Купить

В современном мире в разработку программного обеспечения вовлечено огромное количество людей разных профессий - это разработчики, архитекторы, дизайнеры, тестировщики, аналитики, редакторы, маркетологи и другие. Каждый продукт проходит множество стадий разработки, поэтому ошибки в проектировании пользовательского интерфейса и опыта взаимодействия на ранних стадиях могут серьезно навредить в дальнейшем: если поменяется часть функционала, то придется потратить дополнительное время для применения правок на всех этапах, что негативно скажется как на трудозатратности, так и на бюджете проекта. Иногда доходит до того, что готовый функционал приходится частично скрывать или даже полностью убирать, потому что он не соответствует новой концепции продукта, ожиданиям заказчика, потребностям аудитории или принципиальной позиции площадки распространения.
Таким образом, чтобы минимизировать деструктивные воздействия, необходимо уделять больше времени дизайну приложения на ранних стадиях разработки. Это относится к любому проекту, который должен взаимодействовать с пользователем. На каждом шаге дизайнер должен понимать возможность реализации той или иной идеи, представлять финальное лицо продукта и уметь донести это видение как до заказчика, так и до каждого члена команды разработки.
Задача, которую решает в ходе своей работы каждый дизайнер, формулируется следующим образом: необходимо создать продукт, который будет соответствовать бизнес целям и пользовательским ожиданиям для требуемой предметной области в условиях существующих ресурсов. В этом помогает прототипирование - процесс создания прототипа приложения (программы, сайта) с целью проверки пригодности предлагаемых для применения концепций, архитектурных и/или технологических решений, а также для представления программы заказчику на ранних стадиях процесса разработки. Создание интерактивных прототипов помогает получить представление о продукте на ранних этапах и уменьшить количество правок на поздних, когда цена исправления ошибки особенно высока.
Для создания прототипа требуется наличие дизайна экранов приложения и спецификаций анимаций. Инструменты для создания интерактивных прототипов имеют возможность импортировать дизайн экранов из графических редакторов, в частности из ПО Sketch, которое используется такими крупными продуктовыми компаниями, как Apple, Google и Facebook. Однако для того, чтобы продемонстрировать целевой аудитории не только статичные экраны, но и анимации, необходимо пользоваться дополнительными инструментами для создания каждой конкретной анимации.
К сожалению, ни один из существующих на рынке продуктов для прототипирования - Apple Keynote, Google Form, Facebook Origami Studio, Flinto, Principle, Framer Studio - не имеет такого импорта из Sketch, когда положения элементов с одного или нескольких экранов переносятся не механически, а производится анализ всей сцены.
Целью данной работы является создание инструмента, который позволит создавать линейные прототипы для тестирования дизайнерских решений, проводить итерации и переходить к более детализированным прототипам, опираясь на существующие статичные макеты, решая тем самым проблему синхронизации макета и прототипа.
На рынок продуктов для прототипирования за последние два года вышло много новых приложений - Flinto, Pixate, Atomic, Form, Pixate, Principle, активно развивались и уже существующие на рынке решения - Framer Studio, Origami (Quartz Composer). Ввиду насыщенности рынка, было принято решение написать плагин для ПО Sketch, с помощью которого будут генерироваться прототипы в виде кода слоев и состояний с поддержкой иерархии, мобильных оптимизаций и обработчиков нажатий для существующего ПО Framer Studio. Код генерируется в формате, соответствующего библиотеке FramerJS - CoffeeScript фреймворке, на котором основано ПО Framer Studio.
Инструментом для получения информации о виде анимации будет являться Sketch, так как это позволит оперировать с макетом, обращаться к системным функциям и осуществлять подготовку изображений для прототипа. Производя анализ сцены, плагин будет формировать CoffeeScript код линейных прототипов для FramerJS, применяя уникальный подход, когда во Framer Studio будут переноситься не отдельные экраны и все слои с них, а будет осуществляться перенос выбранных слоев и дельты изменений на протяжении сцены.
В результате работы плагина пользователь автоматически получает сгенерированный код для линейного прототипа, с помощью которого можно проверять гипотезы, а при желании продолжать работу с имеющимся кодом для создания более детализированного взаимодействия.

Купить