Download - METRO. Дизайн для Windows Phone
![Page 1: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/1.jpg)
METRO. Дизайн для Windows PhoneНикита Лукьянец (nikiluk)
![Page 2: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/2.jpg)
Ресурсы
http://wp7rocks.comhttp://twitter.com/dpeuahttp://uxnext.org.uahttp://create.msdn.comhttp://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
![Page 3: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/3.jpg)
Сложно о простом
![Page 4: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/4.jpg)
jjg.net/elements
![Page 5: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/5.jpg)
1. Дизайн важен лишь для пользовательских решений2. Дизайн субъективен 3. Дизайн неизмерим, соответственно
– Нет прямой корреляции с бизнес целями– Дизайн это затраты– Внутренние функции практически не влияют на
стоимость построения интерфейса
Стереотипы во многих компаниях
![Page 6: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/6.jpg)
Время, инвестированное в
разработку UI 10% … 50%
Типичная компания отводит
10% бюджета проекта на UI
50% … 70% общего кода проекта
40% усилий разработчиков
80% непредвиденных обстоятельств
* Source: An Empirical Study of the Relationships Between User Interface Development Tools & User Interface Software Development, McKirdy, Department of Computing Science, 1998
![Page 7: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/7.jpg)
Дизайн процесс
1
2
3Project goals, user goals, information architecture & story board
Interaction model & visual design proposal
Final visual design & measured UI
4 Regular drops of working code & broad dogfooding
![Page 8: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/8.jpg)
Результат дизайн процесса
Исследование существующих активов, аудит приложений
Потоковые карты, диаграммы навигации, карта приложения
Пользовательские сценарии
Wireframe (последовательность экранов в истории)
Персоны
Прототипы (бумага и карандаш)
Функциональные спецификации
Подготовленные графические материалы
![Page 9: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/9.jpg)
1
2
3Project goals, user goals, information architecture & story board
Interaction model & visual design proposal
Final visual design & measured UI
4 Regular drops of working code & broad dogfooding
![Page 10: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/10.jpg)
Цикл
![Page 11: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/11.jpg)
Для кого? Personas
![Page 12: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/12.jpg)
Что? Problem
Какую проблему вы решаете?
“Хозяин дома ремонтирует стену. Держит фонарь, зажав его подбородком к плечу, чтобы освободить руки.”
Наблюдение вдохновило Black & Decker на создание фонаря, который можно будет трансформировать и «носить».
![Page 13: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/13.jpg)
Какую проблему вы решаете?
Задачи пользователя!
![Page 14: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/14.jpg)
Задачи пользователя! До, после
1
2
3Project goals, user goals, information architecture & story board
Interaction model & visual design proposal
Final visual design & measured UI
4 Regular drops of working code & broad dogfooding
![Page 15: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/15.jpg)
Как? На бумаге
![Page 16: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/16.jpg)
Как? Interaction model
Учет отклика системы на каждое действие пользователя(click, tap, pan, flick)
![Page 17: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/17.jpg)
Не останавливайте пользователя
![Page 18: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/18.jpg)
Хакатон
1. Постановка проблемы2. Определение задач и стереотипов
пользователя3. Информационная архитектура4. Прототип на бумаге/ sketchflow5. Metro6. Бизнес-логика7. Тестирование в эмуляторе8. Тестирование на устройстве9. Демо
![Page 19: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/19.jpg)
Экскурс в историю
![Page 20: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/20.jpg)
![Page 21: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/21.jpg)
![Page 22: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/22.jpg)
![Page 23: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/23.jpg)
![Page 24: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/24.jpg)
Metro
![Page 25: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/25.jpg)
ETRO
METRO - НАШ ЯЗЫК ДИЗАЙНА. МЫ НАЗЫВАЕМ ЕГО METRO, ПОТОМУ ЧТО ОН СОВРЕМЕНЕН И ЧИСТ. ОН БЫСТРЫЙ И ДИНАМИЧНЫЙ. КОНТЕНТ И ТИПОГРАФИКА. ВСЕЦЕЛО АУТЕНТИЧНЫЙ.
![Page 26: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/26.jpg)
Принципы
Чистый, Легкий, Быстрый, ОткрытыйТипографикаВ ДвиженииКонтекст. Не ХромАутентично Цифровой
![Page 27: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/27.jpg)
Сделайте проще
Знакомо = Просто
Предоставьте согласованное и ожидаемое поведение
![Page 28: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/28.jpg)
Типографика
![Page 29: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/29.jpg)
Иконографика
![Page 30: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/30.jpg)
Иконографика
![Page 31: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/31.jpg)
Иконографика
Согласованные иконки в меню приложения
Тестируйте иконки с пользователями (внимание на контекст)
![Page 32: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/32.jpg)
Metro
Для Windows Phone
![Page 33: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/33.jpg)
Хард. приложения
Кнопки
Дополнительныегоризонтальные
Проектируйте под 1 руку,когда это возможно
![Page 34: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/34.jpg)
Жесты
![Page 35: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/35.jpg)
Панель
SIP
Страницаприложения
Старт
Входящий звонок
Системный трей
Уведомления
Громкость
Direct3D Surface
![Page 36: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/36.jpg)
Тач. интерфейс
Оптимальный размер области - 9мм
Минимальный touch target - 7мм
Минимальный отступ 2мм
Визуальный элемент 60-100%от touch-target
![Page 37: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/37.jpg)
Live Tiles
![Page 38: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/38.jpg)
Tile notification
![Page 39: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/39.jpg)
Общие контроллы
![Page 40: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/40.jpg)
Меню + панель приложенияДо 4 иконок
Не заполняйте все 4, если возможно
Поднятие панели для отображенияменюTrigger
![Page 41: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/41.jpg)
Закладки, pivot
Разделение многочисленных задач
Тэп или флик для переключения
Trigger
![Page 42: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/42.jpg)
Хабы, panorama
Богатое наполнение
Агрегация различныхисточников
![Page 43: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/43.jpg)
Хабы vs. Одностраничные приложения
![Page 44: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/44.jpg)
Как? Сначала grid.
![Page 45: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/45.jpg)
Metro, а потом бренд.
![Page 46: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/46.jpg)
Среда
![Page 47: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/47.jpg)
ОБЛАКО
ЭКРАН
Инструменты
Портальные сервисыОблачные сервисы
Runtime – Экран
Код, который вы пишете на клиенте
Код, который вы пишете на сервере
Инструменты для дизайна и
разработки
Инструменты для продажи и доставки
![Page 48: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/48.jpg)
ОБЛАКО
ЭКРАН
Phone Emulator
Samples Documentation
Guides Community
Packaging and Verification Tools
Notifications
Location Identity Feeds
MapsSocial
App Deployment Registration
Validation
Certification
Publishing
Marketplace
MO and CC Billing
Business Intelligence
Update Management
Инструменты
Портальные сервисыОблачные сервисы
Sensors Media Data
Xbox LIVE Notifications
.NET Framework managed code sandbox
Location
Phone
Runtime – Экран
![Page 49: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/49.jpg)
Кто с нами?UXNext + Microsoft BizSpark
http://bizspark.comhttp://uxnext.org.ua
Design review для лучших проектов
![Page 50: METRO. Дизайн для Windows Phone](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b6c2074a795908318b45a5/html5/thumbnails/50.jpg)
Кто с нами?Австралия, ImagineCup 2012
www.imaginecup.com