Изучение Xcode для дизайнеров мобильных приложений

Настало время дизайнерам реализовывать собственные iOS-дизайны

Весь прошлый месяц я просыпался в 7 утра и работал без перерывов до 7 вечера в будни и выходные, создавая Ripple и параллельно трудясь фуллтайм на Carshare.hk. В этом месяце я полностью поглощен работой с iOS - я поставил себе за цель сделать релиз обоих iOS-приложений к концу года, выполняя в этих проектах роль дизайнера и фронт-енд разработчика. Скачайте функциональный Xcode-прототип здесь

Читайте также:

Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift Глава 2. Самое подробное руководство по дизайну в Sketch Глава 3. Создание iOS-приложения в Sketch и Xcode, публикация его в App Store Глава 4. Инструкции по разработке дизайна интерфейса и анимаций с помощью Swift

Xcode Storyboard

Я встретил потрясающего iOS-инженера, который выступает за использование Storyboard. Я уже использовал Storyboard для прототипирования, но всегда мечтал с его помощью создать функциональное iOS-приложение. С его помощью я бы мог значительно упростить iOS-разработку. Инженер мог бы взять на себя разработку более сложных взаимодействий, а я бы трудился над подгонкой пикселей, анимациями и макетом дизайна по мере своих возможностей. К счастью для меня, у Apple есть очень детальная документация. Вдобавок, на Stackoverflow есть активное, огромное сообщество. Но на этот раз кодить мы не будем.

Упрощения для дизайнеров

Как дизайнер, которому нужно разрываться между UX, визуальным дизайном и фронт-ендом, я не могу позволить себе ничего усложнять. Частично эффективность дизайнера проявляется в в способности сказать “нет”. Если мне придется целиком изучить Objective-C, я потеряю мотивацию в самом начале. В этой статье я не буду освещать сложную часть процесса, так как другие давно и подробно изложили эти аспекты. Вместо этого я буду опираться на вещи, с которыми дизайнеры хорошо знакомы и успешно работают, и опишу вам свой собственный подход работы со Storyboard.

iOS7 и Xcode 5

С приходом iOS7 визуальный дизайн стал играть гораздо меньшую роль, позволяя дизайнерам больше сфокусироваться на функционале вместо стилей. Вместе с этим массивным обновлением Apple также представил Xcode 5, гораздо более удобный инструмент для разработки. Сейчас в нем есть библиотека исходников (Assets Library), автоматическая конфигурация (Automatic Configuration) - наконец, стало проще тестировать на iPhone, быстрое открытие (Open Quickly), SpriteKit и гораздо более мощная Storyboard.

Начало работы в Xcode

После установки Xcode, создайте новый проект. Выберите Single-View Application (однооконное приложение) и задайте ему имя. С каждым новым проектом заводится новая Storyboard (карта событий). И библиотека исходников: Каждый iOS-дизайнер знаком с AppIcon и LaunchImage. Чтобы заполнить их, просто перетаскивайте элементы в нужные места.

Библиотека исходников, мое любимое!

Экспорт исходников под мобильные устройства был самой большой проблемой в коммуникации между дизайнерами и разработчиками. Разработчикам приходилось обучаться работе со Sketch или Photoshop, чтобы вытащить исходники, или же долго и нудно мучить дизайнера, чтобы научиться их экспортировать. Большинству дизайнеров приходится тратить драгоценное время на документирование исходников. Вдобавок есть еще так называемые растягиваемые исходники (Stretchable Assets). Нужно уметь их создавать, и это было очень сложной задачей, многие писали мануалы по этому процессу. Наконец, все это в прошлом. Xcode 5 создаст для вас эти растягиваемые исходники. Из Sketch экспортируйте исходники в 2x и половинчатом размере. Sketch за вас проименует все файлы. Теперь проимпортируйте все исходники из Sketch. Xcode автоматически их спарует. Для растягиваемых исходников кликните на опции Show Slicing. Затем кликните на Start Slicing. Далее нажмите на одну из 3 кнопок, в зависимости от того, как именно вам нужно растянуть исходник Вуаля, Xcode все сделал за вас! Затем проведите такой же слайсинг для всех кнопок и облаков..

Первый экран

