METRO. Дизайн для Windows Phone

1,273 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,273
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

METRO. Дизайн для Windows Phone

  1. 1. METRO. Дизайн для Windows PhoneНикита Лукьянец (nikiluk)
  2. 2. Ресурсыhttp://wp7rocks.comhttp://twitter.com/dpeuahttp://uxnext.org.uahttp://create.msdn.comhttp://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
  3. 3. Сложно о простом
  4. 4. jjg.net/elements
  5. 5. Стереотипы во многих компаниях1. Дизайн важен лишь для пользовательских решений2. Дизайн субъективен3. Дизайн неизмерим, соответственно – Нет прямой корреляции с бизнес целями – Дизайн это затраты – Внутренние функции практически не влияют на стоимость построения интерфейса
  6. 6. Время, инвестированное в разработку UI 50% … 70% общего кода проекта 10% … 50% 40% усилий разработчиков Типичная компания отводит 10% бюджета проекта на UI 80% непредвиденных обстоятельств* Source: An Empirical Study of the Relationships Between User Interface Development Tools & User Interface SoftwareDevelopment, McKirdy, Department of Computing Science, 1998
  7. 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. 8. Результат дизайн процессаИсследование существующих активов, аудит приложенийПотоковые карты, диаграммы навигации, карта приложенияПользовательские сценарииWireframe (последовательность экранов в истории)ПерсоныПрототипы (бумага и карандаш)Функциональные спецификацииПодготовленные графические материалы
  9. 9. 1 Project goals, user goals, information 3 Final visual design & measured UI architecture & story board 4 Regular drops of working code & broad dogfooding2 Interaction model & visual design proposal
  10. 10. Цикл
  11. 11. Для кого? Personas
  12. 12. Что? Problem “Хозяин дома ремонтирует стену. Держит фонарь, зажав его подбородком к плечу, чтобы освободить руки.” Наблюдение вдохновило Black & Decker на создание фонаря, который можно будет трансформировать и «носить».Какую проблему вы решаете?
  13. 13. Задачи пользователя!Какую проблему вы решаете?
  14. 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. 15. Как? На бумаге
  16. 16. Как? Interaction modelУчет отклика системы на каждое действие пользователя(click, tap, pan, flick)
  17. 17. Не останавливайте пользователя
  18. 18. Хакатон 1. Постановка проблемы 2. Определение задач и стереотипов пользователя 3. Информационная архитектура 4. Прототип на бумаге/ sketchflow 5. Metro 6. Бизнес-логика 7. Тестирование в эмуляторе 8. Тестирование на устройстве 9. Демо
  19. 19. Экскурс в историю
  20. 20. Metro
  21. 21. METRO - НАШ ЯЗЫК ДИЗАЙНА.МЫ НАЗЫВАЕМ ЕГО METRO, ETROПОТОМУ ЧТО ОН СОВРЕМЕНЕНИ ЧИСТ. ОН БЫСТРЫЙ ИДИНАМИЧНЫЙ. КОНТЕНТ ИТИПОГРАФИКА. ВСЕЦЕЛОАУТЕНТИЧНЫЙ.
  22. 22. ПринципыЧистый, Легкий, Быстрый, ОткрытыйТипографикаВ ДвиженииКонтекст. Не ХромАутентично Цифровой
  23. 23. Сделайте прощеЗнакомо = ПростоПредоставьте согласованное и ожидаемое поведение
  24. 24. Типографика
  25. 25. Иконографика
  26. 26. Иконографика
  27. 27. ИконографикаСогласованные иконкив меню приложенияТестируйте иконки спользователями(внимание на контекст)
  28. 28. MetroДля Windows Phone
  29. 29. Хард. приложенияКнопкиДополнительныегоризонтальныеПроектируйте под 1 руку,когда это возможно
  30. 30. Жесты
  31. 31. Тач. интерфейсОптимальный размер области - 9ммМинимальный touch target - 7ммМинимальный отступ 2ммВизуальный элемент 60-100%от touch-target
  32. 32. Live Tiles
  33. 33. Tile notification
  34. 34. Общие контроллы
  35. 35. Меню + панель приложенияДо 4 иконокНе заполняйте все 4, если возможноПоднятие панели для отображенияменюTrigger
  36. 36. Закладки, pivotРазделение многочисленных задачТэп или флик для переключенияTrigger
  37. 37. Хабы, panoramaБогатое наполнениеАгрегация различныхисточников
  38. 38. Хабы vs. Одностраничные приложения
  39. 39. Как? Сначала grid.
  40. 40. Metro, а потом бренд.
  41. 41. Среда
  42. 42. Runtime – Экран Инструменты Код, который вы Инструменты для пишете на клиенте дизайна и разработки ЭКРАНОБЛАКО Облачные сервисы Портальные сервисы Код, который вы Инструменты для пишете на сервере продажи и доставки
  43. 43. 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
  44. 44. Кто с нами? UXNext + Microsoft BizSpark http://bizspark.com http://uxnext.org.uaDesign review для лучших проектов
  45. 45. Кто с нами?Австралия, ImagineCup 2012 www.imaginecup.com
  46. 46. nikital@microsoft.comskype: nikiluk

×