1. особенности и возможности
проектирования
пользовательского интерфейса
приложений под Windows Phone 7
Владимир Колесников
Microsoft
vladkol@microsoft.com, @vladkol
4. легкость и простота
• фокус на основных задачах
• меньше ненужных деталей
• свободное пространство
5. движение и скорость
• отзывчивый и живой
• общий системный подход
• внимание к контексту
• чувство размера и глубины
• переходы тоже важны
6. Segoe WP
типографика
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Semibold
• четкий и красивый текст abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
• открытый и понятный
информационный дизайн Segoe WP Light
abcdefghijklmnopqrstuvwxyz1234567890
• чувствительность к толщине, ABCDEFGHIJKLMNOPQRSTUVWXYZ
размеру и балансу текстовых Segoe WP Semilight
элементов abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Black
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
7. контент прежде всего
• приоритет контента, а не оформления
• сокращение визуальных элементов, не
являющихся контентом
• контент — часть UI
• прямое взаимодействие с контентом
8. инфографика vs. иконография
традиционный подход
• объекты реального мира изображаются в
форме графических метафор
• стремление к реализму
• низкая информационная составляющая
метафор
инфографика в metro
• контент является неотъемлемой частью
вида элементов управления и даже их
поведения
13. навигация неправильно
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность
Login here
14. навигация
• доверие к «железу»
• хабы
• предсказуемость
• правильная мотивация
• интегрированность
селекторы и задачи
15. структура страницы
приоритезация
• не стремитесь запихнуть максимум
информации на минимум экранов
• учитывайте главное и второстепенное
логичность и удобство
• выстраивайте данные логично
• не забывайте о восприятии
• используйте и учитывайте встроенные
элементы управления
25. ui model: страницы
phone application web application
страницы приложения, URI Страницы сайта, URL
shell frame web browser
sessions and back stack history and tabs
27. панель приложения
• Панель приложения не
обязательна.
• до 4х иконок (48х48, ч/б)
• остальные пункты в
дополнительном меню
• кнопки должны
соответствовать
контексту приложения
36. типичные ошибки в панораме
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