какого размера должны быть иконки для приложения

Как правильно подготавливать иконки для разработчика Андроид?

В гайде показано следующее:

Т.е. сама иконка вписывается в квадрат 24х24dp, а потом этот квадрат вписывается в квадрат 48x48dp. И когда я нарезал у меня так и получалось, что для mdpi размер png получался 48x48dp с иконкой 24х24dp внутри него.
Но потом кодер сказал мне, что когда вставил в приложение, иконка оказалась маленькой и сказал, что эти отступы вокруг самой иконки (Touch target) при нарезке делать не нужно.
Прикрепил иконки.
какого размера должны быть иконки для приложения— это то, что я отдал кодеру

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

Оценить 1 комментарий

какого размера должны быть иконки для приложения

Ознакомьтесь более внимательно с гайдами от гугла. В «Clearance» как раз говорится о том, что размер самой иконки 24dp, а Touch target 48dp. Поэтому от вас требуется иконка 24dp под разные разрешения, а программист уже сам сделает отступы по 12dp со всех сторон:

Вообще, рекомендуется использовать стандартные гугловские иконки, если это возможно. В вашем случае лучше так и сделать. Зайдите на гугловский сайт, либо на materialdesignicons.com и скачайте архив с этой иконкой для разных разрешений. В результате у вас получится 5 папок со всеми нужными иконками, которые вы передадите программисту.

Если же вы не нашли подходящую иконку, то можете обратиться к восхитительному ресурсу. Загружаете свою иконку для максимального расширения (xxxhdpi) размером 96х96 px. На выходе получите 5 иконок, которые уже лежат в нужных папках.

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

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

Источник

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

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

Ну а точнее — все картинки можно подобрать под конкретную плотность экрана.

Для этого в проекте сразу создаются папки:

В них нужно положить адаптированные изображения.

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

В своих проектах я часто пользуюсь только разными размерами иконки для запуска (их рекомендуют именовать с префиксом ic_launcher).

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

Вот размеры в пикселях для каждой плотности экрана:

Когда плотность экрана не критична, я создаю папку простую папку drawable и храню все картинки в ней.

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

Во время публикации в маркете (play.google.com), понадобится ещё и иконка 512×512 и картинка для рекламы 1024×500.

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

Вот код примера получения плотности через getResources().getDisplayMetrics().densityDpi:

Если поставить этот код при создании активности (т.е. в методе OnCreate), мы получим сообщение с плотностью экрана текущего устройства.

А вот таким способом можно получить размер экрана устройства с помощью класса Configuration:

Ширину и высоту дисплея можно получить так:

Обратите внимание на проверку версии апи на устройстве, для версии 13+ размеры получаются по-другому.

Источник

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

Обновлено 18 марта, 2020

какого размера должны быть иконки для приложениякакого размера должны быть иконки для приложениякакого размера должны быть иконки для приложениякакого размера должны быть иконки для приложениякакого размера должны быть иконки для приложения

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

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

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

По статистике 70% мобильных приложений загружаются после поиска в App Store или Google Play (остальные — в результате рекламных кампаний, промо в соцсетях, обзоров и т.д.). Поэтому ваша задача — создать дизайн, который мгновенно привлечет внимание и вызовет желание узнать, что стоит за визуальным образом.

Технические характеристики иконок для Android и iOS

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

Топ-пять аспектов дизайна иконок

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

1. Простота

Лаконичность — это ключ к удачному дизайну. Вот какие нюансы нужно учесть:

2. Цвет

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

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

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

4. Лишние элементы

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

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

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

Бонусные советы:

Три способа создать иконку

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

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

2. Онлайн-сервисы:

Мечтаете о собственном лого?

Введите название компании в поле ниже и наш генератор предложит вам лучшие дизайны!

3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.

Заключение

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

какого размера должны быть иконки для приложения

Обновлено 18 марта, 2020

какого размера должны быть иконки для приложения

Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.

Источник

Гид по визуальному оформлению страниц приложений в 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.

Источник

Дизайн иконок мобильных приложений: 3 правила

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

какого размера должны быть иконки для приложения

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

Почему каждому приложению нужна иконка

Иконка приложения – это уникальное изображение, обязательное для каждого мобильного приложения, это первое, что пользователи видят, когда они находят приложение в Apple App Store и Google Play.

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

Плохая иконка делает в два раза больше, но наоборот. Это сбивает с толку и ставит под сомнение пользу приложения.

Однако, как только пользователь устанавливает приложение, цель значка меняется. Теперь он помогает в поиске приложения на главном экране среди других значков.

Но что же делает иконку приложения «хорошей»?

Дизайн иконок: 3 правила оформления

Давайте разберемся с этим понятием: значок приложения ≠ логотип.

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

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

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

1. Масштабируемость

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

какого размера должны быть иконки для приложения

Значки приложений в настройках iOS и Android

Пользователи не должны напрягаться, напрягать глаза, пытаясь уловить задумку дизайнера. Тестирование здесь на всех типах устройств является ключевым (для этого мы используем Appsparky); хотя потеря деталей неизбежна, идея всегда должна быть ясной.

