Настало время дизайнерам реализовывать собственные 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

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

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

Экспорт исходников под мобильные устройства был самой большой проблемой в коммуникации между дизайнерами и разработчиками. Разработчикам приходилось обучаться работе со Sketch или Photoshop, чтобы вытащить исходники, или же долго и нудно мучить дизайнера, чтобы научиться их экспортировать. Большинству дизайнеров приходится тратить драгоценное время на документирование исходников. Вдобавок есть еще так называемые растягиваемые исходники (Stretchable Assets). Нужно уметь их создавать, и это было очень сложной задачей, многие писали мануалы по этому процессу. Наконец, все это в прошлом. Xcode 5 создаст для вас эти растягиваемые исходники.

1-qecUIdDROOIvnYWPpBYykA

Из Sketch экспортируйте исходники в 2x и половинчатом размере. Sketch за вас проименует все файлы.

1-8CZScZ_iPj-vKlKCvP3Gyw
Теперь проимпортируйте все исходники из Sketch. Xcode автоматически их спарует.

1-KA7ryCBb95kELsqfJlTJ3Q
Для растягиваемых исходников кликните на опции Show Slicing.
1-nAxg-FHMKfrDO7W4z3x0Tw
Затем кликните на Start Slicing.
1-vBmZnkbNP9iDoFsZDcN0nA
Далее нажмите на одну из 3 кнопок, в зависимости от того, как именно вам нужно растянуть исходник
1-2TgqdEYfUw1Kph2tXhQIIw
Вуаля, Xcode все сделал за вас! Затем проведите такой же слайсинг для всех кнопок и облаков.

Первый экран

1-E6w5LgPr4kk5xggDRZvVYA
Создадим первый экран. В Storyboard перетащите Image View из Objects Library.
1-XuCOy6bP9xuVO5oNO0wQ2g
Затем перейдите в инспектор параметров (Attributes Inspector) и измените изображение. Xcode выполнит автозаполнение, если найдет контент в вашей библиотеке исходников.
1-2zI_dCHTEGxfCBi02mSBlA
Попробуйте перетащить другой Image View и задать параметр bubble-white. По мере ресайза вы заметите, как плавно растягивается объект.
1-l_lG6iNsjF6gVD7fNMeibA
Затем создайте аватар. Если удерживать Alt, увидите знакомые из Sketch опции 😉
1-xPd0zoX1S16PSM4qX-v34Q
Теперь перетащите Label, чтобы задать текст внутри. Вы можете задать Lines, равным 0, чтобы было неограниченное количество линий.
1-IIpRxrspEugWzS3Lw9054Q
Перейдите в инспектор размеров (Size Inspector) и измените размер. Так получится точнее.
1-QaDyIQ3bp1YPdsV_CfeTOA
Будучи перфекционистами, вы будете максимально верны своему дизайну 🙂
1-qMV7WqAWHj-07DMcX23hew
По шрифтам, вам захочется выбрать более тонкий, подходящий для iOS, Helvetica Neue Light.

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

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

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

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

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

Часто в CSS вам приходится нужно использовать изображения для базовых элементов вроде закругленных углов. В Xcode 5 закругленные углы можно задать программно. Это супер-полезно!

1-yVRaV3ZWF8DC6LBmMlF9fQ
Для Table (таблицы) мы создадим представление (View), содержащее все, и добавим закругленные углы. Обязательно активируйте опцию «Clip Subviews» (закрепить части представления), она равнозначна overflow: hidden.

1-IBJXIbF5WUi2aJSV4kQJxg
Задайте такие значения Runtime Attribute для слоя layer.cornerRadius. Небольшой фокус!
1-hqeZAAZk9ASBjCeukxxDKQ
Storyboard вам не покажется, зато вы увидите ее, когда будете пользоваться симулятором.

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

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

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

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

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

Стандартную панель инструментов iOS можно спокойно кастомизировать, то есть менять цвета, текстовые надписи и иконки.

1-j--hvWUpnCJ1tGrpIrL_6w
При выделенном контроллере представлений снова поищите Embed, но на этот раз выберите Tab Bar.

1-1q4zRP4ns-xDHBqOSGZ32A
Как и с панелью навигации, тут есть опции для каждого View Controller.
1-7TcZXdZ_K0Q1QmFENvPAMQ
Иногда вы не хотите вставлять панель навигации или панель инструментов, так что нужно их спрятать, задав значение None для Bottom Bar и выделив опцию «Hide Bottom Bar on Push».

Скроллинг

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

Скачайте проект 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