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

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