Создадим первый экран. В Storyboard перетащите Image View из Objects Library. Затем перейдите в инспектор параметров (Attributes Inspector) и измените изображение. Xcode выполнит автозаполнение, если найдет контент в вашей библиотеке исходников. Попробуйте перетащить другой Image View и задать параметр bubble-white. По мере ресайза вы заметите, как плавно растягивается объект. Затем создайте аватар. Если удерживать Alt, увидите знакомые из Sketch опции ;) Теперь перетащите Label, чтобы задать текст внутри. Вы можете задать Lines, равным 0, чтобы было неограниченное количество линий. Перейдите в инспектор размеров (Size Inspector) и измените размер. Так получится точнее. Будучи перфекционистами, вы будете максимально верны своему дизайну :) По шрифтам, вам захочется выбрать более тонкий, подходящий для iOS, Helvetica Neue Light.

Интерфейс ввода сообщения

Вставим View. Это почти как папка, потому что внутрь вы можете поместить все, что угодно. В нем есть свои атрибуты, очень большое разнообразие. Текстовое поле (Text Field) располагает параметрами, с которыми вы точно знакомы, если работали с CSS. Убедитесь, что Border style задан как none. Далее, неизвестная Button (кнопка). Обратите внимание на опции состояния Highlighted.

Панель навигации

Один ловкий трюк. Перейдите в меню Help и найдите “Embed”, затем выделите Embed в Navigation Controller. В левой боковой панели выделите Navigation Bar. Вы увидите массу опций стилизации, доступных через Storyboard. Нужен заголовок? Редактируйте свойства элемента навигации в контроллере представления. Да, в Navigation Bar могут быть кнопки Action (кнопки с активным действием). Object находится в самом конце Library. Редактируйте цвета (Edit the Tint, так как Xcode берет на себя смелость самостоятельно задавать оттенки изображениям.

Закругленные углы

Часто в CSS вам приходится нужно использовать изображения для базовых элементов вроде закругленных углов. В Xcode 5 закругленные углы можно задать программно. Это супер-полезно! Для Table (таблицы) мы создадим представление (View), содержащее все, и добавим закругленные углы. Обязательно активируйте опцию “Clip Subviews” (закрепить части представления), она равнозначна overflow: hidden. Задайте такие значения Runtime Attribute для слоя layer.cornerRadius. Небольшой фокус! Storyboard вам не покажется, зато вы увидите ее, когда будете пользоваться симулятором.

Ссылка на другой экран

Создайте пустую кнопку (Empty button) и поместите ее в представление. Кликнув на этой кнопке в списке, удерживайте Ctrl и потяните на другой экран. Выберите Push. Убедитесь, что на корневом экране у вас есть панель навигации, иначе это не сработает.

1-пиксельные линии

Xcode работает в точечных единицах (pt). Вы не можете создать представление и задать ему размер в 0.5pt или 1px. Поэтому, чтобы создать эту линию толщиной с волосок, нужно вручную создать 1-пиксельный исходник.

Панель инструментов

Стандартную панель инструментов iOS можно спокойно кастомизировать, то есть менять цвета, текстовые надписи и иконки. При выделенном контроллере представлений снова поищите Embed, но на этот раз выберите Tab Bar. Как и с панелью навигации, тут есть опции для каждого View Controller. Иногда вы не хотите вставлять панель навигации или панель инструментов, так что нужно их спрятать, задав значение None для Bottom Bar и выделив опцию “Hide Bottom Bar on Push”.

Скроллинг

Все любят скролл-эффект в iOS. Но, чтобы его достичь, нужно в качестве контейнера иметь Table View (табличное представление). Структура такова: Table View / View (full) / ваши объекты. Будьте осторожны, изначально Table View и View идут с белым фоном. Убедитесь, что выбрали опцию Clear color. Интересным решением может быть прокручиваемые области в отдельных частях экрана.

Скачайте проект Xcode

Поэкспериментируйте с функциональным Xcode-прототипом Ripple и отредактируйте стили на свой вкус: http://cl.ly/2A0m0j0i0g1K

Никакого кода

Если вы опустите сложные этапы, Xcode куда более удобен и прост, чем HTML/CSS/SCSS/Javascript для дизайнера. Таким и должен быть WYSIWYG. В следующий раз мы обсудим использование сторонних библиотек с помощью CocoaPods и подключение кастомных шрифтов и анимаций с минимальным использованием кода.

Читайте также:

Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift Глава 2. Самое подробное руководство по дизайну в Sketch Глава 3. Создание iOS-приложения в Sketch и Xcode, публикация его в App Store Глава 4. Инструкции по разработке дизайна интерфейса и анимаций с помощью Swift

---

Перевод статьи Meng To