Эта статья будет интересна тем, кто только начинает или собирается начать разрабатывать дизайн приложений для iOS. В статье мы осветим несколько ключевых моментов. Поговорим о стандартных размерах и разрешении экранов iPhone и iPad и о формате сохраняемых файлов для разработки. Обсудим, под какой экран необходимо начинать рисовать и каковы оптимальные размеры кнопок. Поделимся полезными ссылками на коллекции классических контролов и узнаем о ценности тестирования дизайна и другое.

Стандартные размеры экрана и иконок 
Многое, из того, о чем сейчас пойдет речь есть в The Apple Interface Guidelines дляiPhone и iPad. Если вы еще не знакомились с этим руководством, то я рекомендую. Там очень много полезной информации, в частности и информация про размеры экранов iPhone и iPad.

iPhone 3G, iPhone 3GS  Разрешение экрана: 72 ppi Размер экрана: 320 x 480 px Размер иконки: 57 x 57 px Формат файлов: PNG-24	iPhone 4G, iPhone 4GS  Разрешение экрана: 72 ppi Размер экрана: 640 x 960 px Размер иконки: 114 x 114 px Формат файлов: PNG-24	iPad1, iPad2 Разрешение экрана: 72 ppi Размер экрана: 768 x 1024 px Размер иконки: 72 x 72 px Формат файлов: PNG-24

Так будет выглядеть окно создания экрана для iPhone 3GS в Adobe Photoshop:

Графика для AppStore
Иконки: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)
Скриншоты для iPhone: 320 x 480 px или 640 x 960 px (.tif, .jpg or .png, 72dpi, RGB)
Скриншоты для iPad: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)
Сейчас на рынке становится все больше и больше мобильных устройств. Количество сенсорных экранов увеличивается. И все они с разными размерами. Несмотря на то, что мы говорим о дизайне iOS приложении, дизайнерам стоит учитывать это. Поскольку велика вероятность того, что хорошее приложение необходимо будет сделать и для другой мобильной платформы. Чтобы избавиться от проблемы перерисовывания графики приложения необходимо создавать ваш дизайн в масштабираемых слоях: shape layersили vector smart objects. В таком случае, соответственно, увеличение и уменьшение размера элементов не будет влиять на четкость их отображения.
Есть еще один довод в пользу масштабируемых слоев. О нем пойдет речь ниже.


Какой дизайн делать раньше: для обычного или для Retina?
На первый взгляд решение на поверхности: конечно надо делать изначально для Retina (640х960), а затем сжимать до обычного экрана (320x480). ?И действительно, если делать обратно, то увеличенное изображение становится пиксельным и размытым, а значит - непригодным.

Этого можно избежать, если создавать слои, используя shape layers или vector smart objects. В этом случае изображение остается четким.
Но какие недостатки в себе таит способ от Retina к обычному экрану? Если делать сначала дизайн для большего экрана, то при сжатии есть вероятность потери мелких деталей. Пиксельные линии, например, могут оказаться размытыми полосками в меньшем разрешении.
Выход из этого тоже есть. При создании дизайна на экране 640х960 стоит соблюдать во всех отступах и размерах элементов интерфейса кратность двойке. И координаты размещения тоже должны быть кратны двум. Таким образом, мы избегаем размытость/нечеткость при сжатии картинки.

В действительности, работают двумя способами. Если вы работаете на экране 360 на 480 - то вы озабочены созданием смарт-объектов. И по-хорошему, это правильно. Так работают многие опытные дизайнеры приложений для iOS. Если же вы начали на экране 640 x 960 - то вы продумываете свою сетку из расчета последующего сжатия вдвое. В своей практике я использую именно этот вариант, т.к. часто использую помимо векторных объектов растровые. Например, создаю фактурный фон.


Каков оптимальный размер кнопок? 
Для iPhone и iPad минимальная область нажатия составляет 44 x 44 pixels, так рекомендует Apple. Эти значения обусловлены средним размером пальцев человека. Если вы хотите сделать объект для нажатия меньше, то предусмотрите вокруг него пространство в целях предотвращения ошибки.


