— 2Nova Блог

Дизайн интерфейсов под iPhone 4 с дисплеем Retina

Недавно во время работы над одним из новых продуктов мы наткнулись на статью Марка Эдвардса про дизайн интерфейсов для iPhone 4 с дисплеем Retina. Статья показалась полезной, поскольку в ней собраны практически все тонкие места этого процесса, и мы решили перевести ее на русский язык. Будем рады, если она окажется полезной для вас. Дальнейшее повествование идет от имени автора статьи.

Разработка интерфейса под дисплей Retina (iPhone 4)

Процесс разработки приложений для iPhone4 c дисплеем Retina включает в себя создание двух сетов изображений — одного на 163ppi, другого — на 326ppi. После окончания возни над первыми одним – двумя приложениями, мы сформировали свой алгоритм работы, с которым можно смело идти в наступление.

Когда дело доходит до создания элементов интерфейса, которые можно безболезненно масштабировать в фотошопе, нашими врагами становятся растровые детали, при масштабировании превращаются в кашу. Решение — использование слоев типа «solid color», «pattern» или «gradient» с векторными масками (проверьте, что везде, где только можно, у вас включена привязка к пикселям (snap to pixel), про нее можно подробно прочитать здесь). Разумеется, после перехода на такого рода слои, вы начнете испытывать некоторые неудобства, но полная замена ими растровых паттернов моментально даст свои плоды. 

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

Обычно я рисую простые элементы непосредственно в Фотошопе, используя прямоугольники или прямоугольники со скругленными углами (rectangle или rounded rectangle tool). Круги я рисую при помощи закругленного прямоугольника с большим угловым радиусом, так как в случае с элипсом не работает привязка к пикселям (snap to pixel). Группы слоев также могут иметь векторные маски, что бывает удобно, когда слоев много. Маску из одного слоя на другой или на группу можно перетащить, зажимая клавишу option на маке).

Более сложные объекты рисуются в Иллюстраторе под реальный размер и затем вставляются в Photoshop как shape layer. Будьте внимательны, границы изображений не всегда попадают четко в пиксель — часто половина пиксела вылезает по x, по y или по обеим координатам одновременно. Обходной, но довольно нелепый путь — увеличить масштаб и при помощи hand tool поскроллиться по документу и снова попробовать вставить, иногда это помогает. Да, это безумно, но после некоторых попыток может сработать. Другой вариант — сделать зум 200%, выбрать векторную форму (path) при помощи direct selection tool («пустая стрелка», горячая клавиша латинская A) и стрелками на клавиатуре один раз его подвинуть — в этом случае изображение переместится точно на 0.5px.

Более сложные объекты с несколькими цветами тоже рисуются в Иллюстраторе под реальный размер и вставляются в Фотошоп как smart object. Но вставка smart object — это крайняя мера, с ней градиенты не сглаживаются и усложняется редактирование.

Если вам надо использовать растровые изображения для текстуры, есть три способа: использовать слой-паттерн (pattern layer), стиль слоя, задающий текстуру (pattern layer style) или создать слой растрового изображения в 2 раза больше, чем нужно, а затем превратить его в smart object. Я предпочитаю использовать pattern layer styles в большинстве случаев, но будьте начеку – паттерны увеличиваются или уменьшаются, с использованием алгоритма bicubic interpolation, когда вы масштабируете весь документ (таким образом, они становятся более размытыми при масштабировании). Решением может стать создание двух версий каждого паттерна и замена вручную текстуры в layer style на нужные после масштабирования. Немного утомительно, но вполне реально.

Увеличение масштаба

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

У меня в Фотошопе есть настроенный Action (автоматизация действий с помощью модуля Actions), который увеличивает history snapshot до 200%. Это дает возможность в 1 клик посмотреть экран на разрешении для Retina. Если вы все правильно настроили, вы сможете без ухудшения качества увеличить масштаб, отредактировать изображение, затем уменьшить все обратно и продолжать редактирование. Если что-то пошло не так — snapshot легко вернет вас обратно. Использование одного файла для двух разрешений означает, что вам не нужно постоянно синхронизировать оба документа. Это очень хорошо.

