Создание приложения в Sketch и Xcode еще никогда не было таким простым. Sketch и Xcode делает весь этот процесс одинаково достижимым для дизайнеров и разработчиков. С одной стороны, в Sketch каждый шаблон и инструмент создан специально для такого типа работы, а с другой — у нас есть Storyboard и Assets Catalog в Xcode, которые позволяют быстро построить функциональный прототип. За 5 минут у вас может получиться нечто, что можно потестировать на вашем iPhone.

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

Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift

Глава 2. Самое подробное руководство по дизайну в Sketch

Глава 3. Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Глава 4. Инструкции по разработке дизайна интерфейса и анимаций с помощью Swift

Storyboard достаточно прост для понимания дизайнерами

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

Прототип в Sketch и Xcode за 2 минуты

Главный козырь Xcode — его суперпростота. За 2 минуты вы можете создать прототип из 4 связанных страниц. И что не менее важно, вы можете просмотреть все это на своем iPhone.

Начнем

Xcode абсолютно бесплатен. Для дизайнеров, которые пользовались Sketch или редактором кода вроде SublimeText, интерфейс программы будет очень знаком. Главная разница в том, как использовать библиотеку Объектов (Objects) и настраивать параметры. Здесь есть масса опций, так что начните с простого. Сфокусируйтесь на вещах, с которыми вам комфортно работать. Не пытайтесь сразу выполнить что-то очень продвинутое, так как Xcode действительно предоставляет огромные возможности, в которых можно заблудиться.

Создайте проект

Чтобы создать новый проект, просто выберите одностраничное приложение (single page app) и введите имя вашего будущего продукта. Затем сохраните где-то проект. Вот и все, вы создали свой первый проект приложения!

newproject

Экспорт из Sketch 3

Ранее мы изучили, как быстро создать и экспортировать исходники в Sketch 3. Называя Артборды, группы и слои, вы можете указать, в каком разрешении они должны быть. Используя кнопку Export All (экспортировать все), вы можете экспортировать все исходники в один клик. Я включил файл Sketch для приложения Designer News, которое мы сейчас создаем. Так что вы можете проанализировать, как я настроил каждый исходник. Можно использовать его как шаблон для ваших будущих проектов под iOS, так все было “порезано” и переименовано для работы с Xcode.

Assets Catalog (каталог исходников)

Новинка Xcode 5, Assets Catalog организовывает все ваши кнопочки, иконки и изображения в чистый UI. Чтобы добавить исходники, просто перетащите их туда мышкой. Я знаю, как спаровать исходники в размерах 1x и 2x вместе. Xcode даже поддерживает растягивание, что будет очень кстати для динамических кнопок. Вы можете настроить растягиваемую область, которая будет самоповторяться, позволяя растягивать их до любого размера.

assets

Storyboard (раскадровка)

Storyboard работает по принципу, очень похожему на Артборды в Sketch. Это очень простой для понимания инструмент, если вы уже распрощались со страхом перед iOS-разработками. В Storyboard вы можете управлять пользовательским интерфейсом своего приложения самым обычным образом. Это даже проще, чем HTML и CSS, потому что вам не нужно учить код (еще пока не нужно), чтобы добраться до этого этапа.

xcode-ui

Библиотека объектов

Это место, куда вы перетаскиваете элементы, необходимые для приложения: кнопки, изображения, тексты и т.д. Я предлагаю поиграться с ними как можно дольше, чтобы изучить, как что работает. Узнавать новые методы их использования действительно интересно! Как дизайнеры, мы любим поломать вид “по умолчанию” и сваять что-нибудь авторское. Изучение этих объектов вдохновит вас на максимальный тюнинг без потери реализма.

objects

Медиа-библиотека

Как только вы импортировали все исходники для UI, они становятся доступны через библиотеку медиа. Это очень полезная опция, потому что как только вы добавляете материалы через Assets Catalog (каталог исходников), они тут же появляются здесь.

media

Контроллер представлений (View Controller)

Это эквивалент ваших родных артбордов в Sketch. Это полная копия, со всеми взаимосвязями и состояниями. Контроллер представлений может содержать кучу под-окон, таких как View, Table View, Text, Buttons и т.д.

 

Transitions (переходы)

