Создание бумажного прототипа приложения. Использование

Создание бумажного прототипа
приложения. Использование
AppDesigner
Е К АТЕРИН А А Л Е КСА НДРО ВН А Л АТ У Х И Н А ,
С ТА РШ ИЙ П РЕ П ОДАВАТЕЛЬ К АФЕД РЫ П РО Г РА ММ И РОВАН И Я И
В ЫС О КОПРО ИЗВ ОДИТЕЛЬНЫХ В ЫЧ ИСЛЕНИЙ ИМ ИКТ САФУ
Содержание
• Создание бумажного прототипа приложения
• Основы работы с App Designer
• Создание приложения из шаблона
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
2
Создание бумажного
прототипа приложения
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
3
Бумажный прототип интерфейса
• Разработка интерфейса
на бумаге – первый шаг
на пути создания
собственного уникального
приложения
• Заготовки интерфейсов
можно взять здесь
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
4
Порядок действий
• Нарисовать прототип (можно использовать заготовки)
• Перевести его в цифровую форму (сканирование,
фотографирование)
• Подогнать картинки под размер экрана
• Разложить картинки по папкам, перенести на устройство
и попробовать использовать «приложение»
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
5
Инструменты прототипирования
• Специальные трафареты
(Stencil Kit)
• Бумажные заготовки
• Карандаш, резинка,
линейка, бумага
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
6
Бумажные прототипы на экране
Рисовка интерфейса
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
7
Бумажные прототипы на экране
Оцифровка
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
8
Бумажные прототипы на экране
Оптимизация
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
9
Бумажные прототипы на экране
Загрузка и тестирование на устройстве
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
10
Самостоятельно
• Используя эту и предыдущую лекции, подумайте, какое
приложение Вы хотите создать и попробуйте нарисовать его
прототип
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
11
Основы работы с App
Designer
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
12
Создайте проект через Start with App Designer
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
13
Можно выбрать фреймворк будущего проекта
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
14
Заготовка приложения
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
15
Элементы управления (Controls)
• Form
• Media
• Layout
• Animated
Sidebars
• Widgets
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
16
Элементы управления (Controls)
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
17
Можно подключать дополнительные элементы
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
18
Можно перемещаться по элементам
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
19
Можно получать доступ к свойствам элементов
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
20
Создание приложения из
шаблона
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
21
Создание приложения из шаблона
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
22
Самостоятельно
• Перенесите разработанный ранее бумажный прототип
приложения в среду Intel XDK, используя возможности App
Desigener или один из готовых шаблонов
28.08.2014
Создание бумажного прототипа приложения. Использование AppDesigner
23