METRO. Дизайн для Windows Phone Никита Лукьянец (nikiluk) - презентация

1 METRO. Дизайн для Windows Phone Никита Лукьянец (nikiluk)

2 Ресурсы us/library/ff637515(VS.92).aspx

3 Сложно о простом

4 jjg.net/elements

5 1.Дизайн важен лишь для пользовательских решений 2.Дизайн субъективен 3.Дизайн неизмерим, соответственно – Нет прямой корреляции с бизнес целями – Дизайн это затраты – Внутренние функции практически не влияют на стоимость построения интерфейса Стереотипы во многих компаниях

6 Время, инвестированное в разработку UI 10% … 50% Типичная компания отводит 10% бюджета проекта на UI 50% … 70% общего кода проекта 40% усилий разработчиков 80% непредвиденных обстоятельств * Source: An Empirical Study of the Relationships Between User Interface Development Tools & User Interface Software Development, McKirdy, Department of Computing Science, 1998

7 Дизайн процесс Project goals, user goals, information architecture & story board Interaction model & visual design proposal Final visual design & measured UI 4 Regular drops of working code & broad dogfooding

8 Результат дизайн процесса Исследование существующих активов, аудит приложений Потоковые карты, диаграммы навигации, карта приложения Пользовательские сценарии Wireframe (последовательность экранов в истории) Персоны Прототипы (бумага и карандаш) Функциональные спецификации Подготовленные графические материалы

9 1 2 3 Project goals, user goals, information architecture & story board Interaction model & visual design proposal Final visual design & measured UI 4 Regular drops of working code & broad dogfooding

10 Цикл

11 Для кого? Personas

12 Что? Problem Какую проблему вы решаете? Хозяин дома ремонтирует стену. Держит фонарь, зажав его подбородком к плечу, чтобы освободить руки. Наблюдение вдохновило Black & Decker на создание фонаря, который можно будет трансформировать и «носить».

13 Какую проблему вы решаете? Задачи пользователя!

14 Задачи пользователя! До, после Project goals, user goals, information architecture & story board Interaction model & visual design proposal Final visual design & measured UI 4 Regular drops of working code & broad dogfooding

15 Как? На бумаге

16 Как? Interaction model Учет отклика системы на каждое действие пользователя (click, tap, pan, flick)

17 Не останавливайте пользователя

18 Хакатон 1. Постановка проблемы 2. Определение задач и стереотипов пользователя 3. Информационная архитектура 4. Прототип на бумаге/ sketchflow 5. Metro 6. Бизнес-логика 7. Тестирование в эмуляторе 8. Тестирование на устройстве 9. Демо

19 Экскурс в историю

20

21

22

23

24 Metro

25 ETRO METRO - НАШ ЯЗЫК ДИЗАЙНА. МЫ НАЗЫВАЕМ ЕГО METRO, ПОТОМУ ЧТО ОН СОВРЕМЕНЕН И ЧИСТ. ОН БЫСТРЫЙ И ДИНАМИЧНЫЙ. КОНТЕНТ И ТИПОГРАФИКА. ВСЕЦЕЛО АУТЕНТИЧНЫЙ.

26 Принципы Чистый, Легкий, Быстрый, Открытый Типографика В Движении Контекст. Не Хром Аутентично Цифровой

27 Сделайте проще Знакомо = Просто Предоставьте согласованное и ожидаемое поведение

28 Типографика

29 Иконографика

30

31 Согласованные иконки в меню приложения Тестируйте иконки с пользователями (внимание на контекст)

32 Metro Для Windows Phone

33 Хард. приложения Кнопки Дополнительные горизонтальные Проектируйте под 1 руку, когда это возможно

34 Жесты

35

36 Тач. интерфейс Оптимальный размер области - 9мм Минимальный touch target - 7мм Минимальный отступ 2мм Визуальный элемент % от touch-target

37 Live Tiles

38 Tile notification

39 Общие контроллы

40 Меню + панель приложения До 4 иконок Не заполняйте все 4, если возможно Поднятие панели для отображения менюTrigger

41 Закладки, pivot Разделение многочисленных задач Тэп или флик для переключения Trigger

42 Хабы, panorama Богатое наполнение Агрегация различных источников

43 Хабы vs. Одностраничные приложения

44 Как? Сначала grid.

45 Metro, а потом бренд.

46 Среда

47 ОБЛАКО ЭКРАН Инструменты Портальные сервисыОблачные сервисы Runtime – Экран Код, который вы пишете на клиенте Код, который вы пишете на сервере Инструменты для дизайна и разработки Инструменты для продажи и доставки

48 ОБЛАКО ЭКРАН Phone Emulator SamplesDocumentation GuidesCommunity Packaging and Verification Tools Notifications LocationIdentityFeeds MapsSocial App Deployment Registration Validation Certification Publishing Marketplace MO and CC Billing Business Intelligence Update Management Инструменты Портальные сервисыОблачные сервисы SensorsMediaData Xbox LIVENotifications.NET Framework managed code sandbox Location Phone Runtime – Экран

49 Кто с нами? UXNext + Microsoft BizSpark Design review для лучших проектов

50 Кто с нами? Австралия, ImagineCup

51 skype: nikiluk ?