Коллекции контролов для iPhone и iPad 
Перед тем, как вы приступите к дизайну вашего приложения обязательно проанализируйте конкурентов, и достойные приложения в целом. Выделите для себя полезные и интересные решения с контролами, фактурами, цветовыми решениями.
К счастью, «изобретать велосипед» не нужно. Сейчас есть множество ресурсов, где можно скачать стандартные контролы, пиктограммы и элементы интерфейса для iPhone и iPad.? Но даже, если вы хотите создать свой неповторимый дизайн, то эти шаблоны полезны с точки зрения опыта построения базовой сетки и правильных пропорций элементов.
Здесь можно скачать элементы интерфейса для iPhone:
1. Блог Geoff Teehan: iPhone GUI PSD и iPhone GUI PSD Retina
2. Сайт Patrick Crowley: iPhone Stencil for OmniGraffle
3. Блог Mercury Intermedia: iPhone UI Vector Elements
Здесь можно скачать элементы интерфейса для iPad:
1. С сайта Information Architects: iPad Stencil for OmniGraffle
2. Блог Geoff Teehan: iPad GUI PSD 
3. Сайт Icon Library: iPad Vector GUI
Здесь можно приобрести за умеренную плату стандартные iOS иконки: ?http://glyphish.com/

Каков формат файлов дизайна iOS приложений?
Все изображения, которые необходимы для верстки приложения экспортируются в Portable Network Graphics (.png) формат. Технически iPhone может отображать файлы других форматов, но .png формат автоматически оптимизируется iOS SDK и является предпочтительным. ?Это относится ко всем элементам интерфейса: навигационные кнопки, панели, бэкграунды и прочее.
Панель экпорта в .png формат (File > Save for Web and Devices):

Проверка дизайна
Рекомендуем всегда проверять свой дизайн на реальных устройствах. Т.к. на экране ваших мониторов он выглядит несколько иначе. Сложно с первого раза ощутить правильные расстояния между кнопками, размеры этих кнопок, расстояния от краев экрана. Для того, чтобы проверить свой дизайн, надо его «Сохранить» в формате .png и отправить себе на iOS-устройство.
Лучше всего загрузить сразу несколько скриншотов и сымитировать использование приложения. В таких реальных тестированиях часто «вылезают» недочеты и упущения. Это очень полезная практика. Более того, на экранe iPhone вы увидите свои изображения в определенной цветовой гамме, которая может не соответствовать калибровке вашего экрана. И в данном случае вам придется ориентироваться на цвета в iPhone, а не на цвет на вашем мониторе.
Между прочим, такие скриншоты - хорошая презентация дизайна для заказчика. Он фактически видит приложение «живьем», хотя в нем еще ничего не работает.


Ориентация приложения 
Многие приложения имеют двойную ориентацию: горизонтальную и вертикальную.

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

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

Чего делать не надо?
Если вы в своем приложении решили использовать стандартный нижний бар контролов (Tab Bar), то для разработчика необходимо от вас иметь только векторные фигуры пиктограмм разделов бара. Классическое синее свечение добавится автоматически, при добавлении иконки на Tab Bar.

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

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


Подготовка файлов для разработчика. 
Если разработчик умеет все «порезать» для верстки - то ваша работа сильно облегчена. Но лучше всего «порезать» свои файлы самостоятельно, чтобы быть уверенным в правильности отображения элементов.
При сохранении фалов используйте интуитивно понятные наименования файлов, чтобы облегчить жизнь вашему разработчику. Вот некоторые примеры префиксов и суффиксов:
“button_” для всех кнопок
“tab_” для всех кнопок бара
“background_” для всех фонов (background)
“_up” для кнопок в активном состоянии
“_down” для кнопок в пассивном состоянии
Для Retina дисплея все элементы интерфейса нужно снабжать дополнительным суффиксом @2x. Например, кнопка для обычного дисплея будет называться - button.png, а для retina дисплея - button@2x.png.
Помимо нарезанных png необходимо давать разработчику pdf-файл со всеми скринами приложения. В нем должны отражаться все используемые шрифты, размеры, интерлиньяж и прочее, а также примечания, касающиеся сетки и дизайна. Таким образом, разработчик может верстать приложение, не отркывая Photoshop, по-хорошему, он этого делать и не должен.

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

Be Sociable, Share!

•