Есть 6 типов переходов между окнами в iOS: Cover Vertical (наплыв по вертикали), Flip Horizontal (переворот по горизонтали), Cross Dissolve (перекрестное растворение), Partial Curl (частичный вихрь), None (нет) и Push (вытеснение). Для присоединения нажмите правой кнопкой мышки и перетащите.

Я создал прототип за 10 минут, чтобы показать пример. Это была спонтанная импровизация. Думаю, вам будет полезно посмотреть, что получилось. 🙂

Подключение кода

Пока Storyboard предоставляет удобное управление графическими элементами интерфейса для приложения, остается множество базовых элементов, не доступных до сих пор: кнопка “назад”, панель светового режима и т.д.

Тестирование на iPhone

Одной из важнейших функций Xcode является возможность тестировать приложения на вашем iPhone напрямую. Я фанат тестирования. Это одна из вещей, которые необходимо делать постоянно, чтобы создать идеально отшлифованный продукт. Неважно, дизайнер вы, разработчик или продукт-менеджер, тестирования вам не избежать. Эта особенная функция стала причиной, почему я решил учить Xcode вместо Origami; Я хотел иметь возможность тестировать напрямую на своем iPhone и видеть проблемы в их реальном отображении на устройстве.

Чтобы двигаться дальше, нужно иметь аккаунт разработчика Apple.

developer

Подключите iPhone через USB

Как только вы зарегистрировали свой аккаунт разработчика, вы можете залогиниться в Preferences / Accounts. Xcode 5 позаботится о назначении корректных прав. Затем перейдите в Organizer, чтобы увидеть, доступен ли ваш iPhone для тестирования. Если нет, вам выдаст ошибку с инструкциями, как ее устранить. В итоге вы сможете выбрать свой iPhone в качестве устройства для тестирования.

Горячие клавиши

Это самые важные горячие клавиши для дизайнеров и новичков среди iOS-разработчиков.

Показать дистанцию между элементами Alt
Запустить симулятор Command + R
Остановить эмуляцию Command + .
показать Project Navigator (навигатор по проекту) Command + 1
спрятать Project Navigator Command + 0
Подогнать размер под контент Command + =
Показать Assistant Editor (вспомогательный редактор) Command + Alt + Enter
Показать Standard Editor (стандартный редактор) Command + Enter

Словарь

Разработка под iOS предполагает особую структуру имен. В общении с маститым разработчиком вы должны быть на одной волне, используя одинаковый лексикон. Ему сложно понять, что такое артборд, но они отлично понимаю, что означает View Controller.

vocabulary

Внедрение дизайна

Перетаскивание скринов курсором хорошо подходит для создания легких прототипов, но с Xcode вы можете гораздо больше. Так же, как и при CSS-верстке сайта, вам понадобится отделить каждый слой, чтобы не пришлось бегать назад в Sketch, каждый раз, когда понадобится подредактировать контент. Эти изменения должны производиться в Xcode.

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

Смартгайды

Как и в Sketch, в Xcode есть так называемые “смартгайды”, которые значительно упрощают процесс выравнивания элементов. Нажав Alt, вы также увидите расстояния.

smartguides

Дизайн в 1X

Storyboard использует разрешение 1X. Если быть точнее, раскадровка работает в точках. 1 точка = 2 пикселя в Retina. Если в Sketch вы создаете дизайн в разрешении 2X, придется каждый размер делить на 2. Диалоговое окошко размером 560 x 560 пикселей будет 280 x 280 точек в Xcode.

1x

Дизайн в Xcode

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

runtime

Шрифты

Каждый текстовый элемент по умолчанию имеет шрифт System.Вы можете изменить его на Custom и выбрать тип шрифта на свой вкус. Список ограничивается шрифтами, которые поддерживает iOS. Мы еще вернемся к шрифтам в главе 3.

fonts

Цвета

Xcode использует селектор цвета Color Picker для Mac OSX. Единственный нюанс — пипетка не всегда точно срабатывает. Лично я предпочитаю использовать шестнадцатиричные коды. Skala Color picker идеален для этого.

colors

Вы можете значительно ускорить прототипирование

Контроль версий в Github

Настало время загрузить ваш проект Xcode в облако. Таким образом, вы сможете сохранять историю изменений и сотрудничать с другими дизайнерами и разработчиками. Если вы новичок на GitHub, советую прочитать вам, как Делать коммиты на GitHub.

Использование библиотек

