особенности и возможности

проектирования

пользовательского интерфейса

приложений под Windows Phone 7

Владимир Колесников

Microsoft

vladkol@microsoft.com, @vladkol

metro

легкость и простота,

движение и скорость,

типографика,

контент прежде всего

легкость и простота

• фокус на основных задачах

• меньше ненужных деталей

• свободное пространство

движение и скорость

• отзывчивый и живой

• общий системный подход

• внимание к контексту

• чувство размера и глубины

• переходы тоже важны

типографика

• четкий и красивый текст

• открытый и понятный

информационный дизайн

• чувствительность к толщине,

размеру и балансу текстовых

элементов

Segoe WP abcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Semibold abcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Light abcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Semilight abcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Black abcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

контент прежде всего

• приоритет контента, а не оформления

• сокращение визуальных элементов, не

являющихся контентом

• контент — часть UI

• прямое взаимодействие с контентом

инфографика vs. иконография

традиционный подход • объекты реального мира изображаются в

форме графических метафор

• стремление к реализму

• низкая информационная составляющая метафор

инфографика в metro • контент является неотъемлемой частью

вида элементов управления и даже их поведения

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность Login here

неправильно

навигация

• доверие к «железу»

• хабы

• предсказуемость

• правильная мотивация

• интегрированность

селекторы и задачи

структура страницы

приоритезация • не стремитесь запихнуть максимум

информации на минимум экранов

• учитывайте главное и второстепенное

логичность и удобство • выстраивайте данные логично

• не забывайте о восприятии

• используйте и учитывайте встроенные элементы управления

user experience как слагаемое успеха

смертность приложений

среднее приложение запускают лишь однажды

только 1% установленных мобильных приложений

используют регулярно длительное время

смертность приложений

красивое приложение

интересное приложение

полезное приложение

движение

больше движения

кирпичики metro

phone application страницы приложения, URI

ui model: страницы

web application Страницы сайта, URL

shell frame

sessions and back stack

web browser

history and tabs

декомпозиция

панель приложения

• Панель приложения не обязательна.

• до 4х иконок (48х48, ч/б)

• остальные пункты в дополнительном меню

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

кнопки

• Обычные кнопки

• Кнопки-переключатели (иконка, подпись)

• Диалоговые кнопки (1-2, фиксированный размер)

• Командные кнопки (текстовое объяснение действий)

checkbox и radio button

выбор даты

текст

клавиатура

и многое другое

pivot и panorama

pivot • сфокусирован

• эффективен

• «обычен»

panorama • динамична

• расширяема

• побуждает к изучению

темы

типичные ошибки в панораме

my crowded panorama Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad

minim veniam, quis nostrud

exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat.

Duis aute irure dolor in

reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat

cupidatat non proident, sunt in

culpa qui officia deserunt mollit

anim id est laborumea commodo consequat. Duis aute irure dolor

live tiles

live tiles и темы

notification live tiles

практика

create.msdn.com

вопросы

Q&A

Владимир Колесников

Microsoft

vladkol@microsoft.com, @vladkol