Настало время дизайнерам реализовывать собственные 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
Библиотека исходников, мое любимое!
Экспорт исходников под мобильные устройства был самой большой проблемой в коммуникации между дизайнерами и разработчиками. Разработчикам приходилось обучаться работе со Sketch или Photoshop, чтобы вытащить исходники, или же долго и нудно мучить дизайнера, чтобы научиться их экспортировать. Большинству дизайнеров приходится тратить драгоценное время на документирование исходников. Вдобавок есть еще так называемые растягиваемые исходники (Stretchable Assets). Нужно уметь их создавать, и это было очень сложной задачей, многие писали мануалы по этому процессу. Наконец, все это в прошлом. Xcode 5 создаст для вас эти растягиваемые исходники.
Из Sketch экспортируйте исходники в 2x и половинчатом размере. Sketch за вас проименует все файлы.
Первый экран
Интерфейс ввода сообщения
Закругленные углы
Часто в CSS вам приходится нужно использовать изображения для базовых элементов вроде закругленных углов. В Xcode 5 закругленные углы можно задать программно. Это супер-полезно!
Ссылка на другой экран
1-пиксельные линии
Панель инструментов
Стандартную панель инструментов iOS можно спокойно кастомизировать, то есть менять цвета, текстовые надписи и иконки.
Скроллинг
Скачайте проект 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
