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

Содержание

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

Слайд 2Портирование приложений Windows Phone на платформу Windows 8 с точки зрения

дизайна

Лукошкина Ангелина,
дизайнер в компании DCT, эксперт в metro


Слайд 3Контакты
angelina.lukoshkina@dctua.com

@An_Gelina




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



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


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





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


Слайд 8Спектр устройств


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


Слайд 9Схожее
Схожие шаблоны и элементы UI и UX

Единый стиль для всех платформ

и продуктов

Общие базовые принципы дизайна




Слайд 10Разное
Форм-факторы
От миниатюрного смартфона до большой панели

Способы ввода
Пальцы, клавиатура, мышь, перо, голос,

сенсоры

Возможности
Сенсоры, API, интеграция с ОС




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


Слайд 12

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


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

платформой









Слайд 14Мастерство в деталях
Используйте
сетку

Предсказуемость и баланс

Кто вы?




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

Фокус
Позвольте контенту дышать

Доверие
Прямота изложения
Прозрачность

решений
Предупреждение ошибок




Слайд 16По настоящему цифровой
Уходите от метафор реального мира

Цифровой мир – это пиксели

Облако




Слайд 17Быстрый и подвижный
Отзывчивость


Движение


Жизнь




Слайд 18Выигрывай с платформой
Интеграция


Вкусняшки платформы
Контракты и расширения

Инструменты




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


Слайд 20Сценарии использования
Время


Место


Контекст




Слайд 21Точки входа






Слайд 22Точки входа







Вторичная плитка
Другая плитка





Контракты и расширения

Оповещения


Слайд 23Управление


Слайд 24Управление


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


Слайд 25Touch взаимодействие


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


Слайд 26Жесты


Windows 8 новое

Swipe – жест для выделения
Swipe from edge – потянуть

с караёв для вызова панелей

Слайд 27Зоны для контента и взаимодействия


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


Слайд 28Дублирование способов взаимодействия


Только пальцы
Только мышь
Только клавиатура
Клавиатура + мышь


Слайд 30Использование оболочки
Композиция
Используйте сетку
Убирайте линии и рамки

Взаимодействие
Делайте команды контекстными


Навигация
Говорите о том, где

вы, а не о том куда вы можете пойти


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


Слайд 32Виды страниц Windows Phone
Panorama
Pivot
Page


Слайд 33Panorama

Цель — дать общее представление о контенте, завлечь пользователя и предоставить

ему возможность двигаться дальше.


Слайд 34Pivot

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


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


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


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



Слайд 39Panorama like


Слайд 40Pivot like


Слайд 42Кнопка back


Слайд 43Контекстное масштабирование


Слайд 44Панель приложения Windows Phone


Слайд 45Панель приложения Windows 8


Слайд 46Сетка: Windows Phone


Слайд 47Сетка: Windows 8


Слайд 48Типографика
Windows Phone:
Segoe WP

Windows 8
Segoe UI


Слайд 49
Масштабирование


Слайд 50Масштабирование: Windows Phone


Слайд 51Масштабирование: Windows 8


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


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


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


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


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


Слайд 57Инструменты


Слайд 58Инструменты
Expression Blend


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


Слайд 60Спасибо за внимание ;)


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика