Проектируем классные иконки приложений

Подготовка к установке пакетов значков

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

Nova Launcher
Цена: бесплатно

Apex Launcher — на заказ, защита, эффективность
Цена: бесплатно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почти два миллиона приложений в App Store и 2,1 миллиона в Google Play

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Согласно статистике, в настоящее время в Google Play Store доступно более 2,9 миллиона приложений, а в Apple App Store — почти 4,4 миллиона

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

Шаг 3: Используйте Launcher, чтобы настроить свой собственный значок

Существует множество инструментов запуска, которые могут помочь вам в применении созданного вами значка. Наиболее популярными являются Action Launcher и Nova Launcher

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

Применение значка с помощью Action Launcher

Чтобы применить пользовательский значок с Action Launcher, получить приложение из магазина Play и следуйте этим инструкциям:

1. Нажмите и удерживайте значок приложения, которое вы хотите изменить.
2. Удерживайте значок и перетащите его вверх, чтобы изменить в правом верхнем углу экрана.“
3. Перейдите в меню, чтобы увидеть все источники изображений для вашего значка.
4. Выберите «Мои фотографии».
5. Найдите расположение вашего собственного значка.

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

Применение значка с помощью Nova Launcher

Хотя процесс подачи заявок похож на Нова ЛаунчерЕсть несколько разных шагов.

1. Нажмите и удерживайте значок приложения на главном экране, пока не появится новое меню.
2. Выберите «Изменить».
3. Коснитесь поля со значком, чтобы настроить изображение приложения.
4. Выберите «Галерея приложений».
5. Выберите «Документы».
6. Найдите местоположение вашего нового изображения значка.
7. Отцентрируйте значок и убедитесь, что он находится внутри краев коробки.
8. Нажмите «Готово».

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

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

Приложения в App Store в категории “Производительность” — это отличный пример отсутствия уникальности в дизайне.

Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!

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

• Изучите, что делают другие дизайнеры в вашей нише, а потом попробуйте пойти другим путем. Проведите хорошее исследование — миру не нужна еще одна иконка с галочкой.
• Если вы стремитесь к уникальности, простой глиф на одноцветном фоне — это сомнительная стратегия. Поиграйте с разными цветами и композициями и поставьте себе задачу найти новые, интересные метафоры.
• Цвет — это отличный способ по-новому представить старую концепцию (хотя многие упускают его из виду).

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

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

Когда иконка согласуется с интерфейсом, это визуально усиливает идею вашего приложения.

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

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

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

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

• Один из способов добиться согласованности между приложением и иконкой — это придерживаться одной цветовой палитры и использовать схожий “язык дизайна”. Например, зеленый интерфейс можно усилить зеленой иконкой.
• Следующий способ не всегда возможен, но все же: попробуйте использовать в дизайне иконки символы, напрямую связанные с функциональностью приложения.

Список изображений Microsoft Store

«Как я могу указать изображения для списка моих приложений в Microsoft Store?»

По умолчанию мы используем некоторые изображения из ваших пакетов в Store, как описано в таблице, которая находится в верхней части этой страницы (вместе с другими изображениями, которые вы предоставляете в процессе отправки). Тем не менее вы также можете настроить, чтобы при показе страницы приложения клиентам, использующим Windows 10 (включая Xbox), Store не мог использовать изображения логотипов из ваших пакетов приложения, а показывал только загружаемые изображения. Так вы сможете эффективнее настроить внешний вид вашего приложения в Microsoft Store

(Обратите внимание, что если ваш продукт поддерживает более ранние версии ОС, эти клиенты могут по-прежнему видеть изображения из ваших пакетов, даже если вы используете этот параметр.) Это можно сделать в разделе Логотипы Store на шаге процесса отправки Список Store

После установки этого флажка появится новый раздел под названием Отображение изображений Store. Здесь вы можете загрузить 3 размера изображений, которые Store будет использовать вместо изображений логотипов из пакетов вашего приложения: 71 x 71, 150 x 150 и 300 x 300 пикселей. Требуется только размер 300 x 300, хотя мы рекомендуем предоставить все 3 размера.

Дополнительные сведения см. в разделе .

В чем разница между иконкой и логотипом?

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

Иконки:

• Иконка непосредственно представляет идею, концепцию или действие. Она облегчает работу с графическим представлением для пользователя.
• Иконки обычно используются в приложениях для представления того, для чего оно используется, и являются ключевым элементом интерфейса UI/UX.

Логотипы:

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

Советы по проектированию

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

Используйте векторные фигуры, где это возможно

Многие программы редактирования изображений, такие как Adobe Photoshop позволяют использовать комбинацию векторных форм и растровых слоев и эффектов. Когда это возможно, используйте векторные фигуры, так что если возникнет такая необходимость, наборы могут быть увеличены без потери детализации и четкости краёв.

Использование векторов также позволяет легко выровнять края и углы с пиксельным границам на меньших разрешениях.

Начните с большими размеров

