Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Konstantin Kichinsky, Windows phone colors 43

362 views

Published on

Published in: Technology
  • Be the first to comment

Konstantin Kichinsky, Windows phone colors 43

  1. 1. Что нужно знать про цвет в Windows Phone? Константин Кичинский konkich@microsoft.com @kichinsky
  2. 2. Устройства Темы и акценты Элементы интерфейса Доступность
  3. 3. Устройства Темы и акценты Элементы интерфейса Доступность
  4. 4. oem.windowsphone.com
  5. 5. Дисплей All displays shall support a minimum of 16 bits of color per pixel (5 red, 6 green, 5 blue) ”
  6. 6. BANDING Полезная ссылка: http://blogs.msdn.com/b/kichinsky/archive/2012/01/26/windows- phone-apps-design-practice-gradients-and-16bits.aspx
  7. 7. PNG
  8. 8. JPEG 100% JPEG 80% JPEG 50%
  9. 9. ДИЗЕРИНГ
  10. 10. По умолчанию используется 16 бит.
  11. 11. 16bit
  12. 12. 16bit
  13. 13. Дисплей All displays shall support a minimum of 16 levels of brightness ”
  14. 14. HSB
  15. 15. Близкие цвета должны быть достаточно далеки. Особенно по яркости.
  16. 16. Цветовые профили WP8.1
  17. 17. Вы не можете рассчитывать на конкретный уровень яркости. Ваши тщательно откалиброванные цвета на реальном устройстве, скорее всего, будут выглядеть иначе.
  18. 18. Устройства Темы и акценты Элементы интерфейса Доступность
  19. 19. Темная сторона Светлая сторона
  20. 20. 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. ”
  21. 21. 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. ”
  22. 22. Темные темы оформления меньше кушают батарейку Светлые темы кажутся «светлыми».
  23. 23. В Windows Phone есть две системные темы (темная и светлая) и куча акцентных цветов … которые пользователь выбирает на свое усмотрение.
  24. 24. OEM может добавить еще до 4 цветов
  25. 25. Каждый человек адаптирует устройство под себя. Хорошо, если приложение учитывает его выбор. Но не обязательно…
  26. 26. Устройства Темы и акценты Элементы интерфейса Доступность
  27. 27. Системные элементы управления по умолчанию учитывают темы и акценты
  28. 28. ⛐ ATTENTION! 💣 WARNING! DELETE OK CANCEL
  29. 29. Живые плитки
  30. 30. 🐈 Kitty App
  31. 31. 🐈 Kitty App 💎 👶 📞
  32. 32. 🐈 Kitty App 💎 👶 📞
  33. 33. 🐈 Kitty App 💎 👶 📞
  34. 34. 🐈 Kitty App 💎 👶 📞
  35. 35. 🐈 Kitty App 💎 👶 📞
  36. 36. 🐈 Kitty App 💎 👶 📞 🐈 Kitty App Play with me! 12:08
  37. 37. PhoneBackgroundColor PhoneForegroundColor PhoneDisabledColor PhoneSubtleColor PhoneAccentColor PhoneContrastBackgroundColor PhoneContrastForegroundColor PhoneChromeColor PhoneSemitransparentColor
  38. 38. Не забудьте проверить разные сочетания темы и акцентов, даже если вы сделали свою тему. Тестирование: устройство или эмулятор Visual Studio или Blend
  39. 39. Светло-желтый текст Коричневый текст Акцентный текст Светло-желтый текст Коричневый текст Акцентный текст
  40. 40. Устройства Темы и акценты Элементы интерфейса Доступность
  41. 41. 8% М 0.5% Ж дальтоники
  42. 42. Будьте особенно внимательны к вариации красно-зеленого спектра
  43. 43. Контрастность WCAG 2.0 Полезная ссылка: http://blogs.msdn.com/b/kichinsky/archive/2012/01/30/windows -phone-design-contrast-and-accessibility.aspx
  44. 44. (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
  45. 45. B/W — 21:1 C/C — 1:1 мин AA — 4.5:1 (3:1 для крупного текста) лучше AAA — 7:1 (4.5:1 для крупного текста)
  46. 46. Вы можете добавить в приложение стилевые ресурсы для поддержки высокой контрастности.
  47. 47. Устройства Темы и акценты Элементы интерфейса Доступность
  48. 48. Q Константин Кичинский konkich@microsoft.com @kichinsky

×