UXPUB

UXPUB - спільнота з 3,504 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Важное обновление гайдлайнов для иконок Google Play
Редакція
Редакція

Опубліковано

Важное обновление гайдлайнов для иконок Google Play

Google Play внедряет новую систему иконок, которая позволяет лучше приспособить разнообразные графические материалы разработчиков к различным макетам интерфейса, форм-факторам и устройствам, а также обеспечить согласованность и более чистый внешний вид в Google Play. Унифицированные формы визуально более привлекательны и легче усваиваются. Они помогают пользователям сосредоточиться на иллюстрациях, а не на форме. Они устраняют проблемы с выравниванием для лучшего представления окружающей информации, такой как заголовок, рейтинг и цена. [caption id="attachment_46077" align="aligncenter" width="720"] Freeform (произвольная форма)– оригинальный формат[/caption] [caption id="attachment_46078" align="aligncenter" width="720"] Uniformed (унифицированный) – новый формат[/caption] В этой статье описаны рекомендации, которые необходимо соблюдать при создании ресурсов для размещения приложения в Google Play. Например, поскольку Google Play динамически отображает закругленные углы и тени для иконок приложений, их следует исключить из исходных файлов. Важное замечание: Если вы хотите узнать больше о создании APK launcher icons, которые отличаются от значков Google Play, описанных в этой статье, см. ресурсы ниже:

Следуйте этим рекомендациям по иконкам APK, чтобы узнать, как создавать адаптивные иконки лончера, представленные в Android 8.0 (уровень API 26).

Ознакомьтесь с принципами Material Design для иконок продуктов, включая рекомендации по дизайну иконок, формам, спецификациям и обработке.

Создание ресурсов

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

Атрибуты

Картинка иконки может заполнить все пространство или вы можете создавать и размещать в сетке ключевых линий такие элементы, как логотипы. Размещая иллюстрацию, рекомендуется использовать ключевые линии. Убедитесь, что ваши ресурсы соответствуют следующим характеристикам:

  • Окончательный размер: 512px x 512px
  • Формат: 32-bit PNG
  • Цветовое пространство: sRGB
  • Максимальный размер файла: 1024KB
  • Форма: Квадрат – Google Play динамически применяет маску. Радиус будет эквивалентен 20% размера иконки.
  • Тень: Отсутствует – Google Play динамически обрабатывает тени. Смотрите раздел «Тени» ниже.

[caption id="attachment_46079" align="aligncenter" width="720"] Общий размер иконки[/caption] [caption id="attachment_46080" align="aligncenter" width="720"] Ключевые линии иконки продукта[/caption] После загрузки актива Google Play динамически применяет маску с закругленными углами и тень для обеспечения согласованности всех иконок приложений / игр. [caption id="attachment_46081" align="aligncenter" width="1440"] Слева – ваша новая иконка. На следующих трех изображениях справа показана динамическая обработка иконки в Google Play[/caption]

Определение размеров

Используйте все пространство активов в качестве фона при работе с иконками. Используйте ключевые линии в качестве руководства для размещения элементов (например, логотипов). [caption id="attachment_46082" align="aligncenter" width="720"] Ваша иконка без полей (финальный актив)[/caption] [caption id="attachment_46083" align="aligncenter" width="720"] Конечный результат с тенями и закругленными углами, динамически применяемыми в Google Play[/caption] Не заставляйте свой логотип заполнять все пространство актива. Вместо этого используйте сетку ключевых линий. Не делайте. Не втискивайте иллюстрацию в иконку без полей Делайте. Вместо этого разместите иконку произвольной формы на ключевых линиях Иллюстрация обычно хорошо работает, как иконка без полей. Не делайте. Не уменьшайте изображение до ключевых линий. Делайте. Используйте все пространство актива, чтобы ваше изображение занимало всю иконку

Тени

Google Play будет динамически добавлять тень вокруг иконки после загрузки. При добавлении теней в изображение иконки учитывайте согласованность с платформой Android, следуя рекомендациям Google Material. Не делайте. Не добавляйте тени к финальной версии вашей иконки Делайте. Вы можете создавать тени и освещение в пределах иллюстрации

Радиус закругления

Google Play динамически применяет радиус закругления угла. Это обеспечивает согласованность при изменении размера иконки в разных макетах интерфейса. Радиус будет эквивалентен 20% размера иконки. Не делайте. Не закругляйте края финальной версии вашего актива Делайте. Заполните весь свой актив изображением, когда это возможно

Бейджи (наклейки)

Встроенные бейджи убираются из самой иллюстрации и плохо масштабируются вместе с иконкой Внимание. Избегайте сообщений о рекламных акциях на самом изображении Внимание. Избегайте использования брендинговых наклеек

Адаптация бренда

Если фигуры являются важной частью логотипа, не делайте иллюстрацию без полей. Вместо этого поместите ее в новую сетку ключевых линий. [caption id="attachment_46094" align="aligncenter" width="1440"] Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play[/caption] Если возможно, выберите цвет фона для вашей иконки, соответствующий вашему бренду с непрозрачностью 100%. Прозрачные активы будут отображать цвет фона пользовательского интерфейса Google Play. [caption id="attachment_46096" align="aligncenter" width="1440"] Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play[/caption] Если вокруг логотипа нет четкой формы, поместите его на фон без полей. [caption id="attachment_46097" align="aligncenter" width="1440"] Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play[/caption] Если ваша работа достаточно гибкая, попробуйте настроить ее так, чтобы в полной мере использовать размер ресурсов. Если это невозможно, вернитесь к размещению логотипа на сетке ключевых линий. [caption id="attachment_46098" align="aligncenter" width="1440"] Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play[/caption]

Режим совместимости

Исходные ресурсы иконок, которые не были обновлены в соответствии с новыми спецификациями, будут в конечном итоге переведены в «Режим совместимости» и уменьшены на 75% до размера сетки ключевых линий (512 * 0.75 = 384px). Загрузка иконки в соответствии с исходной спецификацией не будет разрешена с мая 2019 года. Ознакомьтесь с более подробной информацией о сроках. [caption id="attachment_46099" align="aligncenter" width="1440"] Исходные иконки будут автоматически преобразованы в активы режима совместимости и уменьшены на 75% до новой сетки ключевых линий[/caption]

Скачайте шаблоны

Для начала скачайте один из предоставленных шаблонов активов:


Перевод статьи developer.android.com

Обговорення (0)