konstantin kichinsky, windows phone colors 43
TRANSCRIPT
Устройства Темы и акценты Элементы интерфейса Доступность
Устройства Темы и акценты Элементы интерфейса Доступность
oem.windowsphone.com
Дисплей
All displays shall support a minimum of
16 bits of color per pixel (5 red, 6 green, 5 blue)
”
BANDING
Полезная ссылка:
http://blogs.msdn.com/b/kichinsky/archive/2012/01/26/windows-
phone-apps-design-practice-gradients-and-16bits.aspx
PNG
JPEG 100% JPEG 80% JPEG 50%
ДИЗЕРИНГ
По умолчанию используется 16 бит.
16bit
16bit
Дисплей
All displays shall support a minimum of 16 levels of brightness
”
HSB
Близкие цвета должны быть достаточно далеки. Особенно по яркости.
Цветовые профили
WP8.1
Вы не можете рассчитывать на конкретный уровень
яркости.
Ваши тщательно откалиброванные цвета на реальном устройстве, скорее всего,
будут выглядеть иначе.
Устройства Темы и акценты Элементы интерфейса Доступность
Темная сторона
Светлая сторона
AMOLED & OLED OEMs can choose to display a warning about battery life on the theme screen in Settings if the user selects the light theme on phones with AMOLED or
OLED displays.
This customization is not relevant for other screen types, as there is not a significant power difference between the themes with the light and dark
background.
”
Wikipedia:
One commercial QVGA OLED display consumes 0.3 watts while showing white text on a black background, but more than 0.7
watts showing black text on a white background, while an LCD may consume only
a constant 0.35 watts regardless of what is being shown on screen.
Because the black pixels actually turn off, AMOLED also has contrast ratios that
are significantly better than LCD.
”
Темные темы оформления меньше кушают батарейку
Светлые темы кажутся «светлыми».
В Windows Phone есть две системные темы (темная и светлая)
и куча акцентных цветов …
которые пользователь выбирает на свое усмотрение.
OEM может
добавить еще до
4 цветов
Каждый человек адаптирует устройство под себя.
Хорошо, если приложение
учитывает его выбор.
Но не обязательно…
Устройства Темы и акценты Элементы интерфейса Доступность
Системные элементы управления по умолчанию учитывают темы и акценты
⛐ ATTENTION!
💣 WARNING!
DELETE
OK CANCEL
Живые плитки
🐈 Kitty App
🐈 Kitty App
💎
👶
📞
🐈 Kitty App
💎
👶
📞
🐈 Kitty App
💎
👶
📞
🐈 Kitty App
💎
👶
📞
🐈 Kitty App
💎
👶
📞
🐈 Kitty App
💎
👶
📞
🐈 Kitty App Play with me!
12:08
PhoneBackgroundColor
PhoneForegroundColor
PhoneDisabledColor
PhoneSubtleColor
PhoneAccentColor
PhoneContrastBackgroundColor
PhoneContrastForegroundColor
PhoneChromeColor
PhoneSemitransparentColor
Не забудьте проверить разные сочетания темы и акцентов, даже если вы
сделали свою тему.
Тестирование: устройство или эмулятор Visual Studio или Blend
Светло-желтый текст Коричневый текст Акцентный текст
Светло-желтый текст Коричневый текст Акцентный текст
Устройства Темы и акценты Элементы интерфейса Доступность
8% М 0.5% Ж
дальтоники
Будьте особенно внимательны к вариации красно-зеленого спектра
Контрастность WCAG 2.0
Полезная ссылка:
http://blogs.msdn.com/b/kichinsky/archive/2012/01/30/windows
-phone-design-contrast-and-accessibility.aspx
(L1 + 0.05) / (L2 + 0.05), L1 — относительная яркость наиболее светлого цвета из двух, L2 — относительная яркость наиболее темного цвета из двух.
L = 0.2126 * R + 0.7152 * G + 0.0722 * B, R = (RsRGB <= 0.03928) ? RsRGB/12.92 : ((RsRGB + 0.055)/1.055)2.4 G = (GsRGB <= 0.03928) ? GsRGB/12.92 : ((GsRGB + 0.055)/1.055)2.4 B = (BsRGB <= 0.03928) ? BsRGB/12.92 : ((BsRGB + 0.055)/1.055)2.4 RsRGB = R8bit/256, GsRGB = G8bit/256, BsRGB = B8bit/256
B/W — 21:1 C/C — 1:1 мин
AA — 4.5:1 (3:1 для крупного текста)
лучше
AAA — 7:1 (4.5:1 для крупного текста)
Вы можете добавить в приложение стилевые
ресурсы для поддержки высокой контрастности.
Устройства Темы и акценты Элементы интерфейса Доступность
