METRO. Дизайн для Windows Phone

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

Ресурсы

http://wp7rocks.comhttp://twitter.com/dpeuahttp://uxnext.org.uahttp://create.msdn.comhttp://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx

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




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

jjg.net/elements

1. Дизайн важен лишь для пользовательских решений2. Дизайн субъективен 3. Дизайн неизмерим, соответственно

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

стоимость построения интерфейса

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

Время, инвестированное в

разработку 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

Дизайн процесс

1

2

3Project 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

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

Исследование существующих активов, аудит приложений

Потоковые карты, диаграммы навигации, карта приложения

Пользовательские сценарии

Wireframe (последовательность экранов в истории)

Персоны

Прототипы (бумага и карандаш)

Функциональные спецификации

Подготовленные графические материалы

1

2





Цикл

Для кого? Personas

Что? Problem

Какую проблему вы решаете?

“Хозяин дома ремонтирует стену. Держит фонарь, зажав его подбородком к плечу, чтобы освободить руки.”

Наблюдение вдохновило Black & Decker на создание фонаря, который можно будет трансформировать и «носить».

Какую проблему вы решаете?

Задачи пользователя!

Задачи пользователя! До, после

1

2





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

Как? Interaction model

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

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

Хакатон

1. Постановка проблемы2. Определение задач и стереотипов

пользователя3. Информационная архитектура4. Прототип на бумаге/ sketchflow5. Metro6. Бизнес-логика7. Тестирование в эмуляторе8. Тестирование на устройстве9. Демо

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

ETRO

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

Принципы

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

Сделайте проще

Знакомо = Просто

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

Типографика

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

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

Согласованные иконки в меню приложения

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

Metro

Для Windows Phone

Хард. приложения

Кнопки

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

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

Жесты

Панель

SIP

Страницаприложения

Старт

Входящий звонок

Системный трей

Уведомления

Громкость

Direct3D Surface

Тач. интерфейс

Оптимальный размер области - 9мм

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

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

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

Live Tiles

Tile notification

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

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

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

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

Закладки, pivot

Разделение многочисленных задач

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

Trigger

Хабы, panorama

Богатое наполнение

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

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

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

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

Среда

ОБЛАКО

ЭКРАН

Инструменты

Портальные сервисыОблачные сервисы

Runtime – Экран

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

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

Инструменты для дизайна и

разработки

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

ОБЛАКО

ЭКРАН

Phone Emulator

Samples Documentation

Guides Community

Packaging and Verification Tools

Notifications

Location Identity Feeds

MapsSocial

App Deployment Registration

Validation

Certification

Publishing

Marketplace

MO and CC Billing

Business Intelligence

Update Management

Инструменты

Портальные сервисыОблачные сервисы

Sensors Media Data

Xbox LIVE Notifications

.NET Framework managed code sandbox

Location

Phone

Runtime – Экран

Кто с нами?UXNext + Microsoft BizSpark

http://bizspark.comhttp://uxnext.org.ua

Design review для лучших проектов

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

www.imaginecup.com

[email protected]: nikiluk

?

mailto:[email protected]

METRO. Дизайн для Windows Phone

Design

Transcript of METRO. Дизайн для Windows Phone