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

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

Предназначение иконки

Мнения о первоочередном смысле и задачах иконки расходятся. Некоторые считают её важным элементом маркетинга. Иными словами, разработчику необходимо создать такую иконку, чтобы уже при взгляде на неё пользователь захотел скачать/купить их продукт. Стоит повториться, что иконка — это первое, что увидит пользователь.

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

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

Узнаваемость — ключевой параметр для любого бренда. Вы безошибочно отличите Mercedes от других автомобилей по его значку. Вы легко поймёте, что перед вами на полке шоколадка Nestle. В конце концов, надкусанное яблоко создаёт в вашем мозгу лишь одну ассоциацию. Вы должны выделяться на фоне конкурентов и других продуктов в целом. Увидев вашу иконку, пользователь не должен спутать её с чем-то другим. Ещё проще: хорошая иконка должна возрождать в памяти человека название продукта, даже если он не видит это название под иконкой.

Стратегии

Идеальная иконка должна напоминать о продукте каждым своим элементом: цвет, текстура, рисунок, форма. Для примера можно взять иконку Phone. С момента релиза она практически не изменилась. Сплошной зелёный фон в сочетании с полупрозрачными косыми линиями и простым изображением трубки крепко засели в голове пользователя. Мы узнаём это приложение буквально на автомате. Если посмотреть на другие приложения Apple, то здесь наблюдается аналогичная картина. Уникальный цвет, некий дополнительный элемент оформления фона и простой объект, идентифицирующий функцию приложения.

О идентификации функции стоит поговорить подробнее. Это самый очевидный способ повысить вероятность вызова ассоциации в голове человека при взгляде на приложение и осознанием его функции. К примеру, все эти приложения используют тележки, которыми мы так привыкли пользоваться в супермаркетах. Тележка -> магазин -> покупать. Всё очень просто. Для уникальной идентификации разработчик добавляет логотип своего магазина, сохраняя при этом цветовую схему, свойственную его бренду.

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

Следующий важный момент затрагивает сохранение стиля от иконки к интерфейсу приложения. В данном случае речь идёт о свойственном Apple скевоморфизме. В Find My Friends преобладает оформление в виде светлой кожи со швами. Соответственно, подобное оформление должно использоваться и в иконке. Карты, что очевидно, занимают большую часть интерфейса картографического приложения, и именно карта изображена на иконке приложения. В iBooks пользователь видит книги и деревянные полки. Это же самое он видит на иконке.

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

Это очень важный момент, и если вы разочаруете пользователя на этом этапе (он не увидит в приложении то, что ему показали на иконке), то скорее всего вы потеряете этого пользователя.

Trailers — приложение от Apple. Сочетание символа, присущего «звёздным» фильмам, а также броского фона, который ассоциируется с красными ковровыми дорожками, вызывает у пользователя ясное понимание: перед ним приложение о фильмах.

Приложения для разных платформ

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

Несколько приложений

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

Facebook* пошёл другим путём: сохраняется лишь уникальный фон иконки, а объект ясно отражает функцию данного приложения.

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

iWork использует тот же метод, что и Facebook*: единый фон, разные объекты.

Игры

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

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

(via)

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.