Обратите внимание, стили слоев могут содержать только целочисленные значения. Если задать drop shadow offset в 1px в документе при двойном размере, при уменьшении масштаба в два раза значения останутся равными 1px, так как они не могут быть равными 0.5px (нецелое число). Если вам требуются особые изменения в двойном разрешении — придется сохранить его в отдельном файле.

Экспорт, Экспорт, Экспорт

Теперь плохие новости. Экспорт всех изображений для создания приложений может быть весьма утомительным, и я вряд ли смогу помочь вам в этом. Поскольку мои макеты — это полноэкранные макеты приложения, их не получится нарезать слайсами в Фотошопе (примечение переводчиков — мы так и не поняли почему слайсы не подходят: «As my documents act as full screen mockups, they’re not set up in a way that Photoshop’s slice feature is any use»).   Layer comps тоже, как правило, не помогают — у меня обычно есть папки для каждого из состояний приложения или экрана, так что включать/выключать состояния не сложно.

Лучшим способом экспорта мне кажется следующий: включить те слои, которые вы хотите, чтобы было видно, выделить элемент с помощью инструмента выделения (marquee selection), копировать уже слитое изображение (copy merged), создать новый документ (создается под размер скопированного изображения), ok, вставить. Но, конечно, экспортировать сотни элементов – сомнительное удовольствие. Ситуация усугубляется, когда вы сохраняете для Retina — ведь это в два раза больше изображений и изображение 1х должно в точности совпасть с изображением 2x.

Лучшее решение, которое я нашел, заключается в следующем:
1. Сделайте свой дизайн в 1×;
2. Скопируйте слитые изображения (copy merged) чтобы сохранить все 1× изображения;
3. Дублируйте всю папку, содержащую 1× изображения;
4. Используйте Automator, чтобы добавить «@2x» ко всем именам файла;
5. Откройте каждое «@2x» изображение, используйте Action в Фотошопе чтобы увеличить масштаб до 200%. Это даст вам файл с правильным именем файла и размером, но с увеличенным содержанием низкого разрешения;
6. Увеличьте масштаб вашего главного документа с дизайном в Photoshop до 200 %;
7. Используйте copy merged, чтобы копировать элементы в более высоком качестве в каждый «@2x» документ, затем выключите слой с более низким качеством, и сохраните файл используя save for web, файл заменит старый с увеличенным содержанием низкого разрешения.

Экспорт слоев

В некоторых случаях скрипт Export Layers To Files для Фотошопа может помочь. Он будет особенно полезен, если вам надо экспортировать много иконок или изображений в одинаковом размере, которые могут располагаться на разных слоях в отдельном документе. Скрипт находится в меню File.

Actions и workflows

Все Actions (для Фотошопа) и workflows (для программы Automator под MacOs), которые использую я сам можно скачать ниже. Automator Workflows можно разместить в Finder Toolbar для быстрого доступа из любого окна Finder, при этом он не будет занимать места в доке.

Скачать: Bjango Actions and Workflows.zip

Спасибо Apple за то, что они выбрали именно двойное разрешение для iPhone 4 и за то, что они используют опережающую время независимость разрешений (примечание переводчиков — сакразм второй части про «ahead-of-time resolution independence» мы не совсем поняли). Процесс разработки интерфейса и сейчас не тривиален, но всё было бы гораздо хуже, если бы они увеличили разрешение не вдвое, а в дробное количество раз.

источник статьи: http://bjango.com

перевод: Александр Вавилов, Ольга Фомина, Алексей Быстров.

У нас возникли затруднения с переводом некоторых терминов и профессионального сленга, поэтому если у вас будут комментарии и поправки, пишите на e-mail, мы обязательно внесем их в текст.

Скоро мы переведем вторую часть, в которой автор статьи отвечает на самые распространенные вопросы по проектированию для Retina: http://bjango.com/articles/designingforretina2/