Иконка приложения и Launch image

Иконка приложения и Launch image

Есть такая поговорка: «Людей встречают по одежке, а провожают по уму». Точно такая же ситуация происходит и с приложениями, когда Вы листаете каталоги App Store. Зачастую именно иконка приложения является тем фактором, из-за которого пользователь переходит к описанию самого аппа. В этом уроке мы оттолкнемся от разработки и научимся правильно добавлять иконку к приложению (app icon), а также узнаем что такое Launch image и для чего он нужен.

Для добавления App Icon и Launch Image прибегнем к помощи уже знакомого asset-каталога. Откройте проект приложение-галлерею, которое мы написали при знакомстве с UICollectionViewController.

Иконка приложения

Наверняка Вы могли подумать, что достаточно добавить одно изображение иконки и на этом дело сделано. Но всё обстоит не так. Откройте группу изображений под названием AppIcon в asset-каталоге и Вы увидите следующее:

Иконка приложения и Launch image

AppIcon

Здесь мы уже видим 3 набора изображений, но и это еще далеко не всё.

Даже если Вы разрабатываете приложение исключительно для iPhone, это не значит, что его нельзя установить на iPad. И если не предусмотреть иконки для планшета — пользователь увидит шаблонную иконку, которую мы уже видели у нас в симуляторе. Этого не в коем случае нельзя допускать. Откройте Attributes inspector и включите опцию iPad iOS 7.0 and later. Теперь количество наборов в AppIcon увеличилось более чем в 2 раза.

Рассмотрим группы иконок более подробно.

  • iPhone:
    • Spotlight (iOS 5-6), Settings (iOS 5-9) — иконка, которая отображается в системных настройках и в Spotlight. Их размеры должны быть 58×58 px для 2x и 87×87 px для 3х.
    • Spotlight (iOS 7-9) — отображается в Spotlight, если версия iOS равняется 7 или выше. Размеры: 80х80 px для 2х и 120х120 для 3х.
    • iPhone App — главная иконка приложения, отображаемая в Springboard (домашний экран) Вашего iPhone или iPod Touch. Размеры: 120х120 px для 2х и 160×160 px для 3x.
  • iPad:
    • Settings (iOS 5-9) — иконка для системных настроек. Размеры: 29х29 px для 1x и 58×58 px для 2x.
    • Spotlight (iOS 7-9) — иконка Spotlight для iOS 7 и выше. Размеры: 40х40 px для 1х и 80х80 px для 2х.
    • iPad App — главная иконка iPad-приложения. Размеры: 76х76 px для 1х и 152×152 px для 2x.
    • iPad Pro App —  иконка исключительно для iPad Pro. Размер: 167×167 px.

Вы могли задаться вопросом: зачем добавлять так много иконок, если она всего одна? Ответ прост: Apple заботиться о качестве своих продуктов. Это касается и отображения сторонних приложений на девайсах их производства. Зачастую, если сжимать изображения большого разрешения системными средствами, то в результате получается неточная иконка ужасного качества.

Да, размеров много и все их не упомнить. Поэтому ресурс Start iOS подготовил для Вас шпаргалку, где объединены все размеры иконок для iOS устройств.

Вот еще несколько советов, касательно иконок iOS приложений, из личного опыта:

  1. Иконка должна отображать суть Вашего приложения.
  2. Приложите максимум усилий в разработке дизайна иконки, так как это «лицо» приложения в App Store.
  3. Будьте оригинальными. Если есть похожие аппы в сторе, то посмотрите на их иконки и подумайте чего в них не хватает и решите как свою сделать более красивой и узнаваемой из миллиона других.
  4. Делайте иконки для всех разделов одинаковыми. К примеру, если у Вас приложение о садоводстве, то не нужно делать иконку с деревом для настроек/spotlight и при этом на Springboard помещать иконку с цветочком.
  5. Одна из особенностей iOS иконок — закругленные углы. Не старайтесь сделать их самостоятельно. Всегда делайте полноценную квадратную иконку — iOS округлит их самостоятельно.

Можно создавать иконки для каждого размера в частности. Но, также из личного опыта, хотелось бы посоветовать замечательный бесплатный апп, который позволит ускорить этот процесс. Название этого приложения — Prepo (Mac App Store). Вам достаточно подготовить одно изображение иконки (512х512 или 1024х1024), указать для каких устройств его «резать» и выбрать место куда сохранить результат. Я не буду пошагово описывать что и как сделать, так как верю в то что Вы сами разберетесь.

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

Иконка приложения и Launch image

AppIcon с добавленными иконками

Если Вы ошиблись с размерами и «вставили» не подходящую иконку, Xcode даст Вам знать об этом, выдав предупреждение:

Иконка приложения и Launch image

Предупреждение Xcode

Запустим проект и посмотрим какой стала иконка приложения:

Иконка приложения и Launch image

Иконка приложения в симуляторе

Launch image

Launch image (он же Splash screen (сплэш скрин) и он же экран загрузки) — это экран или изображение, которые появляются при загрузке Вашего приложения. Добавить его довольно легко и на самом деле, он уже есть в нашем проекте.

Откройте LaunchScreen.storyboard в навигаторе. Это такой же сториборд, который мы используем при построении интерфейса. Разница заключается лишь в том, что LaunchScreen — это статический экран, с которым юзер не может взаимодействовать. В основном интерфейс данного вью строится на таких же статичных элементах GUI, как UIView, UILabel и UIImageView.

Добавим сюда несколько элементов. Сперва отключите опцию Use Size Classes и добавьте следующие объекты:

  • UIImageView:
    • Attributes  inspector:
      • Image: Выберите любое изображение из галлереи;
      • Mode: Aspect Fill.
    • Size attributes:
      • X: 0;
      • Y: 0;
      • Width: 320;
      • Height: 568.
  • UILabel:
    • Attributes inspector:
      • Text: «My Gallery»;
      • Color: White;
      • Font: System Medium 38.0;
      • Background: Black (Alpha 0.65%).
    • Size attributes:
      • X: 13;
      • Y: 240;
      • Width: 295;
      • Height: 88.

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

Launch screen это довольно новая фича и доступна только начиная с iOS 8. Если Вы разрабатываете приложения для iOS 7 и ранее, то должны добавить launch image в asset-каталог приложения. Нажмите на «+» внизу каталога и выберите опцию App Icons and Launch Images -> New iOS Launch Image. Xcode автоматически создаст 3 группы изображений с поддержкой вертикальной ориентации iPhone:

  • Для iOS 6:
    • 1x (320×480 px);
    • 2x (640×480 px);
    • Retina 4 (640×1136 px).
  • Для iOS 7:
    • 2x (640×480 px);
    • Retina 4 (640×1136 px).
  • Для iOS 8+:
    • Retina HD 5.5 (1242×2208 px);
    • Retina HD 4.7 (750×1334 px).

Если же Вам не нужна поддержка каких-либо версий, то Вы можете отключить их в Attributes inspector. Также если используетcя сториборд с Launch Screen, то можете смело убрать поддержку iOS 8+. В последние года зачастую приложения пишутся для iOS 7+, поэтому заготавливают launch images только для этой версии. Если же Вы хотите добавить поддержку iPad или горизонтальной ориентации для любого из семейств девайсов, то это можно сделать всё в том же Attributes inspector.

Все размеры экранов Вы также можете просмотреть в одной из наших шпаргалок.

  • Dmitriy Antonov

    «Размеры: 120х120 px для 2х и 160×160 px для 3x.»
    60pt: 2x = 120×120 px, 3x = 180×180 px