Руководство для начинающих по разработке iOS Интерфейс - Часть I

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

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

Мы обсудим причины, этапы и инструменты для разработки приложения, и в конечном итоге вы последуете простому руководству по разработке базового приложения для iPhone с использованием Xcode.

Итак, учитесь ли вы для бизнеса или у вас просто есть удивительная идея приложения, которая может сделать вас миллионером, давайте приступим к созданию вашего первого приложения для iPhone!

Примечание: вам понадобится компьютер с операционной системой Macintosh (Mac OS) для установки Xcode, разработки приложений и отправки приложений, вы не можете сделать это на Windows легально.

Зачем разрабатывать для Apple?

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

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

С точки зрения развития, Apple любит простые вещи, и это относится к их продуктам и структурам. iOS - это операционная система, которая поддерживает все мобильные устройства Apple. К ним относятся iPod Touch, iPhone и iPad. Поэтому имейте в виду, что при разработке приложений для iPhone вы можете разработка для всех других устройств с iOS!

Кроме того, то, что делает вышеупомянутую особенность еще больше, - то, сколько работы кодирования может быть сохранено. Когда вы пишете код для приложения iPhone, вы используя один и тот же язык программирования для всех вычислительных устройств Apple. Это означает, что когда вы разрабатываете приложение для iPhone, оно впоследствии может быть интегрировано в iPad и даже Mac.

Objective-C является основным языком программирования, обеспечивающим все их структуры. Помимо Objective-C, вы также разработаете приложение для iPhone с Какао Touch, среда программирования, стимулирующая взаимодействие пользователя с iOS.

Это всего лишь небольшая информация, с которой можно начать разработку приложений для iPhone. Развитие довольно сложный процесс, но расслабьтесь, делайте это медленно. Так что причины здесь, и решение за вами. Если ответ да или нет, вы всегда можете перейти прямо к следующей теме: разработка приложений для iPhone.

Планирование структуры вашего iPhone-приложения

В стандартной идеологии создания приложения для iPhone вы захотите пройти несколько этапов. Первый этап включает в себя планирование и черчение.

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

Хуже всего это возвращает тебя к доске для рисования.

Я рекомендую набросать некоторые грубые идеи для нескольких страниц (или просмотров) вашего приложения. Просто нарисуйте прямоугольник, возможно, 5 или 6 фигур на листе бумаги, а затем нарисуйте нужные функции в каждом представлении своего приложения..

Вы можете думать о просмотрах как о разных страницах на сайте. Каждое представление будет предлагать различные функции, такие как форма входа, список контактов или таблица данных..

Ниже я собрал краткую коллекцию различных элементов панели интерфейса:

• Статус бар - Отображает текущий уровень заряда батареи устройства, 3G-соединение, полосы приема, телефонный оператор и многое другое. Рекомендуется всегда включать эти элементы.
• Панель навигации - Предоставляет вашим пользователям возможность перемещаться между иерархиями страниц. Это часто включает в себя кнопку на левой стороне панели, чтобы позволить пользователю вернуться к предыдущему представлению приложения.
• Панель инструментов - Появляется в нижней части приложения iPhone. Это будет держать несколько значков, связанных с некоторыми функциями, такими как Поделиться, Скачать, удалять, так далее.
• Панель вкладок - Очень похоже на панель инструментов, за исключением того, что теперь вы работаете с вкладками. Когда пользователь нажимает на значок вкладки, он автоматически подсвечивается и отображает глянцевое состояние наведения. Эта панель используется для переключения между представлениями вместо предоставления прямой функциональности.

Этот список содержит только те панели инструментов, которые вы можете найти в большинстве приложений. Есть еще несколько представлений и стилей, которые вы можете найти в Руководстве Apple по использованию элементов iOS iOS. Я настоятельно рекомендую обратиться к этой документации, если у вас есть сомнения по поводу элементов пользовательского интерфейса iPhone.

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

Разработка макетов Photoshop

Я предполагаю, что большинству из вас довольно комфортно работать с Adobe Photoshop. Это первое программное обеспечение для создания графики для веб-сайта, баннеров, логотипов и мобильных макетов. Проектирование графики для Интернета - довольно простой процесс, но он немного сложнее, когда дело касается дизайна приложений для iPhone..

Если вы хотите создать приложение, вы действительно должны создавать идеальный макет пикселей с самого начала.

