Дизайн приложений для windows phone
Post on 19-May-2015
14.728 Views
Preview:
DESCRIPTION
TRANSCRIPT
Дизайн приложений для Windows Phone
Константин Кичинский konkich@microsoft.com @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
Чего хочет каждый из нас?
Работать напрямую
с контентом.
Быстро понимать,
что где находится.
Чтобы это было
живым!
http://cinemagraphs.com
Windows Phone
И чтобы это было
моим личным!
Чего хочет каждый из нас?
Работать напрямую
с контентом.
Быстро понимать,
что где находится.
Чтобы это было
живым!
http://cinemagraphs.com
Windows Phone
Windows Phone
Windows Phone
Windows Phone
Источники вдохновения
Modern Design – Bauhaus Оставьте самую суть
International Typographic Style Чистый, честный и красивый
Motion Design – Cinematography Добавьте жизни Kinetic Typography Catch Me if You Can
Windows Phone
10 советов про Metro-дизайн
Windows Phone
1. Изучите принципы
12
Windows Phone
Метро-принципы
13
мастерство в деталях
быстрый и подвижный
по-настоящему цифровой
больше меньшими средствами
выигрывай с платформой
Windows Phone
2. Держите фокус
14
Windows Phone
Мое приложение самое лучшее в своей категории для _____________________.
15
Windows Phone
Контент прежде всего
Приоритет контента
Контент — часть UI, контент и есть UI
Прямое взаимодействие с контентом
Windows Phone
3. Планируйте
сценарии
17
Windows Phone
Мобильные сценарии
Карманное личное устройство
Разорванный сценарий Время
Пространство
Условия
Windows Phone
чем он
занят?
19
Windows Phone
Создавайте истории
20
Знайте своего пользователя Зачем ему ваше приложение?
Когда и для чего он им будет пользоваться?
Персонализация, актуальность, релевантность
Windows Phone
»
«
by Susan Weinschenk
21
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
4. Продумайте навигацию
22
Windows Phone
Информационная карта
Windows Phone
Информационная карта
Windows Phone
Рисуйте
информа-
ционные
схемы! 25
Windows Phone
Панорама: КиноПоиск
26
Windows Phone
Панорама: Перекресток
27
Windows Phone
Пивот
28
Windows Phone
Пивот
29
Windows Phone
Не делайте так:
30
Мертвая зона для
прокрутки панорамы
Windows Phone
А вот это интересно:
31
Windows Phone
Еще интересная вариация:
32
Windows Phone
Панель приложения
33
1-4 кнопки + меню
Что выносить контекстные действия
глобальные действия
настройки, о приложении, ... в меню
Windows Phone
Панель приложения
34
Windows Phone
5. Используйте кнопку «назад»
35
Windows Phone
Windows Phone
Информационная карта
Windows Phone
Циклы
38
Windows Phone
Пример:
39
Windows Phone
6. Помните о персональности
40
Windows Phone
Телефон – это личное устройство
Аккаунт пользователя
Место (геолокация)
Настройки пользователя
Windows Phone
космос,
космос…
как слы…
Gro
zz. @
flick
r
Windows Phone
контакт?
Liq
uid
skyart
s @
flick
r
Windows Phone
Плитки – они...
44
...как ключи в прихожей, билет в театр на полке и любимая книга сверху стопки.
...как любимая кружка, любимые тапочки и зубная щетка любимого цвета.
Windows Phone
Тема и акцент
45
Windows Phone
Тема и акцент
46
Windows Phone
Стартовый экран
47
Тайлы выглядят «непонятно», как непонятна личность человека-хозяина.
Покажите свои тайлы психиатру — и он скажет, чем вы больны!
Windows Phone
Темы и акценты
48
Windows Phone
Акценты
49
Windows Phone
Акценты
50
Windows Phone
Меняйте цвета осторожно!
Windows Phone
Персонализация цвета тайла
52
Windows Phone
Персонализация цвета тайла
53
Windows Phone
7. Делайте удобным и доступным
54
Windows Phone
Разные системы ввода требуют
разных решений в интерфейсе
55
? > Command output
> more command more output
Windows Phone
Проектирование для пальцев
56
1/25
1/100
1/1000
Windows Phone
Дизайн для пальцев
57
Визуальный стиль составляет 60-100% от обласки касания
Отзывчивость элементов при касании
Windows Phone
Важность
обратной
связи
58
Windows Phone
Отзывчивость элементов
Windows Phone
Жесты
60
Одиночные Tap, Double Tap
Pan, Flick
Touch and Hold
Множественные Pinch and Stretch
Windows Phone
Помните о контрастности
61
Windows Phone
Пример. Текст и фон
62
Windows Phone
Пример. Текст и изображение
63
Windows Phone
8. Используйте сетку
64
Windows Phone
Сетка
Windows Phone
Используйте сетку при дизайне
Windows Phone
Размер шрифта и сетка
67
Windows Phone
Шрифтовые атрибуты
68
Разрядка
Регистр
Толщина
Windows Phone
9. Восстанавливайтесь
69
Windows Phone
Жизненный цикл
События об изменении статуса
Нужно сохранить свое состояние
Пользователь не должен замечать, что работа приложения прерывалась
Windows Phone
10. Вдохните жизнь
71
Windows Phone
Живой и в движении
72
живая система
отзывчивость
переходы важны
размер и глубина
Windows Phone
Windows Phone
Нотификации через тайлы
74
Windows Phone 75
Windows Phone
Итоги
76
Windows Phone
10 советов про Metro-дизайн
1. Изучите принципы
2. Держите фокус
3. Планируйте сценарии
4. Продумайте навигацию
5. Используйте кнопку «назад»
Windows Phone
10 советов про Metro-дизайн
6. Помните о персональности
7. Делайте удобным и доступным
8. Используйте сетку
9. Восстанавливайтесь
10. Вдохните жизнь
Windows Phone
metro = мастерство в деталях +
быстрый и подвижный +
по-настоящему цифровой +
больше меньшими средствами +
выигрывай с платформой
79
Windows Phone
Ресурсы
Windows Phone
Полезные ресурсы
http://aka.ms/wpmetro
Windows Phone
13-14 июля http://aka.ms/metroschool
Спасибо!
Константин Кичинский konkich@microsoft.com @kichinsky | blogs.msdn.com/kichinsky
top related