'

Портирование приложений Windows Phone на платформу Windows 8 с точки зрения дизайна Лукошкина Ангелина, дизайнер в компании DCT, эксперт в metro.

Понравилась презентация – покажи это...





Слайд 0


Слайд 1

Портирование приложений Windows Phone на платформу Windows 8 с точки зрения дизайна Лукошкина Ангелина, дизайнер в компании DCT, эксперт в metro


Слайд 2

Контакты angelina.lukoshkina@dctua.com @An_Gelina


Слайд 3

Содержание Ресурсы С чем предстоит работать Основные принципы Ключевые моменты Инструменты


Слайд 4

Важно запомнить Люди на первом месте Контекст использования приложения Контент важнее мишуры


Слайд 5

Ресурсы msdn Windows Phone Design Hub Гайдлайны Windows Phone Windows 8 design.windows.com Блоги Константин Кичинский http://blogs.msdn.com/b/kichinsky/ Артуро Толедо http://ux.artu.tv/


Слайд 6

С чем предстоит работать Спектр устройств


Слайд 7

Спектр устройств От карманных смартфонов до огромных панелей


Слайд 8

Схожее Схожие шаблоны и элементы UI и UX Единый стиль для всех платформ и продуктов Общие базовые принципы дизайна


Слайд 9

Разное Форм-факторы От миниатюрного смартфона до большой панели Способы ввода Пальцы, клавиатура, мышь, перо, голос, сенсоры Возможности Сенсоры, API, интеграция с ОС


Слайд 10

Общие принципы Фундамент метро-дизайна


Слайд 11

Metro ты просто космос


Слайд 12

Общие принцыпы мастерство в деталях больше меньшими средствами по настоящему цмфровой быстрый и подвижный выигрывай с платформой


Слайд 13

Мастерство в деталях Используйте сетку Предсказуемость и баланс Кто вы?


Слайд 14

Больше меньшими средствами Контент Контент важнее оболочки Используйте цвета и размеры Фокус Позвольте контенту дышать Доверие Прямота изложения Прозрачность решений Предупреждение ошибок


Слайд 15

По настоящему цифровой Уходите от метафор реального мира Цифровой мир – это пиксели Облако


Слайд 16

Быстрый и подвижный Отзывчивость Движение Жизнь


Слайд 17

Выигрывай с платформой Интеграция Вкусняшки платформы Контракты и расширения Инструменты


Слайд 18

Ключевые моменты Сценарии и точки входа Управление Контент Навигация Сетка и типографика Масштабирование


Слайд 19

Сценарии использования Время Место Контекст


Слайд 20

Точки входа


Слайд 21

Точки входа Вторичная плитка Другая плитка Контракты и расширения Оповещения


Слайд 22

Управление


Слайд 23

Управление Способы ввода Windows Phone – пальцы Windows 8 – пальцы, мышь, клавиатура


Слайд 24

Touch взаимодействие Оптимальный размер Когда аккуратность важна


Слайд 25

Жесты Windows 8 новое Swipe – жест для выделения Swipe from edge – потянуть с караёв для вызова панелей


Слайд 26

Зоны для контента и взаимодействия Зона контента Зона взаимодействия Большинство людей - правши


Слайд 27

Дублирование способов взаимодействия Только пальцы Только мышь Только клавиатура Клавиатура + мышь


Слайд 28


Слайд 29

Использование оболочки Композиция Используйте сетку Убирайте линии и рамки Взаимодействие Делайте команды контекстными Навигация Говорите о том, где вы, а не о том куда вы можете пойти


Слайд 30

Информационная карта Общий взгляд на приложение и навигацию


Слайд 31

Виды страниц Windows Phone Panorama Pivot Page


Слайд 32

Panorama Цель — дать общее представление о контенте, завлечь пользователя и предоставить ему возможность двигаться дальше.


Слайд 33

Pivot Pivot — это основной элемент организации приложений.


Слайд 34

Page


Слайд 35

Windows 8: модели навигации Иерархическая модель Плоская модель


Слайд 36

Windows 8: модели навигации


Слайд 37

Windows 8: проводим параллели Panorama – GridView, группировка Pivot – вкладки Page – Page ?


Слайд 38

Panorama like


Слайд 39

Pivot like


Слайд 40

Page


Слайд 41

Кнопка back


Слайд 42

Контекстное масштабирование


Слайд 43

Панель приложения Windows Phone


Слайд 44

Панель приложения Windows 8


Слайд 45

Сетка: Windows Phone


Слайд 46

Сетка: Windows 8


Слайд 47

Типографика Windows Phone: Segoe WP Windows 8 Segoe UI


Слайд 48

Масштабирование


Слайд 49

Масштабирование: Windows Phone


Слайд 50

Масштабирование: Windows 8


Слайд 51

Масштабирование: Windows 8 Количество контента Размер контента Свободное пространство


Слайд 52

Windows 8: закрепленный режим Snap view – 320 px


Слайд 53

Windows 8: закрепленный режим


Слайд 54

Windows 8: закрепленный режим


Слайд 55

Собственный пример VK Player Windows Phone Windows 8


Слайд 56

Инструменты


Слайд 57

Инструменты Expression Blend


Слайд 58

Итоги С чем предстоит работать Основные принципы Ключевые моменты Инструменты


Слайд 59

Спасибо за внимание ;)


Слайд 60


×

HTML:





Ссылка: