Как создать иконки для приложений на Android и iOS

Иконка приложения для Android

1. Разрешение экранов устройств

Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.

Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).

2. Категории DPI

• Low DPI (LDPI) = 120DPI
• Medium DPI (MDPI) = 160DPI
• High DPI (HDPI) = 240DPI (Nexus S, SGS2)
• Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
• Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)

Размер и формат иконок запуска приложения (launcher icon) для Android

Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.

Главное:

Иконка запуска приложения должна быть 32-битной, в формате PNGs с альфа-каналом (с прозрачным фоном).

Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).

Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

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

Иконки приложения для публикации на Google Play

Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.

Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

Раздел “Рекомендуемые”

В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения. 

Требования к иконке в разделе «Рекомендуемые» :

• JPEG или 24-битный PNG (без альфа-канала)
• 1024 х 500 пикселей

Расположение

Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».

Советы

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

Цели иконки приложения

У иконки приложения есть 3 основных цели:

1. Продвижение бренда, рассказ о цели приложения.
2. Помощь пользователю в поиске приложения в Google Play.  
3. Функция запуска.

Продвижение бренда

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

Образцы иконок приложений.

Помогите пользователю найти приложение в Google Play

Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки — однозначный сигнал, о том, что Ваше приложение такого же высокого качества.

Для разработки иконки приложения лучше обратиться к дизайнеру.

Правила дизайна иконки для Android

• Смотрится детально и четко в небольшом размере.
• Сочетается с любым фоном.
•  Освещается верхней подсветкой.  
• Может быть уникальной формы.
• Не является обрезанным вариантом большего изображения.
• Имеет одинаковый вес с другими иконками.

Для 3D-иконки:

• Перспектива не противоречит другим иконкам.
• Располагается ее по ходу движения.
• Имеет небольшую глубину.

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

Правильно и неправильно

Иконка для приложения на iOS

Размеры 

У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.

Устройство или контекст

Размер иконки

iPhone 6s Plus и выше, iPhone 6 Plus и выше

180x180px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

120x120px

iPad Pro

167x167px

iPad, iPad mini

152x152px

App Store

1024x1024px

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

Также маленькие иконки нужны для показа:

• в поиске Spotlight,
• в приложении настроек смартфона.

Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.

Устройство

Размер иконок 
в поиске Spotlight

Размер иконки настроек

iPhone 6s Plus и выше, 
iPhone 6 Plus и выше

120x120px

87x87px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

80x80px

58x58px

iPad Pro, iPad, iPad mini

80x80px

58x58px

Внимание:

не добавляйте к иконке настроек наложение или границу. iOS автоматически добавляет отступ на 1 пиксель ко всем иконкам, чтобы они хорошо смотрелись на белом фоне в параметрах настройки.

Правила дизайна иконки для iOS:

Подкупающая простота

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

Четкий фокус

Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

Никто не будет анализировать иконку, чтобы понять ее значение.

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

Без прозрачности, простой фон

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

Без надписей

Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.

Без фото, скриншотов и элементов интерфейса

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

Без точных копий продуктов Apple

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

Не помещайте повсюду в интерфейсе иконку приложения

Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.

Протестируйте иконку на разных обоях

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

Сохраняйте углы иконки квадратными

Система округляет углы иконки автоматически.

Вот и все! Желаем удачи и много красивых иконок для ваших приложений.

Выбираем правильный размер и формат иконок

Для каждой операционной системы существуют свои стандартные размеры иконок. Кликните на названии операционной системы, чтобы прокрутить страницу вниз к интересующему разделу.

Размеры иконок для Windows Vista, Windows 7 и Windows 8

Иконки приложений и иконки Панели управления

Иконки должны быть в формате . ico.
Полный набор должен включать следующие размеры:

• 16×16
• 32×32
• 48×48
• 256×256

Иконки для Windows 8 (Metro Design)

• Иконка приложения 30х30, 50×50, 150×150
• Иконки панели инструментов 26х26

Панель инструментов

Необходимые размеры: 16×16, 24×24, 32×32.
Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

Диалоговые окна и помощники

Необходимые размеры: 32×32 и 48×48

Размеры иконок для Mac OS X

Иконка приложения

Если вы хотите быть уверены, что ваша иконка будет смотреться одинаково хорошо на экранах любого разрешения, необходимо создать ее в следующих размерах:

• 1024×1024
• 512×512
• 256×256
• 128×128
• 64×64
• 32×32
• 16×16

Панели инструментов

оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

• 32×32
• 32×32@2x (64×64)

Сохраняйте иконки в формате PNG.

Боковое меню

Создавайте иконки в трех размерах:

