Иконка приложения: Дизайн иконок мобильных приложений: 3 правила — Независимое театральное объединение "Зрительские симпатии"

Содержание

Меняем иконки приложений / Хабр

Snupt

25 ноября 2009 в 18:48

Разработка под MacOS *

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

У Apple в Mac OS X существует свой устоявшийся формат иконок, который носит расширение icns. Он поддерживает следующие размеры 16×16, 32×32, 48×48, 128×128, 256×256 и 512×512. Но согласитесь, искать готовую иконку нужного нам формата не так легко как найти подходящее графическое изображение.

И в результате, возникает вопрос конвертирования.

Наиболее распространенный веб сервис для этих задач называется iConvert. Он поможет изготовить иконку не только для Mac OS X, но и других популярных операционных систем. Для того, что бы им воспользоваться нужно найти или изготовить графическое изображение и указать к нему путь через навигационную клавишу на сайте. По завершению конвертации он представит нам иконки для Mac OS X, Windows и Linux.

Исходники картинок можно искать в Google Images или в горячо любимом мною сервисе Icon Finder.

Любителям локального софта для удовлетворения тех же потребностей можно поставить приложение Img2icns. Оно распространяется в двух версиях — бесплатной и про. Первая не умеет сохранять историю конвертаций, экспортировать иконки для iPhone и favicon, конвертировать иконки в форматы графических изображений. Да оно нам и не нужно. Перетягиваем картинку в тело программы и выбираем позицию Icns.

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

Теперь, когда у нас есть готовый файл нужного формата, надо его подставить вместо текущий иконки приложения. Сделать это очень просто. Выберите файл или папку где надо произвести замену и перейдите через контекстное меню в Get Info (можно просто нажать Command ⌘ + I). Затем, просто перетащите файл icns на иконку в левом верхнем углу, как показано на снимке ниже.

Результат будет виден как в файловом менеджере, так и в Доке.

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

Источник: http://snupt.com

Теги:

apple
macosx
icons

Хабы:

Разработка под MacOS

Всего голосов 2: ↑2 и ↓0 +2

Просмотры

29K

Комментарии 4

@Snupt

Пользователь

Комментарии Комментарии 4

Гайд по оформлению страницы приложения в App Store: часть 1

ЧЕК-ЛИСТ: 270+ ПУНКТОВ ДЛЯ ПРОВЕРКИ

ЧАСТЬ 1

Если у компании есть свое iOS приложение, взаимодействие клиента с его страницей в App Store становится важной частью Customer Journey. Но на что стоит обратить внимание, чтобы при оценке клиентского пути не ограничиться фразой «здесь все нормально»?

Я собрал чек-лист из 270+ пунктов с примерами, который, надеюсь, позволит лучше ответить на вопрос о том, насколько хорошо у вас реализована эта точка контакта с клиентом и в чем есть потенциал для улучшения.

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

Станислав Хрусталёв

Часть 1

Часть 2

Часть 3

Часть 4

ИКОНКА ПРИЛОЖЕНИЯ

Иконка – один из основных элементов, представляющих ваше приложение как в App Store, так и за его пределами. В рамках клиентского пути в App Store иконка, помимо страницы приложения, также может встречаться в результатах поиска и различных подборках. Поэтому то, насколько хорошо она реализована, может оказывать влияние на клиента на различных стадиях customer journey:

Заметность

Иконка хорошо заметна и притягивает внимание

Суть приложения

На иконке размещено не абстрактное, а осмысленное изображение, несущее в себе основную его идею и выражающее его суть

Простота

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

Единообразие логотипов

Если иконка содержит в себе логотип компании/сервиса, он совпадает с тем, что размещается на других площадках

Уникальность

Иконка приложения не похожа на иконки конкурентов и выгодно выделяется на их фоне

Фон иконки

Фон однороден и не оттягивает на себя внимание от основного элемента иконки

Цветовая гамма

В иконке используются цвета из цветовой палитры бренда

Отображение в темной теме

Иконка корректно отображается в темной теме и хорошо заметна на черном фоне

Использование слов

Слова в иконке используются только тогда, когда они являются неотъемлемой частью логотипа (т. к. для названия существует отдельное поле)

Качество изображения

Изображение иконки загружено в хорошем качестве, не размывается и не пикселит

Скругление краев

Края иконки не скругляются на стороне разработчика, т.к. скругление краев происходит автоматически при загрузке иконки в App Store

НАЗВАНИЕ И ПОДЗАГОЛОВОК

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

Информативность

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

Уникальность названия

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