Для начала стоит обсудить настройки Photoshop. Поскольку мы разрабатываем для iPhone, нам нужно рассмотреть 2 разных стиля дизайна. обычный дисплей iPhone 320 х 480 пикселей. Однако iPhone 4 включает в себя Retina Display, который удваивает количество пикселей в пределах того же размера экрана. Так что вы должны удвоить разрешение до 640 х 960 пикселей и разработайте макеты в соответствии с этим стандартом.

Это означает, что вам также нужно создать 2 набора иконок для ваших макетов. Изначально значки будут установить на 163ppi но вам нужно включить иконки с 326ppi для iPhone 4. Иконы традиционно отмечены @ 2x в конце имени их файла, такого как “[email protected]“.

Теперь давайте оптимизируем наши новые настройки документа. Сначала нам нужно отредактировать некоторые настройки, поэтому зайдите в Photoshop> Правка> Настройки> Направляющие, Сетка и Ломтики. Хорошо быть устанавливая нашу сетку каждые 20px с подразделениями в 2. При разработке дисплея сетчатки Линия 2px будет отображать 1 балл на экране. Это важное правило, которое вы должны иметь в виду для сокращения вашего приложения..

Мне легче создавать свои проекты с более высоким разрешением, чем уменьшать их, но вы можете попробуйте оба метода и посмотрите, что подходит вам лучше всего. Мы используем 640 x 960 пикселей при 326ppi - сохраните это как пользовательский пресет, если вы думаете, что будете использовать его часто.

Здание с элементами шаблона

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

Это огромный файл, содержащий слишком много элементов. Чтобы упростить процесс, вы можете нажать v, чтобы активировать Переместить инструмент и нажмите на “Автоматический выбор” на панели параметров, затем выберите “Слой” скорее, чем “группа”. С настройками вы можете нажать на любой элемент и Photoshop перенесет вас на соответствующий слой!

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

Разработка приложений в Xcode

Инструмент разработчика для программирования под iOS и Mac OS X называется Xcode. Если вы используете OS X Lion, вы можете найти Xcode и все соответствующие пакеты бесплатно в Mac App Store.

После того, как установка завершена, запустите Xcode, и должен появиться экран приветствия. Отсюда вы можете загрузить старый проект или сделать новый. На данный момент вам нужно нажать “Создать новый проект Xcode“, тогда в окне шаблона появятся несколько вариантов. Под iOS> Приложение, нажмите на “Одно представление приложения” и ударил “следующий”. Вы можете дать новому приложению имя, такие как Тестовое задание (желательно без пробелов), затем на Идентификатор компании, введите любое слово, такое как моя компания, и, наконец, выберите каталог и нажмите “Сохранить”.

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

С Xcode у вас есть два варианта для разработки элементов интерфейса. Классический XIB / СИБ Формат является стандартным для приложений Mac OS X и iOS, что требует от вас каждый раз создавать новый вид страницы. Однако, поскольку вы создаете больше представлений в одном приложении, количество nib-файлов может стать слишком огромным, поэтому новый раскадровка Файл содержит все ваши перья в одной панели редактора. Отсюда вы можете легко удалять и добавлять элементы и функции пользовательского интерфейса..

Дополнительно вы встретите .час а также .м файлы в той же группе папок. Это короткие имена файлов для заголовок а также реализация код. В этих файлах вы пишете все функции и переменные Objective-C, необходимые для запуска вашего приложения. Это может быть хорошая идея, чтобы объяснить, как Xcode работает с MVC (модель, вид, контроллер), поэтому нам нужно 2 файла для каждого контроллера.

Иерархия программирования MVC

Чтобы понять, как работает приложение, вам нужно понять его архитектуру программирования. С Модель, Представление, Контроллер (MVC) как основа, XCode может отделить все ваши дисплеи и интерфейсный код от ваших логических функций и функций обработки, и на самом деле другого выбора нет. Поначалу MVC может показаться запутанным, но если вы попытаетесь понять это и начать создавать несколько базовых приложений, вы полюбите структуру.

Чтобы было легче понять, я представил каждый объект в списке ниже:

• модель - Содержит всю вашу логику и основные данные. Сюда входят переменные, подключения к внешним RSS-каналам или изображениям, подробные функции и сокращение числа. Этот слой полностью отделен от ваших представлений, чтобы вы могли легко менять представления и при этом работать с теми же данными..
• Посмотреть - Экран или стиль отображения в вашем приложении. Список таблиц, страница профиля, страница сводки статьи, аудиоплеер, видеоплеер - все это примеры представлений. Вы можете изменить их стили и удалить элементы, но вы все равно будете работать с теми же данными в вашей модели.
• контроллер - Выступает в качестве посредника между двумя другими. Вы подключаете объекты в вашем представлении к ViewController, который передает информацию в вашу модель и из нее. Таким образом, пользователь может нажать на кнопку и зарегистрировать ее в своей модели. Затем запустите функцию выхода из системы и через тот же контроллер передайте сообщение “успешно вышел из системы!”.

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

