Как добавить значок приложения для iPhone с помощью Cordova

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

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

Рекомендуемое чтение: создание собственного мобильного приложения с Cordova

Требование к Apple Icon

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

Вам нужно будет принять во внимание эти характеристики при создании вашего значка.
Размер / Платформы
iOS 6.0 / 6.1
iOS 7.0 / 7.1
120 × 120
✔
✔
114 × 114
✔

80 × 80
✔
✔
58 × 58
✔
✔
57 × 57
✔

29 × 29
✔

Создание иконок

Предполагая, что наше приложение должно поддерживать вплоть до iOS 6.1, нам понадобится 6 размеров для иконки. Кажется, много работы, а? Ну, не волнуйтесь, так как вы можете использовать AppIconTemplate, AppIconTemplate является шаблоном Photoshop и поставляется с предустановленным действием Photoshop, которое упростит рабочий процесс при разработке и создании значков нескольких размеров.

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

Добавление значков в приложение

Чтобы добавить значки, переместите их в каталог / platform / ios / {AppName} / Resources / icons, который был создан, когда мы ранее добавляли платформу iOS в проект с помощью команды платформы cordova.

Кроме того, лучше переименовать значки в соответствии со стандартным соглашением Apple об именах, как показано на снимке экрана выше: icon-[size]-[@2x], @ 2x суффикс используется для отображения дисплея Retina. Когда значки будут готовы, нажмите кнопку воспроизведения, чтобы создать приложение и показать его в iPhone Simulator. И вы должны увидеть свою новую иконку, вот так.

Удаление значка глянцевый эффект
Иногда глянцевый эффект, который iOS дает значку, может затруднить детализацию значка. Если вы хотите удалить эффект глянца, откройте файл {appname} -info.plist в Xcode. Затем выберите «ДА», чтобы «Значок уже включал эффекты глянца», как показано на следующем снимке экрана.

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

Вывод

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