Ключевые слова присутствуют

Название и подзаголовок содержат основные ключевые слова по брендовым и категорийным запросам

Ключевые слова релевантны

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

Ключевые слова в начале

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

Подзаголовок дополняет название

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

Размер текста

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

Без дупликации

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

Локализация

Название и подзаголовок локализированы под язык пользователя

Без ошибок

Ни название, ни подзаголовок не содержат каких-либо ошибок (если это не намеренное искажение слова в названии приложения / бренда)

БАННЕР ПРИЛОЖЕНИЯ

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

Заметность

Изображение в баннере хорошо привлекает внимание

Релевантность

Баннер хорошо отражает специфику, суть и особенности приложения

Не привязан к контексту

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

Не обрезается

Ключевой контент в рамках баннера не обрезается и виден полностью

Соответствие айдентике бренда

По дизайну, стилю и цветовой гамме изображение в баннере соответствует гайдлайнам бренда

Согласованность

Изображение в шапке визуально согласуется с иконкой и скриншотами, т. к. все они присутствуют на First Impression Frame (первом экране в рамках страницы приложения)

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

ИНФОРМАЦИОННАЯ ПАНЕЛЬ

Панель располагается в рамках First Impression Frame под кнопкой скачивания приложения и содержит в себе его ключевые индикаторы, такие как оценки, рейтинг в категории и т.д.

РЕЙТИНГ И ОЦЕНКИ

Наличие рейтинга

По приложению имеется хотя бы одна оценка, поэтому рейтинг отображается

Абсолютный рейтинг

Рейтинг приложения высокий – минимум 4.5 из 5 звезд (в противном случае это может вызвать сомнения в его качестве и дополнительные вопросы)

Относительный рейтинг

Рейтинг приложения заметно выше по сравнению с конкурентами

Абсолютное количество оценок

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

Относительное количество оценок

Количество оценок значительно больше, чем у конкурентов

ОТМЕТКИ

Editor’s choice

Отметка «Выбор редакции» присутствует

ВОЗРАСТНЫЕ ОГРАНИЧЕНИЯ

Минимальны

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

Не жестче конкурентов

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

КАТЕГОРИЯ

Релевантна

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

Рэнкинг отображается

Приложение включено в список Top Apps в рамках категории, из-за чего помимо названия категории также отображается и его позиция в рэнкинге

Абсолютный рэнкинг

Приложение располагается на первых позициях / в первой части рэнкинга

Относительный рэнкинг

Позиция приложения в списке топовых приложений категории выше по сравнению с основными конкурентами

РАЗРАБОТЧИК

Соответствует названию бренда / приложения

Название разработчика приложения в App Store соответствует названию бренда, который это приложение представляет / названию самого приложения

Знаком пользователю

Пользователь знает компанию / разработчика, и это повышает его доверие к приложению

Содержит ключевые слова

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

Компания vs.

индивид

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

Не обрезается

Название разработчика не обрезается и видно полностью

ЛОКАЛИЗАЦИЯ

Максимально широкая

На текущий момент локализовать приложение можно на 40 языков

Конкурентная локализация

Приложение переведено на большее количество языков по сравнению с ключевыми конкурентами

Релевантна пользователю

Приложение локализовано под язык, на котором говорит пользователь, знакомящийся со страницей

РАЗМЕР ПРИЛОЖЕНИЯ

Относительный размер

Размер приложения меньше по сравнению с конкурентами, оно быстрее скачивается, ниже риск каких-либо сбоев при установке

Абсолютный размер

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

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

TO BE CONTINUED…

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

ЧАСТЬ 1

ЧАСТЬ 2

ЧАСТЬ 3

ЧАСТЬ 4

35 139 значков мобильных приложений — бесплатно в SVG, PNG, ICO

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

Получить полный доступ

Мобильное приложение Значок

Кодирование мобильных приложений Значок

Мобильное приложение Значок

Тестирование мобильных приложений Значок

Мобильное приложение Значок

Разработка мобильных приложений Значок

Мобильное приложение Значок

Сведения о мобильном приложении Значок

Мобильное приложение Значок

Разработка мобильных приложений Значок

Мобильное приложение Значок

Разработка мобильных приложений Значок

Мобильное приложение Значок

Разработка мобильных приложений Значок

Мобильное приложение Значок

Мобильные приложения Значок

Мобильное приложение Значок

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

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

Что такое значок приложения?

Значок приложения или логотип приложения — это уникальное изображение, используемое для представления приложения на устройстве пользователя. Он также появляется в настройках смартфона и строке поиска в дополнение к вводному взгляду пользователей в App Store и Google Play Store.

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

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