» data-medium-file=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?fit=740%2C416&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20416’%3E%3C/svg%3E» alt=»Дизайн иконок» width=»740″ height=»416″ data-lazy-srcset=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?w=1920&ssl=1 1920w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?resize=640%2C360&ssl=1 640w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?resize=1024%2C576&ssl=1 1024w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?resize=768%2C432&ssl=1 768w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?w=1480&ssl=1 1480w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/2.png?resize=740%2C416&ssl=1″/>

Вот хороший пример того, как российский модный ритейлер Lamoda упростил свой логотип для приложения

И это подводит нас ко второму рассмотрению дизайна иконок приложений …

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

Здесь приложения и логотипы перекрываются.

В Messapps мы советуем, что для узнаваемости простота является ключевой – и это не означает скучно.

Смотри, разве эти значки не детализированы?

» data-medium-file=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?fit=740%2C417&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20417’%3E%3C/svg%3E» alt=»Дизайн иконок» width=»740″ height=»417″ data-lazy-srcset=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?w=1400&ssl=1 1400w, https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?resize=640%2C360&ssl=1 640w, https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?resize=1024%2C576&ssl=1 1024w, https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?resize=768%2C432&ssl=1 768w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2019/07/3.png?resize=740%2C417&ssl=1″/>

Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s Journey

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

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

» data-medium-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?fit=740%2C416&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20416’%3E%3C/svg%3E» alt=»Дизайн иконок» width=»740″ height=»416″ data-lazy-srcset=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?w=1920&ssl=1 1920w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?resize=640%2C360&ssl=1 640w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?resize=1024%2C576&ssl=1 1024w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?resize=768%2C432&ssl=1 768w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?w=1480&ssl=1 1480w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/4.png?resize=740%2C416&ssl=1″/>

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

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

Почти два миллиона приложений в App Store и 2,1 миллиона в Google Play. Это два миллиона значков приложений, и все они борются за внимание. Крупные бренды могут использовать свои логотипы, чтобы привлечь внимание, но что делают менее известные приложения?

Покажите что-то новое и необычное!

» data-medium-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?fit=740%2C416&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20416’%3E%3C/svg%3E» alt=»Дизайн иконок мобильных приложений: 3 правила» width=»740″ height=»416″ data-lazy-srcset=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?w=1920&ssl=1 1920w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?resize=640%2C360&ssl=1 640w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?resize=1024%2C576&ssl=1 1024w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?resize=768%2C432&ssl=1 768w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?w=1480&ssl=1 1480w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/5.png?resize=740%2C416&ssl=1″/>

Todoist использует стандарт для менеджеров задач «галочка», но в интересной композиции

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

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

Всегда ищите свой персональный способ решения проблем!

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

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

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

» data-medium-file=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?fit=740%2C417&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20417’%3E%3C/svg%3E» alt=»Дизайн иконок мобильных приложений: 3 правила» width=»740″ height=»417″ data-lazy-srcset=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?w=1400&ssl=1 1400w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?resize=640%2C360&ssl=1 640w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?resize=1024%2C576&ssl=1 1024w, https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?resize=768%2C432&ssl=1 768w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i0.wp.com/apptractor.ru/wp-content/uploads/2019/07/6.png?resize=740%2C417&ssl=1″/>

Иконка JazzSmash, объясняющая особенности игры с первого взгляда

» data-medium-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?fit=1024%2C576&ssl=1″ data-large-file=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?fit=740%2C416&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20740%20416’%3E%3C/svg%3E» alt=»Дизайн иконок мобильных приложений: 3 правила» width=»740″ height=»416″ data-lazy-srcset=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?w=1920&ssl=1 1920w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?resize=640%2C360&ssl=1 640w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?resize=1024%2C576&ssl=1 1024w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?resize=768%2C432&ssl=1 768w, https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?w=1480&ssl=1 1480w» data-lazy-sizes=»(max-width: 740px) 100vw, 740px» data-recalc-dims=»1″ data-lazy-src=»https://i1.wp.com/apptractor.ru/wp-content/uploads/2019/07/7.png?resize=740%2C416&ssl=1″/>

Значок Slack является отличным примером соответствия между значком и интерфейсом

какого размера должны быть иконки для приложения

какого размера должны быть иконки для приложения

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

Соответствие рекомендациям по дизайну иконок

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

Руководство по iOS здесь.

Правила для Android здесь.

Это не значит, что вам нужно рисовать различные значки приложений; на самом деле, существенные различия уменьшат узнаваемость приложения.

Вместо тысячи слов…

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

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

Я рекомендую ознакомиться с примерами из UX Planet — 10 случаев, которые показывают, как значок приложения влияет на коэффициент конверсии приложения, также там обсуждают как маркетинг приложений, так и дизайн иконок приложений. При работе над концепциями значков приложений мы ежедневно используем iOS Icon Gallery.

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *