Введение
Вы можете использовать несколько типов иконок в приложениях.
Ваши иконки должны придерживаться спецификации, рассмотренной в этом документе.
Так же необходимо создавать наборы иконок для экранов с высоким, средним и низким разрешением. Создание удобного и гармоничного пользовательского интерфейса повышает ценность всего приложения, выдержанный единый графический стиль делает интерфейс более профессиональным.
Этот документ содержит информацию, которая поможет вам создавать иконки для разных частей пользовательского интерфейса в едином главном стиле, который используется в андроиде версий 2.x.
В документе рассмотрены указания для следующих типов иконок используемых в приложения под андроидом:
Иконка запуска приложения
Графическая иконка представляющее ваше приложение на домашнем экране и в ланчере устройства.
Иконка меню
Графический элемент размещаемый в меню, которое показывается при нажатии на клавишу Меню в телефоне.
Иконка в статус-баре.
Иконка, которая используется вашим приложением при нотификации в панели уведомлений.
Иконка вкладки
Иконка вкладки это графический элемент, который представляет индивидуальную в кладку в многозакладочном интерфейсе.
Иконка диалога
Показывается при отображении всплывающего диалога для взаимодействия или оповещения пользователя.
Иконка для списков
Используются в списках для графического представления конкретного пункта списка. Например,- список настроек приложения.
Для того чтобы создание иконок было быстрым вы можете скачать архив с шаблонами иконок андроида (Android Icon Templates Pack).
Использование сборника шаблонов иконок андроида
Это коллекция дизайнов, текстур и эффектных стилей для упрощения создания иконок. Мы рекомендуем скачать его до того как вы начнете рисовать ваши иконки.
Шаблоны представлены в формате адобе фотошоп (.psd), содержащий слои и приемы , которые мы использовании при создании стандартных иконок для андроида. Вы можете загрузить файлы шаблонов в любой совместимый редактор изображений, позволяющий работать со слоями и процедурами, однако возможности могут варьироваться от самого редактора.
Вы можете получить последний архив с шаблонами для версии андроида 2.3 используя эту ссылку:
Для получения предведущих версий архива используйте ссылки:
Представление наборов иконок в зависимости от разрешения
Андроид спроектирован и реализован так, что способен запускаться на различных устройствах с различными размерами экранов и разрешениями. Когда вы проектируете дизайн иконок для вашего приложения, вы должны всегда иметь в виду тот факт, что ваше приложение может быть установлено на разные устройства. Как указано в документе “Поддержка различных экранов”(Supporting Multiple Screens), платформа андроида упрощает для вас подход к созданию иконок, обеспечивающий независимость их отображения от физических размеров экрана и его разрешения.
Рекомендация заключается в создании независимых наборах иконок для каждого из трех общих разрешений экранов, представленных в таблице 1 и размещение их в ресурсах проекта в директориях по разрешениям в вашем проекте.
Когда ваше приложение запускается, андроид получает характеристики устройства, в том числе экрана и загружает иконки из соответствующего набора иконок. Для получения большей информации, как хранятся специфичные для разных разрешений ресурсы в вашем приложении, смотрите директорию ресурсов с квалификаторами размера и разрешения.
Советы о том, как создавать и управлять наборами иконок для различных плотностей, см. в разделе Советы для дизайнеров.
Тип иконки | Стандартное разрешение ( в пикселях) для разных категорий экранов | ||
Маленькое ldpi Ширина x Высота | Среднее mdpi | Высокое hdpi | |
Иконка запуска | 36 x 36 px | 48 x 48 px | 72 x 72 px |
Иконка меню | 36 x 36 px | 48 x 48 px | 72 x 72 px |
Иконка для панели уведомлений(2.3 и позже) | 12 x 19 px (предпочтительнее, ширина может варьироваться) | 16 x 25 px (предпочтительнее, ширина может варьироваться) | 24 x 38 px (предпочтительнее, ширина может варьироваться) |
Иконка для панели уведомлений(2.2 и раньше) | 19 x 19 px | 25 x 25 px | 38 x 38 px |
Иконка для вкладки | 24 x 24 px | 32 x 32 px | 48 x 48 px |
Иконка для диалога | 24 x 24 px | 32 x 32 px | 48 x 48 px |
Иконка для списков | 24 x 24 px | 32 x 32 px | 48 x 48 px |
Таблица 1. Суммарная информация о размерах иконок для каждой из категорий разрешений экранов.
Советы для дизайнеров
Несколько советов для вас при рисовании иконок и других графических ресурсов для вашего приложения. Предполагается, что вы используете адобе фотошоп или аналогичный растовый и векторный редактор.
Именование иконок
Файлы группируются в директориях и сортируются по алфавиту. Это помогает вам использовать общие префиксы для каждого типа иконок. Например:
Тип иконки | Префикс | Пример |
Иконки | 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 |
Имейте в виду что использование общего префикса для иконок, всего лишь рекомендация.
Организуйте рабочее место для систематизации файлов по разным разрешениям.
Поддержка разных разрешений экранов требует от вас создания разных версий одной и той же иконки. Чтобы помочь сохранить несколько копий файлов и легкой навигации среди них, мы рекомендуем создать структуру каталогов в вашем рабочем пространстве, организовав папки для каждого разрешения. Например:
Файлы группируются в директориях и сортируются по алфавиту. Это помогает вам использовать общие префиксы для каждого типа иконок. Например:
assets/...
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
Эта структура получается идентичной структуре, которая используется в проекте для хранение ресурсов приложения, это позволяет вам быстро ориентироваться и быстро добавлять иноки в проект. Разделение по разрешениям так же помогает вам находить любые отклонения в именах файлов по их разрешениям, это важно, потому что разные файлы для разных разрешений экранов должно иметь одно и тоже имя.
Для сравнения, вот структура директорий для обычного приложения:
res/...
drawable-ldpi/...
finished_asset.png
drawable-mdpi/...
finished_asset.png
drawable-hdpi/...
finished_asset.png
Использование векторных изображений там, где это возможно
Многие графические редакторы, такие как адобе фотошоп позволяют вам использовать комбинированные векторные изображения и растовые слои и эффекты. По возможности, используйте векторные изображения, потому что такие изображения могут быть увеличены при необходимости без потери детализации и качества краев.
Использование векторов также позволяет легко выравнивать края и углы при меньших разрешениях.
Начинайте с больших изображений
Потому что вам нужно создать для разных разрешений экранов (таблица 1) лучший старт – использование больших холстов с размерами, кратными целевым размерам иконок. Например, иконка запуска приложения имеет ширину в 72, 48 или 36 пикселей, в зависимости от разрешения. Если вы начнете рисовать её на холсте 864x864 пикселей, то в будущем вы просто и чисто уменьшите иконку до необходимых размерах на финальной стадии рисования.
Также полезно добавлять направляющие линии (также известный как guides) на вашем большом холсте, чтобы обозначить пустые области по краям. Продолжая пример выше, иконка запуска должна быть 60x60 пикселей на холсте размером 72x72 пикселя, т.е. иметь бордюры в 6 пикселей на каждой из сторон, поэтому на холсте в 864x864 пикселей, горизонтальные и вертикальные направляющие линии должны проходить на расстоянии в 72 пикселя с каждого края холста.
При масштабировании, перерисовывайте растовые слои при необходимости
Если вы масштабируете изображение в растовом слое, а не в векторе, слой должен быть перерисован в ручную для повышения четкости в большем разрешении. Например, если вы нарисовали растовый круг 60x60 пикселей для mdpi, вам придется его перерисовать в круг 90x90 для hdpi.
Когда сохраняете картинки, удаляйте по возможности все метаданные.
Для сохранения каждой картинки в минимально возможном размере удаляйте по возможности любые заголовки из файла, такие как Adobe Fireworks metadata или Adobe Photoshop headers. Для удаление Photoshop header проделайте следующие шаги:
В меню File, выбирайте пункт Save for Web & Devices command. Откроется панель, установите в выпадающем списке "PNG-24", и установите галочку прозрачности(Transparency box) если ваше изображение использует прозрачность. Нажмите сохранить. Так же рекомендуется использовать утилиту для оптимизации размера файла PNG, такую как OptiPNG или Pngcrush.
Убедитесь, что соответствующие файлы для разных разрешений экранов используют одинаковые имена.
Имя иконки для каждого разрешения должно быть одинаковое, но каждый файл должен хранится в соответственном каталоге ресурсов. Это правило обеспечит системе возможность поиска и загрузки подходящего ресурса для текущей конфигурации экрана. По этой причине, убедитесь, что набор иконок в каждом каталоге согласован и что файлы не используют суффиксы разрешений.
Дополнительные сведения о разрешениях и их влияния на ресурсы, а так же как система использует их для различных устройств, см. в разделе Поддержка нескольких экранов.
Перевод, официального руководства
Комментариев нет:
Отправить комментарий