第1章 初識移動UI設計

1.1認識移動UI設計2

1.1.1UI設計的相關概念2

1.1.2移動UI設計的概念3

1.1.3移動UI設計的特點3

1.1.4移動UI設計的原則5

1.1.5移動UI設計的常用軟件7

1.1.6移動UI設計的學習方法14

1.2認識App15

1.2.1App的基本概念15

1.2.2App的操作平臺16

1.2.3App的設計流程17

1.2.4App的基本分類20

第2章移動UI設計規範

2.1iOS繫統設計規範26

2.1.1iOS設計尺寸26

2.1.2iOS界面結構28

2.1.3iOS基本布局29

2.1.4iOS圖標規範31

2.1.5iOS字體規範33

2.2Android繫統設計規範34

2.2.1Android設計尺寸34

2.2.2Android界面結構35

2.2.3Android基本布局35

2.2.4Android字體規範37

2.2.5Android圖標規範39

第3章iOS繫統界面設計

3.1欄44

3.1.1課堂案例——制作旅遊類App首頁44

3.1.2狀態欄54

3.1.3導航欄55

3.1.4搜索欄56

3.1.5範圍欄56

3.1.6標簽欄56

3.1.7工具欄57

3.2視圖 .58

3.2.1課堂案例——制作旅遊類App相冊頁58

3.2.2操作列表61

3.2.3活動視圖61

3.2.4警告窗62

3.2.5集合視圖62

3.2.6圖像視圖62

3.2.7地圖視圖63

3.2.8頁面瀏覽控制器63

3.2.9課堂案例——制作旅遊類App登機牌頁64

3.2.10彈出框70

3.2.11滾動視圖70

3.2.12分屏視圖70

3.2.13表單視圖71

3.2.14文字視圖71

3.2.15網絡視圖71

3.3控件72

3.3.1課堂案例——制作旅遊類App酒店列表頁72

3.3.2按鈕85

3.3.3編輯菜單86

3.3.4標簽86

3.3.5頁面控件86

3.3.6選擇器86

3.3.7進度指示器87

3.3.8刷新88

3.3.9分段控件88

3.3.10課堂案例——制作旅遊類App美食篩選頁89

3.3.11滑塊95

3.3.12步進器96

3.3.13開關96

3.3.14文本框96

3.4課堂練習——制作旅遊類App酒店詳情頁97

3.5課後習題——制作旅遊類App預約美食頁97

第4章Android繫統界面設計

4.1欄 .99

4.1.1課堂案例——制作醫療類App閃屏頁99

4.1.2狀態欄102

4.1.3繫統導航欄102

4.2組件 ..102

4.2.1課堂案例——制作醫療類App首頁103

4.2.2底部應用欄112

4.2.3頂部應用欄115

4.2.4背板116

4.2.5橫幅118

4.2.6底部導航120

4.2.7課堂案例—制作醫療類App醫生列表頁122

4.2.8按鈕129

4.2.9懸浮動作按鈕132

4.2.10卡片133

4.2.11紙片135

4.2.12數據表137

4.2.13課堂案例——制作醫療類App醫生介紹頁139

4.2.14對話框144

4.2.15分隔線146

4.2.16圖片組147

4.2.17列表149

4.2.18菜單152

4.2.19抽屜式導航154

4.2.20狀態指引156

4.2.21課堂案例——制作醫療類App醫生篩選頁158

4.2.22選擇控件167

4.2.23底部面板168

4.2.24側面板169

4.2.25滑塊170

4.2.26底部提示欄171

4.2.27課堂案例——制作醫療類App預約頁172

4.2.28選項卡178

4.2.29文本框180

4.2.30提示181

4.3課堂練習——制作醫療類App輸入信息頁182

4.4課後習題——制作醫療類App幫助支持頁182

第5章App界面設計實戰

5.1閃屏頁184

5.1.1品牌推廣型閃屏頁184

5.1.2活動廣告型184

5.1.3節日關懷型185

5.2引導頁186

5.2.1功能說明型186

5.2.2產品推廣型186

5.2.3搞笑賣萌型187

5.3首頁187

5.3.1列表型187

5.3.2網格型188

5.3.3卡片型188

5.3.4綜合型189

5.4個人中心頁189

5.5詳情頁190

5.6注冊登錄頁190

5.7課堂案例——制作美食到家App191

5.8課堂練習——制作DelicacyApp222

5.9課後習題——制作美食來了App223