Xcode поставляется отличными фреймворками, включая UIKit и UIKit Dynamics. Да, это фреймворки. Но также есть отличные библиотеки, разработанные членами сообществ, такие как Canvas, Facebook Pop, AFNetworking, Parse и т.д. Единственный способ управления этими библиотеками, при котором вы сможете получать все обновления без необходимости вручную загружать и заменять файлы, или беспокоиться об авторских правах, — использовать Cocoapods.

Библиотеки вроде плагинов Sketch, которые создаются свободным сообществом, также помогут вам в оптимизации процесса создания ваших проектов. Больше информации вы найдете на Cocoapods Libraries.

Анимируйте без кода

Можно создавать анимацию, используя Canvas, библиотеку Cocoapods, которую я создал в паре с iOS-разработчиком. Суть работы с Canvas очень проста. Что если мы бы могли сохранить кучу кодов стиля, позволив им существовать только в Storyboard? И что если бы мы могли делать простые анимации, просто изменяя настройки в Runtime Attributes? То, что начиналось как простая забава на выходных, превратилось в одну из самых скачиваемых библиотек для iOS.

Анимируйте с кодом

Когда у вас есть определенные анимации, которые надо запускать при нажатии кнопки, лучше реализовывать такое через код. Во фреймворке UIKit, который идет вместе с Xcode, есть полезная функция для анимации, которая называется animateWithDuration. Если вы примените usingSpringWithDamping, она сделает забавный откат назад. Узнайте больше о том, как программировать анимации.

Простые анимации могут выполняться быстро.

Многие спрашивают меня, нужно ли им знать Objective-C. Я говорю, что нет. В наше время мы изучаем фреймворки и манипулируем результатами через визуальные инструменты. Когда вы начинаете изучать японский или французский, вы не тратите месяцы, чтобы понять всю структуру языка. Вы начинаете с изучения простых слов вроде “Привет” и “Спасибо”.

Построение взаимосвязей

Как заставить клавиатуру спрятаться, если вы кликаете за ее пределами? Как подсветить иконки Email и Password, когда поле ввода активно? Как настроить состояния ошибки? Изучение этих моментов может сделать или сломать вашу работу. Также это дверь к более продуктивной работе с разработчиками.

login-interactions

 

Сталкиваемся с реальными проблемами разработки

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

Во второй части главы 3 будет много кода. В уроке по Разработке формы входа, вы научитесь работать с редактированием текстовых полей, клавишами управления, сообщениями об ошибках, индикаторах загрузки и подключениям к API.

В уроке по Созданию домашней страницы мы научимся создавать класс для контроллера представлений таблицы, ячейки reuse, вызов GET API и работать с массивами, чтобы применять к IBOutlets.

В статье о Создании статьи мы научимся кешировать данные доступа, используя Keychain, отсылать данные через переход, работать с динамическими размерами с Autolayout и создавать список комментариев.

В уроке о Веб-представлениях, мы научимся открывать ссылки внутри приложения через Web View.

В Upvote и Share, мы научимся легко реализовывать функции Pull to Refresh (обновить), Upvote (лайкнуть) и Share (поделиться). А также, научимся настраивать методы Delegate и использовать краткие настройки всего в нескольких строках кода.

В Comment и Menu, Я научу вас создавать простые меню, используя UIActionSheet и создавать Comment View (представление комментария), который будет публиковать в DN API.

В уроке Add Sounds, вы сможете проигрывать звук каждый раз, когда пользователь что-то лайкнет или обновит страничку. Одна строка кода.

В главе Track with Mixpanel, вы научитесь отслеживать аналитику событий через Mixpanel iOS API. People data предоставит исчерпывающую информацию по действиям пользователей в вашем приложении.

В этой книге мы не просто изучаем, как создавать код. Мы соединяем 2 мира!

Публикуемся в App Store

Профили – настоящая головная боль для любого, кто когда-либо с ними сталкивался. К счастью, мне помогли справиться с ним iOS-разработчики, с которыми я работал. Я дотошно изучил, как пройти все препятствия, и записал весь процесс на видео. Настало время передать ваше приложение в руки пользователей!

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

Глава 1. Обучение Swift и Xcode для дизайнера, создание своего приложения на Swift

Глава 2. Самое подробное руководство по дизайну в Sketch

Глава 3. Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Глава 4. Инструкции по разработке дизайна интерфейса и анимаций с помощью Swift

 

Оригинал статьи на designcode.io