• 16×16
• 18×18
• 32×32 пиксела (если используете PDF)

Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры:

• 16×16
• 16×16@2x
• 18×18
• 18×18@2x
• 32×32
• 32×32@2x

Иконки для Linux

Размеры иконок согласно Руководству GNOME.

В Linux используются трехмерные иконки.

Жирным выделен основной размер для каждого типа иконок.

iOS 6

iPhone и iPod Touch

iPad

iOS 7

iPhone и iPod Touch

iPad

Android

Иконка приложения

Панель действий

Windows Phone

Минуточку внимания: советуем брать плоские иконки в нашем новом проекте Icons8. Их 35000 и ежедневно появляются новые.

Иконка приложения

Иконки для интернет магазина Windows

Значки приложений — Основы — Руководство по пользовательскому интерфейсу — Дизайн

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

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

Лучшие практики

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

Создайте дизайн, который хорошо работает на нескольких платформах, чтобы он чувствовал себя как дома на каждой из них. Если ваше приложение или игра работает более чем на одной платформе, используйте одинаковое изображение и цветовую палитру для всех значков, отображая их в стиле, подходящем для каждой платформы. Например, в iOS и watchOS значок приложения «Почта» использует упрощенный графический стиль для изображения белого конверта на синем фоне; macOS использует аналогичный синий фон, добавляя глубину и детализацию конверту, придавая ему реалистичный вес и текстуру.

Включайте текст только в том случае, если он является неотъемлемой частью вашего опыта или бренда. Текст в значках часто слишком мелкий, чтобы его можно было легко прочитать, из-за этого значок может казаться загроможденным, и он не поддерживает специальные возможности или локализацию. В некоторых контекстах имя приложения отображается рядом со значком, что делает излишним отображение имени внутри него. Хотя использование мнемоники, такой как первая буква имени вашего приложения, может помочь людям распознать ваше приложение или игру, избегайте использования несущественных слов, которые говорят людям, что с ними делать, таких как «Смотреть» или «Играть», или контекстно-зависимых терминов, таких как « Новое» или «Для iOS».

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

При необходимости оптимизируйте значок для конкретных размеров, которые система отображает в таких местах, как результаты поиска Spotlight, настройки и уведомления. Для iOS, iPadOS и watchOS вы можете указать Xcode сгенерировать все размеры из вашего значка App Store размером 1024 × 1024 пикселей или предоставить ресурсы для некоторых или всех размеров значков отдельных размеров. Для macOS и tvOS необходимо указать все размеры. Если вы хотите отказаться от системных версий значка приложения и вместо этого создать свой собственный, убедитесь, что изображение остается четким при уменьшении размера значка. Например, вы можете удалить мелкие детали и ненужные функции, упростив изображение и преувеличив основные функции. Если вам нужно внести такие изменения, делайте их незаметными, чтобы значок вашего приложения оставался визуально согласованным в любом контексте.

На значке приложения Safari размером 512×512 пикселей (слева) для обозначения градусов используется круг делений; версия значка 16×16 пикселей (справа) не включает эту деталь.

Создайте значок в виде квадратного изображения без полей. На большинстве платформ система применяет маску, которая автоматически регулирует углы значков в соответствии с эстетикой платформы. Например, watchOS автоматически применяет круглую маску. Исключением является macOS: хотя система применяет внешний вид прямоугольника со скругленными углами к значку приложения, созданного с помощью Mac Catalyst, вам необходимо создать значок приложения macOS правильной формы. Загружаемые производственные шаблоны, помогающие создавать значки приложений для каждой платформы, см. в разделе Ресурсы Apple Design.

Попробуйте предложить альтернативный значок приложения. В iOS, iPadOS и tvOS люди могут выбрать альтернативную версию значка, которая укрепит их связь с приложением или игрой и улучшит их опыт. Например, спортивное приложение может предлагать разные значки для разных команд. Убедитесь, что каждый альтернативный значок приложения, который вы создаете, тесно связан с вашим контентом и опытом; избегайте создания версии, которую люди могут принять за значок другого приложения. Когда люди хотят переключиться на альтернативный значок, они могут посетить настройки вашего приложения.

ПРИМЕЧАНИЕ Как и в случае с основным значком приложения, альтернативные значки приложений также подлежат проверке приложения и должны соответствовать Руководству по проверке App Store.

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

Особенности платформы

iOS, iPadOS

Не добавляйте наложение или рамку к значку настроек. iOS автоматически добавляет 1-пиксельную обводку ко всем значкам, чтобы они хорошо смотрелись на белом фоне настроек.

macOS

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

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

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

