—»     —»   Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс
  Раздел: Образование и Изучение   Нет комментариев  

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Как известно, iPhone 4 оснащен специфическим и самым лучшим на данный момент дисплеем в мире (614400 пикселей), что значительно больше, чем было в предыдущих моделях. Проще говоря, в этой модели 4 мощности дисплея iPhone 3GS, который отображал только лишь 153600 пикселей. Физический размер экрана остался прежним, т.е. дополнительные пиксели используются для увеличения четкости изображения – четкость дважды повышена по вертикали и дважды по горизонтали. Что касается разработчиков, специализирующихся на разработке приложений для Apple, то здесь можно сказать, что половина работы за них уже сделана.

Что касается существующих приложений, интерфейс которых основан на изображениях, то ради достойного обновления приложения, дизайнерам придется потрудиться над увеличением четкости шаблонов, что позволит в полной мере насладиться возможностями дисплея новой модели 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).

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Резиновые шаблоны работают тогда, когда разница между плотностью пикселей минимальна, но они вряд ли будут пригодны в ситуации, где речь идет о iOS без Retina Display и новом iPhone 4 и разница в плотности составляет (163 ppi против 326 ppi). Изображение, приведенное ниже, отображает нам то, что может произойти, если приложение iPhone будет растянуто на большее разрешение устройства iPhone 4. Кнопки и наполнение будет такого же размера в пикселях, но, учитывая, гораздо большее разрешение нового устройства, вам сложно будет что-то прочесть.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Принцип своевременного независимого разрешения

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

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

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

В статье Невен выделяет то, что:

«...просто невозможно создать идеальные детализированные иконки, которые можно было уменьшать и увеличивать без потери четкости. Маленькие иконки искажаются: они преувеличивают некоторые детали, искажают другие, а также преобразуют нежные плавные формы с острые угловатости. Даже если сделать иконки в виде вектора, то иконки никогда не будут выглядеть нормально, если взять самый большой размер и уменьшить его до самого маленького».

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

Независимое разрешение вперед времени

Это лучшие результаты относительно качества, а также тот метод, которым воспользовалась Apple для перехода с iPhone 3GS на iPhone 4. Он заключается в заранее подготовленных изображениях, созданные для различных устройств в разном разрешении. Проще говоря, отдельные дизайны для нужного разрешения, если вы позволите так это назвать. Это, конечно же, требует гораздо больше усилий, но здесь можно быть уверенными в том, что изображения всегда будут выглядеть превосходно.

Apple предпочли вдвое повысить разрешение на пути от iPhone 3GS к iPhone 4, и это значительно облегчило процесс масштабирования (в отличие от подхода Google и Microsoft. Заметьте, что данная статья не относится к последней версии мобильной операционной системы от Windows, что еще раз доказывает нам то, что у управления цельными стэками есть огромные преимущества).

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

На данный момент существует три разрешения 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 с выставленным высоким значением радиуса углов, потому что инструмент создания окружностей не поддерживает функцию привязки к пикселям. Группы слоев также могут быть покрыты векторными масками, что вполне удобно для создания сложных элементов.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Более сложные элементы могут быть разработаны в Adobe Illustrator для того, чтобы иметь четкий размер пикселей, а далее проект можно переместить в Photoshop в качестве слоя фигуры. Будьте осторожны при экспортировании проекта в Photoshop, так как он может быть выровнен неверно – зачастую он переносится на половину осей x и y. Эту проблему можно обойти, если увеличить элемент, пройтись по документу с помощью Hand Tool, а затем вставить заново. Повторяйте это, пока все не встанет на свои места. Конечно же, это наверняка раздражает, но этот приём действительно работает. Другой вариант – увеличить обзор до 200%, указать путь посредством Direct Selection Tool и слегка «подтолкните» выделенный элемент, что должно сдвинуть его точно на 0,5px.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Даже более сложные объекты со множеством цветов должны быть нарисованы в Illustrator для сохранения четкости, а затем экспортированы в Photoshop в качестве Smart Object. Это последнее спасение, хотя и градации получаются не столь четкими, а дальнейшее редактирование может вызвать сложности.

Если вам нужно использовать растр в качестве текстуры, то у вас есть три варианта: использовать слой с текстурой, стиль слоя с наложением текстуры или же создать растровый слой в два раза больше размером и преобразовать его в Smart Object. Мы советуем вам использовать стиль слоя с наложением текстуры в большинстве случаев, но будьте бдительными: текстуры масштабируются с бикубической интерполяцией, когда вы масштабируете целый документ. То есть, они становятся «мягче». Решение заключается в создании двух версий каждой текстуры, а затем нужно будет вручную заменять стиль слоя с наложением текстуры, чтобы элемент использовал подходящую текстуру после масштабирования. Немного скучный, но работающий способ.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Увеличение

В этом случае, ваш документ должен уметь растягиваться ровно в два раза.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Можно сделать action в Photoshop, который бы запечатлел изображение элемента, а затем увеличивал его до 200%. Это означает, что можно реализовать предварительный просмотр элемента при разрешении Retina display всего за один клик. Если вы хотите быть уверенным в том, что вы всё делаете правильно, вам нужно заранее посмотреть, как это будет смотреться, вернуться в обычный режим, внести корректировки, если что-то не так, а затем продолжить работу. Используя один документ для обоих разрешений, вы ограждаете себя от двойной работы, потому что вам не придется синхронизировать два документа.

Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс

Небольшое предупреждение: стили слоев могут содержать только целые значения. Если вы редактируете тень и установили его на 1px в документе с двойным размером, то при уменьшении документа в два раза, тень так и останется на положении 1px, потому что значение не может быть 0.5px. Если вам нужны какие-то специфические элементы в документе с двойным разрешением, то лучше сохраняйте их в отдельный файл.

Экспортирование, экспортирование, экспортирование

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

Лучший способ экспорта – это сделать нужные слои видимыми, сделать выделение элемента, а затем использовать функцию Copy Merged, и вставить элемент в новый документ. Это не очень забавно, когда у вас на счет у сотни изображений, с которыми нужно это проделать.

К тому же, проблема увеличивается ровно в два раза, если речь идет о создании приложения для Retina Display.

Лучшее, что мы можем предложить вам:

* Разработать дизайн
* Использовать функцию Copy Merged для сохранения изображений этого дизайна.
* Дублировать всю папку с изображениями
* Воспользоваться автоматизированным приложением для добавления @2x в имена файлов.
* Открыть каждое изображение и увеличить его до 200% с помощью action в Photoshop. Это даст нашим файлам правильный размер и имя.
* Увеличить основной дизайн в Photoshop до 200%.
* Использовать Copy Merged для того, чтобы вставить более четкие файлы вместо уже имеющихся документов с меткой @2x.

В некоторых случаях вам может помочь функция Photoshop «Export Layers To Files». Этот скрипт находится в файловом меню.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: интерфейс, Photoshop, iPad, iPhone
Опубликовал Mysterious Master   Прочитано (раз): 12551   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031