Bookmark and Share

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

Для начала, небольшой рисунок (спасибо Себастьяну де Визу, невероятно талантливому дизайнеру и «хозяину» блога Cocoia, за предоставленный оригинал в формате PSD), демонстрирующий все, что я буду рассказывать:

Как видите, при создании иконки универсального приложения дизайнеру придется нарисовать минимум 6 различных вариантов (на самом деле — больше).

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

Теперь давайте, все-таки, остановимся на размерах иконок, которые придется нарисовать (я не ставил второй размер, потому что эти файлы квадратные):

  • 57 px для  старого-доброго iPhone и iPod touch с обычным дисплеем.
  • 72 px для iPad.
  • 114 px — двойной размер — для iPhone 4, чтобы значок «сиял» на ретина-дисплее.
  • 512px иконка используется для отображения в iTunes, в том числе, для CoverFlow, и App Store, где она уменьшается почти в 3 раза до 175 px.
  • 29 px для приложения Настроек на iPhone и iPad, а также для Spotlight на iPhone. Несмотря на свой небольшой размер, они очень важны.
  • 48 px для Spotlight на iPad. Здесь есть небольшой нюанс: в информации для разработчиков на сайте Apple говорится об иконках размером в 50 px, но на самом деле, конечный размер составляет 48 х 48 точек. Просто iOS «отрезает» по одному пикселю с каждой стороны и добавляет туда тень. Немного странное решение, но его стоит учитывать при рисовании значка.
  • 58 px для приложения Настроек и Spotlight в iPhone 4. Все верно, вы должны сделать две иконки практически идентичного размера (57 и 58 px). Особенно возрадуются дизайнеры, у которых по середине проходит вертикальная линия :)
  • 64 px для значка документа. Кто не знает, мобильные приложения в iOS могут предоставлять иконку документа.
  • Возможно, когда Apple выпустит iPad с новым сетчаточным дисплеем, придется «осваивать» еще как минимум 2 размера для иконок — 144 px для рабочего стола и 96 px для Spotlight.

Отлично, не правда ли? 😉

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

В принципе, идея с несколькими иконками не нова и уже много лет используется в Mac OS X. Причем для каждого конкретного размера требуется не просто уменьшать большую иконку с множеством деталей, но выделять важные (отбрасывая при это этом второстепенные) элементы, иначе финальный результат превратится в «кашу».

В качестве примера можно рассмотреть значок папки в Finder. Обратите внимание, что оригинальный («большой») значок уменьшается дизайнерами Apple только до 64 px, после чего на первый план выходят совершенно другие иконки, несущие ту же самую метафору. А пиктограмма для боковой панели вообще не выглядит, как папка:

Напоследок, я хотел бы указать вот еще что. При возможности, для создания иконки постарайтесь использовать векторный редактор — потому что такой значок можно будет совершенно спокойно масштабировать в любую сторону без потери качества. Кто знает, может быть именно вам в следующий раз позвонит Apple и попросит иконку большого размера на постер в своем розничном магазине или громадный плакат наподобие тех, что висели в холле Moscone Center во время проведения WWDC 2010.


Читайте также: