METRO. Дизайн для Windows Phone
Download as PPTX, PDF2 likes586 views
Документ описывает принципы и процесс дизайна для Windows Phone, акцентируя внимание на важности интерфейса пользователя и его влиянии на бюджет проекта. Он также описывает этапы проектирования, включая исследование потребностей пользователей и создание прототипов. В заключение приведены рекомендации по использованию метрик и тестированию дизайна для улучшения пользовательского опыта.
METRO. Дизайн для Windows Phone
- 1. METRO. Дизайн для Windows Phone Никита Лукьянец (nikiluk)
- 5. Стереотипы во многих компаниях 1. Дизайн важен лишь для пользовательских решений 2. Дизайн субъективен 3. Дизайн неизмерим, соответственно – Нет прямой корреляции с бизнес целями – Дизайн это затраты – Внутренние функции практически не влияют на стоимость построения интерфейса
- 6. Время, инвестированное в разработку UI 50% … 70% общего кода проекта 10% … 50% 40% усилий разработчиков Типичная компания отводит 10% бюджета проекта на UI 80% непредвиденных обстоятельств * Source: An Empirical Study of the Relationships Between User Interface Development Tools & User Interface Software Development, McKirdy, Department of Computing Science, 1998
- 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. Результат дизайн процесса Исследование существующих активов, аудит приложений Потоковые карты, диаграммы навигации, карта приложения Пользовательские сценарии Wireframe (последовательность экранов в истории) Персоны Прототипы (бумага и карандаш) Функциональные спецификации Подготовленные графические материалы
- 9. 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
- 10. Цикл
- 12. Что? Problem “Хозяин дома ремонтирует стену. Держит фонарь, зажав его подбородком к плечу, чтобы освободить руки.” Наблюдение вдохновило Black & Decker на создание фонаря, который можно будет трансформировать и «носить». Какую проблему вы решаете?
- 13. Задачи пользователя! Какую проблему вы решаете?
- 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. Как? На бумаге
- 16. Как? Interaction model Учет отклика системы на каждое действие пользователя (click, tap, pan, flick)
- 18. Хакатон 1. Постановка проблемы 2. Определение задач и стереотипов пользователя 3. Информационная архитектура 4. Прототип на бумаге/ sketchflow 5. Metro 6. Бизнес-логика 7. Тестирование в эмуляторе 8. Тестирование на устройстве 9. Демо
- 24. Metro
- 25. METRO - НАШ ЯЗЫК ДИЗАЙНА. МЫ НАЗЫВАЕМ ЕГО METRO, ETRO ПОТОМУ ЧТО ОН СОВРЕМЕНЕН И ЧИСТ. ОН БЫСТРЫЙ И ДИНАМИЧНЫЙ. КОНТЕНТ И ТИПОГРАФИКА. ВСЕЦЕЛО АУТЕНТИЧНЫЙ.
- 26. Принципы Чистый, Легкий, Быстрый, Открытый Типографика В Движении Контекст. Не Хром Аутентично Цифровой
- 27. Сделайте проще Знакомо = Просто Предоставьте согласованное и ожидаемое поведение
- 28. Типографика
- 29. Иконографика
- 30. Иконографика
- 31. Иконографика Согласованные иконки в меню приложения Тестируйте иконки с пользователями (внимание на контекст)
- 33. Хард. приложения Кнопки Дополнительные горизонтальные Проектируйте под 1 руку, когда это возможно
- 34. Жесты
- 36. Тач. интерфейс Оптимальный размер области - 9мм Минимальный touch target - 7мм Минимальный отступ 2мм Визуальный элемент 60-100% от touch-target
- 37. Live Tiles
- 39. Общие контроллы
- 40. Меню + панель приложения До 4 иконок Не заполняйте все 4, если возможно Поднятие панели для отображения менюTrigger
- 41. Закладки, pivot Разделение многочисленных задач Тэп или флик для переключения Trigger
- 42. Хабы, panorama Богатое наполнение Агрегация различных источников
- 43. Хабы vs. Одностраничные приложения
- 45. Metro, а потом бренд.
- 46. Среда
- 47. Runtime – Экран Инструменты Код, который вы Инструменты для пишете на клиенте дизайна и разработки ЭКРАН ОБЛАКО Облачные сервисы Портальные сервисы Код, который вы Инструменты для пишете на сервере продажи и доставки
- 48. 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
- 49. Кто с нами? UXNext + Microsoft BizSpark http://bizspark.com http://uxnext.org.ua Design review для лучших проектов
- 50. Кто с нами? Австралия, ImagineCup 2012 www.imaginecup.com