Обучение Swift, Xcode Storyboard, Auto Layout и Designable Views

Необходимо ли обучение Swift и Xcode для дизайнера?

В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus.

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

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

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

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

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

Мобильные разработки продолжают развиваться экспоненциально, составляя наибольшую часть прибыли разработчиков. Apple заплатил за это 10 миллиардов долларов в 2014 году. Прототипирование стало одним из самых привлекательных навыков для дизайнеров. Какой инструмент использовать — быструю программку вроде Pixate, более мощный инструмент вроде Framer или же Storyboard в Xcode — спорный вопрос. Но, несомненно, навыки работы в этих программах пригодятся вам в дальнейшем.

Лично я потратил 14 лет своей жизни на создание вебсайтов. Помимо Photoshop и Sketch я изучил CSS, HTML и Javascript. Эти навыки я ни за что бы ни продал. Они позволили мне быть там, где я сейчас нахожусь. Зная, как реализовать свой собственный дизайн в коде, вы значительно расширяете свои возможности. Это позволяет тестировать и отлаживать процесс дизайна в реальном времени. Это отладка за счет вашего понимания разработки, которая позволит избежать типичных ошибок в дизайне, которые могут стоить недель вашего времени.

Ни один дизайнер не захочет потратить неделю только на то, чтобы узнать, что его задумка не сработает.

Обучение Swift и Xcode для дизайнера.

Зная, как пользоваться Storyboard, Auto Layout и чуть-чуть навыков в Swift не только позволит вам создать собственное приложение, но и частично перенять на себя нагрузку по разработке. Вы сможете работать нога в ногу со своей командой, выполняя итерации вместе с программистами. Скорость развития проекта ограничена скоростью выполнения самого медленного процесса. Разработка занимает 80% времени, а 20% приходятся на визуальный дизайн. Есть еще 30%, которые вы можете взять на себя. Поскольку дизайнеры получили возможность обучиться для этой части, можно серьезно оптимизировать работу всей команды.

Обучение Swift и Xcode для дизайнера. appwork load

В этой главе мы научимся, как заполучить те недостающие 30%. Я буду описывать с точки зрения дизайнера.

Быстрое прототипирование

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

Обучение Swift и Xcode для дизайнера. finishe prototype

Переходы

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

Бонус: если вам нужно скачать демо-проект Xcode для этого урока, он здесь. Полностью реализован в Storyboard.

Проектирование дизайна в Storyboard

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

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

Обучение Swift и Xcode для дизайнера. Storyboard

Адаптивная верстка

Адаптивная верстка — один из самых важных навыков, которые вы можете развить. В будущем, где количество мобильных устройств и размеров экранов постоянно растет, мы уже не можем позволить себе застрять на статическом дизайне.

Auto Layout

Авто-макет требует 2 параметра: позиция и размер. Для построения автоматически подстраиваемого дизайна этого достаточно. Для этого нужны два инструмента: Align и Pin.

Обучение Swift и Xcode для дизайнера. align and pin

  1. Align позволяет вам отцентрировать элементы и выровнять их друг с другом.
  2. Pin дает возможность настроить размер и отступы от краев.

Установка ограничений между двумя объектами

Помните смарт-гайды и измерение расстояний в Sketch? Ограничения — это что-то вроде них, только применяется для адаптации вашего макета.

Изучаем Xcode Storyboard, Auto Layout и Designable Views

Инструмент Preview (предпросмотр)

Инструмент Preview в Assistant Editor позволяет быстро проверить, как дизайн будет смотреться на iPhone 3.5', 4', 4.7', 5.5' и iPad в портретном и альбомном режимах без необходимости запускать приложение на каждом устройстве.

Обучение Swift и Xcode для дизайнера. Инструмент Preview (предпросмотр)

Классы размеров

Size Classes — удобный инструмент для установки ограничений в авто-макете и контенте для различных групп устройств. Вы можете добавить дополнительное меню или увеличить какую-то часть контента в зависимости от устройства, на котором вы работаете.

Обучение Swift и Xcode для дизайнера. Классы размеров Size Classes

Работа с цветами

Как дизайнер со знаниями в программировании, я обычно работаю с палитрой цветов в 16-ричной системе. Эти инструменты помогут вам эффективно конвертировать цвета из Sketch в Xcode.

