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

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

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

Ресурсы msdn Windows Phone Design Hub Гайдлайны Windows Phone Windows 8 design.windows.com Блоги Константин Кичинский Артуро Толедо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точки входа

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

Управление

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

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

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

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

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

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

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

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

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

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

Page

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

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

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

Panorama like

Pivot like

Page

Кнопка back

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

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

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

Сетка: Windows Phone

Сетка: Windows 8

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

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

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

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

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

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

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

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

Инструменты

Expression Blend

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

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