Что касается существующих приложений, интерфейс которых основан на изображениях, то ради достойного обновления приложения, дизайнерам придется потрудиться над увеличением четкости шаблонов, что позволит в полной мере насладиться возможностями дисплея новой модели iPhone. Повышение четкости интерфейса или увеличение его размеров на том же дисплее – это не новая проблема. Об интерфейсах, которые позволяли изменять разрешение, было сказано еще во времена resolution independence.
В недавней статье Невен Морган (Neven Morgan) описывал технологию resolution independence: «RI или resolution independence (что в переводе означает – независимое разрешение) – это скорее цель, нежели способ её реализации. Это означает – иметь нечто, что будет смотреть красиво при любом разрешении». Если же это цель, а не способ реализации, то какой же существует способ реализации? Как же Apple решили проблему в iOS?
Резиновые шаблоны
Хотя на данный момент, приложения, работающие на Retina Display достаточно хорошо, занимают не так много времени и средств на разработку, то действительно качественные графические приложения требуют достаточных усилий, чтобы можно было по-настоящему оценить все возможности, которые нам предоставляет Retina Display.
Может быть, это и не полноценное решение по независимому разрешению, однако резиновые шаблоны помогут изменять размеры приложения на экранах разных размеров за счёт дополнительных элементов или динамических изменений в шаблоне. Многие приложения для Windows, Mac и Linux используют данную технику, а также некоторые веб-сайты.
В какой-то степени, именно посредством данной техники, Apple справляются с разницей в разрешении iPhone и iPad – многие элементы интерфейса остаются того же размера, просто между ними добавляется расстояние, чтобы приложение растянулось на весь экран. Строка статуса является отличным примером. Она отлично работает, потому что плотность пикселей как в iPhone 3GS, так и в iPad почти идентична (163 ppi против 132 ppi).
Резиновые шаблоны работают тогда, когда разница между плотностью пикселей минимальна, но они вряд ли будут пригодны в ситуации, где речь идет о iOS без Retina Display и новом iPhone 4 и разница в плотности составляет (163 ppi против 326 ppi). Изображение, приведенное ниже, отображает нам то, что может произойти, если приложение iPhone будет растянуто на большее разрешение устройства iPhone 4. Кнопки и наполнение будет такого же размера в пикселях, но, учитывая, гораздо большее разрешение нового устройства, вам сложно будет что-то прочесть.
Принцип своевременного независимого разрешения
Другой подход к проблеме различий в разрешениях и плотности заключается в том, чтобы разрабатывать интерфейсы полностью в векторе или используя код. Не пытаясь навязать какие-то стереотипы, можно говорить, что этот способ более практичен. Он опрятный, простой и утонченный. Он позволяет вам написать код единожды, и в дальнейшем это приложение будет работать при любом разрешении.
К сожалению, использование векторных изображений может быть более требовательным к ресурсам, а также не позволит работать на пиксельном уровне. Конечно, увеличение ресурсов не составит труда для операционных систем, оперирующих на настольных ПК, но речь ведь идет об ОС на мобильных устройствах. Отсутствие возможности вести разработку на пиксельном уровне – это серьезная проблема, если говорить о создании маленьких по размеру элементов. Попробуйте изменить размер иконки хотя бы на пиксель, и вы тут же потеряете всю четкость.
В статье Невен выделяет то, что:
«...просто невозможно создать идеальные детализированные иконки, которые можно было уменьшать и увеличивать без потери четкости. Маленькие иконки искажаются: они преувеличивают некоторые детали, искажают другие, а также преобразуют нежные плавные формы с острые угловатости. Даже если сделать иконки в виде вектора, то иконки никогда не будут выглядеть нормально, если взять самый большой размер и уменьшить его до самого маленького».
Несмотря на то, что здесь он говорит только по поводу иконок, под его описание подпадают почти все элементы интерфейса. Решения, вовлеченные в масштабирование элементов, творческие, пока ещё не механические. Векторные графические элементы не подходят ко всем разрешениям, если вам важно качество.
Независимое разрешение вперед времени
Это лучшие результаты относительно качества, а также тот метод, которым воспользовалась Apple для перехода с iPhone 3GS на iPhone 4. Он заключается в заранее подготовленных изображениях, созданные для различных устройств в разном разрешении. Проще говоря, отдельные дизайны для нужного разрешения, если вы позволите так это назвать. Это, конечно же, требует гораздо больше усилий, но здесь можно быть уверенными в том, что изображения всегда будут выглядеть превосходно.
Apple предпочли вдвое повысить разрешение на пути от iPhone 3GS к iPhone 4, и это значительно облегчило процесс масштабирования (в отличие от подхода Google и Microsoft. Заметьте, что данная статья не относится к последней версии мобильной операционной системы от Windows, что еще раз доказывает нам то, что у управления цельными стэками есть огромные преимущества).
На данный момент существует три разрешения iOS:
* 320 х 480 (iPhone/iPod touch)
* 640 х 960 (iPhone 4 и iPod с Retina display)
* 768 х 1024 / 1024 х 768 (iPad)
Сдаётся нам, что в ближайшем будущем перед нами предстанет следующий список:
* 640 х 960 (iPhone/iPod touch с Retina display)
* 1536 х 2048 / 2048 х 1536 (iPad с Retina display)
* Какой-нибудь прототип настольного iMac с iOS и Retina display
Между приложениями для iPhone и для iPad существует значительная разница, так что в любом случае потребуется переработка шаблонов приложений, так как вы не сможете просто растянуть приложение на экран iPad или наоборот – уменьшить его до размеров дисплея iPhone. Разница в размере дисплея и форм-факторе устройства означает то, что устройства должны обслуживаться отдельно. Размеры iPad делают возможным отображение большего количества информации в то время, как приложения iPhone должны быть более глубокими, так как здесь нет возможности отображать всю нужную информацию сразу.
Разработка дизайна с возможностью масштабирования
Процесс разработки приложения для iPhone 4 Retina display включает в себя создание двух наборов изображений – один при разрешении 163 ppi, второй при разрешении 326 ppi. В имена изображений в разрешении 326 ppi включает индикатор «@2x», что обозначает, что изображение имеет двойной разрешение.
Когда дело касается разработки масштабируемых элементов интерфейса, то растровые изображения становятся вашими врагами, так как они становятся мутными, если их уменьшать или увеличивать. Здесь решение заключается в том, чтобы создать единый цвет, текстуру или слои с градациями с помощью векторных масок (убедитесь, что вы поставили опцию «snap to pixel – привязка к пикселям» везде, где это возможно). Хотя порой это немного неудобно, переход на векторы имеет значительные преимущества.
До того, как на это обратили внимание, мы сразу хотим указать, что мы не предлагаем новых путей. Всеми этими способами многие дизайнеры пользуются уже не один год. Наши дизайнеры также пользуются векторными фигурами уже многие годы, но Retina display изменил ход событий, подразумевающих применение векторных фигур, когда дело касается разработки цельного дизайна.
Зачастую простые элементы рисуются в Photoshop с применением инструмента создания прямоугольника или прямоугольника с закругленными углами (Rectangle или Rounded Rectangle Tool). Рисование окружностей производится посредством Rounded Rectangle Tool с выставленным высоким значением радиуса углов, потому что инструмент создания окружностей не поддерживает функцию привязки к пикселям. Группы слоев также могут быть покрыты векторными масками, что вполне удобно для создания сложных элементов.
Более сложные элементы могут быть разработаны в Adobe Illustrator для того, чтобы иметь четкий размер пикселей, а далее проект можно переместить в Photoshop в качестве слоя фигуры. Будьте осторожны при экспортировании проекта в Photoshop, так как он может быть выровнен неверно – зачастую он переносится на половину осей x и y. Эту проблему можно обойти, если увеличить элемент, пройтись по документу с помощью Hand Tool, а затем вставить заново. Повторяйте это, пока все не встанет на свои места. Конечно же, это наверняка раздражает, но этот приём действительно работает. Другой вариант – увеличить обзор до 200%, указать путь посредством Direct Selection Tool и слегка «подтолкните» выделенный элемент, что должно сдвинуть его точно на 0,5px.
Даже более сложные объекты со множеством цветов должны быть нарисованы в Illustrator для сохранения четкости, а затем экспортированы в Photoshop в качестве Smart Object. Это последнее спасение, хотя и градации получаются не столь четкими, а дальнейшее редактирование может вызвать сложности.
Если вам нужно использовать растр в качестве текстуры, то у вас есть три варианта: использовать слой с текстурой, стиль слоя с наложением текстуры или же создать растровый слой в два раза больше размером и преобразовать его в Smart Object. Мы советуем вам использовать стиль слоя с наложением текстуры в большинстве случаев, но будьте бдительными: текстуры масштабируются с бикубической интерполяцией, когда вы масштабируете целый документ. То есть, они становятся «мягче». Решение заключается в создании двух версий каждой текстуры, а затем нужно будет вручную заменять стиль слоя с наложением текстуры, чтобы элемент использовал подходящую текстуру после масштабирования. Немного скучный, но работающий способ.
Увеличение
В этом случае, ваш документ должен уметь растягиваться ровно в два раза.
Можно сделать action в Photoshop, который бы запечатлел изображение элемента, а затем увеличивал его до 200%. Это означает, что можно реализовать предварительный просмотр элемента при разрешении Retina display всего за один клик. Если вы хотите быть уверенным в том, что вы всё делаете правильно, вам нужно заранее посмотреть, как это будет смотреться, вернуться в обычный режим, внести корректировки, если что-то не так, а затем продолжить работу. Используя один документ для обоих разрешений, вы ограждаете себя от двойной работы, потому что вам не придется синхронизировать два документа.
Небольшое предупреждение: стили слоев могут содержать только целые значения. Если вы редактируете тень и установили его на 1px в документе с двойным размером, то при уменьшении документа в два раза, тень так и останется на положении 1px, потому что значение не может быть 0.5px. Если вам нужны какие-то специфические элементы в документе с двойным разрешением, то лучше сохраняйте их в отдельный файл.
Экспортирование, экспортирование, экспортирование
А теперь немного плохих новостей: экспортирование всех изображений для создания приложения может быть очень нудным, и здесь вам уже ничто не поможет. Вам придется экспортировать каждый элемент и каждое его состояние и положение по отдельности.
Лучший способ экспорта – это сделать нужные слои видимыми, сделать выделение элемента, а затем использовать функцию Copy Merged, и вставить элемент в новый документ. Это не очень забавно, когда у вас на счет у сотни изображений, с которыми нужно это проделать.
К тому же, проблема увеличивается ровно в два раза, если речь идет о создании приложения для Retina Display.
Лучшее, что мы можем предложить вам:
* Разработать дизайн
* Использовать функцию Copy Merged для сохранения изображений этого дизайна.
* Дублировать всю папку с изображениями
* Воспользоваться автоматизированным приложением для добавления @2x в имена файлов.
* Открыть каждое изображение и увеличить его до 200% с помощью action в Photoshop. Это даст нашим файлам правильный размер и имя.
* Увеличить основной дизайн в Photoshop до 200%.
* Использовать Copy Merged для того, чтобы вставить более четкие файлы вместо уже имеющихся документов с меткой @2x.
В некоторых случаях вам может помочь функция Photoshop «Export Layers To Files». Этот скрипт находится в файловом меню.
