Иконки и графика для Windows 8 и Windows Phone 8

Разговор пойдет о том, какие иконки нужны при разработке мобильного приложения для Windows 8.1 и Windows Phone.

Microsoft предлагает 2 способа масштабировать графику.

Растровая графика

Такая графика будет по разному смотреться на разных устройствах и на устройствах с разным разрешением экрана. Платформа предлагает заложить 4 варианта масштаба для каждого рисунка (в то время как на iOS нужно только 2, а для Android целых 5!).

Удивительно то, что система сама будет загружать необходимый файл в зависимости от имени ресурса. И правил таких довольно много. Следует выставить язык приложения по умолчанию и можно загружать разные ресурсы для разных региональных настроек системы.

Например ссылка Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png указывает множество настроек вплоть до региональных настроек и настройки цветовой схемы, а путь в приложении указывается один для всех — Images/logo.png

Как уже можно догадаться: настройки графики разделяются точкой а значения тире. Так различные размеры рисунков для региона en-us будут иметь вид:

Поддерживаемые настройки

Формат директорий

<Any BCP-47 language tag>
lang-<Any BCP-47 language tag>
language-<Any BCP-47 language tag>

Формат файлов

lang-<Any BCP-47 language tag>
language-<Any BCP-47 language tag>

Примеры

es-MX/resources.resw
language-de-DE/UI.resw
images/logo.lang-fr-FR.png

Масштаб

Имеет 4 озвученных ранее значения:

scale-80
scale-100
scale-140
scale-180

Контраст

Контраст в системе Windows (и Windows Phone) задается в настройка, а приложение может эти данные использовать.

contrast-standard
contrast-high
contrast-black
contrast-white

Домашний регион

homeregion-us
homeregion-jp
homeregion-419
homeregion-код_региона

Right To Left

Для поддержки RTL введен дополнительный параметр:

layoutdir-RTL
layoutdir-LTR
layoutdir-TTBRTL
layoutdir-TTBLTR

Есть еще несколько других параметров и подробнее можно прочитать в документации в теме How to name resources using qualifiers.

Но для иконок такой путь может вылиться в долгие мучительные попытки отладить решение или поиск иконок.

Векторная графика 

Второй способ — использовать векторную графику. Например в редакторе Expression Design можно создавать векторые изображения, а также экспортировать их в xaml код и использовать объект Path.

Отличная новость, что очень много иконок уже сделаны ребятами с сайта Modern UI Icons

Все иконки предоставлены в виде xaml файлов. Содержимое каждого файла это объект Path векторной иконкой. Все файлы начинаются со слова appbar, что не очень удобно для поиска. Но на сайте сделана удобная поисковая строчка (и прямо с сайта можно получить xaml код, не скачивая весь архив).

Иконка "ОК" (или tick в других паках иконок) здесь называется check, выглядит так:

tick icon

И имеет следующий xaml код:

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>

Использование векторной графики при возможности сильно облегчает головную боль с масштабированием иконок и другой графики. В своем решении использую именно этот способ. Об этом в следующий раз.

Комментарии

comments powered by Disqus