Дизайн WP приложений
в Expression Blend –
это весело!Ангелина ЛукошкинаДизайнерDigital Cloud Technologies
• Принципы Metro в Windows Phone 7 приложениях;
• Прототипирование приложений при помощи Expression Blend SketchFlow;
• Дизайн приложения при помощи Expression Blend;
Принципы Metro в WP 7 приложениях
• Идеология Metro• Организация работы интерфейса
Windows Phone 7
METRO
Принципы METROдизайна
Легкий, простой,открытый, быстрый
Сконцентрируйтесь на сути,Играйте со свободным пространством,Выделяйте приоритеты
Качественнаятипографика
Segoe WP
Хабы
Организация работы интерфейса Windows Phone 7
Цель — дать общее представление о контенте, завлечь пользователя и предоставить ему возможность двигаться дальше.
Panorama
Pivot — это основной элемент организации приложений.
Pivot
Application bar
SketchFlow
Инструмент для скетчинга и прототипирования интерактивных приложений
SketchFlow - часть Expression Blend
Что понадобиться?
• Expression Blend + SketchFlow + Visual Studio 2010
• Windows Phone SDK (Windows Phone Developer Tools)
• SketchFlow Template v1 wp7sketchflow.codeplex.com - устанавливается из файла msi, автоматом добавляет шаблон на страницу нового проекта в Expression Blend
• SketchFlow Template v2 cut.ms/bn5M - просто архив с шаблоном проекта, который необходимо распаковать в папку c:\users\[username]\Documents
SketchFlow
• Позволяет быстро экспериментировать с динамическими приложениями
• Огромное количество возможностей• Быстрый обмен идеями• Сбор и обмен отзывами
Огромная ценность для бизнеса:Быстрый и недорогой способ предоставить клиенту готовый прототип решения
Прототип — работающая штуковина, которую можно пощупать, потрогать, пожмакать, почувствовать.
В нем может быть мало функциональности (например, всего одна, но работающая(!) функция).
Прототип не жалко выкинуть
Демо
Мы посмотрели
Базовые возможности SketchFlow:
– SketchFlow Map– Создание экранов и навигации между
ними– Использование простых поведений– Возможности получения отзывов– Генерацию документа с описанием
Дизайн приложения в
Expression Blend
Разработка дизайна приложения
Демо
Что почитать?
dynamic-
prototyping.c
om
• http://www.microsoft.com/expression/resources/BlendTraining/Day.aspx?day=1#Intro
• http://expression.microsoft.com/en-us/cc136534
• http://www.amazon.com/gp/product/143023377X?ie=UTF8&tag=expr-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=143023377X
Что почитать?