Ръководство за начинаещи за разработката на 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.

Цел-C е основният език за програмиране, захранващ всичките им рамки. Заедно с Objective-C, вие също ще разработи iPhone ап с Какао докосване, рамката за програмиране, управляваща взаимодействието с потребителя на iOS.

Всичко това е само малко информация, за да можете да започнете разработването на приложения за iPhone. Развитието е доста сложен процес, но се отпуснете, вземете го бавно. Така че причините са тук и решението е ваше. Независимо дали отговорът е да или не, винаги можете да прескачате в следващата тема: проектиране на приложения за iPhone.

Планиране на структурата на вашето приложение за iPhone

В стандартната идеология за създаване на iPhone приложение, което искате преминават през няколко фази. Първата фаза включва планиране и скициране.

Първо трябва да имате идея какво ще направи приложението ви. Защо хората искат да го свалят? И какви функции искате да включите? Това е най-важната фаза спести много объркване и проблеми в кодиращата фаза.

Най-лошото, това те връща към чертожната дъска.

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

Можете да мислите за изгледи като различни страници в уебсайт. Всеки изглед ще предлага различна функционалност, като например формуляр за вход, списък с контакти или таблица с данни.

По-долу съм съставил кратка колекция от различните елементи на потребителския интерфейс:

• Лента за състоянието - Показва текущото ниво на батерията на устройството, 3G връзката, решетките на приемане, телефонния оператор и много повече. Препоръчително е винаги да включвате тези елементи.
• Навигационна лента - Дава на потребителите ви възможност да се придвижват между йерархиите на страниците. Това често включва бутон от лявата страна на лентата, за да може потребителят да се върне към предишния изглед на приложението.
• Toolbar - Появява се в долната част на приложението за iPhone. Това ще задържи няколко икони, свързани с някои функции като Дял, Изтегли, Изтрий, и т.н..
• Лента с раздели - Много прилича на лентата с инструменти, освен че сега работите с раздели. Когато потребителят кликне върху икона на раздела, той автоматично ще бъде маркиран и ще покаже лъскаво състояние. Тази лента се използва за превключване между показвания, вместо да предлага директна функционалност.

Този списък съдържа само лентите с инструменти, които можете да намерите в повечето приложения. Има някои други гледни точки и стилове, които можете да разгледате, които можете да ги намерите в Насоките на Apple за използване на iOS UI Element. Силно препоръчвам да се позовавате на тази документация, когато имате съмнения относно елементите на потребителския интерфейс на iPhone.

В интерес на времето няма да описвам всеки елемент на потребителския интерфейс. Има прекалено много елементи, които да обмислите, и няма да можете да ги използвате в едно приложение. Но докато очертавате възгледите си, можете черпят вдъхновение от предложените по-горе указания и други приложения на iPhone радваш се да ги използваш.

Проектиране на Photoshop Mockups

Предполагам, че повечето от вас са доста удобни в работата с Adobe Photoshop. Това е премиерен софтуер за създаване на графики за уеб сайт, банери, лога и мобилни макети. Проектирането на графики за уеб е доста лесен процес, но е по-сложно, когато става въпрос за дизайн на iPhone приложения.

Ако търсите да създадете приложение, което наистина трябва създаване на пиксел-перфектни макети от самото начало.

За да започнем, трябва да обсъдим настройките на Photoshop. Тъй като ние проектираме за iPhone, трябва да разгледаме 2 различни стила на проектиране. Най- обикновеният дисплей на iPhone е 320 x 480 пиксела. Въпреки това iPhone 4 включва a дисплей на ретината, който удвоява количеството пиксели в рамките на един и същ размер на екрана. Така трябва двойна резолюция до 640 x 960 пиксела и проектирайте оформленията си според този стандарт.

Това означава, че ще трябва да го направите създайте 2 комплекта икони за вашите макети. Първоначално иконите ще бъдат настроен на 163ppi но ще трябва да го направите включва икони с 326ppi за iPhone 4. Иконите са традиционно маркирани с @ 2x в края на името на файла, като например “[email protected]“.

Сега нека оптимизираме новите настройки на документа. Първо ще трябва да редактираме някои предпочитания, така че имаме достъп до Photoshop> Edit> Preferences> Водачи, решетка и парчета. Ще бъдем настройка на нашата Gridline на всеки 20px с подразделения на 2. При проектиране за показване на ретината Линията 2px ще покаже 1 точка на екрана. Това е важно правило, което трябва да имате предвид, за да намалите приложението си.

