關于這本書
這幾年Apple 產品的迭代速度變快,連帶著對應用制作需要學習的知識更新也加快了。連有經驗的制作者都感嘆今天學習的知識很快就用不上了,對于新人來說,恐怕更不知道如何下手接觸應用制作。但是即使知識更迭得再快,只要沉淀下基本的構建思想和制作過程,便能以不變應萬變,一步步深入地學習應用制作技能。
我喜歡把做軟件應用比作設計制造一輛汽車,有各種專業書籍對怎么設計車的外型、用什么材料、發動機應該怎么組裝、以及車內該如何布置等詳細講解,但是對于一個新人來說,這些書籍擺在他面前,他也無法知道從何開始,即使把發動機部分學得滾瓜爛熟,去實際生產一輛車恐怕也是障礙重重。本書將需要用到什么工具、如何設計、如何開發、如何發布到市場等知識貫穿起來,手把手地帶領新人從零開始,我想從這個角度切入iOS 應用制作,來得更實際一些。
2016 年年底我設計、開發并上架了一款名為Oslo 的iOS 應用,可以在https://itunes.apple.com/us/app/oslo-mobile-unsplash/id1184226442?mt=8,
或者在AppStore 中搜索Oslo Mobile Unsplash 下載。這款應用的UI 設計是Sketch,應用圖標設計是Affinity
Designer,開發環境是Xcode 8.2.1,開發語言是Swift 3.0.2。我相信邊學習、邊實踐是最快、最有效的途徑,因此這本書會以這款應用為案例,帶你一步一步制作一款最終上架到App Store 的應用。學習過程中不但涉及設計或者開發方面的概念講解,同時還結合了實際的制作,讓你對iOS 的應用制作有更深刻的了解。
當你跟隨這本書全部做下來后,你將會充滿信心地做出屬于自己的iOS 應用,當初那種對設計缺乏自信,對編程敬而遠之的心情將不復存在。所以,上路吧!
誰需要讀這本書
如果你是一名沒有接觸過iOS 應用制作的新人,你是否有過這樣的問題:
? 我該從哪里入手學習iOS應用制作,哪些資源是針對初學者的,又如何入門?
? 要使用哪些工具,如何快速上手?
……
如果你是一名設計師,你是否有過這樣的問題:
? 我應該用什么規格的畫布來做UI,應該導出什么樣尺寸的圖標應用到開發中?
? 怎樣才能快速填充好各種頭像?
? 怎樣做快速原型(Fast Prototype)?
? 看到代碼就害怕,即使學習了也無法應用到實際中,該怎么辦?
……
如果你是一名工程師,你是否有過這樣的問題:
? 怎樣通過Storyboard 快速、簡單地實現多屏幕適配?
? 對色彩和繪圖完全不在行,這樣如何做設計?
? 我想了解一些最新的語法和開發環境的特性。
……
所以無論是入門者或專業人士,都可以從本書吸取到適合自己的新的知識,或者對平常模棱兩可的問題得到答案。當然如果你只是初次接觸iOS 應用制作,那么這本書會由淺入深,一步一步帶你拓展和提升,最終獲得不輸給專業人士的能力。同時,本書適合有熱情制作iOS 應用的所有人。
使用到的工具
本書使用到的硬件有MacBook、iMac、Mac mini 三種,使用系統為macOS。
Xcode 是Apple 系列產品開發的主要工具,同時包含了Swift。在Mac App
Store 中搜索Xcode 下載,或者在https://developer.apple.com/download/ 下載測試版。書中使用的版本是Xcode 8.3.3。注意,Xcode 8.0 才包含Swift 3,這也是書中主要使用的程序語言。
Sketch 幫助快速實現應用原型,也能滿足界面要求較高的制作。在http://sketchapp.com/ 下載。書中使用的版本是Sketch
44.1。
Swift 為書中使用的編程語言。同時也是Apple 系列產品開發的主要編程語言。Swift 還在不斷演化過程中,可以在https://swift.org/
了解學習。正式版Xcode 包含了最新的穩定版Swift,如果想體驗測試版的Swift,可以下載測試版Xcode。書中所使用的版本是3.1。
本書主要使用到的工具就是以上這些,在學習過程中需要使用到其他軟件時會單獨說明。
設計資源和源代碼
在章節講解的過程中,會指出資源的下載地址。這些資源能夠自由用于個人或商業用途,用于公開演說或者教育用途時,希望能夠注明來源。
源代碼可以在https://github.com/hipposan/Oslo 獲取,但不能用于出售或其他交易。
隨著Sketch、Xcode 和Swift 的不斷更新換代,對于可能出現的制作方式及語法的更新,我也會盡自己所能更新本書,同時更新下載地址中的資源。
勘誤和反饋
對于書中出現的任何錯誤,或者在使用過程中有不明白的地方,可以發送郵件到zzy0600@gmail.com,我會認真查看每一封信件,希望能和大家多多交流。
設計 1
Sketch 介紹 2
- 模板Template - 6
- Artboard - 8
- 導航欄Navigation Bar - 10
- Craft - 12
- 字體font - 14
- 對齊alignment - 16
- 用Profile 和Me 界面來練習- 18
- 同一界面的多種不同狀態- 22
- 導出export - 31
- 在真機上看到自己的設計Mirror - 33
有用的Sketch 知識和技巧 34
- 圖形的組合加減- 34
- 文字操作- 35
- Alpha Mask - 36
- 插件plugin - 37
用inVision 來制作原型和管理設計(Bonus) 38
原型 42
Xcode 介紹 43
第一次Build 44
Storyboard 49
- 組件Component - 49
- Table View Controller - 51
- Navigation Bar - 53
- Table View Cell - 55
- Preview - 57
- Visual Effect View 和Web View - 60
- Collection View - 62
- Container View - 65
- Stack View - 66
Auto Layout 69
- 對齊& 間距Alignment& Spacing - 69
- Table View 的Auto Layout - 72
- 多個元素的居中- 74
- 用Photo 界面練習- 77
- 連接 Storyboard - 79
編程 83
Swift 介紹 84
用代碼控制界面 85
- 關聯Storyboard 和代碼文件- 85
- 連接組件到代碼中- 87
- Protocol - 89
- 自適應高度- 91
- Collection View - 93
- 定義組件事件- 95
- 觸發Segue - 97
- Delegate - 98
- xib- 101
- App Security - 104
- UIActivity - 107
- @IBInspectable - 107
網絡 110
- Client & Server - 110
- 通信- 111
- HTTP Request Methods - 112
- API - 112
- JSON - 115
- 儲存API 信息- 116
- 建立網絡層- 117
- MVC - 121
- Grand Central Dispatch & OperationQueue - 126
- 緩存- 127
- 下拉刷新& 劃動加載- 129
- 用Segue 傳輸數據- 132
- 更新xib 信息- 137
- OAuth 2 與登錄- 141
- UserDefaults - 146
- POST - 147
- 用delegate 來傳輸數據- 149
其他 157
- 動畫- 157
- 本地化語言- 161
- 提交TestFlight 測試- 165
- 提交到App Store 審核- 170