Обладая этими знаниями, не составит труда начать создавать первые несколько приложений. Как уже упоминалось ранее, Objective-C это основной язык программирования, который вы будете использовать для разработки приложения. Он построен на языке Си с обновленным синтаксисом и несколькими дополнительными парадигмами. Вам нужно много времени, чтобы ознакомиться с языком, но для урока для начинающих я рекомендую серию уроков от Mobiletuts+.

Представление «Дизайн» с раскадровками

Теперь, когда мы рассмотрели технические аспекты приложения, мы должны потратить немного времени на разработку интерфейса. Я предполагаю, что вы сохранили “Раскадровка” вариант проверено при создании проекта, что означает, что вы можете найти один MainStoryboard_iPhone.storyboard Файл где-то в группе папок, расположенной в левой части окна. Нажмите на файл, чтобы выбрать его и открыть вид.

Новая боковая панель должна появиться прямо справа от группы папок. Это называется Структура документа и это своего рода метод быстрого предварительного просмотра для проверки всех доступных представлений в этой раскадровке.

Мы хотим начать с добавления всего лишь нескольких элементов страницы в наш контроллер представления. Нам нужны два разных элемента: Панель навигации и Панель вкладок. Прежде чем мы схватим их, доступ к Атрибуты инспектора (View> Utilities> Show Attributes Inspector) в правой части окна, затем найдите Статус бар этикетка. По умолчанию установлено Прогнозные который использует стандартный цвет состояния iPhone, но вы также можете выбрать черный или же Полупрозрачный черный если ваш дизайн приложения лучше соответствует цвету.

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

Если коммунальные услуги панель с правой стороны окна не видна, вы можете включить ее, выбрав View> Utilities> Show Utilities. На панели «Утилиты» посмотрите внизу панель под названием Библиотека объектов. Он получил выпадающее меню с “Объекты” в качестве первого пункта списка. Если вы не смогли его найти, выберите «Вид»> «Утилиты»> «Показать библиотеку объектов»..

В раскрывающемся меню библиотеки объектов найдите и выберите Окна и бары. Теперь нажмите на Панель навигации, перетащите его в окно просмотра и поместите его прямо под черным Статус бар (со значком батареи). Теперь мы можем настроить описание заголовка бара. Двойной щелчок по тексту, который в данный момент читается “заглавие“, и вы увидите ярлык с именем “заглавие” на панели утилит, в которой вы можете изменить описание заголовка на “Тестовое задание” оттуда. Удар “Войти” засвидетельствовать изменение.

Снова на панели Windows & Bars, прокрутите вниз, чтобы найти Панель вкладок, затем перетащите его в окно просмотра и поместите в самый конец вашего приложения. По умолчанию эти 2 элемента выглядят фантастически.

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

Давайте также добавим еще одну кнопку вкладки в нижней панели приложения. Переместите курсор мыши на панель Windows & Bars снова и прокрутите вниз до Элемент панели вкладок, прямо под вкладкой. Перетащите это в окно своего приложения и поместите в середину двух существующих кнопок панели вкладок. Если дважды щелкнуть эту новую кнопку, на панели «Утилиты» появятся некоторые дополнительные параметры, вы измените образ а также заглавие оттуда. Например, я изменил название на “закладка” для вновь добавленного элемента панели вкладок.

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

Оставайтесь с нами для части II

На этом мы завершаем нашу первую часть руководства по дизайну и разработке приложений для iPhone. В следующей части мы немного углубимся в Objective-C и Cocoa Touch, и в конечном итоге вы научитесь создавать работающее приложение для iPhone, следите за обновлениями!

iOS Design Gallery

Для дизайнеров я также надеюсь принести вам некоторое вдохновение, поэтому я включил список потрясающих представлений приложений для iPhone ниже. В списке представлено большое количество вдохновляющих элементов приложения, которые вы, вероятно, никогда раньше не замечали. Не стесняйтесь делиться своими идеями, взглядами приложений или вопросами в разделе комментариев ниже, спасибо!

Раса Сплиттер

Satisfaction Remote

Tweetbot для iPhone

Ридер

квадрат

MailChimp

Instagram

Joystiq

Piictu

темнота