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

Содержание

Ресурсы 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

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


Слайд 2Ресурсы
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




Слайд 3Сложно о простом


Слайд 4jjg.net/elements


Слайд 5Дизайн важен лишь для пользовательских решений
Дизайн субъективен
Дизайн неизмерим, соответственно
Нет прямой

корреляции с бизнес целями
Дизайн это затраты
Внутренние функции практически не влияют на стоимость построения интерфейса

Стереотипы во многих компаниях


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


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


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


Слайд 15Как? На бумаге


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

flick)




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


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

эмуляторе
Тестирование на устройстве
Демо

Слайд 19Экскурс в историю


Слайд 25ETRO
METRO - НАШ ЯЗЫК ДИЗАЙНА. МЫ НАЗЫВАЕМ ЕГО METRO, ПОТОМУ ЧТО

ОН СОВРЕМЕНЕН И ЧИСТ. ОН БЫСТРЫЙ И ДИНАМИЧНЫЙ. КОНТЕНТ И ТИПОГРАФИКА. ВСЕЦЕЛО АУТЕНТИЧНЫЙ.








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


Слайд 27Сделайте проще
Знакомо = Просто

Предоставьте согласованное и ожидаемое поведение




Слайд 28Типографика


Слайд 29Иконографика


Слайд 30Иконографика


Слайд 31Иконографика
Согласованные иконки в меню приложения

Тестируйте иконки с пользователями (внимание на контекст)





Слайд 32Metro
Для Windows Phone


Слайд 33Хард. приложения
Кнопки

Дополнительные горизонтальные

Проектируйте под 1 руку, когда это возможно


Слайд 34Жесты


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


Слайд 36Тач. интерфейс
Оптимальный размер области - 9мм

Минимальный touch target - 7мм

Минимальный отступ

2мм

Визуальный элемент 60-100%
от touch-target

Слайд 37Live Tiles


Слайд 38Tile notification


Слайд 39Общие контроллы


Слайд 40
Меню + панель приложения
До 4 иконок

Не заполняйте все 4, если возможно

Поднятие

панели для отображения менюTrigger





Слайд 41
Закладки, pivot
Разделение многочисленных задач

Тэп или флик для переключения

Trigger





Слайд 42
Хабы, panorama
Богатое наполнение

Агрегация различных источников





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


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


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


Слайд 46Среда


Слайд 47



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

для дизайна и разработки

Инструменты для продажи и доставки


Слайд 51nikital@microsoft.com
skype: nikiluk
?


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика