В настоящее время департамент мобильной разработки Rambler&Co активно расширяется, в том числе и в плане iOS-разработчиков и UX дизайнеров. Большое количество людей и проектов, ведущихся ими, усложняет и без того непростой процесс передачи дизайна разработчикам. Всем, так или иначе связанным с мобильной разработкой, знакомы проблемы и разногласия, возникающие на стыке интересов программиста и дизайнера — начиная тем, в каких единицах измерять расстояния, и заканчивая тем, кто должен нарезать элементы экранов в различных разрешениях. Чтобы окончательно решить проблему в рамках нашей компании, мы решили подготовить подробные гайдлайны по этому взаимодействию.

Главный тезис: Дизайн приложения считается законченным только тогда, когда разработчику переданы следующие материалы:
  1. Карта экранов приложения,
  2. Карта цветов, используемых в приложении,
  3. Список шрифтов, используемых в приложении,
  4. Размеченные состояния каждого из экранов,
  5. Нарезка элементов для всех экранов,
  6. Видео/gif со всеми нестандартными анимациями,
  7. Иконки приложения.

Теперь поочередно пройдемся по всем обозначенным пунктам.

1. Карта экранов



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

Так как это обозначение может использоваться в названиях файлов и папок, то оно должно отвечать следующим условиям:
  • Только латиница, цифры и знак "-",
  • Только нижний регистр.

Чего не должно быть на карте экранов:
  • Разметки элементов каждого экрана,
  • Различных состояний одного и того же экрана (экран с нажатой/не нажатой кнопкой),
  • Списка цветов, шрифтов и прочей служебной информации.

Отдельно стоит упомянуть, что интерактивный прототип приложения в Invision или других сервисах ни в какой мере не заменяет карты экранов.
Формат: png, jpeg, pdf.

2. Карта цветов приложения



Карта цветов — это изображение, содержащее список всех цветов, используемых в приложении (как многократно, так и единоразово).

Каждый из цветов должен быть представлен следующими данными:
  • Кодовое название цвета,
  • Метка, окрашенная текущим цветом,
  • Числовое значение цвета: HEX или RGB.

В идеале, код цвета — число или короткое слово. Эти коды используются при разметке экранов для обозначения используемых цветов.
Формат: png, jpeg, pdf.

3. Список шрифтов приложения
Список шрифтов представляет собой текстовый документ, в котором перечислены все использующиеся в приложении шрифты. Указывается только название шрифта; размер в данном случае писать не нужно.

Если предполагается использовать нестандартный шрифт, он должен быть приложен к набору предоставляемых документов.
Список стандартных шрифтов представлен здесь.
Формат: txt, doc, pdf (для списка шрифтов). ttf/otf для нестандартных шрифтов.

Пример списка шрифтов:
  1. HelveticaNeue Regular,
  2. HelveticaNeue UltraLight,
  3. SuperHipsterFont (этот шрифт прикладывается отдельно).


4. Разметка состояний экранов



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

Представим, что мы размечаем экран списка сообщений электронной почты. Он называется «messages-list-screen”. Ячейки на этом экране могут находиться в трех различных состояниях — они могут быть не выделены, выделены и сдвинуты вбок. В таком случае требуется предоставить три различных файла:
  • messages-list-screen-default.png,
  • messages-list-screen-selected.png,
  • messages-list-screen-swipe.png.

Наименование каждого из файлов должно включать в себя название экрана, используемое на карте экранов, и обозначение состояния (default, selected и пр). Полная разметка требуется только для default состояния. На остальных файлах размечаются элементы, уникальные для этих состояний.

Что включает в себя разметка экрана:
  • Все расстояния и отступы между элементами,
  • Размеры элементов (высота/ширина),
  • Названия элементов (соответствующие названию нарезанного ресурса),
  • Радиусы скругления углов,
  • Названия и размер используемых шрифтов,
  • Коды встречаемых цветов (соответственно карте цветов).

Все размеры указываются в не в пикселях, а в пойнтах. Если приложение должно выглядеть по разному на различных экранах (iPhone 5/iPhone 6), требуется предоставлять разметку для всех случаев.

Про отличия пойнтов от пикселей и размеры экранов различных устройств хорошо написано здесь. Также, чтобы иметь представление об адаптивной верстке, стоит прочитать эту статью.
Формат: png.