Склонен съм да намеря по-лесно моите проекти с по-висока разделителна способност, а след това да ги намалите, но можете опитайте и двата метода и вижте какво ви подхожда най-добре. Използваме 640 x 960 пиксела при 326ppi - запазете го като персонализирана предварителна настройка, ако смятате, че ще я използвате често.

Сграда с шаблони

Сега можете да използвате Photoshop, за да създадете перфектно оформление на пикселите, но това се оказва много изтощителна и досадна работа.

Това е огромен файл с твърде много елементи. За да улесните нещата, можете да натиснете v да активирате Преместете инструмента и кликнете върху “Auto-Select” в лентата с опции, след което изберете “Слой” отколкото “група”. С настройките можете да кликнете върху всеки елемент и Photoshop ще ви отведе до съответния слой!

Чувствайте се свободни да играете с макета, или дори можете да създадете прототип на приложението си от макета. В зависимост от приложението ви може да включите множество функции в основната област, много от които можете да намерите в този PSD файл. Също така е възможно да преминете към слоевете на тези елементи и да редактирате шрифтовете, градиентните цветове и други стилове на проектиране. Просто Уверете се, че не преоразмерявате нищо тъй като всички барове и елементи на потребителския интерфейс са зададени по подразбиране стандартни размери.

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

Инструментът за програмисти за програмиране на iOS и Mac OS X се нарича Xcode. Ако използвате OS X Lion, можете да намерите Xcode и всички приложими пакети безплатно в Магазин за приложения на Mac.

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

Xcode ще създаде директорията с файлове и ще ви изпрати в нов прозорец за работа. Трябва да видите много опции за файлове, но папка, която е кръстена на вашето приложение е основният фокус.

С Xcode имате две възможности за проектиране на предните крайни елементи. Класическият XIB / писец Форматът е стандартен за Mac OS X и iOS приложения, което изисква всеки път да създадете нов изглед на страницата. Тъй като създавате повече изгледи в едно приложение, размерът на файловете на писец може да стане твърде преобладаващ, така че нов сториборд Файлът съдържа всичките ви изгледи в един панел за редактиране. Оттук можете лесно да премахвате и добавяте елементи и функции на потребителския интерфейс.

Освен това ще се намирате .з и .m файлове в същата група папки. Това са кратки имена на файлове за удар с глава и изпълнение код. Тези файлове са мястото, където пишете всички функции и променливи Objective-C, необходими за приложението ви да се изпълнява. Може би е добра идея да обясните как работи Xcode MVC (модел, изглед, контролер), което е причината, поради която се нуждаем от 2 файла за всеки контролер.

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

За да разберете как работи приложението, ще трябва да разберете неговата програмна архитектура. с Модел, изглед, контролер (MVC) като основа, Xcode може да раздели всичките ви дисплеи и интерфейсния код от логическите и функциите за обработка и няма друг избор. MVC може да изглежда объркващо в началото, но ако се опитате да го разберете и започнете да изграждате няколко основни приложения, ще се влюбите в структурата.

За по-лесно разбиране представихме всеки обект в списъка по-долу:

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

Така че основно Моделът притежава цялата информация и функции което трябва да се покаже някъде на екрана. Но моделите не могат да взаимодействат с екрана, а само изгледите могат. Изгледите са предимно всички визуализации и може да изтегля данни само чрез ViewController. Най- Контролерът всъщност е много по-изтънчен начин да скриете данните си от предния край. По този начин можете да обновите дизайна няколко пъти, без да губите функционалност.

С това знание не би трябвало да е трудно да започнете да изграждате първите си няколко приложения. Както е споменато по-рано, Цел-C е основният език за програмиране, който ще използвате, за да развиете приложението. Той е изграден на C език с актуализиран синтаксис и няколко допълнителни парадигми. Ще се нуждаете от много време, за да се запознаете с езика, но за начинаещия урок препоръчвам серията от ръководства на Mobiletuts+.

Дизайн с разкази

Сега, след като разгледахме техническите аспекти на приложението, трябва да отделяме малко време за проектиране на интерфейса. Предполагам, че сте запазили “сториборд” опция проверява при създаването на проекта, което означава, че можете да намерите един MainStoryboard_iPhone.storyboard файл някъде в групата папки, намираща се от лявата страна на прозореца. Кликнете върху файла, за да го изберете и отворете изгледа.