Используйте тень в шаблоне дизайна значков. Шаблон значка приложения включает определяемую системой тень, которая помогает значку вашего приложения координироваться с другими значками macOS.

Рассмотрите возможность использования внутренних теней и бликов, чтобы добавить четкости и реализма. Например, значок приложения «Почта» использует как тени, так и блики, чтобы придать конверту подлинность и показать, что клапан слегка приоткрыт. В значках, которые включают инструмент, который плавает над фоном, например TextEdit или Xcode, внутренние тени могут усиливать восприятие глубины и придавать инструменту реальный вид. Тени и блики должны указывать на источник света, обращенный к значку, расположенный чуть выше центра и слегка наклоненный вниз.

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

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

ТВОС

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

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

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

Используйте различные уровни непрозрачности, чтобы усилить ощущение глубины и живости. Творческое использование непрозрачности может выделить ваш значок. Например, значок «Фотографии» разделяет центральную часть на несколько слоев, содержащих полупрозрачные элементы, что придает дизайну большую живость.

Убедитесь, что значок на главном экране соответствует спецификациям безопасной зоны. Во время фокусировки и параллакса система может обрезать содержимое по краям значка приложения, когда значок масштабируется и перемещается. Чтобы содержимое значка не обрезалось слишком сильно, оставьте дополнительное пространство, как показано в разделе «Технические характеристики» > tvOS.

watchOS

Значок приложения watchOS имеет круглую форму и не содержит сопроводительного текста.

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

Технические характеристики

Атрибуты значков приложений

Значки приложений на всех платформах используют формат PNG и поддерживают следующие цветовые пространства:

• Дисплей P3 (широкий цветовой охват)
• sRGB (цветной)
• Серая гамма 2. 2 (оттенки серого)

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

Размеры значков приложений

Размеры значков приложений iOS, iPadOS

Вам необходимо предоставить большую версию значка приложения размером 1024×1024 пикселей для отображения в App Store. Вы можете позволить системе автоматически уменьшать большой значок приложения для создания всех других размеров или — если вы хотите настроить внешний вид значка для определенных размеров — вы можете предоставить несколько версий.

Размеры значка приложения macOS

Для App Store создайте версию значка приложения macOS размером 1024×1024 пикселей. Кроме того, вам также необходимо предоставить значок следующих размеров.

Размеры значка приложения tvOS

Для App Store создайте версию значка приложения tvOS размером 1280×768 пикселей. Кроме того, вам также необходимо предоставить значок следующих размеров.

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

Размеры значка приложения для watchOS

Для App Store создайте версию значка приложения для watchOS размером 1024×1024 пикселей. Вы можете позволить системе автоматически масштабировать эту версию до всех других размеров или — если вы хотите настроить внешний вид значка приложения для определенных размеров — вы можете указать размеры, указанные в следующей таблице. Все размеры значков показаны в пикселях @2x.

Если у вас есть сопутствующее приложение для iPhone, вам также необходимо предоставить значок приложения для watchOS следующих размеров.

Список изменений

14 сентября 2022 г.

Добавлены спецификации для Apple Watch Ultra.

Требования, лучшие практики и советы

Представьте, что вы открываете App Store в поисках новых приложений, которые могут вам понравиться — несколько ключевых слов в строке поиска, быстрое сканирование — и выбор сделан — вы находитесь в выбранном приложении страница решает, скачивать ее или нет. Что привлекло ваше внимание и определило ваш выбор?

Учитывая тот факт, что человеческий мозг обрабатывает визуальную информацию намного быстрее, чем текст, внешний вид мобильных иконок должен быть определяющим фактором для ASO. В этой статье мы дадим вам краткий обзор того, каким требованиям должна соответствовать «хорошая» мобильная иконка. Мы также поделимся передовым опытом, обсудим варианты стилей и дадим пару полезных советов по оптимизации иконок для начала.

Загрузить полное руководство по значкам для мобильных устройств

Загрузка…

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

В среднем, мобильные иконки имеют 10-25% потенциал для увеличения конверсии, а в некоторых случаях ваш «рейт переходов» может резко возрасти.

Вот почему оптимизированная иконка приложения имеет решающее значение для оптимизации магазина приложений.

Требования к размерам значков App Store

Независимо от того, насколько хорошо продуман ваш значок, он должен соответствовать техническим требованиям , установленным Apple или Google. Обе компании предоставляют подробные описания того, что они ожидают от правильного мобильного значка от размера до общего взаимодействия с пользователем . Ниже вы найдете требования к размеру значка магазина приложений (Примечание: размер значка Google Play отличается) .

Размеры значков приложений

Каждое приложение должно иметь набор маленьких значков для главного экрана и более крупный значок для самого App Store.