5. Нарезка ресурсов
Нарезать требуется следующие виды ресурсов:
  • Иконки (кнопки, индикаторы, стрелки и пр),
  • Фоны,
  • Сплеш-скрины (если они есть).

Все ресурсы предоставляются в трех размерах — стандартном (соответствует размеру, указанному на разметке экрана в пойнтах), @2x и @3x.
Все взаимозаменяемые ресурсы должны быть строго одного размера. Под взаимозаменяемыми понимаются такие изображения, которые могут быть подставлены на место друг друга. Как пример — кнопка в NavigationBar’е, которая в одних случаях представляет собой значок карты, в других — лупу.

Нарезанные ресурсы должны располагаться в папках, названия которых соответствуют названию текущего экрана (не состояния, а именно экрана). Разбивать в отдельные папки исходя из размеров ( @2x, @3x) не нужно.
Основные правила по наименованию нарезанных изображений:
  • Только латиница,
  • Вместо пробелов используется -,
  • Только нижний регистр.

Если у элемента есть несколько состояний (к примеру, нажат/не нажат), для состояний, отличных от стандартного, добавляется соответствующий префикс (-selected, -disabled).

Если одна и та же иконка используется на нескольких экранах, то нарезается она только один раз и кладется в папку common. Важно следить за тем, чтобы у разных иконок (даже находящихся в разных папках) не было одинаковых названий.

Более подробный гайд по наименованию ресурсов.
Формат: png.

Пример:
  • messages-list-screen/
    • favourite-icon.png
    • favourite-icon @2x.png
    • favourite-icon @3x.png
    • favourite-icon-selected.png
    • favourite-icon-selected @2x.png
    • favourite-icon-selected @3x.png
    • reply-indicator.png
    • reply-indicator @2x.png
    • reply-indicator @3x.png


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

Для всех нестандартных анимаций должны прилагаться пояснительные видео или gif. Кроме этого, нужно подготовить и текстовое описание происходящего: какой параметр анимируется, за какое время, у какого объекта. Например: »заголовок увеличивается в 2 раза за 1 секунду с линейной скоростью", «изображение поворачивается на 90 градусов за 2 секунды с функцией плавности easeInOutQuart».

7. Иконки приложения



Иконки приложения должны быть квадратными (без скругленных углов) и предоставлены во всех необходимых размерах. Список размеров можно посмотреть здесь.

Автоматически нарезать иконки в нужных размерах поможет этот psd.
Формат: png.

8. Скриншоты для App Store
Для AppStore требуется пять комплектов скриншотов в разных размерах:
  • 3,5’’ (iPhone 4, iPhone 4s) — 640 x 960 px
  • 4’’ (iPhone 5, iPhone 5s) — 640 x 1136 px
  • 4,7’’ (iPhone 6) — 750 x 1334 px
  • 5,5’’ (iPhone 6+) — 1242 x 2208 px
  • iPad — 1536 x 2048 px


Неплохой набор psd-шаблонов для генерации скриншотов всех размеров.
Формат: png.

Файловая структура предоставляемого комплекта документов
После того, как все описанные выше файлы подготовлены, должна получиться папка с о структурой, похожей на:
  • screens-map.png
  • color-palette.png
  • fonts.txt
  • custom-fonts/
    • custom-font1.ttf
    • custom-font2.ttf
  • screens/
    • common/
      • back-icon.png
      • back-icon @2x.png
      • back-icon @3x.png
    • messages-list-screen/
      • messages-list-default.png
      • messages-list-selected.png
      • messages-list-swipe.png
      • assets/
        • favourite-icon.png
        • favourite-icon @2x.png
        • favourite-icon @3x.png
        • favourite-icon-selected.png
        • favourite-icon-selected @2x.png
        • favourite-icon-selected @3x.png
        • reply-indicator.png
        • reply-indicator @2x.png
        • reply-indicator @3x.png
  • animations/
    • side-menu-animation.mov
    • peter-pan-animation.gif
  • app-icons/
    • icon-29.png
    • icon-40.png
    • icon-80.png
    • ...
  • screenshots/
    • 640x920/
      • screenshot1.png
    • 640x1136/
      • screenshot1.png
    • ...

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

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

Похожие гайдлайны в настоящий момент формируются и командой Android-разработчиков, так что, если читатели будут заинтересованы — обязательно опубликуем в недалеком будущем.

Полезные ссылки: