Значок для приложения: как создать, технические характеристики, аспекты дизайна
Natalia Shpitula
Обновлено
Loading…
У каждого жителя США на смартфоне установлено больше сотни программ, и это число с каждым годом только растет. Чтобы вырваться вперед в конкурентной борьбе за пользователя, создайте уникальную иконку приложения, которая улучшит опыт взаимодействия с брендом. Как это сделать, расскажем в статье.
- Что такое значок приложения
- Технические характеристики иконок для Android и iOS
- Топ-пять аспектов дизайна иконок
- Три способа создать иконку
- Заключение
Что такое значок приложения
Небольшое изображение, которое пользователи видят в меню телефона, — это один из важных элементов айдентики. Иконка помогает выделиться, запомнить бренд и раскрыть суть вашего уникального предложения.
По статистике 70% мобильных приложений загружаются после поиска в App Store или Google Play (остальные — в результате рекламных кампаний, промо в соцсетях, обзоров и т.д.). Поэтому ваша задача — создать дизайн, который мгновенно привлечет внимание и вызовет желание узнать, что стоит за визуальным образом.
Технические характеристики иконок для Android и iOS
Существует два основных типа иконок — для систем Android и iOS. Хотя на первый взгляд они очень похожи, но отличаются множеством технических нюансов, которые стоит учитывать при разработке.
Google Play Store (Android) | App Store (iOS | |
Размер | 512 px × 512 px |
|
Формат | 32-разрядный PNG | PNG |
Цветовое пространство | sRGB | sRGB или P3 |
Форма | Полный квадрат. Google Play автоматически скругляет углы (радиус скругления — 20% от размера) и добавляет тени | Квадрат без закругленных углов и теней |
Топ-пять аспектов дизайна иконок
21% миллениалов удаляют мобильное приложение, если им не нравится, как иконка выглядит на экране. Поэтому важно продумать не только функциональность, но и эстетическую составляющую.
1. Простота
Лаконичность — это ключ к удачному дизайну. Вот какие нюансы нужно учесть:
- Отсекайте лишнее. Чем больше деталей — тем сложнее будет распознать и запомнить изображение, а также масштабировать его. Помните, что иконка должна быть хорошо различима в разных размерах: в магазине приложений, меню телефона и на панели настроек.
- Используйте символику. Сфокусируйтесь на одном узнаваемом элементе, как сделали Pinterest (кнопка), Snapchat (привидение) или Instagram (камера). В качестве иконки может выступать главный визуальный символ бренда — логотип, если он отвечает принципам минимализма.
- Лайфхак: изучите значки ваших любимых приложений и проанализируйте, какие символы использованы в их разработке.
Source: by Ramotion
2. Цвет
Этот элемент брендинга может стать решающим при выборе приложения. Рассказываем, как правильно подобрать цветовую гамму:
- Используйте не больше двух-трех цветов, как большинство популярных компаний, например, Airbnb, Pandora или Dropbox. Большое количество оттенков будет сливаться в одно нечеткое пятно.
- Берите пример с топ-брендов. Исследование показало, что чаще всего они выбирают для графики синий цвет (Google Calendar, Safari, Twitter, LinkedIn). Второе и третье места делят красный и белый, причем красный чаще всего используют бренды, связанные с едой и напитками.
- Убедитесь, что выбранные цвета соответствуют вашему бизнесу, привлекают целевую аудиторию и согласуются с остальными элементами фирменного стиля.
- Проверьте, как значок смотрится на разных фонах — цветном, черном и белом.
Source: by Vadim Carazan
3. Согласованность
Визуальный символ приложения должен соответствовать его содержанию. Гармоничный образ помогает воспринимать продукт как единое целое и вызывает более сильную эмоциональную привязанность.
- Используйте один язык дизайна: цветовую палитру, стиль и приемы. В вашем приложении присутствует градиент, необычная геометрия или ретро-стиль? Примените их и в иконке.
- Если у вас несколько приложений, оформите их в едином стиле, как сделал Adobe для своих продуктов: Photoshop Sketch, Illustrator Draw, Lightroom, Skan и других.
- Привяжите символику к функциональности приложения, чтобы пользователь с первого взгляда понял, о чем ваш продукт. К примеру, винный рейтинг Vivino использует виноградную гроздь, а музыкальный сервис Spotify — символ громкости динамика.
Source: by Eddie Lobanovskiy
4. Лишние элементы
Длинные надписи и фотографии — ненужные элементы на маленьком значке. Они рассеивают внимание пользователей и затрудняют восприятие.
- Люди воспринимают изображения в 60 тысяч раз быстрее, чем слова, а при выборе приложения скорость может иметь решающее значение.
- Помните: если вам приходится использовать слова, значит, вы не исчерпали весь потенциал визуальных образов. Подбирайте метафоры к вашему бизнесу, пока не найдете подходящий символ.
- Исключения — короткие названия брендов (BBC News, Uber) или использование первой буквы («F» у Facebook и Foursquare).
- Тот же принцип работает и с фотографиями, детали на которых будут неразличимы в маленьком разрешении. Если у вас есть любимый снимок, который характеризует бизнес, используйте для брендинга его элементы, создав из них векторное изображение.
Source: by Dmitry Lepisov
5. Уникальность
Ваша иконка будет постоянно конкурировать с тысячами других за внимание пользователя. Поэтому важно отстроиться от конкурентов, чтобы дизайн был уникальным и вызывал эмоциональную привязанность.
- Изучите самые популярные приложения в вашей нише, проанализируйте, какие приемы они используют. Подумайте, за счет чего вы можете дифференцироваться: цветовой гаммы, символики или графики.
- Проанализируйте, какие элементы привлекают вашу целевую аудиторию, а какие, наоборот, отталкивают. Учитывайте результаты при разработке значка.
Source: by Ramotion
Бонусные советы:
- Проведите A/B-тестирование. Если не можете выбрать между двумя вариантами иконок, перед запуском организуйте маркетинговое исследование. A/B-тестирование — это метод, который позволяет запустить в работу оба варианта одновременно и сравнить, какой из них эффективнее.
- Учитывайте сезонность. Подумайте, как вы можете «оживлять» иконку к праздникам или громким событиям: Рождеству, «черной пятнице» или Хэллоуину. Это может быть изменение цвета или добавление небольшого характерного элемента.
- Следите за трендами. Соблюдайте грань между слепой погоней за модой и актуальностью. Не нужно обновлять иконку каждый сезон, но следить за глобальными трендами стоит. Например, если все конкуренты уже перешли на модную плоскую графику, а вы до сих пор используете 3D-эффект, значит, пора сменить значок.
Source: by Lukas Stranak
Source: by Sandor
Source: by Jakub Kuik
Source: by Sandor
Три способа создать иконку
В зависимости от опыта и бюджета вы можете за несколько минут разработать значок онлайн, потратить время на дизайн в профессиональных редакторах или отдать работу на аутсорс.
1. Графические редакторы. Подойдет пользователям, у которых есть опыт работы в Photoshop или Illustrator. Плюс этого способа в том, что вы получите уникальный результат даже при нулевом бюджете.
2. Онлайн-сервисы:
- Logaster. Онлайн-генератор создаст логотип, который вы можете кастомизировать и скачать бесплатно в небольшом размере, подходящем для иконки мобильного приложения.
- Canva. Бесплатный редактор с тысячами шаблонов графики и возможностью персональной адаптации.
- Iconsflow. Сервис с более чем 200 тысяч значков: просто выберите подходящий, измените цвет, размер и добавьте эффекты.
- Appicon. Этот редактор адаптирует готовое изображение под размеры иконок для iOS и Android.
Мечтаете о собственном лого?
Введите название компании в поле ниже и наш генератор предложит вам лучшие дизайны!
3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.
Заключение
Подытожим самые важные моменты, о которых стоит помнить при разработке значка мобильного приложения.
- Позаботьтесь о простоте, узнаваемости и уникальности.
- Следите за трендами, чтобы оставаться актуальным.
- Учитесь у топ-брендов. Например, из этого списка самых популярных мобильных приложений 2019 года:
- Facebook Messenger
- TikTok
- SHAREit
- Likee
- Snapchat
- Netflix
- Spotify
Source: by Parmar Raj
Как сделать иконку для приложения iOS и Android
В первом квартале 2021 года в Google Play было доступно около 3.5 миллиона приложений, а в App Store — ещё 2.2 миллиона. У пользователей есть масса приложений и игр, а конкуренция за них у разработчиков как никогда высока.
Чтобы привлечь внимание пользователей и завоевать долю рынка, ваше приложение должно быть совершенно во всём. И иконка, которая встречает пользователя в магазине, которая живёт у него на рабочем столе и сопровождает всё время в работе с продуктом, в первую очередь. В этой статье мы обсудим, почему так важна иконка приложения или игры, и как сделать её заметной.
Почему иконка приложения важна
Что человеческий мозг обрабатывает быстрее: изображения или текст? Правильный ответ — изображения. Визуальные эффекты обрабатываются значительно быстрее, чем текст.
Другими словами, когда пользователь сталкивается с вашим приложением, его иконка будет одним из первых элементов, которые он заметит. Вот почему значок приложения играет важную роль в App Store Optimization.
Хотя иконка может показаться незначительной частью вашего мобильного продукта, подумайте над следующим:
- Иконка приложения непосредственно влияет на количество загрузок. Поскольку 70% пользователей ищут приложения в магазинах, иконка должна быть запоминающейся и привлекающей внимание. Это первое, что видят пользователи, поэтому разработчики должны работать над созданием положительного первого впечатления. Кроме того, уникальный значок будет выделяться на главном экране среди других, привлекая внимание к приложению и побуждая пользователей проводить в нем больше времени.
- Иконка — это мост между пользователем и приложением. Во многих случаях о книге судят по обложке. В нашем случае приложения оцениваются по их значкам. Красивый значок может служить хорошей обёрткой для вашего приложения и вызывать к нему повышенный интерес (правильная иконка может повысить количество установок до 40%). Хотя, конечно, главное значение имеет функционал вашего продукта, пользователь может никогда до него не добраться, если приложение оттолкнёт его на эстетическом или эмоциональном уровне. И наоборот, красивая иконка может установить эстетическую и эмоциональную связь, что будет способствовать виральности.
Нет, в общепринятом смысле иконка вашего приложения — это совсем не логотип. Хотя иконки и обладают некоторыми «брендинговыми» качествами логотипов, для них существует множество своих собственных ограничений и смыслов. Вы должны понимать различия между этими понятиями. Логотип — это масштабируемое изображение, элемент брендинга компании, который используется на бланках и рекламных щитах. Иконка — визуальное представление вашего продукта, Она должна не просто красиво выглядеть и выделяться везде, где используется, но ещё и передавать основную суть вашего приложения.
Как сделать хорошую иконку для мобильного приложения
Шаг 1. Концепция
Вот три правила, которым мы рекомендуем следовать при разработке идеи дизайна идеального значка приложения:
- Сосредоточьтесь на своей аудитории. Чтобы иконка работала как маркетинговый инструмент, увеличивающий количество загрузок, он должен быть привлекательным для вашей целевой аудитории. Это должно отражаться в цветах, шаблоне и общем дизайне.
- Будьте аутентичными. Вы вряд ли сможете усилить свой бренд и выделиться, если ваш значок будет похож на значок вашего конкурента. Более того, плохая иконка, не соответствующая вашему бренду, может запутать пользователей и оттолкнуть клиентов.
- Опишите ваш продукт, используя визуальный язык. Иконка должна рассказывать про ваше приложение. Создайте список описательных ключевых слов и проведите мозговой штурм с командой о том, как представить эти ключевые слова в виде символов или рисунков. Они и могут стать основой для дизайна лучшей иконки.
Шаг 2. Рекомендации платформ
При создании приложения обязательно придерживайтесь интерфейса самой операционной системы и принятых в ней норм. Другими словами, вы должны быть аутентичными и соответствовать стандартам платформы и её магазина приложений.
И iOS, и Android разработали определённый набор правил относительно шаблонов, стиля, макетов и т.д. Вы можете найти рекомендации по дизайну Android здесь, а iOS — тут. Ниже мы составили сводку основных отличий этих магазинов:
Google Play Store (Android) | App Store (iOS) | |
Разрешение | 512px × 512px | iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x) |
Формат | 32-битный PNG | PNG |
Цвета | sRGB | sRGB или P3 |
Форма | Квадрат — Google Play автоматически скруглит углы (20% от размера иконки) и добавит тени | Квадрат — без скругления или теней |
Существуют и не технические отличия — например, в Google Play не рекомендуют использовать бейджи, а в App Store оружие, так что хорошо изучите правила магазинов, в которых вы собираетесь публиковать приложение или игру.
Разные правила не означают, что вам обязательно нужно разрабатывать разные иконки для каждой ОС. Создание единого дизайна и его корректировка может сэкономить время, деньги и усилия.
Шаг 3. Дизайн
По данным Comscore, каждый пятый миллениал готов удалить приложение из-за непривлекательного значка (не говоря уже о том, сколько людей откажется от установки из-за непривлекательной иконки). Имея это в виду, красивое и приятное изображение для вашего продукта, вероятно, так же важно, как и правильная функциональность.
Вот некоторые советы, которые важно учесть уже на стадии разработки самого изображения:
1. Помните о масштабируемости. Иконка представляет приложение практически везде (в магазине, на домашнем экране, в диспетчере задач, в уведомлениях). Следовательно, её размер будет отличаться, и вам нужно убедиться, что ваш значок будет хорошо смотреться в любом месте.
2. Хотя потеря деталей в разных размерах неизбежна, ясность и оригинальная идея должны сохраниться. Кроме того, иконка приложения должна быть оптимизирована для различных устройств. Есть разные инструменты, которые позволяют вам увидеть, как иконка будет смотреться в том или ином формате.
3. Сведите детали к минимуму. Значок должен быть символическим. Лучший способ достичь желаемого результата — свести к минимуму количество деталей, используемых в дизайне. В конце концов, простота — это ключ к успеху. Простой дизайн передаёт чёткое сообщение, а также вписывается в текущую тенденцию минимализма в дизайне. Кроме того, простой значок помогает уменьшить путаницу среди ваших пользователей. Чем проще дизайн, тем легче его понять. Можно выбрать один символический элемент и сделать его центральным в окончательном дизайне иконки.
4. Будьте уникальными и узнаваемыми. Во-первых, уникальный образ узнаваем. Он вызывает эмоциональную связь с вашими пользователями. Во-вторых, уникальность даёт конкурентное преимущество. Вы вряд ли захотите использовать те же узоры и цвета, которые используют другие разработчики. Избегайте копирования, сегодня потребители ценят подлинность. Они не хотят иметь дело с репликами или пиратскими копиями.
5. Тщательно выбирайте цвета. Излишне говорить, что цвета влияют на общее восприятие. Цвет может говорить о многом и обращаться к человеческому подсознанию.
6. Предпочитайте символы тексту. Вам не нужен текст, чтобы сделать значок приложения понятным или рассказать о своём продукте. Фактически, вы можете отказаться от текста и говорить с помощью символов и изображений, которые олицетворяют идентичность вашего бренда. Однако, если вы всё же хотите использовать текст, сведите его к минимуму. Вы можете вставить название приложения, если оно короткое, как, например, BBC. В любом другом случае лучше ограничить текст одной буквой. Например, в Skype используется буква «S», а в Facebook — буква «F». Добавление слишком большого количества текста ухудшает читаемость иконки, и она точно станет нечитаемой при малых размерах.
7. Будьте информативны. Эффективная иконка может предоставить контекст о функциональности вашего приложения. Например, в приложении для электронной коммерции может быть сумка для представления покупок, в приложении для чтения может быть книга, в музыкальном приложении может использоваться музыкальная нота, а в приложении для фитнеса может быть пламя, представляющее сжигание калорий.
Шаг 4. Тестирование
Путь к идеальной иконке, привлекающей и удерживающей пользователей, находится исключительно с помощью тестирования. Без обратной связи вы не можете быть уверены, что ваша иконка работает так, как задумано, и достигает максимума.
В ходе тестирования необходимо создать несколько вариантов дизайна и протестировать их. Андроид-разработчики могут использовать Google Experiments в Google Play, которые позволяют им тестировать различные элементы страницы приложения, включая иконку. Разработчики iOS могут использовать для A/B-тестирования Facebook или соответствующие сервисы.
Помните, что в силу различий аудитории, лучше всего работающие иконки в Google Play могут быть менее эффективными в App Store, и наоборот. Как мы указали выше, не обязательно создавать разные дизайны для iOS и Android. Но лучше протестировать разные варианты в соответствующих магазинах приложений, чтобы понимать, какие работают лучше.
Помните и о математических особенностях экспериментов, о них мы рассказывали здесь.
Иконка — это начало успеха
Сегодня иконка — это неотъемлемая часть идентичности бренда и первая точка соприкосновения между вашим приложением и пользователем. Она играет ключевую роль в привлечении внимания пользователя к вашему мобильному продукту. Более того, это идеальный инструмент для презентации вашей функциональности и передачи идеи вашего бренда ещё до того, как пользователи откроют ваше приложение.
Значки приложений — Основы — Руководство по пользовательскому интерфейсу — Дизайн
Уникальный запоминающийся значок сообщает о цели и индивидуальности вашего опыта и может помочь людям с первого взгляда узнать ваше приложение или игру в App Store и на своих устройствах.
Красивые значки приложений являются важной частью взаимодействия с пользователем на всех платформах Apple, и каждое приложение и игра должны иметь такие значки. Каждая платформа определяет немного отличающийся стиль для значков приложений, поэтому вы хотите создать дизайн, который хорошо адаптируется к различным формам и уровням детализации, сохраняя при этом сильную визуальную согласованность и обмен сообщениями. Чтобы загрузить шаблоны, помогающие создавать значки для каждой платформы, см. Ресурсы Apple Design. Инструкции по созданию других типов значков см. в разделе Значки.
Лучшие практики
Примите простоту. Простые значки легче понять и распознать. Найдите концепцию или элемент, который отражает суть вашего приложения или игры, сделайте его центром внимания значка и выразите его простым и уникальным способом. Избегайте добавления слишком большого количества деталей, потому что их может быть трудно различить, и значок может выглядеть грязным, особенно в небольших размерах. Отдайте предпочтение простому фону, делающему акцент на основном изображении — вам не нужно заполнять всю иконку контентом.
Создайте дизайн, который хорошо работает на нескольких платформах, чтобы он чувствовал себя как дома на каждой из них. Если ваше приложение или игра работает более чем на одной платформе, используйте одинаковое изображение и цветовую палитру для всех значков, отображая их в стиле, подходящем для каждой платформы. Например, в iOS и watchOS значок приложения «Почта» использует упрощенный графический стиль для изображения белого конверта на синем фоне; macOS использует аналогичный синий фон, добавляя глубину и детализацию конверту, придавая ему реалистичный вес и текстуру.
Включайте текст только в том случае, если он является неотъемлемой частью вашего опыта или бренда. Текст в значках часто слишком мелкий, чтобы его можно было легко прочитать, из-за этого значок может казаться загроможденным, и он не поддерживает специальные возможности или локализацию. В некоторых контекстах имя приложения отображается рядом со значком, что делает излишним отображение имени внутри него. Хотя использование мнемоники, такой как первая буква имени вашего приложения, может помочь людям распознать ваше приложение или игру, избегайте использования несущественных слов, которые говорят людям, что с ними делать, таких как «Смотреть» или «Играть», или контекстно-зависимых терминов, таких как « Новое» или «Для iOS».
Предпочитайте графические изображения фотографиям и избегайте дублирования компонентов пользовательского интерфейса в значке. Фотографии полны деталей, которые плохо смотрятся при просмотре в маленьком размере. Вместо того, чтобы использовать фотографию, создайте графическое представление контента, которое подчеркнет особенности, которые вы хотите, чтобы люди заметили. Точно так же, если у вашего приложения есть интерфейс, который люди узнают, не просто копируйте стандартные компоненты пользовательского интерфейса или используйте скриншот приложения в своей иконке.
При необходимости оптимизируйте значок для конкретных размеров, которые система отображает в таких местах, как результаты поиска Spotlight, настройки и уведомления. Для iOS, iPadOS и watchOS вы можете указать Xcode сгенерировать все размеры из вашего значка App Store размером 1024 × 1024 пикселей или предоставить ресурсы для некоторых или всех размеров значков отдельных размеров. Для macOS и tvOS необходимо указать все размеры. Если вы хотите отказаться от системных версий значка приложения и вместо этого создать свой собственный, убедитесь, что изображение остается четким при уменьшении размера значка. Например, вы можете удалить мелкие детали и ненужные функции, упростив изображение и преувеличив основные функции. Если вам нужно внести такие изменения, делайте их незаметными, чтобы значок вашего приложения оставался визуально согласованным в любом контексте.
На значке приложения Safari размером 512×512 пикселей (слева) для обозначения градусов используется круг делений; версия значка 16×16 пикселей (справа) не включает эту деталь.
Создайте значок в виде квадратного изображения без полей. На большинстве платформ система применяет маску, которая автоматически регулирует углы значков в соответствии с эстетикой платформы. Например, watchOS автоматически применяет круглую маску. Исключением является macOS: хотя система применяет внешний вид прямоугольника со скругленными углами к значку приложения, созданного с помощью Mac Catalyst, вам необходимо создать значок приложения macOS правильной формы. Загружаемые производственные шаблоны, помогающие создавать значки приложений для каждой платформы, см. в разделе Ресурсы Apple Design.
Попробуйте предложить альтернативный значок приложения. В iOS, iPadOS и tvOS люди могут выбрать альтернативную версию значка, которая укрепит их связь с приложением или игрой и улучшит их опыт. Например, спортивное приложение может предлагать разные значки для разных команд. Убедитесь, что каждый альтернативный значок приложения, который вы создаете, тесно связан с вашим контентом и опытом; избегайте создания версии, которую люди могут принять за значок другого приложения. Когда люди хотят переключиться на альтернативный значок, они могут посетить настройки вашего приложения.
ПРИМЕЧАНИЕ Как и в случае с основным значком приложения, альтернативные значки приложений также подлежат проверке приложения и должны соответствовать Руководству по проверке App Store.
Не используйте копии оборудования Apple. Продукты Apple защищены авторским правом и не могут быть воспроизведены в значках ваших приложений.
Особенности платформы
iOS, iPadOS
Не добавляйте наложение или рамку к значку настроек. iOS автоматически добавляет 1-пиксельную обводку ко всем значкам, чтобы они хорошо смотрелись на белом фоне настроек.
macOS
В macOS значки приложений имеют общий набор визуальных атрибутов, включая форму прямоугольника со скругленными углами, фронтальную перспективу, горизонтальное положение и равномерную тень. Основанные на языке дизайна macOS, эти атрибуты демонстрируют реалистичный стиль рендеринга, ожидаемый пользователями macOS, и в то же время обеспечивают гармоничное взаимодействие с пользователем.
Попробуйте изобразить знакомый инструмент, чтобы сообщить, для чего люди используют ваше приложение. Чтобы дать контекст цели вашего приложения, вы можете использовать фон значка для изображения среды инструмента или элементов, на которые он влияет. Например, значок TextEdit сочетает в себе механический карандаш с листом разлинованной бумаги, чтобы предложить утилитарный опыт письма. После того, как вы создадите подробное реалистичное изображение инструмента, часто бывает хорошо, если он плавает прямо над фоном и немного выходит за границы значка. Если вы сделаете это, убедитесь, что инструмент остается визуально единым с фоном и не подавляет форму прямоугольника со скругленными углами.
Если вы изображаете реальные объекты на значке приложения, сделайте так, чтобы они выглядели так, как будто они сделаны из физических материалов и имеют реальную массу. Попробуйте воспроизвести характеристики таких материалов, как ткань, стекло, бумага и металл, чтобы передать вес и ощущение объекта. Например, на значке приложения Xcode изображен молоток, который выглядит так, будто у него стальная головка и полимерная рукоятка.
Используйте тень в шаблоне дизайна значков. Шаблон значка приложения включает определяемую системой тень, которая помогает значку вашего приложения координироваться с другими значками macOS.
Рассмотрите возможность использования внутренних теней и бликов, чтобы добавить четкости и реализма. Например, значок приложения «Почта» использует как тени, так и блики, чтобы придать конверту подлинность и показать, что клапан слегка приоткрыт. В значках, которые включают инструмент, который плавает над фоном, например TextEdit или Xcode, внутренние тени могут усиливать восприятие глубины и придавать инструменту реальный вид. Тени и блики должны указывать на источник света, обращенный к значку, расположенный чуть выше центра и слегка наклоненный вниз.
Избегайте определения контуров, которые предполагают форму, отличную от прямоугольника со скругленными углами. В редких случаях может потребоваться тонкая настройка базовой формы значка приложения, но это может привести к созданию значка, который выглядит так, как будто он не подходит для macOS. Если вам необходимо изменить форму, отдайте предпочтение тонким корректировкам, которые продолжают выражать силуэт прямоугольника со скругленными углами.
Сохранять основное содержимое в ограничивающей рамке сетки значков; держите все содержимое в пределах внешней ограничивающей рамки. Если основное содержимое значка выходит за пределы ограничивающей рамки сетки значков, оно выглядит неуместно. Если вы накладываете инструмент на значок, хорошо работает выравнивание верхнего края инструмента с внешней ограничивающей рамкой, а его нижнего края с внутренней ограничивающей рамкой, как показано ниже. Вы можете использовать сетку, чтобы помочь вам расположить элементы внутри значка и убедиться, что центрированные внутренние элементы, такие как круги, используют размер, соответствующий другим значкам в системе.
ТВОС
Иконки приложений tvOS используют от двух до пяти слоев, чтобы создать ощущение глубины и жизненности, когда люди фокусируют на них внимание. Руководство см. в разделе Слоистые изображения.
Используйте соответствующее разделение слоев. Если ваш значок включает логотип, отделите логотип от фона. Если ваш значок содержит текст, переместите текст на передний план, чтобы он не был скрыт другими слоями при возникновении эффекта параллакса.
Осторожно используйте градиенты и тени. Фоновые градиенты и виньетки могут конфликтовать с эффектом параллакса. Для градиентов предпочитайте стили сверху вниз, от светлого к темному. Тени обычно лучше всего выглядят как четкие оттенки с резкими краями, которые запекаются в фоновом слое и не видны, когда значок приложения неподвижен.
Используйте различные уровни непрозрачности, чтобы усилить ощущение глубины и живости. Творческое использование непрозрачности может выделить ваш значок. Например, значок «Фотографии» разделяет центральную часть на несколько слоев, содержащих полупрозрачные элементы, что придает дизайну большую живость.
Убедитесь, что значок на главном экране соответствует спецификациям безопасной зоны. Во время фокусировки и параллакса система может обрезать содержимое по краям значка приложения, когда значок масштабируется и перемещается. Чтобы содержимое значка не обрезалось слишком сильно, оставьте дополнительное пространство, как показано в разделе «Технические характеристики» > tvOS.
watchOS
Значок приложения watchOS имеет круглую форму и не содержит сопроводительного текста.
Избегайте использования черного цвета в качестве фона значка. Осветлите черный фон или добавьте рамку, чтобы значок не сливался с фоном дисплея.
Технические характеристики
Атрибуты значков приложений
Значки приложений на всех платформах используют формат PNG и поддерживают следующие цветовые пространства:
- Дисплей P3 (широкий цветовой охват)
- sRGB (цветной)
- Серая гамма 2. 2 (оттенки серого)
Слои, прозрачность и угловой радиус значка приложения могут различаться в зависимости от платформы. В частности:
Платформа | Слои | Прозрачность | Форма актива |
---|---|---|---|
iOS, iPadOS | Одноместный | Нет | Площадь |
macOS | Одноместный | Да, при необходимости | Квадрат с закругленными углами |
ТВОС | Несколько | Нет | Прямоугольник |
watchOS | Одноместный | Нет | Площадь |
Размеры значков приложений
Размеры значков приложений iOS, iPadOS
Вам необходимо предоставить большую версию значка приложения размером 1024×1024 пикселей для отображения в App Store. Вы можете позволить системе автоматически уменьшать большой значок приложения для создания всех других размеров или — если вы хотите настроить внешний вид значка для определенных размеров — вы можете предоставить несколько версий.
@2x (пикселей) | @3x (пикселей) только для iPhone | Применение |
---|---|---|
120×120 | 180×180 | Домашний экран на iPhone |
167×167 | – | Главный экран на iPad Pro |
152×152 | – | Домашний экран на iPad, iPad mini |
80×80 | 120×120 | В центре внимания iPhone, iPad Pro, iPad, iPad mini |
58×58 | 87×87 | Настройки на iPhone, iPad Pro, iPad, iPad mini |
76×76 | 114×114 | Уведомления на iPhone, iPad Pro, iPad, iPad mini |
Размеры значка приложения macOS
Для App Store создайте версию значка приложения macOS размером 1024×1024 пикселей. Кроме того, вам также необходимо предоставить значок следующих размеров.
@1x (пикселей) | @2x (пикселей) |
---|---|
512×512 | 1024×1024 |
256×256 | 512×512 |
128×128 | 256×256 |
32×32 | 64×64 |
16×16 | 32×32 |
Размеры значка приложения tvOS
Для App Store создайте версию значка приложения tvOS размером 1280×768 пикселей. Кроме того, вам также необходимо предоставить значок следующих размеров.
@1x (пикселей) | @2x (пикселей) | Применение |
---|---|---|
400×240 | 800×480 | Главный экран |
Рассмотрите возможность создания безопасной зоны на значке главного экрана. Во время фокусировки и параллакса содержимое по краям значка приложения может быть обрезано по мере масштабирования и перемещения значка. Чтобы содержимое вашего значка не обрезалось слишком сильно, вы можете добавить дополнительное пространство для передышки.
Размеры значка приложения для watchOS
Для App Store создайте версию значка приложения для watchOS размером 1024×1024 пикселей. Вы можете позволить системе автоматически масштабировать эту версию до всех других размеров или — если вы хотите настроить внешний вид значка приложения для определенных размеров — вы можете указать размеры, указанные в следующей таблице. Все размеры значков показаны в пикселях @2x.
38 мм | 40 мм | 41 мм | 42 мм | 44 мм | 45 мм | 49мм | Применение |
---|---|---|---|---|---|---|---|
80×80 | 88×88 | 92×92 | 80×80 | 100×100 | 102×102 | 108×108 | Главный экран |
48×48 | 55×55 | 58×58 | 55×55 | 58×58 | 66×66 | 66×66 | Центр уведомлений |
172×172 | 196×196 | 196×196 | 196×196 | 216×216 | 234×234 | 258×258 | Короткий взгляд |
Если у вас есть сопутствующее приложение для iPhone, вам также необходимо предоставить значок приложения для watchOS следующих размеров.
@2x (пикселей) | @3x (пикселей) |
---|---|
58×58 | 87×87 |
Список изменений
14 сентября 2022 г. | Добавлены спецификации для Apple Watch Ultra. |
App Icons — Best Themer: Angst в App Store
Скриншоты iPhone
Описание
Загрузите лучшие значки приложений и темы для домашнего экрана! Вас ждут более 500+ иконок, и все они бесплатны. Вы можете легко настроить свой телефон с помощью удивительных значков приложений. Выбирайте понравившиеся и скачивайте их в один клик.
Давайте откроем красиво оформленные значки приложений для вашего телефона. Вы можете найти разные темы и концепции! Найдите лучшую концепцию для себя и загрузите весь набор иконок за считанные секунды. Все, что вам нужно сделать, это найти идеальный пакет для себя.
Вам надоели обычные логотипы приложений? Ищете новые стили, которые могут очень легко отразить вас? Тогда вы находитесь в правильном месте! Настройка домашнего экрана еще никогда не была такой простой.
Темы
Angst имеет множество различных тем на ваш вкус.
Иконки приложений
Откройте для себя хорошо продуманную коллекцию стильных иконок Angst. Все значки приложений были разработаны специально для вас. Вы должны начать искать свой собственный набор значков приложений для вашего телефона. Все значки приложений уникальны и шикарны. Превратите свой мобильный телефон в творческий набор иконок! Вам скучно? Затем измените его на другой комплект экрана значков приложений. Все они ждут вас.
Политика конфиденциальности:
http://angst.bears.ventures/privacy/
Условия использования:
http://angst.bears.ventures/terms/
Версия 3.0.1
— Исправление ошибок
— Обновлено подключение к серверу
Рейтинги и обзоры
1,2 тыс. оценок
Хороший
Ну, я действительно не знаю, на что похоже приложение, но все маленькие значки действительно классные, так что это хорошо, и у меня есть. Он видел какие-либо проблемы или ошибки, так что это хорошо, но причина, по которой я даю этому 4/5, заключается в том, что я действительно не видел его, так что об этом 😁
Спасибо за оценку.
Разрешить доступ ко всем фотографиям!
Когда вы выбираете значки приложений для использования, вы должны выбрать «разрешить доступ ко всем фотографиям»! Затем они будут в вашей фотопленке для использования в качестве значка ярлыка приложения. Мой телефон такой эстетичный, пожалуйста, теперь он мне нравится! Спасибо 🙂
Вы не можете загружать значки, не разрешив доступ к фотографиям. В приложении есть вспомогательные части. Пожалуйста, просмотрите.
Это хорошее приложение
Из того, что я могу сказать, это бесплатно, есть ограниченные возможности, но в целом это хорошо, и вы, вероятно, найдете то, что вам нравится, если в нем нет приложения в списке, которое также позволяет вам загрузить его
Спасибо за комментарий.
Разработчик Ранджит Бхинге указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см.