Нова странична лента трябва да се показва директно отдясно на групата папки. Това се нарича Структура на документа и това е един вид бърз метод за предварителен преглед за проверка на всички налични изгледи в този монтаж.

Искаме да започнем, като добавим само няколко елемента страници в нашия контролер за изгледи. Необходими са два различни елемента: a Навигационна лента и a Лента с раздели. Преди да ги вземем, достъп до Инспектор на атрибутите (Преглед> Помощни програми> Покажи инспектор атрибути) от дясната страна на прозореца, след което потърсете Лента за състоянието етикет. По подразбиране е настроено на Предполагаем който използва стандартния цвят на състоянието на iPhone, но можете също да изберете черно или Полупрозрачен черен цвят ако дизайнът на приложението ви се вписва по-добре в цвета.

Библиотеката на обектите

Ако комунални услуги от дясната страна на прозореца не се вижда, можете да го активирате, като отворите Преглед> Помощни програми> Покажи помощни програми. В панела Utilities (Помощни програми) погледнете долната част на панела, който се нарича Библиотека с обекти. Тя има падащо меню с “обекти” като първи елемент от списъка. Ако не можете да го намерите, можете да изберете Изглед> Помощни програми> Покажи библиотека на обекти.

От падащото меню на библиотеката с обекти намерете и изберете Прозорци и барове. Сега кликнете върху Навигационна лента, плъзнете го в прозореца за изглед и го поставете директно под черното Лента за състоянието (с иконата на батерията). Сега можем да персонализираме описанието на заглавието на лентата. Кликнете два пъти върху текста, който се чете “Заглавие“, и ще видите етикет с име “Заглавие” в панела Utilities (Помощни програми), към който можете да промените описанието на заглавието “Тест” оттам. удар “Въведете” да станем свидетели на промяната.

Отново в панела Windows & Bars, превъртете надолу, за да намерите Лента с раздели, след това го плъзнете в прозореца за преглед и го поставете в най-долната част на приложението си. По подразбиране тези два елемента изглеждат фантастично.

Сега може би искате градиента на навигационната лента да съвпада с лентата за раздели в долната част и за да направите това, можете да кликнете върху лентата за навигация и да погледнете надясно. Атрибути панел в панела Utilities (Помощни програми). Първата опция се нарича стил, който е настроен на По подразбиране. Променете стила от Default на Черно непрозрачно и ще имаме съвпадащ цвят!

Нека добавим още един бутон в долната лента на приложението. Преместете курсора на мишката отново на панела Windows & Bars и превъртете надолу до Позиция на таб, директно под Tab Bar. Плъзнете го в прозореца на приложението и го поставете в средата на 2-те съществуващи бутони на лентата за раздели. Ако кликнете два пъти върху този нов бутон, можете да видите някои допълнителни опции в панела Utilities (Помощни програми), като промените елемента изображение и заглавие оттам. Например промених заглавието на “Bookmark” за наскоро добавения елемент от лентата на лентата.

Така че това е кратък урок за проектиране на изгледи в Xcode. Това не е ужасно труден процес, но ще изисква малко повече време, за да свикне с интерфейса. Играйте с още няколко елемента, ако се чувствате комфортно, а също така можете да се отправите към iOS разработващите ресурси на Apple за повече ресурси за обучение, никога не е лошо да откриете повече!

Останете на линия за част II

Това завършва първата ни част от ръководството за дизайн и разработка на iPhone приложения. В следващата част ще вникнем по-задълбочено в Objective-C и Cocoa Touch, и в крайна сметка ще се научите да изграждате функциониращо приложение за iPhone, останете на линия!

Дизайн галерия на iOS

За дизайнерите там също се надявам да ви донеса малко вдъхновение, затова включих списък със страхотни iPhone приложения, които виждате по-долу. Списъкът съдържа голямо разнообразие от вдъхновяващи елементи на приложението, които вероятно никога преди не сте забелязали. Чувствайте се свободни да споделите вашите идеи, изгледи на приложения или въпроси в раздела за коментари по-долу, благодаря!

Race Splitter

Дистанционно удовлетворение

Tweetbot за iPhone

Reeder

четвъртит

MailChimp

Instagram

Joystiq

Piictu

тъмнина