Обучение Swift и Xcode для дизайнера. Работа с цветами

  1. HEX Color Picker — очень простой 16-ричный селектор цвета. Очень полезный инструмент при работе со стандартным селектором цвета в Mac, который есть в Sketch и в Storyboard Color Picker.
  2. Sip Color — отличный инструмент для сбора цветов и последующего конвертирования в код Swift.
  3. Skala Color Picker — отличная альтернатива первым двум инструментам.

Vector Assets

Вместо генерации 3 изображений в разном масштабе (1x, 2x, 3x) для каждого исходника, вам понадобится всего один файл. В Sketch нужно импортировать их в PDF. Важно учесть 3 момента.

Обучение Swift и Xcode для дизайнера. Vector Assets

  1. Разрешение имеет значение. Вы должны экспортировать в масштабе 1x, чтобы убедиться, что дизайн смотрится хорошо в Storyboard.
  2. Вы не можете изменять размер векторного изображения в Storyboard на свое усмотрение.
  3. Xcode преобразовывает их в файлы PNG в масштабах 1x, 2x и 3x.

Представляем Spring

Год назад я представил вам Canvas, iOS-библиотеку анимаций, которая предназначена для упрощения процесса создания анимации с помощью Runtime Attributes (атрибуты рабочего цикла) в Storyboard. Он был достаточно прост, чтобы любой дизайнер без навыков в коде мог успешно разрабатывать динамические эффекты интерфейса.

С тех пор много чего произошло. Swift пришел на смену, а Xcode 6 значительно все упростил. Теперь Runtime Attributes можно установить, используя IBInspectables. Вместо того, чтобы вручную прописывать несколько атрибутов, таких как тип анимации, задержка и длительность, вы можете просто указать значения напрямую в Attribute Inspector (инспектор атрибутов).

Обучение Swift и Xcode для дизайнера. Представляем Spring

Я решил засесть за планшет и поработать в новой библиотеке анимаций под названием Spring, с помощью двух iOS-разработчиков. Этот проект начался, когда я представил свою книгу Swift Chapter в помощь дизайнерам и новичкам для изучения Swift. Эта книга помогала сократить код анимации и учила, как устанавливать свойства слоя, которые еще не доступны в Attribute Inspector — cornerRadius (радиус закругления угла), shadowColor (цвет тени), shadowOpacity (непрозрачность тени) и другие.

Эта библиотека выросла в полноценную библиотеку анимации, которая поддерживает все возможные представления, переходы, анимации загрузки и многое другое.

spring-button

Установка Spring

Просто вставьте папку Spring в ваш Project Navigator, как показано на видео.

Используя Spring, вы можете быстро анимировать любой слой без единой строчки кода. У вас есть доступ к более, чем 25 предустановкам анимации, таких как slideDown, zoomIn, squeezeUp и т. д. Вы можете играться с опциями x, y, масштаба и вращения. Кроме того, вы можете экспериментировать с параметрами кривой, замедления и скорости.

Для простых анимаций:

  1. В Identity Inspector, установите Spring Class для вашего слоя.
  2. Выберите нужные атрибуты Spring.

Игра с приложением Spring

Анимации в коде

С кодом вы можете гораздо больше. Spring построен так, что вы можете запускать анимации или цепь анимаций на любое событие.

Вы можете активировать их во время viewDidAppear () или в IBAction.

layer.animation = «squeezeDown»
layer.animate ()

Я рекомендую хранить все параметры анимации в Storyboard и просто вызывать функцию animate () или animateTo () в коде. Таким образом, вы можете избежать слишком большого количества кода в файлах классов.

Обучение Swift для дизайнера

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

Мне нравится расценивать код как еще один инструмент дизайна. Программные продукты сделаны из кода, он неизбежен.

Эта книга была написана с учетом последних стандартов, принятых Apple. Я консультировался у двух iOS-разработчиков во время ее написания, и они любезно просматривали весь мой код, чтобы убедиться в соблюдении наивысших стандартов.

Обучение Swift и Xcode для дизайнера.

Как дизайнер, изучающий код, вы можете:

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

Создание своего приложения на Swift

В этой обновленной главе мы не пропустим ни одного шага. Вы изучите все максимально детально: интерфейс Xcode, Storyboard, Auto Layout, анимацию, и язык Swift, а также многое другое. Каждый раздел максимально визуализирован и содержит видео с голосовой озвучкой, а также проекты на Xcode, которые можно скачать себе. Весь процесс был значительно упрощен для дизайнеров и начинающих разработчиков, которые никогда в своей жизни не сталкивались с кодом.

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

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

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

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

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