Т.к. вам нужно будет создать наборы для различных плотностей экрана, то лучше начать с дизайна значков больших размеров, кратных размерам целевых значков. Например, иконки запуска 48, 72, 96 или 144 точек в ширину, в зависимости от плотности экрана (mdpi, hdpi, xhdpi, и xxhdpi, соответственно). Если вы изначально нарисовали иконки запуска размером 864×864точек, вам будет проще подгонять иконки, когда вы будете масштабировать к целевым размерам для создания окончательного набора.

При масштабировании, перерисуйте растровые слои по мере необходимости

Если вы масштабируете вверх изображение растрового слоя, а не векторного, то эти слои должны быть перерисованы вручную, что бы быть четкими при более высоких плотностях. Например, если круг 60×60 был нарисован как растровое изображение для mdpi он должен быть перерисован в круг 90×90 для hdpi.

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

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

Тип набора	Префикс	Пример
Иконки
Иконки запуска
Значки меню и иконки панели действий
Значки панели состояния
Иконки вкладок
Иконки диалогов

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

Настройка рабочего пространства, которое организует файлы по плотности

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

art/…
    mdpi/…
        _pre_production/…
            working_file.psd
        finished_asset.png
    hdpi/…
        _pre_production/…
            working_file.psd
        finished_asset.png
    xhdpi/…
        _pre_production/…
            working_file.psd
        finished_asset.png

1 2 3 4 5 6 7 8 9 10 11 12 13

art…   mdpi…     _pre_production…       working_file.psd     finished_asset.png   hdpi…     _pre_production…       working_file.psd     finished_asset.png   xhdpi…     _pre_production…       working_file.psd     finished_asset.png

xxhdpi/… _pre_production/… working_file.psd finished_asset.pngПоскольку структура вашего рабочего пространства похожа на структуру приложения, вы можете быстро определить, какие наборы должны быть скопированы в каждый каталог ресурсов. Разделение наборов по плотности также поможет вам обнаружить любые отклонения в именах файлов, которые важны поскольку соответствующие наборы для различных плотностей должны иметь одни и те же имя файлов.

Для сравнения, вот структура каталога ресурсов типичного приложения:

res/…
    drawable-ldpi/…
        finished_asset.png
    drawable-mdpi/…
        finished_asset.png
    drawable-hdpi/…
        finished_asset.png
    drawable-xhdpi/…
        finished_asset.png

1 2 3 4 5 6 7 8 9

res…   drawable-ldpi…     finished_asset.png   drawable-mdpi…     finished_asset.png   drawable-hdpi…     finished_asset.png   drawable-xhdpi…     finished_asset.png

Для получения дополнительной информации о том, как сэкономить ресурсы в проекте приложения см. Предоставление ресурсов.

Удалите ненужные метаданные из конечных наборов

Хотя инструменты SDK Android автоматически сжимают PNG файлы при упаковке ресурсов приложения в пакет установки, хорошая практика заключается в удалении ненужных заголовков и метаданных из ваших PNG наборов. Такие инструменты, как OptiPNG или Pngcrush могут гарантировать, что эти метаданные удалятся и, что размеры файлов ваших наборов изображений будет оптимизированы.

Инструкция по смене значков на экране смартфона Huawei ( honor )

1. С Рабочего экрана запускаем приложение «Темы».

Скрин №1 – нажать на иконку приложения «Темы».

2. Находясь на главной странице приложения «Темы» в режиме «Рекомендуется» в разделе «Темы», вы можете перейти в раздел поиска и скачивания новых иконок из интернета.

Для поиска новых видов значков нужно нажать на кнопку «Значки».

Если вы желаете сразу перейти к замене внешнего вида иконок из уже скаченных ранее «тем», то вам нужно будет перейти в режим «Я», нажав на кнопку «Я» внизу экрана.

Скрин №2 – надавить на кнопку «Значки».

3. В разделе «Значки» вы может подобрать новые значки в интернете из следующих трёх разделов:

• Топ платных;
• Топ новых;
• Топ бесплатных.

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

Скаченную тему иконок можно сразу установить, нажав на кнопку «ПРИМЕНИТЬ».

Скрин №3 – вид раздела «Значки» «Топ платных». Скрин №4 – вид раздела «Значки» «Топ бесплатных».

4. Для перехода к установке нового вида значков нужно на главной странице программы нажать на копку «Я» внизу экрана.

Далее, уже находясь в разделе «Я» — собственных «тем», нужно нажать на кнопку «Настроить».

Скрин №5 – надавить на кнопку «Я». Скрин №6 – нажать на кнопку «Настроить».

5. Находясь в разделе «Настроить» для смены вида кнопки нам нужно нажать на позицию «Значки».

Скрин №7 – надавить на позицию «Значки».

6. Теперь мы находимся в разделе «Значки». Здесь мы должны выбрать вид значков для установки из ранее скаченных «тем». Сейчас у нас установлены иконки из «темы» по умолчанию «Default», что подтверждает наличие синего значка «Галочка» на картинке «темы» «Default».

Мы решили установить кнопки из «темы» «Rainy Street». Для этого нужно нажать на картинку «RainyStreet».

