какое разрешение должно быть у иконки приложения
Размеры иконок для Android приложений
Для того, чтобы согласовать интерфейсы приложений на целом зоопарке устройств, было придумано разбить их по плотности экранов (density).
Ну а точнее — все картинки можно подобрать под конкретную плотность экрана.
Для этого в проекте сразу создаются папки:
В них нужно положить адаптированные изображения.
Сайт гугла дает ценные рекомендации по расчету их размеров.
В своих проектах я часто пользуюсь только разными размерами иконки для запуска (их рекомендуют именовать с префиксом ic_launcher).
То есть вам нужно сделать файлы с одним названием, различные только разрешением, и расположенными по соответствующим папкам.
Вот размеры в пикселях для каждой плотности экрана:
Когда плотность экрана не критична, я создаю папку простую папку drawable и храню все картинки в ней.
Если же плотность экрана критична, то можно высчитать размеры изображения, исходя из соотношения размера базовой картинки к соответствующему коэффициенту экрана.
Во время публикации в маркете (play.google.com), понадобится ещё и иконка 512×512 и картинка для рекламы 1024×500.
Иногда требуется узнать плотность экрана на конечном устройстве пользователя.
Вот код примера получения плотности через getResources().getDisplayMetrics().densityDpi:
Если поставить этот код при создании активности (т.е. в методе OnCreate), мы получим сообщение с плотностью экрана текущего устройства.
А вот таким способом можно получить размер экрана устройства с помощью класса Configuration:
Ширину и высоту дисплея можно получить так:
Обратите внимание на проверку версии апи на устройстве, для версии 13+ размеры получаются по-другому.
Гид по визуальному оформлению страниц приложений в App Store и Google Play
В рамках ASO стратегии недостаточно просто привлечь пользователей на страницу продукта в App Store или Google Play.
Ваша задача — заинтересовать людей, чтобы они установили приложение. Вы должны максимально оптимизировать все графические элементы на странице приложения, поскольку визуальная составляющая влияет на конверсию в установку.
По данным Storemaven, страница продукта менее чем за 3 секунды должна объяснить, что делает приложение. Именно эти несколько секунд влияют на принятие решения об установке. Чтобы страница вашего приложения в App Store увеличивала конверсию, вам нужно сделать её запоминающейся.
Мы в ASOdesk составили максимально подробную инструкцию о том, каким моментам в визуальном оптимизации нужно уделять внимание, в первую очередь.
Является тем самым первым элементом оформления страницы приложения, на которую обращают внимание пользователи. Она должна выделять ваш продукт на фоне конкурентов и быть запоминающейся. Меняйте иконку, проводите A/B тестирования и выбирайте вариант с наибольшей конверсией.
Каждое приложение имеет набор иконок для главного экрана и более крупную иконку для самого App Store. Иконка также отображается в настройках и результатах поиска.
Для страницы приложения в Google Play необходима иконка высокого разрешения с тем же изображением, что и на значке приложения в Android. При его создании следуйте этим рекомендациям:
У обоих магазинов приложений есть чёткие рекомендации к размерам скриншотов, их допустимому количеству, а также по контенту, который можно размещать. Внимательно прочитайте рекомендации и требования, так вы избежите проблем при прохождении проверки. Рекомендации для Google Play и App Store.
В App Store вы можете разместить до 10 скриншотов на странице приложения для iPhone, iPad, Apple Watch и Apple TV.
Скриншоты должны быть в PNG (не alpha) или JPEG. Более подробные рекомендации App Store Connect documentation.
В Google Play вы можете добавить до 8 скриншотов для каждого поддерживаемого типа устройства: смартфон, планшет (7 и 10 дюймов), Android TV и Wear OS от Google.
Большинство пользователей, скорее всего, не будет просматривать все имеющиеся скриншоты. Так как размер экрана устройства ограничен, сначала пользователь видит только два скриншота. Поэтому главные возможности и преимущества важно отразить на первых двух экранах.
Для приложений в App Store и Google Play чаще используют вертикальные (портретные) скриншоты.
Для iPhonе и Android-игр предпочтительнее делать горизонтальные скриншоты, если сам интерфейс имеет такой формат. Если же интерфейс игры вертикальный, то скриншоты также должны это отражать. Помните, что поведение пользователей двух магазинов могут различаться, и лучше планировать разные наборы скриншотов, один для App Store, а другой для Google Play.
Пример горизонтальных скриншотов в Google Play
Пример горизонтальных скриншотов и видеопревью в App Store
Также вы можете выделиться с горизонтальными скриншотами на фоне конкурентов, с вертикальным вариантом оформления страницы. Всегда экспериментируйте и находите лучшие варианты для представления своего продукта в App Store или Google Play.
Вариативность композиций, используемых издателями при оформлении скриншотов чуть более разнообразна, чем формат скриншотов. Издатели используют: обычный вариант композиции, с простым фоном или фотографиями вместо него; панорамное оформление, которое состоит из скриншотов, связанных единой композицией; вариации обычного оформления с использованием дополнительных визуальных элементов.
В августе дизайн Google Play обновился, обратите внимание на свои скриншоты в новом дизайне. Если вы ранее использовали надписи, то в текущем дизайне на устройстве текст может быть очень маленьким и плохо читаемым.
Важная информация, вынесенная на первые скриншоты, не должна быть простым перечислением функций. Вы должны донести до пользователя, преимущества и ценность приложения.
Если у вас добавились новые функции, то обязательно отразите их на скриншотах и выделите при обновлении приложения. Ваши пользователи должны наглядно увидеть новую функциональность.
Все графические материалы нужно локализовать, опираясь на культурные и языковые особенности каждой страны. Для всей графики необходимо сделать полную адаптацию под местный рынок. Такая адаптация называется культуризацией. Вы не просто переводите тексты и помещаете их на скриншоты, но меняете графические элементы, с учётом особенностей местного рынка.
Это может быть определённая цветовая гамма или фотографии с людьми другой национальности. Возможно, придётся добавить символы или же фотографии людей заменить иллюстрациями. Всё очень сильно зависит от культурных особенностей той страны, в которой вы планируете продвигать свой продукт.
Издатель использует совершенно разные фото изображения для своего приложения, один набор креативов эффективен для китайской аудитории, и уже совершенно другой используется в США.
Если Apple предложит вашему приложение установить обложку страницы продукта, она появится вверху страницы приложения в AppStore.
При создания этого элемента не включайте туда:
Полный список требования для обложки станица в App Store вы найдете здесь.
С релизом iOS 13 в App Store появилась темная тема, теперь некоторые визуальные элементы могут смотреться совсем по-другому чем на светлом фоне. Черные или темные иконки, как и скриншоты, без наличия контрастных элементов могут потеряться на темном фоне.
Видеопревью в App Store и промовидео для Google Play — это дополнительная возможность рассказать аудитории о преимуществах приложения. Наглядно показать, как продукт можно использовать в повседневной жизни.
Добавление видео может значительно повысить конверсию из просмотра страницы в установку. Согласно отчёту SplitMetrics, добавление видео превью в App Store может повысить вовлечение и коэффициент конверсии на 16%, а согласно информации от StoreMaven, наличие видео на странице вашего приложения в магазине может повысить коэффициент конверсию на 20–35%.
Прежде чем разместить видео на странице продукта, мы рекомендуем провести A/B тестирование. Известны случаи, когда наличие видеопревью, наоборот отрицательно повлияло на конверсию в установку.
Обращаем ваше мнение на нюансы, которые могут быть неочевидны, на первый взгляд, особенно если вы ранее не cоздавали видеопревью для App Store:
При планировании продвижения своих продуктов в App Store и Google Play, помните о различиях магазинов. App Store у вас есть возможность добавлять видеопревью, то в Google Play вы можете добавить только ссылку на видео, размещённую в YouTube. При этом на страницу приложения должна быть обязательно добавлена специальная графика.
Специальный баннер для превью — это изображение взятое непосредственно из вашего видео ряд. Баннер будет использоваться в качестве заставки видеопревью. Данная заставка должна привлекать и вовлекать, она будет влиять на конверсию у тех пользователей у которых не воспроизводится «автозапуск» поскольку он отключен в App Store.
Требования к созданию специального баннеры вы найдете здесь.
Всегда рекомендуем тестировать: формат скриншотов, композицию, количество скриншотов и видеопревью.
Чтобы понять, какие скриншоты будут эффективнее всего. Сделайте несколько наборов креативов и проведите A/B тестирование. Скриншоты, которые получат более высокую конверсию используйте для оформления страницы приложения. Конечно, процесс тестирования не такой простой, как кажется, на первый взгляд.
В Google Play можно провести A/B тестирование в Google Play консоли, в iTunes Connect отсутствует такая возможность. Можно использовать такие сторонние инструменты, как SplitMetrics, Storemaven или Asogiraffe. С помощью них вы можете запустить эксперименты и также выделить скриншоты с наибольшей конверсией.
Если у вас нет возможности использовать сторонние сервисы для App Store, вы можете пробовать запускать последовательное тестирование креативов. Такой вариант подойдёт для небольших компаний и разработчиков, которые не боятся ухудшить конверсию в ходе экспериментов. Для больших компаний небольшие колебания в конверсии могут аукнуться снижением органических установок.
App Store и Google Play постоянно меняются, и, в связи с этим обновляются требования к графическим материалам. Вы должны отслеживать эти изменения и, согласно им, менять иконки и скриншоты своего приложения. Изучайте конкурентов и новые веяния в дизайне графических материалов, одни и те же скриншоты приедаются, a глаз пользователя замыливается. Заменив старые скриншоты на свежие, вы можете повысить коэффициент конверсии.
Согласно отчёту Apptentive высокий рейтинг помогает приложению удерживаться в топе категорий и в топе запросов из поиска. Чем выше рейтинг и большее количество оценок, тем больше вероятность, что приложение заметят. Чем больше негативных оценок получит ваше приложение, тем ниже у него будет рейтинг, а чем ниже рейтинг тем ниже конверсия в установку.
В App Store и в Google Play пользователи могут оценить ваше приложение от 1 до 5 звёзд. Рейтинг — один из элементов страницы приложения, который вы видите сразу же после иконки и названия.
На графике видно, что приложения с наименьшей оценкой установят менее 25 процентов респондентов, приложения с оценкой выше 3 звёзд скачают более 50%.
Если вы не отработаете негатив и не сможете удерживать свою оценку достаточно высокой, то все ваши усилия по ASO оптимизацию будут напрасны. Поэтому всегда отслеживайте изменения оценки в Google Play и App Store, особенно важно это делать перед запуском рекламных кампаний.
Многие пользователи не ограничиваются оценкой, и оставляют как положительные, так и гневные отзывы о вашем продукте. Важно отслеживать все эти комментарии и реагировать на них оперативно.
Процесс работы с пользовательскими отзывами можно разделить на несколько этапов:
Мониторинг — это ежедневная работа по отслеживанию всех отзывов в App Store и Google Play. Во-первых, позволяет вам оперативно узнать о проблемах в работе приложениях или сбоях, оперативно отреагировать на них и передать команде разработчиков. Во-вторых, помогает узнать мнение ваших пользователей о продукте. И в-третьих, вовремя отреагировать на негатив и, возможно, исправить оценку приложения.
В данной инструкции описано подробно, на какие этапы можно разбить визуальную ASO оптимизацию для более эффективной работы. Какие факторы вы должны учитывать при работе с визуальными данными страницы приложения в App Store и Google Play.
О формате ICO
Графический формат ICO применяется в Windows для системных значков, которыми тот или иной файл или формат файла обозначается в графическом интерфейсе. Обозначение ICO – сокращение от Icon (иконка, значок).
В Windows есть встроенная библиотека иконок. Однако разработчики программ и веб-сайтов обычно используют собственные изображения для иконок своих продуктов. Иконка, как правило, содержит логотип приложения или разработчика или какую-нибудь выразительную картинку, по которой можно понять суть программы.
Формат ICO включает в себя не один файл значка, а целый набор. Дело в том, что в разных видах отображения показываются разные размерные варианты значка. Уменьшенный автоматически большой вариант может оказаться неразборчивым, а увеличенный маленький – размытым. Поэтому ICO – это файл, включающий в себя несколько размеров иконки.
Даже если размещать иконку на рабочем столе, при разном разрешении монитора одни и те же иконки могут казаться очень большими или недопустимо маленькими. При выборе оптимального стиля изображения Windows выбирает подходящие иконки из библиотеки.
Стандартная иконка имеет «квадратное» соотношение сторон. В файле ICO предполагаются следующие размеры: 16х16, 32х32 и 48х48 пикселей. Существуют и менее употребительные варианты, со стороной от 24 до 128 пикселей. Теоретически предельное допустимое значение стороны квадрата – 256 пикселей, однако на практике такие иконки употребляются редко. Некоторые файловые менеджеры способны масштабировать иконки (например, Total Commander). Пользователь компьютера обычно довольствуется стандартными иконками, которые поставляются с каждой программой. Но можно и украсить свой компьютер и упростить нахождение нужных файлов и папок, если сопоставить им отличающиеся иконки. Часто в файловых менеджерах есть собственный набор стандартных иконок, но можно и создать собственные.
Существует такая разновидность файла ICO, как Favicon. Она отображается в браузере как «иконка» веб-сайта. Для favicon установлен стандартный минимальный размер – 16х16 пикселей. Более подробно о иконке для сайта читайте в статье «Иконка сайта».
Конвертация
Бесплатный онлайн-конвертер поможет вам создать многовариантные иконки на основании ваших графических файлов. Убедитесь, что в вашем исходном файле выдерживается «квадратное» соотношение сторон. Если нет, его можно обрезать до нужного стандарта, размер изображения в этом случае не обязательно должен совпадать с размером желаемой иконки. Онлайн конвертер сам изменит размер по указанным настройкам.
Исходный файл может иметь практически любой формат (список поддерживаемых форматов). Рекомендуем позаботиться о том, чтобы исходный файл был максимально качественным. Это могут быть PSD, TIFF и другие файлы. Если ваша иконка – результат дизайнерских усилий в профессиональном графическом редакторе, рекомендуем использовать в качестве исходного файла непосредственно файл «родного» формата редактора.
Установите максимальное значение стороны иконки. Если вы её не установите, конвертер автоматически уменьшит файл до максимально допустимого значения – 256х256 пикселей.
Наш конвертер предлагает автоматически сгенерировать наиболее популярные варианты размера значка. При конвертации файла в формат ICO вы можете выбрать не только размеры значков, представленные в конечном файле, но и глубину цвета. Для иконок размера 256х256 пикселей она может составлять 32 бита, для меньших иконок она автоматически будет составлять 8 бит.
Размер полученного файла ICO будет несколько превышать суммарный размер входящих в него файлов. Причина этого – то, что все файлы отдельно взятых иконок хранятся в ICO-файле в несжатом виде.
Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?
От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.
Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.
Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.
С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?
Каков основной файл фавикона?
Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.
Вопрос: Какого размера должен быть favicon.ico?
A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.
Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.
Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо: 
16х16 на вкладке Chrome. Пока всё хорошо.
Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.
16х16 в панели задач.
16х16 на рабочем столе. Не хорошо.
Когда иконка содержит несколько изображений, результат гораздо лучше.
16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.
16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.
Вопрос: Каково назначение favicon.png?
На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.
Что это на самом деле?
A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.
Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Так что мы должны объявлять?
Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.
favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.
Вопрос: Какой формат необходим для поддержки мобильных платформ?
Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?
A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.
Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.
Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.
Вопрос: Какого размера должны быть PNG иконки?
A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные
Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.
Вопрос: Каков размер Apple Touch icon?
Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.
Ответ: Вплоть до 180х180.
Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.
Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.
Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.
Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?
A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но.
Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.
Вопрос: Как объявить плитку для планшетов на Windows 8?
A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.
Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.
Объявление для Windows 8.0 выглядит как-то так:
Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
Плитки сайтов в Windows 8.
Вопрос: Каков размер плитки square150x150logo?
A: 150х150. Вы не умеете читать?
B: Иной.
Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.
Поздравляем, вы закончили викторину! Как вы это сделали?
Как создать логотип для приложений: правила и способы
Значок для мобильного приложения — первое, что видят пользователи перед тем как принять решение об установке программы. На этом этапе именно иконка отличает ваш продукт от приложений конкурентов. Сделайте убедительную иконку, и она привлечет новых пользователей. Ее качественный дизайн лучше любых слов расскажет о том, что ваша программа может быть интересной.
Зачем нужен значок мобильному приложению?
Задача иконки — вызвать интерес у пользователя и убедить его, что мобильная программа заслуживает доверия и может решить его актуальные потребности.
6 советов по созданию логотипов для приложений
Значок для мобильного приложения должен быть оригинальным (не нарушать авторские права). По цвету и стилистике он должен соответствовать дизайну интерфейса программы. И еще важно, чтобы элемент соответствовал официальным правилам разработки:
Также учитывайте общие универсальные рекомендации, чтобы логотип эффективно выполнял свои функции. Мы собрали 5 таких правил.
1. Масштабируемость
Значок мобильного приложения отображается на главной странице магазина, в подменю (в уменьшенном варианте), а также в качестве иконки на экране мобильного гаджета. Во всех случаях у него будут разные размеры. Отображение на экране часто зависит от разрешения и пользовательских настроек. Главное — чтобы во всех случаях картинка была удобочитаемой, и чтобы пользователю не пришлось напрягать глаза для рассматривания деталей. Проверить варианты отображения своих иконок можно с помощью специальных сервисов — например, Appsparky.
2. Распознаваемость
Символы и изображения на вашей иконке должно безошибочно распознавать большинство пользователей. Все визуальные элементы нужно делать понятными для людей, независимо от страны, в которой они проживают, и от языка, на котором говорят. Эффективность иконки зависит от понимания пользователями вашей дизайнерской идеи. Удачный пример — YouTube, который взял за основу общепонятный символ включения видео.
3. Уникальность
Ваш значок для приложений будет соревноваться за пользовательское внимание с миллионами других иконок. Уникальность в таком случае — шанс сделать изображений заметным. Как сделать значок для приложения уникальным:
изучите другие иконки в вашей нише. Проанализируйте лучшие работы и сделайте все иначе. Копирование чужих идей в этом случае — путь к неудаче;
ищите новые смыслы в комбинациях цветов и символах. Экспериментируйте и делайте много попыток;
вдохновляйтесь иконками игровых приложений: в этой нише меньше формальных требований к изображениям и больше возможностей для творчества;
можете использовать в качестве основной идеи узнаваемый визуальный элемент вашего бренда. Так сделали, например, разработчики приложения для Twitter.
4. Умеренное количество букв
Facebook имеет полное право использовать брендированную в своем стиле букву F для иконки приложения. Десятки известных сервисов — тоже. Если ваш фирменный стиль развит настолько, что пользователи будут узнавать вас по 1-2 буквам — отлично. Но не пишите в иконке полное название компании. И вообще — откажитесь по возможности от слов. Если вы решили вставлять слова — значит, не до конца используете преимущества визуальных элементов.
Слова и изображения — противоположные инструменты. Иконка — графическое представление программы. Уделите внимание визуальным деталям, потому что:
Если название короткое— можно попробовать использовать его в качестве центрального элемента. Так поступила новозеландская компания Xero.
5. Соответствие логотипа функционалу
Процессы взаимодействия пользователя с иконкой и интерфейсом должны быть одинаковыми. Хороший значок для приложений должен выражать концепцию программы, создавать целостный образ продукта, дополнять дизайн, идею и функциональность. Такой значок:
Удачный пример целостного визуального решения — у Dropbox:
Пользователь может выбрать темную тему оформления своего магазина приложений. Он имеет возможность установить темный или светлый фон на своем гаджете. Важно, чтобы иконка одинаково удачно смотрелась на всех вариантах фона. Протестировать это можно с помощью сервиса IconTester. Вот один из примеров отображения:
Тенденции дизайна логотипа мобильного приложения
Как сделать иконку для Андроид приложения или программы под iOS, учитывая дизайнерские тренды? Мы собрали несколько рекомендаций, актуальных для дизайна логотипов в ближайшем будущем:
1. Упрощение. Удаляйте лишнее из композиции — делайте акцент на главном. Чем проще изображение — тем лучше оно будет распознаваться на любом типе экрана. Планировщик Smartsheet имеет именно такой логотип:
2. Удалите лишние элементы. Убирайте все незначительное: детали, которые не влияют на значение вашего логотипа. Останется главное — и результат будет лучше запоминаться. Пример — Calendly:
3. Акцент на деталях. Выделите одну из деталей вашего значка. Или сделайте лого немного ассиметричным. Это привлечет пользовательское внимание. Так сделали разработчики Todoist:
4. Градиенты. Это тренд 2018 года, и он остается актуальным. С помощью градиента картинку можно сделать более объемной и глубокой, добиться уникальных визуальных эффектов. Instagram вполне соответствует тренду:
5. Неоновые оттенки. Минималистичные логотипы можно оживить с помощью ярких неоновых цветов в градиентных лого. Это тренд взяли за основу дизайнеры Spotify:
6. «Ручная работа». Новая тенденция — изображения, нарисованные от руки: с размытыми линиями, естественной цветовой гаммой. Такой вариант выбрали в MetLife:
Как сделать иконку для Android приложения
Значок приложения для Android нужно разрабатывать с учетом существующих параметров гаджетов и экранных разрешений. Для измерения качества графики в приложениях используют показатель количества пикселей на дюйм — DPI. Классификация по показателям DPI выглядит таким образом:
Иконку приложения нужно разрабатывать специально под требования Android.
Требования к значкам для запуска программы
Картинка для запуска программы смартфона должна быть в PNGs-формате, 32-битной. Обязательное требование — прозрачный фон.
Минимальный размер иконки для MDPI — 48dp, края — 1dp. Детализация зависит от показателя DPI. Варианты размеров для других показателей (в px):
Требования к иконкам для публикации в Google Play
Значок мобильного приложения должен иметь размер 512х512 пикселей и высокое разрешение. Эту иконку разрабатывают специально под Google Play. Она отличается размерами от иконки, которая используется как ярлык для запуска программы. Но в то же время изображения на разных вариантах иконки должны быть идентичными.
It differs in size from the icon, which is used as a shortcut to launch the program.
Советы и правила по разработке иконок для Android-приложений
Пользуйтесь такими рекомендациями:
Создание значка для мобильного приложения Android можно проводить для достижения определенной цели. Например:
Независимо от цели, изображение для приложения Android должно смотреться понятно и четко в любых параметрах, сочетаться со всеми вариантами фонов.
Как сделать значок для iOS приложения
Для каждого приложения под iOS нужно сделать вариант маленького и большого значка. Маленький необходим для отображения на домашнем экране и в системе (после установки приложения). Большая отображается в App Store.
Spotlight icon size
120px×120px (40pt×40pt @3x)
80px×80px (40pt×40pt @2x)
iPad Pro, iPad, iPad mini
80px×80px (40pt×40pt @2x)
Settings icon size
87px×87px (29pt×29pt @3x)
58px×58px (29pt×29pt @2x)
iPad Pro, iPad, iPad mini
58px×58px (29pt×29pt @2x)
Notification icon size
60px×60px (20pt×20pt @3x)
40px×40px (20pt×20pt @2x)
iPad Pro, iPad, iPad mini
40px×40px (20pt×20pt @2x)
Создавайте несколько маленьких значков с учетом требуемых параметров для разных устройство, работающих на iOS. Между картинками разных размеров не должно быть кардинальных визуальных различий.
General icon requirements:
Важно: к значкам не нужно добавлять отдельную выделенную рамку: система автоматически добавляет 1-пиксельный отступ на все иконки, чтобы красиво выделить их.
Правила дизайна для значков приложений iOS
Придерживайтесь в работе следующих рекомендаций:
Как создать логотип для приложения: лучшие сервисы
Если вы хотите разработать значок для мобильного приложения самостоятельно — мы подобрали для вас несколько удобных сервисов.
Logaster
Онлайн-генератор логотипов. Предлагает десятки вариантов уникальных визуальных решений. Вы можете указать необходимую цветовую гамму и тематику. Можно отредактировать понравившийся вариант и качать его в подходящих размерах.
Makeappicon
Генератор иконок для Android и iOS в правильных размерах. Вы можете загрузить собственное изображение, на основе которого сервис создаст логотипы. Они будут соответствовать актуальным требованиям.
IconsFlow
Онлайн-редактор иконок, позволяющий создавать изображений с уникальным стилем. Вы можете почувствовать себя дизайнером, подбирая необходимые элементы и цвета. Можете загрузить и отредактировать собственное изображение.
Font Awesome
Мощный редактор иконок для мобильных приложений и социальных сетей. Предлагает большое количество вариантов и настроек для создания уникального изображения.
Заключение
Разработка логотипа для мобильного приложения — комплексная задача. У вас должен получиться интересный, уникальный и привлекательный результат, соответствующий требованиям разработчиков мобильных платформ. Учитывайте правила и тренды. Пользуйтесь современными сервисами для генерации идей и сделайте вашу программу привлекательной для аудитории.