Дизайн приложений для WP7. Темы и акценты

Продолжая тему дизайна приложений для Windows Phone, сегодня мы поговорим о темах и акцентах.

Темы и акценты — это важная составляющая платформы Windows Phone, вместе с тайлами, социальностью и другими элементами делающая возможным персонализацию телефона под конкретного человека, его настроение и личные предпочтения.

Скажем, сегодня у меня светлое весеннее настроение — и мой Windows Phone сегодня в белом с лаймовым акцентом. Или, скажем, вы девушка, сегодня вы в красном с темными оттенками — таким же может быть и ваш телефон — темным с красном акцентом.

Отображение цвета на экране монитора и экране телефона может отличаться.

Эта персонализация темой и акцентом является сквозной для всей платформы: от цвета тайлов до цвета системных контролов и ссылок. Стоит вам сменить цвет с magenta на teal — и многие элементы внутри Windows Phone подстроятся под ваше предпочтение. Это делает платформу живой и адаптивной.

Хозяин телефона может выбрать темную или светлую тему и один из доступных акцентов:

Доступные акценты

Акценты подобраны так, чтобы оставаться контастными при различных сочетаниях темы и акцента. Всего доступно 10 стандартных акцетных цветов:

• Blue — rgb(27,161,226), hex(#FF1BA1E2)
• Brown — rgb(160,80,0), hex(#FFA05000)
• Green — rgb(51,153,51), hex(#FF339933)
• Lime — rgb(162,193,57), hex(#FFA2C139)
• Magenta — rgb(216,0,115), hex(#FFD80073)
• Mango — rgb(240,150,9), hex(#FFF09609)
• Pink — rgb(230,113,184), hex(#FFE671B8)
• Purple — rgb(162,0,255), hex(#FFA200FF)
• Red — rgb(229,20,0), hex(#FFE51400)
• Teal — rgb(0,171,169), hex(#FF00ABA9)

Важно: производитель телефона имеет возможность добавлять дополнительный акцентный цвет, который будет работать внутри вашего приложения наравне с остальными, поэтому не стоит писать код, который будет перебирать только 10 стандартных цветов и далее что-то делать. Наличие дополнительного цвета может привести к нежелательным последствиям, если ваш код об этом не подозревает.

Разработка и дизайн

С точки зрения разработки важно понимать две вещи:

1. Системные контролы автоматически умеют адаптироваться под тему и акцентный цвет, выбранные пользователем.
2. Внутри вашего приложения вы можете ссылаться на текущие системные ресурсы, включая настройки темы и акцента, чтобы использовать их в различных элементах вашего собственного приложения. Например, какие-то элементы инфографики вы можете сделать именно акцентного цвета.

Дизайнеру тоже есть над чем подумать:

1. Никто не обязывает вас использовать в вашем приложении текущую тему и акцентный цвет — это возможность подстроиться под приложение, но не догма и обязанность. Например, если вы посмотрите на офицальное приложение twitter, то независимо от настроек темы и акцента оно всегда выглядит одинаково — #33cсff (он же новомодный цвет твиттера) на белом. Каждый раз это ваше личное решение в поиске баланса между брендбуком или какими-либо другими ограничениями и стремлением к согласованности с персональными предпочтениями пользователя и интергацией в экосистему Windows Phone.
2. Если в дизайне вашего приложения вы начинаете использовать ваши собственные (фиксированные) настройки цвета, то это ваша личная обязанность: убедиться, что при разных настройках темы и акцента приложение остается удобным в работе (например, обеспечен достаточный контраст цвета).

Неудачная отсылка на системные цвета и вообще невнимательное переопределение цветов могут привести к нежелательным последствиям, когда отдельные элементы потеряют контраст и, например, текстовые блоки или надписи на кнопках станут нечитаемыми:

С точки зрения инструментов обратите внимание на два важные возможности, которые вам предоставляет Expression Blend для работы с цветами.

Во-первых, работая с цветом тех или иных элементов, вы легко можете получить доступ к ресурсам приложения через вкладку Brush Resources, используя которые вы можете завязаться на системные цвета, которые динамически будут изменяться в зависимости от настроек пользователя.

Во-вторых, прямо в Expression Blend в режиме дизайна вы можете переключаться между различными темами и акцентами без необходимости запуска эмулятора или загрузки приложения на реальное устройство:

Конечно, тестирование через эмулятор и на физическом устройстве тоже не стоит забывать.

Работа с темами и акцентами из кода

Если вам необходимо определять текущую тему и акцент из кода, например, для динамической генерации каких-то элементов или изменения тех или иных параметров, это также возможно.

Например, если необходимо понять, какая тема используется пользователем в настоящий момент, это можно определить через видимость системных ресурсов приложения:

 // Determine the visibility of the dark background.
Visibility darkBackgroundVisibility = 
    (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];

// Write the theme background value.
if (darkBackgroundVisibility == Visibility.Visible)
{
    currentThemeTB.Text = "background = dark";
}
else
{
    currentThemeTB.Text = "background = light";
}            

Аналогично, можно вытащить текущий акцентный цвет:

 // Determine the accent color.
Color currentAccentColorHex = 
    (Color)Application.Current.Resources["PhoneAccentColor"];

Описание доступных системных ресурсов, можно найти в MSDN в статье Theme Resources for Windows Phone.

Тайлы

Еще одна интересная тема — персонализация тайлов под акцентный цвет. Иконка, используемая в списке приложений, или иконка тайла, выносимого на стартовый экран, — обе могут нарисованы с рассчетом на адаптацию под выбранный пользователем акцент.

Чтобы это сделать, достаточно в нужных местах иконки указать прозрачный цвет (подложка для иконок имеет акцентный цвет):

Экспериментируя с прозрачностью, вы можете добиться разных интересных эффектов:

Резюме

• Используйте тему и акцентные цвета для добавления персональности и интеграции с платформой
• Системные контролы имеют встроенную поддержку тем и акцентов
• Вы можете использовать системные ресурсы, чтобы получить доступ к текущим настройкам цветов
• Если вы изменяете (фиксируете) цвета, тестируйте разные комбинации тем и акцентов
• Тайлы также могут адаптироваться под акцентный цвет

#metrosovet