Руководство по созданию значков

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

В этой статье вы найдете рекомендации по созданию значков для разных частей приложения в соответствии с основными стилями фреймворка Android 2.x. Эти инструкции помогут вам создать продуманный и удобный для пользователей интерфейс.

В документах ниже приведены инструкции по созданию основных типов значков, используемых в приложениях Android.

Адаптивные значки приложений
Элементы графического интерфейса, которые находятся на главном экране устройства и в меню запуска на телефонах или планшетах с Android 8.0 (API уровня 26) и более поздних версий.
Стандартные значки приложений
Элементы графического интерфейса, которые находятся на главном экране устройства и в меню запуска на телефонах или планшетах с Android 7.1 (API уровня 25) и более ранних версий.
Значки меню
Элементы графического интерфейса, которые появляются, когда пользователь нажимает кнопку меню.
Значки панели действий
Элементы графического интерфейса, расположенные на панели действий.
Значки строки состояния
Элементы графического интерфейса, которые появляются в строке состояния при наличии уведомлений от вашего приложения.
Значки вкладок
Элементы графического интерфейса, которые обозначают отдельные вкладки.
Значки диалоговых окон
Элементы графического интерфейса, расположенные во всплывающих диалоговых окнах, через которые пользователь может взаимодействовать с приложением.
Значки списков
Элементы графического интерфейса, используемые с компонентом ListView для создания прокручиваемого списка объектов, как, например, в приложении "Настройки".

Чтобы создавать значки для приложений Android быстрее, скачайте наш набор шаблонов.

Как использовать набор шаблонов для значков Android

Наша коллекция шаблонов с готовыми стилями и текстурами поможет создать значки, которые будут соответствовать изложенным здесь рекомендациям. Рекомендуем скачать архив перед началом работы.

Шаблоны представлены в формате PSD (Adobe Photoshop). В файлах сохранены слои и параметры оформления, которые используются при создании стандартных значков для платформы Android. Файлы шаблонов можно открыть в любом совместимом графическом редакторе, однако не все программы позволяют работать со слоями и параметрами оформления напрямую.

Чтобы скачать последнюю версию набора шаблонов, нажмите на эту ссылку:

Скачать набор шаблонов для значков Android 4.0 »

Более ранние версии можно найти в разделе загрузок в правом верхнем углу этой страницы.

Создание групп значков для разной плотности пикселей

Операционная система Android используется на самых разных устройствах, поэтому графический интерфейс должен подходить для экранов разных размеров и разрешений. Платформа Android предлагает удобный способ создания значков, которые будут хорошо выглядеть на любом устройстве. Чтобы узнать больше, ознакомьтесь с этой статьей.

Мы рекомендуем создать отдельную группу значков для каждого стандартного значения плотности пикселей. Затем следует поместить эти группы в соответствующие каталоги ресурсов. Во время запуска приложения платформа Android проверит характеристики экрана и загрузит значки из нужного каталога. Подробнее...

Чтобы узнать, как создавать и настраивать группы значков для разной плотности пикселей, воспользуйтесь рекомендациями для дизайнеров.

Рекомендации для дизайнеров

Ниже представлены рекомендации по разработке значков и других графических элементов в Adobe Photoshop. Вы можете использовать любой подобный редактор растровой и векторной графики.

Называйте файлы значков в соответствии со стандартами

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

Тип объекта Префикс Пример
Значки ic_ ic_star.png
Значки приложений ic_launcher ic_launcher_calendar.png
Значки меню и панели действий ic_menu ic_menu_archive.png
Значки строки состояния ic_stat_notify ic_stat_notify_msg.png
Значки вкладок ic_tab ic_tab_recent.png
Значки диалоговых окон ic_dialog ic_dialog_info.png

Это необязательно и остается на ваше усмотрение.

Настройте рабочую область, упорядочив файлы по плотности пикселей

Для каждой плотности пикселей необходимо создать отдельную версию значка. Чтобы не путаться в разных версиях одного файла, рекомендуем создать структуру каталогов с разбивкой объектов по разрешению экрана, как показано ниже.

art/...
        ldpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        mdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        hdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        xhdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png

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

На рисунке ниже показана типичная структура каталогов в приложении.

res/...
        drawable-ldpi/...
            finished_asset.png
        drawable-mdpi/...
            finished_asset.png
        drawable-hdpi/...
            finished_asset.png
        drawable-xhdpi/...
            finished_asset.png

Используйте векторные фигуры

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

К тому же края и углы таких фигур проще встроить в границы пикселей на экранах с низким разрешением.

Начните работу с монтажной области крупного размера

Итак, перед вами стоит задача разработать значки для экранов с разной плотностью пикселей. Для начала вам нужно разработать макет значка в крупном масштабе, используя монтажную область графического редактора. Например, значки приложений в зависимости от параметров экрана имеют ширину 96, 72, 48 или 36 пикселей. Сначала создайте макет значка в монтажной области размером 864 x 864 пикселя. Таким образом, когда вы будете масштабировать значок до нужных размеров, вам будет проще корректировать неточности.

Корректируйте растровые слои при масштабировании

Обратите внимание, что при масштабировании до более высокого разрешения растровые слои изображения, в отличие от векторных, теряют четкость. Например, если вы нарисовали круг диаметром 60 пикселей в растровой графике для плотности экрана mdpi, то для экрана hdpi вам потребуется обновить рисунок круга диаметром 90 пикселей.

Удаляйте лишние метаданные при сохранении изображений

Пакеты инструментов Android SDK автоматически сжимают файлы PNG при создании двоичного файла с приложением. Однако мы все равно рекомендуем удалять ненужные заголовки и метаданные из объектов, чтобы оптимизировать их размер. Для этого можно воспользоваться такими инструментами, как OptiPNG и Pngcrush.

Убедитесь, что копии значка для разной плотности пикселей названы одинаково

Все копии одного и того же объекта, созданные для экранов с разной плотностью пикселей, должны быть названы одинаково. При этом они должны храниться в каталогах, соответствующих той или иной плотности. Таким образом система сможет распознать и загрузить нужный файл в зависимости от характеристик экрана. Проверьте, верно ли распределены объекты по каталогам ресурсов, и убедитесь, что названия файлов не содержат суффиксов, обозначающих плотность пикселей.

Чтобы узнать больше о ресурсах, соответствующих той или иной плотности пикселей, а также о том, как система адаптирует интерфейс к особенностям разных устройств, ознакомьтесь с этой статьей.