Дизайн приложенийдля Windows PhoneКонстантин Кичинскийkonkich@microsoft.com@kichinsky | blogs.msdn.com/kichinsky
0.  Metro-дизайнWindows Phone
Metro-дизайн в MicrosoftWindowsMedia Center      Zune HD   Xbox 360  Windows Phone
Metro-дизайн в MicrosoftWindowsMedia Center      Zune HD   Xbox 360 8                            Windows  Windows Phone
Чего хочет каждый из нас?                                              http://cinemagraphs.com  Работать напрямую   Быстро...
Чего хочет каждый из нас?                                              http://cinemagraphs.com  Работать напрямую   Быстро...
Windows Phone
Windows Phone
Windows Phone
Источники вдохновенияModern Design – BauhausОставьте самую сутьInternational Typographic StyleЧистый, честный и красивыйMo...
10 советов  про Metro-дизайнWindows Phone
1.       Изучите принципы12   Windows Phone
Метро-принципы    мастерство в деталях    быстрый и подвижный    по-настоящему цифровой    больше меньшими средствами...
2.       Держите фокус14   Windows Phone
Мое приложение       самое лучшее в       своей категории для       _____________________.15   Windows Phone
Контент прежде всего Приоритет контента Контент — часть UI, контент и есть UI Прямое взаимодействие с  контентом    Win...
3.       Планируйте       сценарии17   Windows Phone
Мобильные сценарииКарманное личное устройствоРазорванный сценарий Время Пространство Условия    Windows Phone
чем онзанят?19   Windows Phone
Создавайте историиЗнайте своего пользователя Зачем ему ваше приложение? Когда и для чего он им будет пользоваться?Персон...
«        People will do the least amount of              work possible to get a task done. It is              better to sh...
4.       Продумайте       навигацию22   Windows Phone
Информационная карта Windows Phone
Информационная карта Windows Phone
Рисуйтеинформа-ционныесхемы!25   Windows Phone
Панорама: КиноПоиск26   Windows Phone
Панорама: Перекресток27   Windows Phone
Пивот28   Windows Phone
Пивот29   Windows Phone
Не делайте так:                     Мертвая зона для                     прокрутки панорамы30   Windows Phone
А вот это интересно:31   Windows Phone
Еще интересная вариация:32   Windows Phone
Панель приложения1-4 кнопки + менюЧто выноситьконтекстные действияглобальные действиянастройки, о приложении, ...  в меню...
Панель приложения34   Windows Phone
5.       Используйте       кнопку «назад»35   Windows Phone
Windows Phone
Информационная карта Windows Phone
Циклы38   Windows Phone
Пример:39   Windows Phone
6.       Помните о       персональности40   Windows Phone
Телефон – это личное устройство Аккаунт пользователя Место (геолокация) Настройки пользователя    Windows Phone
космос,космос…как слы…                 Grozz. @ flickr Windows Phone
Windows Phone                                    контакт?           Liquidskyarts @ flickr
Плитки – они......как ключи в прихожей, билет в театр наполке и любимая книга сверху стопки....как любимая кружка, любимые...
Тема и акцент45   Windows Phone
Тема и акцент46   Windows Phone
Стартовый экранТайлы выглядят «непонятно»,как непонятна личностьчеловека-хозяина.Покажите свои тайлы психиатру— и он скаже...
Темы и акценты48   Windows Phone
Акценты49   Windows Phone
Акценты50   Windows Phone
Меняйте цвета осторожно! Windows Phone
Персонализация цвета тайла52   Windows Phone
Персонализация цвета тайла53   Windows Phone
7.       Делайте удобным       и доступным54   Windows Phone
Разные системы ввода требуютразных решений в интерфейсе                                  ?     > Command output     > more...
Проектирование для пальцев                     1/25                            1/100                                    1/...
Дизайн для пальцев                     Визуальный стиль                     составляет 60-100% от                     обла...
Важностьобратнойсвязи58   Windows Phone
Отзывчивость элементов Windows Phone
ЖестыОдиночные Tap, Double Tap Pan, Flick Touch and HoldМножественные    Pinch and Stretch60   Windows Phone
Помните о контрастности61   Windows Phone
Пример. Текст и фон62   Windows Phone
Пример. Текст и изображение63   Windows Phone
8.       Используйте сетку64   Windows Phone
Сетка Windows Phone
Используйте сетку при дизайне Windows Phone
Размер шрифта и сетка67   Windows Phone
Шрифтовые атрибуты Разрядка Регистр Толщина68   Windows Phone
9.       Восстанавливайтесь69   Windows Phone
Жизненный циклСобытия об изменении статусаНужно сохранить свое состояниеПользователь не должензамечать, что работаприложен...
10.       Вдохните жизнь71   Windows Phone
Живой и в движении живая система отзывчивость переходы важны размер и глубина72   Windows Phone
Windows Phone
Нотификации через тайлы74   Windows Phone
75   Windows Phone
Итоги76   Windows Phone
10 советов про Metro-дизайн1. Изучитепринципы2. Держите фокус3. Планируйте сценарии4. Продумайте навигацию5. Используйте к...
10 советов про Metro-дизайн6. Помните  о персональности7. Делайте удобным и доступным8. Используйте сетку9. Восстанавливай...
metro =       мастерство в деталях +       быстрый и подвижный +       по-настоящему цифровой +       больше меньшими сред...
РесурсыWindows Phone
Полезные ресурсы   http://aka.ms/wpmetro    Windows Phone
13-14 июля                http://aka.ms/metroschoolWindows Phone
Спасибо!Константин Кичинскийkonkich@microsoft.com@kichinsky | blogs.msdn.com/kichinsky
Upcoming SlideShare
Loading in...5
×

