VladimirKolesnikov (Microsoft) @ CodeCamp2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

VladimirKolesnikov (Microsoft) @ CodeCamp2011

on

  • 564 views

 

Statistics

Views

Total Views
564
Views on SlideShare
564
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

VladimirKolesnikov (Microsoft) @ CodeCamp2011 Presentation Transcript

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