'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Ресурсы http://wp7rocks.com http://twitter.com/dpeua http://uxnext.org.ua http://create.msdn.com http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx


Слайд 2

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


Слайд 3

jjg.net/elements


Слайд 4

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


Слайд 5

Время, инвестированное в разработку 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


Слайд 6

Дизайн процесс 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


Слайд 7

Результат дизайн процесса


Слайд 8

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


Слайд 9

Цикл


Слайд 10

Для кого? Personas


Слайд 11

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


Слайд 12

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


Слайд 13

Задачи пользователя! До, после 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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

Хакатон Постановка проблемы Определение задач и стереотипов пользователя Информационная архитектура Прототип на бумаге/ sketchflow Metro Бизнес-логика Тестирование в эмуляторе Тестирование на устройстве Демо


Слайд 18

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


Слайд 19


Слайд 20


Слайд 21


Слайд 22


Слайд 23

Metro


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

Типографика


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

Metro Для Windows Phone


Слайд 32

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


Слайд 33

Жесты


Слайд 34

Панель SIP Страница приложения Старт Входящий звонок Системный трей Уведомления Громкость Direct3D Surface


Слайд 35

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


Слайд 36

Live Tiles


Слайд 37

Tile notification


Слайд 38

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


Слайд 39

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


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

Среда


Слайд 46

Код, который вы пишете на клиенте Код, который вы пишете на сервере Инструменты для дизайна и разработки Инструменты для продажи и доставки


Слайд 47


Слайд 48


Слайд 49


Слайд 50

nikital@microsoft.com skype: nikiluk ?


×

HTML:





Ссылка: