iPhone 4 против дизайнеров

12 июля 2010

Уровень сложности: для начинающих

Автор: Josh Clark; оригинал статьи: Designing for iPhone 4's Retina Display

Аннотация

Статья описывает как изменилась работа с графикой с появлением нового экрана iPhone 4 с большим разрешением. Также, коротко описано, как работать с графикой для универсальных приложений и какие иконки теперь нужны.

Как вы, возможно, слышали, вышел новый iPhone 4, в котором, помимо всего прочего, новый экран Retina. Разрешение нового экрана 320 dpi и отдельных пикселей на нем практически не видно, экран почти не уступает печатной продукции.

Но за счет всех этих плюсов новый телефон вызывает головную боль у дизайнеров. Три года iPhone поставлялся с одним и тем же экраном 3.5" и одним и тем же разрешением 320х480. Новый телефон «удвоил» разрешение до 640х960 и в результате все мы разрабатываем дизайн и интерфейс приложений под два различных экрана, а если вспомнить про iPad так и под три. (Не стоит отчаиваться, есть люди которые разрабатывают дизайн приложений для Android устройств, которых к концу года будет более 60 видов и типов… но, тем не менее, разделение устройств пришло и в наш уютный iOS мир.)

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

Два пикселя за этот пункт

Начиная с iOS 4, все размеры измеряются в «пунктах», а не в пикселях. Разрешение телефона составляет 320х480 точек, как на iPhone 4, так и на предыдущих моделях. Поскольку такое разрешение совпадает с физическим для старых телефонов, существующие приложения выглядят и работают в iOS 4 также, как работали в более старых операционных системах. Один пиксель соответствует одному пункту, нет никаких сложностей.

В iPhone 4 пункт это два пикселя: если нарисовать линию шириной один пункт, она будет двухпиксельной на экране. Итак: если указать все размеры в пунктах для всех устройств, iOS автоматически нарисует из пропорционально разрешению экрана. Текст и графика останутся одинакового фактического размера на обоих «видах» устройств. То же самое касается bitmap: iOS 4 автоматически адаптирует их под разрешение экрана.

Естественно, изображение с просто удвоенным количеством пикселей будет выглядеть для пользователя одинаково на новом и старом устройстве. Именно здесь нам придется немного поработать: добавить картинки в высоком разрешении. Для каждого изображения в приложении, добавьте изображение, которое в два раза больше, в название изображения добавьте @2x. То есть, для обычного изображения image.png, создайте новое и назовите image@2x.png. Новое изображение будет автоматически использоваться на iPhone 4, то есть везде где используется image.png вместо него будет использовано image@2x.png.

Дайте две

Догадываюсь о чем Вы думаете: «Я что действительно буду делать две картинки вместо одной? Может просто сделать картинки в высоком разрешении, а iOS 4 отмасштабирует их под старые телефоны?» Извините, но нет, не автоматически. Несмотря на то, что iOS 4 спокойно масштабирует картинки в одном направлении (адаптируя картинки в низком разрешении для iPhone 4), она не работает в обратном направлении. По умолчанию, она изменяет картинки таким образом, что один пиксель равен одному пункту. Это отличное решение для того, чтобы старые приложения корректно работали на новом телефоне, но это никак не помогает решать обратную задачу.

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

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

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

Иконостас

Раньше все было понятно, у нас было три вида иконок: большая 512x512 иконка для App Store, иконка 57x57 для экрана телефона и 29х29 для поиска. Теперь, если мы создаем универсальное приложение для iPhone, iPhone 4 и iPad, нам нужно сделать 11 — одиннадцать — различных иконок. Самое интересное, что в этом наборе есть даже принципиально различные иконки 57x57 и 58x58, и куда только делось человеколюбие. Вот список: