VladimirKolesnikov (Microsoft) @ CodeCamp2011

589 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
589
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

VladimirKolesnikov (Microsoft) @ CodeCamp2011

  1. 1. особенности и возможности проектирования пользовательского интерфейса приложений под Windows Phone 7Владимир КолесниковMicrosoftvladkol@microsoft.com, @vladkol
  2. 2. metroлегкость и простота,движение и скорость,типографика,контент прежде всего
  3. 3. легкость и простота• фокус на основных задачах• меньше ненужных деталей• свободное пространство
  4. 4. движение и скорость• отзывчивый и живой• общий системный подход• внимание к контексту• чувство размера и глубины• переходы тоже важны
  5. 5. Segoe WPтипографика abcdefghijklmnopqrstuvwxyz1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ Segoe WP Semibold• четкий и красивый текст abcdefghijklmnopqrstuvwxyz1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ• открытый и понятный информационный дизайн Segoe WP Light abcdefghijklmnopqrstuvwxyz1234567890• чувствительность к толщине, ABCDEFGHIJKLMNOPQRSTUVWXYZ размеру и балансу текстовых Segoe WP Semilight элементов abcdefghijklmnopqrstuvwxyz1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ Segoe WP Black abcdefghijklmnopqrstuvwxyz1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ
  6. 6. контент прежде всего• приоритет контента, а не оформления• сокращение визуальных элементов, не являющихся контентом• контент — часть UI• прямое взаимодействие с контентом
  7. 7. инфографика vs. иконографиятрадиционный подход• объекты реального мира изображаются в форме графических метафор• стремление к реализму• низкая информационная составляющая метафоринфографика в metro• контент является неотъемлемой частью вида элементов управления и даже их поведения
  8. 8. навигация• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность
  9. 9. навигация• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность
  10. 10. навигация• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность
  11. 11. навигация• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность
  12. 12. навигация неправильно• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность Login here
  13. 13. навигация• доверие к «железу»• хабы• предсказуемость• правильная мотивация• интегрированность селекторы и задачи
  14. 14. структура страницыприоритезация• не стремитесь запихнуть максимум информации на минимум экранов• учитывайте главное и второстепенноелогичность и удобство• выстраивайте данные логично• не забывайте о восприятии• используйте и учитывайте встроенные элементы управления
  15. 15. user experience как слагаемое успеха
  16. 16. смертность приложений среднее приложение запускают лишь однажды только 1% установленных мобильных приложений используют регулярно длительное время
  17. 17. смертность приложений
  18. 18. красивое приложение
  19. 19. интересное приложение
  20. 20. полезное приложение
  21. 21. движение
  22. 22. больше движения
  23. 23. кирпичики metro
  24. 24. ui model: страницыphone application web applicationстраницы приложения, URI Страницы сайта, URLshell frame web browsersessions and back stack history and tabs
  25. 25. декомпозиция
  26. 26. панель приложения • Панель приложения не обязательна. • до 4х иконок (48х48, ч/б) • остальные пункты в дополнительном меню • кнопки должны соответствовать контексту приложения
  27. 27. кнопки • Обычные кнопки • Кнопки-переключатели (иконка, подпись) • Диалоговые кнопки (1-2, фиксированный размер) • Командные кнопки (текстовое объяснение действий)
  28. 28. checkbox и radio button
  29. 29. выбор даты
  30. 30. текст
  31. 31. клавиатура
  32. 32. и многое другое
  33. 33. pivot и panorama pivot • сфокусирован • эффективен • «обычен» panorama • динамична • расширяема • побуждает к изучению
  34. 34. темы
  35. 35. типичные ошибки в панораме 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
  36. 36. live tiles
  37. 37. live tiles и темы
  38. 38. notification live tiles
  39. 39. практика
  40. 40. create.msdn.com
  41. 41. вопросы Q&A
  42. 42. Владимир КолесниковMicrosoftvladkol@microsoft.com, @vladkol

×