iOS智能手機(jī)APP界面設(shè)計(jì)實(shí)戰(zhàn)教程

第1章 iOS APP界面設(shè)計(jì)基礎(chǔ)
1.1 iOS入門
1.1.1 iOS簡(jiǎn)介
1.1.2 開(kāi)發(fā)工具簡(jiǎn)介
1.2 iOS的界面設(shè)計(jì)原則
1.2.1 界面美觀
1.2.2 一致性
1.2.3 直接控制
1.2.4 反饋
1.2.5 比喻
1.2.6 用戶控制
1.3 iOS APP設(shè)計(jì)概述
1.3.1 關(guān)注主任務(wù)
1.3.2 提升用戶關(guān)注內(nèi)容的權(quán)重
1.3.3 使用方法明顯、易用
1.3.4 使用以用戶為中心的術(shù)語(yǔ)
1.3.5 減少對(duì)用戶輸入的需求
1.3.6 弱化設(shè)置
1.3.7 在App Store中提供精煉的描述
1.3.8 界面元素要一致
1.3.9 使用精美的圖片
1.3.10 啟動(dòng)與退出
1.4 尺寸標(biāo)準(zhǔn)
1.4.1 英寸
1.4.2 分辨率
1.4.3 屏幕密度
1.4.4 iOS的圖標(biāo)尺寸和格式
第2章 iOS APP界面元素的制作
2.1 iOS 6與iOS 7的界面元素
2.2 欄
2.2.1 狀態(tài)欄
實(shí)戰(zhàn)1 制作iOS 6的狀態(tài)欄
實(shí)戰(zhàn)2 制作iOS 7的狀態(tài)欄
2.2.2 導(dǎo)航欄
實(shí)戰(zhàn)3 制作iOS 6的導(dǎo)航欄
實(shí)戰(zhàn)4 制作iOS 7的導(dǎo)航欄
2.2.3 工具欄
實(shí)戰(zhàn)5 制作iOS 6的工具欄
實(shí)戰(zhàn)6 制作iOS 7的工具欄
2.2.4 Tab欄
實(shí)戰(zhàn)7 制作iOS 6的Tab欄
實(shí)戰(zhàn)8 制作iOS 7的Tab欄
2.3 內(nèi)容視圖
2.3.1 浮出層（只限iPad）
實(shí)戰(zhàn)9 制作iPad的浮出層
2.3.2 分欄視圖（只限iPad）
實(shí)戰(zhàn)10 制作iPad的分欄視圖
2.3.3 表格視圖
實(shí)戰(zhàn)11 制作iOS 6的表格視圖
實(shí)戰(zhàn)12 制作iOS 7的表格視圖
2.3.4 文本視圖
實(shí)戰(zhàn)13 制作iOS 6的文本視圖
實(shí)戰(zhàn)14 制作iOS 7的文本視圖
2.3.5 Web視圖
實(shí)戰(zhàn)15 制作iOS 6的Web視圖
實(shí)戰(zhàn)16 制作iOS 7的Web視圖
2.4 警告框
實(shí)戰(zhàn)17 制作iOS 6的警告框
實(shí)戰(zhàn)18 制作iOS 7的警告框
2.5 操作列表
實(shí)戰(zhàn)19 制作iOS 6的操作列表
實(shí)戰(zhàn)20 制作iOS 7的操作列表
2.6 模態(tài)視圖
實(shí)戰(zhàn)21 制作iOS 6的模態(tài)視圖
實(shí)戰(zhàn)22 制作iOS 7的模態(tài)視圖
2.7 控件
實(shí)戰(zhàn)23 制作iOS 6的滾動(dòng)條
實(shí)戰(zhàn)24 制作iOS 7的滾動(dòng)條
2.8 登錄圖片
實(shí)戰(zhàn)25 制作iOS 6的登錄圖片
第3章 iOS APP基本元素的制作
3.1 iOS APP基本圖形的制作
3.1.1 直線
實(shí)戰(zhàn)1 制作iOS 7的指南針圖標(biāo)
3.1.2 圓形
實(shí)戰(zhàn)2 制作iOS 7的鎖屏界面
3.1.3 矩形
實(shí)戰(zhàn)3 制作iOS 6的移動(dòng)和縮放界面
實(shí)戰(zhàn)4 制作iOS 7的計(jì)算器界面
3.1.4 圓角矩形
實(shí)戰(zhàn)5 制作iOS 6的按鈕
3.1.5 其他形狀
實(shí)戰(zhàn)6 制作iOS 7的小圖標(biāo)
3.2 iOS APP控件制作
3.2.1 活動(dòng)指示器
3.2.2 日期和時(shí)間拾取器
實(shí)戰(zhàn)7 制作iOS 7的日期拾取器
實(shí)戰(zhàn)8 制作iOS 6的日期拾取器——背景
實(shí)戰(zhàn)9 制作iOS 6的日期拾取器——其他
3.2.3 詳情展開(kāi)按鈕
實(shí)戰(zhàn)10 制作iOS 7的詳情展開(kāi)按鈕開(kāi)關(guān)
實(shí)戰(zhàn)11 制作iOS 6的詳情展開(kāi)按鈕開(kāi)關(guān)
3.2.4 信息按鈕
3.2.5 標(biāo)簽
3.2.6 網(wǎng)絡(luò)活動(dòng)指示器
3.2.7 頁(yè)碼指示器
3.2.8 拾取器
3.2.9 進(jìn)度指示器
3.2.10 圓角矩形按鈕
實(shí)戰(zhàn)12 制作iOS 6的圓角矩形按鈕
3.2.11 范圍欄
3.2.12 搜索欄
實(shí)戰(zhàn)13 制作iOS 7的搜索欄
實(shí)戰(zhàn)14 制作iOS 6的搜索欄
3.2.13 分段控件
實(shí)戰(zhàn)15 制作iOS 7的分段控件
實(shí)戰(zhàn)16 制作iOS 6的分段控件
3.2.14 滾動(dòng)條
實(shí)戰(zhàn)17 制作iOS 7的音量滾動(dòng)條
3.2.15 切換器
實(shí)戰(zhàn)18 制作iOS 7的鬧鐘界面
3.2.16 文本框
3.3 制作圖標(biāo)
3.3.1 程序圖標(biāo)
實(shí)戰(zhàn)19 制作iOS 6的時(shí)鐘圖標(biāo)
3.3.2 小圖標(biāo)
3.3.3 文檔圖標(biāo)
3.3.4 Web快捷方式圖標(biāo)
3.3.5 導(dǎo)航欄、工具欄和Tab欄上用的圖標(biāo)
3.4 特效處理
3.4.1 陰影和倒影
實(shí)戰(zhàn)20 制作iOS 6的應(yīng)用商店圖標(biāo)
3.4.2 發(fā)光與描邊
實(shí)戰(zhàn)21 制作iOS 6的iCloud登錄界面
3.4.3 模糊
實(shí)戰(zhàn)22 制作iOS 7的模糊界面
3.4.4 折角效果
實(shí)戰(zhàn)23 制作iOS 6的文檔圖標(biāo)
第4章 完整APP界面的制作
4.1 iOS 7與iOS 6的界面風(fēng)格對(duì)比
4.1.1 操作界面簡(jiǎn)潔清晰、依從用戶
4.1.2 全面棄用擬物化
4.1.3 使用動(dòng)態(tài)字體，提升易讀性
4.1.4 去掉按鈕的邊框
4.1.5 導(dǎo)航元素半透明化
4.1.6 大量的留白
4.1.7 通過(guò)深度傳遞層次
4.1.8 盡量不使用啟動(dòng)畫(huà)面
4.2 iOS APP設(shè)計(jì)尺寸規(guī)范（iPhone）
實(shí)戰(zhàn)1 制作iOS 6的滑動(dòng)解鎖界面——背景與狀態(tài)欄
實(shí)戰(zhàn)2 制作iOS 6的滑動(dòng)解鎖界面——其他
實(shí)戰(zhàn)3 制作iOS 6的主界面——圖標(biāo)
實(shí)戰(zhàn)4 制作iOS 6的主界面
實(shí)戰(zhàn)5 制作iOS 6的計(jì)算器界面——狀態(tài)欄和屏幕
實(shí)戰(zhàn)6 制作iOS 6的計(jì)算器界面——按鍵
實(shí)戰(zhàn)7 制作iOS 7的主界面——圖標(biāo)
實(shí)戰(zhàn)8 制作iOS 7的主界面——圖標(biāo)
實(shí)戰(zhàn)9 制作iOS 7的主界面
實(shí)戰(zhàn)10 制作iOS 7的快捷開(kāi)關(guān)界面——背景處理
實(shí)戰(zhàn)11 制作iOS 7的快捷開(kāi)關(guān)界面——其他
實(shí)戰(zhàn)12 制作iOS 7的短信發(fā)送界面——信息界面
實(shí)戰(zhàn)13 制作iOS 7的短信發(fā)送界面
第5章 商業(yè)綜合案例的制作
5.1 iOS的文字排版
5.2 iOS的配色
實(shí)戰(zhàn)1 制作精美的小游戲界面
實(shí)戰(zhàn)2 制作音樂(lè)播放界面
實(shí)戰(zhàn)3 制作文本編輯界面