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
?

Похожие презентации

Тема урока: Внешняя политика России в начале XX века. Русско-японская война. 360
ABC F E S T I V A L 287
Game Design Thinking: A Jolt to Newsrooms 243
Маркетинг в социальных сетях 381
Анализ результатов педагогической деятельности за межаттестационный период (2006 – 2011 гг) 256
Памятник городам-побратимам в г. Мурманске. 343

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

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

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

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

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

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

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