какого размера должны быть иконки для приложения
Как правильно подготавливать иконки для разработчика Андроид?
В гайде показано следующее:
Т.е. сама иконка вписывается в квадрат 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.
Самый важный совет, который я могу дать, это то, что вы никогда не должны забывать о самом приложении! В конце концов, для удаления приложения требуется всего несколько нажатий. Независимо от того, насколько крут ваш значок, если приложение бесполезно, пользователь его удалит.