Дизайн приложений для Windows Phone

14,751

Published on

Презентация Константина Кичинского с Nokia Developer Days 2012

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

No Downloads
Views
Total Views
14,751
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Дизайн приложений для Windows Phone

  1. 1. Дизайн приложенийдля Windows PhoneКонстантин Кичинскийkonkich@microsoft.com@kichinsky | blogs.msdn.com/kichinsky
  2. 2. 0. Metro-дизайнWindows Phone
  3. 3. Metro-дизайн в MicrosoftWindowsMedia Center Zune HD Xbox 360 Windows Phone
  4. 4. Metro-дизайн в MicrosoftWindowsMedia Center Zune HD Xbox 360 8 Windows Windows Phone
  5. 5. Чего хочет каждый из нас? http://cinemagraphs.com Работать напрямую Быстро понимать, Чтобы это было с контентом. что где находится. живым! Windows Phone
  6. 6. Чего хочет каждый из нас? http://cinemagraphs.com Работать напрямую Быстро понимать, Чтобы это было И чтобы это было с контентом. что где находится. живым! моим личным! Windows Phone
  7. 7. Windows Phone
  8. 8. Windows Phone
  9. 9. Windows Phone
  10. 10. Источники вдохновенияModern Design – BauhausОставьте самую сутьInternational Typographic StyleЧистый, честный и красивыйMotion Design – CinematographyДобавьте жизни Kinetic Typography Catch Me if You Can Windows Phone
  11. 11. 10 советов про Metro-дизайнWindows Phone
  12. 12. 1. Изучите принципы12 Windows Phone
  13. 13. Метро-принципы мастерство в деталях быстрый и подвижный по-настоящему цифровой больше меньшими средствами выигрывай с платформой13 Windows Phone
  14. 14. 2. Держите фокус14 Windows Phone
  15. 15. Мое приложение самое лучшее в своей категории для _____________________.15 Windows Phone
  16. 16. Контент прежде всего Приоритет контента Контент — часть UI, контент и есть UI Прямое взаимодействие с контентом Windows Phone
  17. 17. 3. Планируйте сценарии17 Windows Phone
  18. 18. Мобильные сценарииКарманное личное устройствоРазорванный сценарий Время Пространство Условия Windows Phone
  19. 19. чем онзанят?19 Windows Phone
  20. 20. Создавайте историиЗнайте своего пользователя Зачем ему ваше приложение? Когда и для чего он им будет пользоваться?Персонализация, актуальность,релевантность20 Windows Phone
  21. 21. « People will do the least amount of work possible to get a task done. It is better to show people a little bit of information and let them choose if they want more details. The fancy term for this is progressive disclosure. » by Susan Weinschenk The Psychologist’s View of UX Design21 Windows Phone
  22. 22. 4. Продумайте навигацию22 Windows Phone
  23. 23. Информационная карта Windows Phone
  24. 24. Информационная карта Windows Phone
  25. 25. Рисуйтеинформа-ционныесхемы!25 Windows Phone
  26. 26. Панорама: КиноПоиск26 Windows Phone
  27. 27. Панорама: Перекресток27 Windows Phone
  28. 28. Пивот28 Windows Phone
  29. 29. Пивот29 Windows Phone
  30. 30. Не делайте так: Мертвая зона для прокрутки панорамы30 Windows Phone
  31. 31. А вот это интересно:31 Windows Phone
  32. 32. Еще интересная вариация:32 Windows Phone
  33. 33. Панель приложения1-4 кнопки + менюЧто выноситьконтекстные действияглобальные действиянастройки, о приложении, ...  в меню33 Windows Phone
  34. 34. Панель приложения34 Windows Phone
  35. 35. 5. Используйте кнопку «назад»35 Windows Phone
  36. 36. Windows Phone
  37. 37. Информационная карта Windows Phone
  38. 38. Циклы38 Windows Phone
  39. 39. Пример:39 Windows Phone
  40. 40. 6. Помните о персональности40 Windows Phone
  41. 41. Телефон – это личное устройство Аккаунт пользователя Место (геолокация) Настройки пользователя Windows Phone
  42. 42. космос,космос…как слы… Grozz. @ flickr Windows Phone
  43. 43. Windows Phone контакт? Liquidskyarts @ flickr
  44. 44. Плитки – они......как ключи в прихожей, билет в театр наполке и любимая книга сверху стопки....как любимая кружка, любимые тапочкии зубная щетка любимого цвета.44 Windows Phone
  45. 45. Тема и акцент45 Windows Phone
  46. 46. Тема и акцент46 Windows Phone
  47. 47. Стартовый экранТайлы выглядят «непонятно»,как непонятна личностьчеловека-хозяина.Покажите свои тайлы психиатру— и он скажет, чем вы больны!47 Windows Phone
  48. 48. Темы и акценты48 Windows Phone
  49. 49. Акценты49 Windows Phone
  50. 50. Акценты50 Windows Phone
  51. 51. Меняйте цвета осторожно! Windows Phone
  52. 52. Персонализация цвета тайла52 Windows Phone
  53. 53. Персонализация цвета тайла53 Windows Phone
  54. 54. 7. Делайте удобным и доступным54 Windows Phone
  55. 55. Разные системы ввода требуютразных решений в интерфейсе ? > Command output > more command more output55 Windows Phone
  56. 56. Проектирование для пальцев 1/25 1/100 1/100056 Windows Phone
  57. 57. Дизайн для пальцев Визуальный стиль составляет 60-100% от обласки касания Отзывчивость элементов при касании57 Windows Phone
  58. 58. Важностьобратнойсвязи58 Windows Phone
  59. 59. Отзывчивость элементов Windows Phone
  60. 60. ЖестыОдиночные Tap, Double Tap Pan, Flick Touch and HoldМножественные Pinch and Stretch60 Windows Phone
  61. 61. Помните о контрастности61 Windows Phone
  62. 62. Пример. Текст и фон62 Windows Phone
  63. 63. Пример. Текст и изображение63 Windows Phone
  64. 64. 8. Используйте сетку64 Windows Phone
  65. 65. Сетка Windows Phone
  66. 66. Используйте сетку при дизайне Windows Phone
  67. 67. Размер шрифта и сетка67 Windows Phone
  68. 68. Шрифтовые атрибуты Разрядка Регистр Толщина68 Windows Phone
  69. 69. 9. Восстанавливайтесь69 Windows Phone
  70. 70. Жизненный циклСобытия об изменении статусаНужно сохранить свое состояниеПользователь не должензамечать, что работаприложения прерывалась Windows Phone
  71. 71. 10. Вдохните жизнь71 Windows Phone
  72. 72. Живой и в движении живая система отзывчивость переходы важны размер и глубина72 Windows Phone
  73. 73. Windows Phone
  74. 74. Нотификации через тайлы74 Windows Phone
  75. 75. 75 Windows Phone
  76. 76. Итоги76 Windows Phone
  77. 77. 10 советов про Metro-дизайн1. Изучитепринципы2. Держите фокус3. Планируйте сценарии4. Продумайте навигацию5. Используйте кнопку «назад» Windows Phone
  78. 78. 10 советов про Metro-дизайн6. Помните о персональности7. Делайте удобным и доступным8. Используйте сетку9. Восстанавливайтесь10. Вдохните жизнь Windows Phone
  79. 79. metro = мастерство в деталях + быстрый и подвижный + по-настоящему цифровой + больше меньшими средствами + выигрывай с платформой79 Windows Phone
  80. 80. РесурсыWindows Phone
  81. 81. Полезные ресурсы http://aka.ms/wpmetro Windows Phone
  82. 82. 13-14 июля http://aka.ms/metroschoolWindows Phone
  83. 83. Спасибо!Константин Кичинскийkonkich@microsoft.com@kichinsky | blogs.msdn.com/kichinsky
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×