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



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



    iOS


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



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




    Metrics


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

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



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



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



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




    Fonts


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



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



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


    Resources


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



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



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


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



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


    Samsung Bada


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



    Итак, Windows Phone.


    Windows Phone


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



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




    Metrics


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



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

    Пример




    Fonts





    Пример




    Resources


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



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



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



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



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

    Подробнее
    Реклама
    Комментарии 11
    • +1
      Windows Phone прекрасен для дизайнеров и разработчиков тем, что там вполне можно обойтись без картинок.
      В Blend есть прекрасный инструмент — Import from Photoshop (или Illustrator), который импортирует в обычные кривые.

      Ваш флажок и скрепка и стрелочки вполне простые элементы, которые как раз подходят для этого. И не надо будет больше волноваться насчет разрешений и разработчику проще. Ведь для того, чтобы изменить цвет у стрелочки, все что нужно будет это {Binding ArrorColor}.
      • 0
        А векторная прорисовка несильно жрёт ресурсы девайса на отрисовку интерфейса? Просто я слышал, что Windows Phone использует для отрисовки UI системы именно статические картинки, чтобы девайсы не тормозили. Правда ли это, т.к. на практическом программном уровне в WP я не копал?
        Если поделитесь ссылками про программную отписовку UI, буду очень благодарен!
        • 0
          Да, вы правы. В разделе «Choosing between images and XAML» для статических ресурсов советуют картинки.

          msdn.microsoft.com/en-us/library/windowsphone/develop/ff967560(v=vs.105).aspx#BKMK_Understandingthreads
          • 0
            Как компромисс есть еще CacheMode, который за вас сделает растеризацию под текущее разрешение.
        • 0
          Спасибо за статьи, буду посылать сюда дизайнеров, с которыми работаю.
          • 0
            Что-то мне подсказывает, что тупой ресайз приведёт к снижению качества графики. В случае с iOS, уменьшение в 2 раза будет работать нормально только в том случае, если координаты и размеры будут кратны 2м. Для WP увеличение в 1.6 раза вообще гарантирует, что графика перестанет попадать в точки. Что ж делать? :)
            • 0
              Да, проблема «мыльных пикселей» остаётся открытой. Совет такой же, как и в интеграции под Android — просмотреть ресурсы и руками поправить то, что будет иметь косяки. Долго копал в поисках автоматического решения этой проблемы, но пока ничего конкретного нету.
            • 0
              А не будет ли меньшей потери качества и увеличения «мыла» при ресайзе в меньшую сторону для Windows Phone? (WXGA to WVGA)?
              • 0
                Думаю, будет примерно одинаково, как показывает практика для iOS. В принципе, причина, по которой я делаю НЕ как вы говорите, только в том, что макеты изначально создавались для WP7.
              • 0
                А я всё по старинке slice'ом…
                • 0
                  Спасибо за хорошую статью

                  >> Важно отметить (и запомнить!), что цвета для программистов надо указывать в десятеричном формате.

                  В коде удобно использовать дополнительный класс — https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/NotificationEx/UIColor-Expanded.h

                  + (UIColor *)colorWithHexString:(NSString *)stringToConvert;
                  


                  Но если в IB, то да, десятеричный формат

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.