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

Иконку видят совсем не так, как ее показывает дизайнер

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

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

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

Начните не с цвета, а с короткого задания

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

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

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

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

Посмотрите на выдачу глазами человека, а не бренда

Соберите на одном экране 15-20 иконок из живой выдачи по важным запросам. Не ограничивайтесь конкурентами из коммерческой презентации: пользователь может сравнивать вас с совсем другими продуктами.

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

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

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

Делайте разные идеи, а не один знак в шести цветах

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

Сначала проверьте форму без эффектов. Сделайте черный силуэт и уменьшите его до 32-48 пикселей. Если он распадается, дополнительный объем, блики и градиенты лишь ненадолго спрячут проблему.

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

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

Проверяйте не макет, а реальные условия

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

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

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

*Удачная форма сохраняется на расстоянии, при другом освещении и на разном фоне.*

Для iOS и Android недостаточно одного экспорта

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

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

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

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

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

Локализация нужна даже изображению без слов

Цвета, животные, жесты, религиозные формы и привычные предметы по-разному воспринимаются в разных странах. Перед выходом на новый рынок покажите иконку местному редактору или пользователям и еще раз откройте локальную выдачу. Проверка должна отвечать не только на вопрос «никого ли это не обидит», но и на более обычный: «что этот образ здесь вообще напоминает?»

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

Контраст важнее модного эффекта

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

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

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

Тест должен проверять гипотезу, а не вкус руководителя

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

В App Store доступна оптимизация страницы продукта, а в Google Play - эксперименты с карточкой. Меняйте только иконку, если хотите оценить именно ее влияние. Одновременная замена скриншотов, подзаголовка и описания лишит результат смысла.

В публичном примере Apple один из вариантов иконки дал на 8% более высокую конверсию при уверенности свыше 98% в рамках конкретного опыта. Это не обещание такого же роста для любого приложения, а хороший пример того, почему данные полезнее спора в переговорной.

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

Смотрите дальше количества установок

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

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

Запишите варианты, гипотезу, даты, рынки и вывод в журнал экспериментов. Для остальных продуктовых проверок можно использовать общий подход из статьи об A/B-тестах мобильного приложения.

Как мы включаем иконку в подготовку запуска

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

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

Частые вопросы