Значки приложений в магазине приложений

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

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

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

Спецификации дизайна значков Google Play
Руководство разработчика App Store для значков приложений

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

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

Значки приложений на устройстве пользователя

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

Примеры ребрендинга значков приложений

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

Магазин Google Play: в соответствии с общим брендингом

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

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

Instagram: развитие для удовлетворения потребностей

2010-2016 гг.: представление цели

Рассматривая эволюцию значков Instagram за последние 12 лет, мы наблюдаем отличные аргументы и итерации в игре. До того, как приложение для социальных сетей было запущено в 2010 году, иконка представляла собой стилизованную визуализацию настоящей камеры моментальной печати Polaroid OneStep, поскольку платформа была создана для того, чтобы пользователи могли делиться сделанными ими фотографиями. Из-за торговой марки дизайн нельзя было применить к значку приложения Instagram. Компания быстро развернулась, чтобы создать свой собственный уникальный значок камеры. Тем не менее, вы заметите, что версия 2011–2016 годов обладает эффектом верхнего освещения и отражением в объективе камеры, как будто приглашая пользователей делать селфи для Gram.

2016: Отражение сообщества

Мир почти остановился, когда Instagram представил совершенно новый логотип в 2016 году. The New York Times назвала его «Великим уродством логотипа Instagram 2016 года». Однако, как мы видим, шесть лет спустя, Instagram все еще жив и здоров и, возможно, опередил свое время с этим ребрендингом. Рендеринг камеры был ярче и ровнее, чтобы лучше отражать сообщества Instagram. Тогдашний руководитель отдела дизайна Instagram Ян Спатер сказал, что они попросили сотрудников нарисовать значок Instagram по памяти за пять секунд и заметили, что большинство из них нарисовали радугу, объектив и видоискатель. Они сохранили эти элементы, но использовали фиолетовый, розовый и желтый цвета, чтобы представить разнообразную и красочную платформу, которой она стала.

2022: Наполнение чувством

В версии 2022 года для значка приложения Instagram был обновлен градиент, он стал ярче, а цвета стали более плавными. В сообщении блога, объявляющем об изменении, Instagram пишет: «Градиент переосмыслен с помощью ярких цветов, чтобы он казался освещенным и живым, а также чтобы сигнализировать о моментах открытия». Пользователям изначально не понравился новый внешний вид, многие утверждали, что значок приложения слишком яркий и что им нужно затемнить экран. Однако шумиха вскоре улеглась, и с точки зрения маркетинга сделать ваше приложение ярче, чем другие приложения на домашнем экране пользователя, — это стратегический шаг. Теперь пользователи с большей вероятностью заметят приложение Instagram по сравнению с другими приложениями.

Yubo: выделиться среди конкурентов

Основанное в 2015 году приложение Yubo для прямых трансляций, которым пользуются 40 миллионов пользователей по всему миру. Целевая аудитория приложения — молодые люди в возрасте от 12 до 25 лет. В 2021 году Yubo представила свой новый значок для более дружелюбного и чистого внешнего вида. Вы заметите, что основной оттенок желтого цвета приложения был теплее, чтобы больше соответствовать инклюзивным ценностям Yobu, а также служит для того, чтобы отличать их от кислотно-желтого цвета одного из их основных конкурентов, Snapchat.

Напоминание: демонстрация расширенной платформы

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

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

Как проводить A/B-тестирование значков приложений для достижения наилучших результатов

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

Как проводить A/B-тестирование

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

В этом случае вы протестируете два варианта значка вашего приложения. Вы можете использовать эти тесты, чтобы определить, как изменения влияют на ваши ключевые показатели эффективности (KPI). Существует пять этапов A/B-тестирования, которые мы перечислили ниже.

1. Разработайте свою гипотезу

Первый вопрос, на который вы должны ответить: чего вы хотите добиться от своего значка приложения? Определение ответа даст информацию о том, какие KPI вы будете отслеживать во время тестирования, например рейтинг кликов (CTR), установки, коэффициент конверсии и отток. Ваша гипотеза должна предлагать четкий план того, как вы ожидаете, что вариант повлияет на ваши ключевые показатели эффективности. Например, вы можете выдвинуть гипотезу о том, что изменение цвета значка вашего приложения привлечет больше установок, или, возможно, добавление символа действия, характерного для вашего мобильного игрового приложения, привлечет больше ценных пользователей.

2. Создайте варианты с вашей командой дизайнеров

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

3. Создайте свои группы аудитории

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