Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

в 7:03, , рубрики: android, разработка под iOS, разработка под windows phone, метки: , ,

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Это вторая часть доклада, который я прочитал на Dribbble Meetup 2013 в Москве. В первой части я подробно описал свой процесс интеграции дизайна под платформу Android. Эта часть — про интеграцию дизайна под iOS и Windows Phone, а также я вскользь упомяну про Samsung Bada 2.0. Дальше — много картинок.

iOS

Переходим к iOS. Тут всё значительно проще, чем в Android. Процесс интеграции будет разбираться на примере iPhone, но всё нижеописанное с успехом применяется и на iPad.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Как мы все знаем у iPhone есть всего два типа экрана: «Retina», «не Retina».

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Metrics

Итак, папка Metrics должна содержать все тоже самое, что и для Android: размеры элементов, отступы между ними и от края экрана, цвета однотонных элементов (например, разделители) и т.д. Важно отметить (и запомнить!), что цвета для программистов надо указывать в десятеричном формате. То есть, например, RGB (255, 255, 255), а не в шестнадцатиричном — #FFFFFF.

Размеры для программистов должны быть указаны для не Retina-экранов.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

А так как psd-макеты у нас делаются для Retina, то сответственно, для корректной работы заходим в Image, жмём Image Size, и выставляем значение 50%.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Можно приступить, так сказать, к «образмериванию» макета. Делать это будем с помощью уже знакомого нам PNG EXPRESS (29 $, для PS CS5/6). Всё аналогично Android.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Пример
Шаг 1. Допустим, нам надо указать размер между картинками аттачей.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Fonts

Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Пример
Шаг 1. Если нам надо указать шрифт у ссылки «Подробности», то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Опять сэкономили кучу времени.

Resources

Папка Res должна содержать ресурсы графики для вашего приложения. Для iPhone всё складывается в одну папку:
файлы для Retina обозначаются с @2x, то есть excel@2x.png, не Retina — просто excel.png

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Опять используем расширение Cut & Slice me (бесплатное, для PS CS6).

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Исходный psd-макет должен быть для Retina-экранов.

Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Реорганизуем слои: каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку iPhone, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки с нужными именами для Retina и не Retina.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Чтобы не возникала проблема “мыльных” пикселей, все элементы должны иметь четный размер.

Samsung Bada

Третья в списке платформ — Samsung Bada. Достаточно популярная платформа в России. Но недавно компания Samsung убила эту мобильную операционную систему, официально объявив о ее закрытии. Поэтому о Bada можно либо хорошо, либо никак…

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Итак, Windows Phone.

Windows Phone

Тут ситуация повторяет iOS, поэтому просто ещё раз пробежимся по процессу.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

На WP мы имеем два основных типа экрана: WVGA, WXGA.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Metrics

Размеры для программистов должны быть указаны для WVGA-экранов.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

С помощью PNG EXPRESS «образмериваем» макет.

Пример

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Fonts

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Пример

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Resources

К сожалению, Cut & Slice me не поддерживает Windows Phone. Поэтому придётся вручную делать ресайз под два разрешения.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Сначала делаем графику для WVGA. Для этого в Cut & Slice переходим в третью вкладку, которая вырезает слои размером 1 к 1. По сути, заменяет массовую команду Save for Web.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Затем WVGA переводим в WXGA, в Image Size выставляем 160%.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Повторяем процесс.

Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone

Всё, теперь мы освоили интеграцию дизайна для всех основных мобильных платформ.

Автор: 30PP0

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js