Here’s the App Store icons size table for different Apple devices :

Атрибуты значков приложений

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

Чтобы опубликовать свое описание в магазине Google Play, требуется значок с высоким разрешением . Значок с высоким разрешением не заменяет значок запуска вашего приложения, но должен быть более точной версией с более высоким разрешением и соответствовать следующим рекомендациям по дизайну:

• Значки материалов, используемые в Android M;
• Адаптивные значки для Android O.

Размер значка Google Play

• 32-bit PNG (with alpha)
• Dimensions: 512px by 512px
• Maximum file size: 1024KB

Android Launcher Icon Size

Android launcher icon size

Android launcher icon size need five separate размеры для различной плотности пикселей экрана.

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

Начало работы с оптимизацией мобильных значков

Как мы можем убедиться, что используем значок приложения, который приносит результаты?

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

Узнайте обо всех последних тенденциях оптимизации иконок в App Store (цвета, стили, лучшие художественные идеи) в App Store и Google Play Store в разделе «ASO Benchmarks & Trends. Мобильные игры».

Как убедиться, что вы соблюдаете все вышеуказанные принципы? Правильное место для поиска ответа — A/B-тестирование . Самая сложная часть — это генерация вариантов .

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

• Рассказывает ли ваша иконка историю и продает ли она уникальные функции вашего приложения?

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

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

Эти ассоциации могут выглядеть банально, но использование неправильных может представлять реальную угрозу для конверсий. Например, Darby (приложение с видеороликами, сделанными своими руками) обнаружил, что их значок вводит в заблуждение своих клиентов. Надпись «играть» на значке заставила аудиторию поверить в то, что Darby — это приложение для редактирования видео. A/B тесты помогли решить эту проблему и иконку поправили.

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

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

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

• Ваши мобильные иконки выдерживают конкуренцию в поиске?

Используя целевые и связанные ключевые слова , вы можете помочь вам увидеть позицию вашего приложения в поиске . Посмотрите на его основных конкурентов. Иконки у них одинаковые? Чем ваш выделяется?

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

Вот почему самый простой способ улучшить значок — запустить серию тестов по категориям в магазине приложений и выбрать версию, которая работает лучше в жесткой конкурентной среде.

Цвета и стили мобильных иконок

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

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

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

Цвета

Многие компании узнаются по цветам. То же самое работает для приложений. Вот почему выбор цвета для вашего мобильного значка так важен. Какие цвета работают лучше всего? К сожалению, правильного ответа нет. Хотя большинство цветов имеют значения или, по крайней мере, ассоциации, и они могут повлиять на ваше решение.

Синий — популярный цвет у многих крупных компаний (Facebook, Twitter, Visa и т. д.). Он буквально стал символом доверия, честности, лояльности, безопасности и спокойствия . Этот цвет часто используется на логотипах и значках продуктов, предназначенных для международного использования, поскольку он не имеет негативных культурных интерпретаций.

Зеленый в основном ассоциируется с деньги и природа, поэтому его предпочитают разработчики 2 категорий приложений:

• финансовые услуги;
• сторонники экологически чистого поведения.

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

Однако важно быть внимательным и учитывать все возможные ассоциации и культурные интерпретации , которые сочетаются с выбранным цветом (кроме синего, как вы можете догадаться).

Оптимизация мобильных значков: лучшие практики

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

Убедитесь, что выбранные вариантов теста имеют существенных различий .

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

Вот несколько основных советов по оптимизации:

1. Будьте проще

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

Холст 1024 × 1024 пикселей сам по себе является вызовом. Так что попробуйте дизайн на устройстве в разных контекстах и ​​размерах. Убедитесь, что ваши мобильные значки хорошо смотрятся на разных фонах.

2. Попробуйте разные цвета

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

3. Пусть ваша графика говорит за вас

Существует странная тенденция среди разработчиков приложений — довольно многие из них склонны размещать название приложения или какой-либо другой текст на значке мобильного устройства. Почему? В области заголовка и описания приложения достаточно места .

Конечно, многие приложения успешно используют слов или букв (иногда с брендом, иногда без) в своих мобильных значках. Если вы хотите присоединиться к «буквальному» клубу, не забудьте проверить, конвертируются ли дополнительные буквы на значке лучше, чем графический язык .

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

4. Логотип/без логотипа?

9Логотип 0470 и мобильные значки имеют некоторое сходство, но они также различаются во многих аспектах. Итак, очень важно понимать, что значок приложения — это не логотип. Логотипы векторные изображения и иконки растровые , логотипы не обязательно должны быть квадратными, но они должны хорошо смотреться на фирменных бланках и т.д.

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