ëизайн для Windows Phonedownload.microsoft.com/documents/rus/ms-start/design...Project...
89
Transcript of ëизайн для Windows Phonedownload.microsoft.com/documents/rus/ms-start/design...Project...
Дизайн для Windows Phone Константин Кичинский [email protected] @kichinsky blogs.msdn.com/kichinsky
Windows Phone
0. Metro-дизайн
Windows Phone
Metro-дизайн в Microsoft
Windows
Media Center
Zune HD
Xbox 360
Windows Phone
Metro-дизайн в Microsoft
Windows
Media Center
Zune HD
Xbox 360
Windows 8
Windows Phone
Чего хочет каждый из нас?
5
Работать напрямую
с контентом.
Быстро понимать,
что где находится.
Чтобы это было
живым!
Windows Phone
И чтобы это было
моим личным!
Быстро понимать,
что где находится.
Чтобы это было
живым!
Чего хочет каждый из нас?
6
Работать напрямую
с контентом.
Windows Phone
Метро-принципы
12
мастерство в деталях
быстрый и подвижный
по-настоящему цифровой
больше меньшими средствами
выигрывай с платформой
Windows Phone
1. Мастерство
в деталях
13
Windows Phone
Мастерство в деталях
14
Оттачивайте детали
Делайте безопасным и надежным
Баланс, симметрия, иерархия
Привязывайтесь к сетке
Windows Phone
Вкусные детали
Windows Phone
Пример. Gismeteo
16
Windows Phone
Оттачивание деталей
#metrolynch: Translate this
Windows Phone
Оттачивание деталей
#metrolynch: Radar
Windows Phone
Оттачивание деталей
#metrolynch: Forismatic
Windows Phone
Оттачивание деталей
#metrolynch: Vocabular
Windows Phone
Сетка
Windows Phone
Используйте сетку при дизайне
Windows Phone
Выравнивания!
23
#metrolynch: Forismatic
Windows Phone
Выравнивания
24
#metrolynch: Translate this
Windows Phone
Привязка к сетке
25
#metrolynch: Vocabular
Windows Phone
2. Быстрый и
подвижный
26
Windows Phone
Быстрый и подвижный
27
Жизнь подвижна Наслаждайтесь движением Проектируйте для пальцев Интуитивное взаимодействие Отзывчивый и готовый Затягивающий и убедительный
Windows Phone
Проектирование для пальцев
28
1/25
1/100
1/1000
Windows Phone
Дизайн для пальцев
29
Минимальный шрифт — 15 pt.
Рекомендуемый размер цели > 9мм
Минимальный размер цели = 7мм
Минимальное расстояние между элементами = 2мм
Windows Phone
Отзывчивость элементов
Windows Phone
Задача и незадача дизайна
Не должно быть цели наполнить все свободное пространство.
Задача — побудить пользователя что-то сделать.
Windows Phone
Приглашение
к исследованию.
Графика и свободное пространство
32
Точка притяжения
внимания.
Подключение
воображения.
Windows Phone
3. По-настоящему
цифровой
33
Windows Phone
По-настоящему цифровой
34
Соединенный с облаком
Динамичный и живой
Красивая типографика
Смелые яркие цвета
Движение
Windows Phone
Пример. gMaps
Windows Phone
Intuition
Windows Phone
Intuition
Windows Phone
Intuition
Windows Phone
Типографика и шрифты
39
четкий и красивый
открытый и понятный
информационный дизайн
толщина, размер, разрядка, регистр — найдите баланс
Windows Phone
Использование шрифтовых атрибутов
40
Разрядка
Регистр
Толщина
Windows Phone
Управление текстом
41
#metrolynch: IT Happens
Windows Phone
Привязка к сетке
42
#metrolynch: Vocabular
Windows Phone
Должен ли я использовать только Segoe?
Windows Phone
Живой и в движении
44
живая система
отзывчивость
переходы важны
размер и глубина
Windows Phone
Пример: Наклон / tilt
при выделении
нет изменений цвета или состояния, только наклон
Windows Phone
Windows Phone
4. Больше меньшими
средствами
47
Windows Phone
Больше меньшими средствами
48
Будьте в чем-то совершенны
Сфокусированный и прямой
Контент прежде всего
Внушает доверие
Windows Phone
»
«
by Susan Weinschenk
49
People will do the least amount of work possible to get a task done. It is better to show people a little bit of information and let them choose if they want more details. The fancy term for this is progressive disclosure.
The Psychologist’s View of UX Design
Windows Phone
На что можно нажать? На все! (ну или
почти на все)
50
Windows Phone
Инфографика
Windows Phone
3 кнопки снизу
52
Назад + долгое «назад»
Старт + долгое «старт»
Поиск в Bing и приложениях
Windows Phone
5. Выигрывай
с платформой
53
Windows Phone
Выигрывай с платформой
54
Используйте встроенную модель UI
Сокращайте избыточное
Интергрируйтесь для полных сцераниев
Используйте инструменты и шаблоны
Windows Phone
Не делайте так:
Windows Phone
Заставьте metro работать на вас
Windows Phone
Pivot и Panorama
57
pivot эффективный сфокусировный привычный
panorama расширяемая динамичная для исследования
Windows Phone
Pivot – Flickr
4 of 8
Windows Phone
Pivot – foursquare
4 из 8
7 из 8
Windows Phone
Panorama – Music + Video Hub
Windows Phone
Panorama – Facebook
Windows Phone
Темы
Windows Phone
Акценты
Windows Phone
Акценты
64
Windows Phone
Акценты
65
Windows Phone
Персонализация через тему и акцент
66
Windows Phone
Персонализация через тему и акцент
67
Windows Phone
Если меняете цвета, следите за ними!
Windows Phone
Когда поменяли не все цвета
69
#metrolynch: New Year Gifts
Windows Phone
Помните о контрастности
70
Windows Phone
Контрастность
71
#metrolynch: Forismatic
Windows Phone
Помните о контрастности
72
Windows Phone
Персонализация цвета тайла
73
Windows Phone
Персонализация цвета тайла
74
Windows Phone
Тайлы с темой: прозрачность + акцент
75
Windows Phone
Нотификации через тайлы
76
Windows Phone
Тайлы и иконки приложения
77
#metrolynch: Phone dialer
Windows Phone
Панель приложения
78
до 4х иконок
48х48, ч/б и без круга
остальные пункты в дополнительном меню
помните о текущем контексте приложения
Windows Phone
Еще интеграция
79
Поиск
Контакты
Задачи (task) — отправить письмо, смс, поделиться с друзьями и т.п.
Windows Phone
Важность интеграции
80
Интеграция — это верный способ сделать ваше приложение не еще одним приложением, а частью системы.
Windows Phone
6. От идеи
к реализации
81
Windows Phone
От идеи к реализации
82
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
Windows Phone 83
Windows Phone
Создание историй
знайте своего пользователя
сделайте это персональным
релевантный контент
поддерживайте актуальность
Windows Phone 85
Windows Phone
Рисуйте
информа-
ционные
схемы! 86
Windows Phone
Информационная карта
87
Windows Phone
Информационная карта
88
Windows Phone
Информационная карта
89
Windows Phone 90
Windows Phone 91
Windows Phone
Визуальный дизайн
92
Windows Phone
metro = мастерство в деталях +
быстрый и подвижный +
по-настоящему цифровой +
больше меньшими средствами +
выигрывай с платформой
93