А далее, в открывшемся окне «Rainy Street» мы можем установить иконки из этой «темы» нажав на кнопку «ПРИМЕНИТЬ», или настроить их, внеся дополнительные изменения к виду значков. Для этого нужно нажать на кнопку «НАСТРОЙКА».

Скрин №8 – нажать на картинку «Rainy Street». Скрин №9 – надавить на кнопку «НАСТРОЙКА».

7. Теперь в разделе «Пользовательские значки» мы можем внести дополнения к внешнему виду значков из «темы» «Rainy Street», нажимая на кнопки внизу экрана.

После того, как мы настроили вид иконок, для применения их нужно нажать на кнопку «Галочка» вверху экрана.

Скрин №10 – нажать на кнопки внизу экрана для изменения вида иконки. Скрин №11 – для установки новых иконок нажать на кнопку «Галочка».

8. Теперь мы установили новый вид иконок на экран смартфона.

Для того, чтобы отменить внесённые изменения и вернуть значки, которые были ранее установлены, нужно нажать на иконку приложения «Темы».

Скрин №12 – нажать на значок приложения «Темы».

9. Программа сразу перенесёт нас в раздел «Значки».

Для того, чтобы вернуть значки из ранее установленных по умолчанию «темы» «Default» нужно нажать на картинку «Default».

На следующем экране нужно нажать на кнопку «ПРИМЕНИТЬ».

Скрин №13 – нажать на картинку «Default». Скрин №14 – нажать на кнопку «ПРИМЕНИТЬ».

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

Сделать иконку ссылкой на рабочем столе

Телефон постепенно заменяет компьютер. На нём мы можем смотреть фильмы и посещать интересные форумы. Чтобы каждый раз не писать в поисковой строке название интересующего сайта, добавьте значок-ссылку на рабочий стол в Android или Айфон. Для этого отдельное приложение не понадобится.

Каждый браузер для мобильных устройств имеет функцию для добавления ссылки на главный экран.

Мобильный Яндекс Браузер

Этой программой довольно часто пользуются на телефоне. Он имеет некоторые преимущества для пользователей, зарегистрированных в Яндекс. Чтобы сделать ссылку с его помощью:

1. Запустите браузер и перейдите на сайт, ссылку на который нужно сохранить в виде иконки.
2. Нажмите три точки в нижней части экрана.
3. Выберите Добавить ярлык.

Откройте главный экран и найдите ссылку-значок. Теперь при нажатии на него будет сразу открываться нужный сайт. Миниатюра браузера, через который будет открываться ссылка, указана на значке.

Google Chrome для телефона

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

1. Нажмите вверху на кнопку меню (три точки).
2. Выберите пункт Добавить на главный экран.
3. При необходимости измените настройки иконки.

Opera Mini

Снова переходим на сайт, который нужно сохранить на рабочем столе Андроид. Нажимаем три точки вверху окна и выбираем пункт Добавить на домашний экран.

Подробнее о ресурсах значков приложения

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

Ресурс значка приложения отображается во многих местах: на панели задач Windows, в виде задач, ALT+TAB и в правом нижнем углу плиток в меню «Пуск». Поскольку ресурс значка приложения появляется во многих местах, у него есть некоторые дополнительные параметры определения размера и размещения, которых нет у других ресурсов: ресурсы «целевого размера» и ресурсы «без основы».

Ресурсы значков приложения целевого размера

• список переходов на начальном экране (компьютеры);
• нижний угол плитки начального экрана (компьютеры);
• сочетания клавиш (компьютеры);
• панель управления (компьютеры).

Ниже приведен список ресурсов целевого размера.

Размер ресурса	Пример имени файла
16×16*	Square44x44Logo.targetsize-16.png
24×24*	Square44x44Logo.targetsize-24.png
32×32*	Square44x44Logo.targetsize-32.png
48×48*	Square44x44Logo.targetsize-48.png
256×256*	Square44x44Logo.targetsize-256.png
20×20	Square44x44Logo.targetsize-20.png
30×30	Square44x44Logo.targetsize-30.png
36×36	Square44x44Logo.targetsize-36.png
40×40	Square44x44Logo.targetsize-40.png
60×60	Square44x44Logo.targetsize-60.png
64×64	Square44x44Logo.targetsize-64.png
72×72	Square44x44Logo.targetsize-72.png
80×80	Square44x44Logo.targetsize-80.png
96×96	Square44x44Logo.targetsize-96.png

* Как минимум мы рекомендуем предоставить эти размеры.

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

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

Ресурсы без основы

По умолчанию Windows использует целевой ресурс поверх цветной задней панели по умолчанию. Если вы хотите, вы можете предоставить целевой ресурс без основы. «Без основы» означает, что ресурс будет отображаться на прозрачном фоне. Имейте в виду, что эти ресурсы будут отображаться на различных цветах фона.

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

• Панель задач и эскиз панели задач (компьютеры)
• Список переходов на панели задач
• Представление задач
• ALT+TAB

Ресурсы без основы и тем

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

Как адаптировать новый пакет ко всем программам запуска

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

Adapticons
Цена: бесплатно

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

Для этого мы добавляем виджет Adapticons, нажимаем и выбираем приложение, для которого мы собираемся изменить дизайн

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

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