1. особенности и возможности
проектирования
пользовательского интерфейса
приложений под Windows Phone 7
Владимир Колесников
Microsoft
vladkol@microsoft.com, @vladkol

3. metro
легкость и простота,
движение и скорость,
типографика,
контент прежде всего

4. легкость и простота
• фокус на основных задачах
• меньше ненужных деталей
• свободное пространство

5. движение и скорость
• отзывчивый и живой
• общий системный подход
• внимание к контексту
• чувство размера и глубины
• переходы тоже важны

6. Segoe WP
типографика
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Semibold
• четкий и красивый текст abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
• открытый и понятный
информационный дизайн Segoe WP Light
abcdefghijklmnopqrstuvwxyz1234567890
• чувствительность к толщине, ABCDEFGHIJKLMNOPQRSTUVWXYZ
размеру и балансу текстовых Segoe WP Semilight
элементов abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Black
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ

7. контент прежде всего
• приоритет контента, а не оформления
• сокращение визуальных элементов, не
являющихся контентом
• контент — часть UI
• прямое взаимодействие с контентом

8. инфографика vs. иконография
традиционный подход
• объекты реального мира изображаются в
форме графических метафор
• стремление к реализму
• низкая информационная составляющая
метафор
инфографика в metro
• контент является неотъемлемой частью
вида элементов управления и даже их
поведения

9. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность

10. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность

11. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность

12. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность

13. навигация неправильно
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность
Login here

14. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность
селекторы и задачи

15. структура страницы
приоритезация
• не стремитесь запихнуть максимум
информации на минимум экранов
• учитывайте главное и второстепенное
логичность и удобство
• выстраивайте данные логично
• не забывайте о восприятии
• используйте и учитывайте встроенные
элементы управления

16. user experience как слагаемое успеха

17. смертность приложений
среднее приложение запускают лишь однажды
только 1% установленных мобильных приложений
используют регулярно длительное время

18. смертность приложений

19. красивое приложение

20. интересное приложение

21. полезное приложение

22. движение

23. больше движения

24. кирпичики metro

25. ui model: страницы
phone application web application
страницы приложения, URI Страницы сайта, URL
shell frame web browser
sessions and back stack history and tabs

26. декомпозиция

27. панель приложения
• Панель приложения не
обязательна.
• до 4х иконок (48х48, ч/б)
• остальные пункты в
дополнительном меню
• кнопки должны
соответствовать
контексту приложения

28. кнопки
• Обычные кнопки
• Кнопки-переключатели
(иконка, подпись)
• Диалоговые кнопки (1-2,
фиксированный размер)
• Командные кнопки
(текстовое объяснение
действий)

29. checkbox и radio button

30. выбор даты

31. текст

32. клавиатура

33. и многое другое

34. pivot и panorama
pivot
• сфокусирован
• эффективен
• «обычен»
panorama
• динамична
• расширяема
• побуждает к изучению

35. темы

36. типичные ошибки в панораме
my crowded panorama
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in
culpa qui officia deserunt mollit
anim id est laborumea commodo
consequat. Duis aute irure dolor

37. live tiles

38. live tiles и темы

39. notification live tiles

40. практика

42. create.msdn.com

43. вопросы
Q&A

44. Владимир Колесников
Microsoft
vladkol@microsoft.com, @vladkol