Презентация на хакатоне wp7rocks.com во Львове

1. METRO. Дизайн для Windows Phone
Никита Лукьянец (nikiluk)

2. Ресурсы
http://wp7rocks.com
http://twitter.com/dpeua
http://uxnext.org.ua
http://create.msdn.com
http://msdn.microsoft.com/en-
us/library/ff637515(VS.92).aspx

3. Сложно о простом

4. jjg.net/elements

5. Стереотипы во многих компаниях
1. Дизайн важен лишь для пользовательских решений
2. Дизайн субъективен
3. Дизайн неизмерим, соответственно
– Нет прямой корреляции с бизнес целями
– Дизайн это затраты
– Внутренние функции практически не влияют на стоимость
построения интерфейса

6. Время, инвестированное в разработку UI 50% … 70% общего кода проекта
10% … 50%
40% усилий разработчиков
Типичная компания отводит 10%
бюджета проекта на UI
80% непредвиденных обстоятельств
* Source: An Empirical Study of the Relationships Between User Interface Development Tools & User Interface Software
Development, McKirdy, Department of Computing Science, 1998

7. Дизайн процесс
1 Project goals, user goals, information 3 Final visual design & measured UI
architecture & story board 4 Regular drops of working code & broad dogfooding
2 Interaction model & visual design proposal

8. Результат дизайн процесса
Исследование существующих активов, аудит приложений
Потоковые карты, диаграммы навигации, карта приложения
Пользовательские сценарии
Wireframe (последовательность экранов в истории)
Персоны
Прототипы (бумага и карандаш)
Функциональные спецификации
Подготовленные графические материалы

9. 1 Project goals, user goals, information 3 Final visual design & measured UI
architecture & story board 4 Regular drops of working code & broad dogfooding
2 Interaction model & visual design proposal

10. Цикл

11. Для кого? Personas

12. Что? Problem
“Хозяин дома ремонтирует
стену. Держит фонарь, зажав
его подбородком к плечу,
чтобы освободить руки.”
Наблюдение вдохновило
Black & Decker на создание
фонаря, который можно будет
трансформировать и
«носить».
Какую проблему вы решаете?

13. Задачи пользователя!
Какую проблему вы решаете?

14. Задачи пользователя! До, после
1 Project goals, user goals, information 3 Final visual design & measured UI
architecture & story board 4 Regular drops of working code & broad dogfooding
2 Interaction model & visual design proposal

15. Как? На бумаге

16. Как? Interaction model
Учет отклика системы на каждое действие пользователя
(click, tap, pan, flick)

17. Не останавливайте пользователя

18. Хакатон
1. Постановка проблемы
2. Определение задач и стереотипов пользователя
3. Информационная архитектура
4. Прототип на бумаге/ sketchflow
5. Metro
6. Бизнес-логика
7. Тестирование в эмуляторе
8. Тестирование на устройстве
9. Демо

19. Экскурс в историю

24. Metro

25. METRO - НАШ ЯЗЫК ДИЗАЙНА.
МЫ НАЗЫВАЕМ ЕГО METRO,
ETRO
ПОТОМУ ЧТО ОН СОВРЕМЕНЕН
И ЧИСТ. ОН БЫСТРЫЙ И
ДИНАМИЧНЫЙ. КОНТЕНТ И
ТИПОГРАФИКА. ВСЕЦЕЛО
АУТЕНТИЧНЫЙ.

26. Принципы
Чистый, Легкий, Быстрый, Открытый
Типографика
В Движении
Контекст. Не Хром
Аутентично Цифровой

27. Сделайте проще
Знакомо = Просто
Предоставьте согласованное и ожидаемое поведение

28. Типографика

29. Иконографика

30. Иконографика

31. Иконографика
Согласованные иконки
в меню приложения
Тестируйте иконки с
пользователями
(внимание на контекст)

32. Metro
Для Windows Phone

33. Хард. приложения
Кнопки
Дополнительные
горизонтальные
Проектируйте под 1 руку,
когда это возможно

34. Жесты

36. Тач. интерфейс
Оптимальный размер области - 9мм
Минимальный touch target - 7мм
Минимальный отступ 2мм
Визуальный элемент 60-100%
от touch-target

37. Live Tiles

38. Tile notification

39. Общие контроллы

40. Меню + панель приложения
До 4 иконок
Не заполняйте все 4, если возможно
Поднятие панели для отображения
менюTrigger

41. Закладки, pivot
Разделение многочисленных задач
Тэп или флик для переключения
Trigger

42. Хабы, panorama
Богатое наполнение
Агрегация различных
источников

43. Хабы vs. Одностраничные приложения

44. Как? Сначала grid.

45. Metro, а потом бренд.

46. Среда

47. Runtime – Экран Инструменты
Код, который вы Инструменты для
пишете на клиенте дизайна и разработки
ЭКРАН
ОБЛАКО Облачные сервисы Портальные сервисы
Код, который вы Инструменты для
пишете на сервере продажи и доставки

48. Runtime – Экран Инструменты
Sensors Media Data Location Phone Emulator
Phone Xbox LIVE Notifications Samples Documentation
.NET Framework managed code sandbox Guides Community
Packaging and Verification Tools
ЭКРАН
ОБЛАКО Облачные сервисы Портальные сервисы
Notifications App Deployment Registration Marketplace
Location Identity Feeds Validation MO and CC Billing
Social Maps Certification Business Intelligence
Publishing Update Management

49. Кто с нами?
UXNext + Microsoft BizSpark
http://bizspark.com
http://uxnext.org.ua
Design review для лучших проектов

50. Кто с нами?
Австралия, ImagineCup 2012
www.imaginecup.com

51. nikital@microsoft.com
skype: nikiluk