術(shù)與道 移動應(yīng)用UI設(shè)計必修課（第2版）

術(shù)之篇
01基礎(chǔ)知識
1．1　什么是UI設(shè)計 20
1．1．1　UI的相關(guān)概念 20
1．1．2　UI的學(xué)習(xí)方法 22
1．2　什么是App 25
1．2．1　App的概念 25
1．2．2　App的開發(fā)流程 25
1．3　智能手機的屏幕 26
1．3．1　英寸（Inch） 27
1．3．2　像素（Pixel） 27
1．3．3　分辨率（Resolution） 28
1．4　網(wǎng)點密度與像素密度 28
1．4．1　網(wǎng)點密度（DPI） 28
1．4．2　像素密度（PPI） 29
1．4．3　DPI與PPI 29
1．4．4　邏輯分辨率與像素倍率 30
1．4．5　視網(wǎng)膜屏幕 30
1．5　常見手機屏幕規(guī)格 31
1．5．1　熱門手機規(guī)格 31
1．5．2　熱門手機分辨率 33
1．6　iPhone 6 Plus的屏幕 34
1．7　智能手機的傳感器 37
1．7．1　攝像頭 37
1．7．2　麥克風(fēng) 38
1．7．3　GPS 38
1．7．4　電子羅盤 39
1．7．5　重力感應(yīng)器 39
1．7．6　加速度傳感器 40
1．7．7　光線傳感器 41
1．7．8　距離傳感器 41
1．7．9　氣壓傳感器 42
1．7．10　三軸陀螺儀 43
02設(shè)計風(fēng)格
2．1　風(fēng)格 46
2．1．1　什么是設(shè)計風(fēng)格 46
2．1．2　如何確立設(shè)計風(fēng)格 47
2．2　顏色 50
2．　2． 1 認識色彩 50
2．　2． 2 RGB與HSB 50
2．　2． 3 顏色搭配基礎(chǔ) 52
2．3　如何選擇顏色 53
2．　3． 1 常見App的顏色 53
2．　3． 2 顏色的性格 55
2．4　字體 61
2．　4． 1 襯線體和無襯線體 61
2．　4． 2 系統(tǒng)內(nèi)置字體 62
2．　4． 3 什么時候選擇內(nèi)嵌字體 62
2．　4． 4 如何使用內(nèi)嵌字體 63
03圖標與圖片
3．1　App圖標特點 66
3．　1． 1 獨特的圖形 66
3．　1． 2 表意準確 67
3．　1． 3 謹慎用色 67
3．　1． 4 避免使用大量文字 68
3．　1． 5 避免使用照片 68
3．　1． 6 適應(yīng)不同場景 69
3．2　App圖標設(shè)計流程 69
3．　2． 1 第一步：尋找隱喻 69
3．　2． 2 第二步：抽象圖形 70
3．　2． 3 第三步：競品分析 71
3．　2． 4 第四步：確定風(fēng)格 71
3．　2． 5 第五步：調(diào)整細節(jié) 72
3．　2． 6 第六步：場景測試 73
3．3　App圖標設(shè)計方法 74
3．　3． 1 正負形組合 74
3．　3． 2 折疊圖形 75
3．　3． 3 局部提取 75
3．　3． 4 線性圖標 75
3．　3． 5 透明漸變 76
3．　3． 6 色塊拼接 76
3．　3． 7 圖形復(fù)用 76
3．　3． 8 背景組合 77
3．4　iOS圖標規(guī)范 77
3．　4． 1 iOS圖標適配 77
3．　4． 2 iOS圖標標準 78
3．5　Android圖標規(guī)范 79
3．　5． 1 Android圖標適配 79
3．　5． 2 圖標的視覺統(tǒng)一 80
3．　5． 3 Android圖標標準 81
3．6　設(shè)計線性圖標 83
3．　6． 1 線性圖標的風(fēng)格 83
3．　6． 2 線性圖標的繪制方法 84
3．7　像素對齊 87
3．　7． 1 像素為什么要對齊 87
3．　7． 2 像素如何對齊 88
3．　7． 3 像素縮放的對齊 89
3．　7． 4 像素對齊的微調(diào) 89
3．8　圖片的使用 89
3．　8． 1 矢量圖與位圖 89
3．　8． 2 圖片的格式 90
3．　8． 3 圖片的使用 91
3．　8． 4 圖片的存儲 92
3．　8． 5 圖片的比例 92
04系統(tǒng)界面
4．1　欄 94
4．　1． 1 狀態(tài)欄 94
4．　1． 2 導(dǎo)航欄 94
4．　1． 3 標簽欄 95
4．　1． 4 工具欄 96
4．2　內(nèi)容視圖 97
4．　2． 1 表格視圖 97
4．　2． 2 文本視圖 99
4．　2． 3 Web視圖 99
4．3　臨時視圖 100
4．　3． 1 對話框 100
4．　3． 2 操作列表 100
05Android系統(tǒng)界面
5．1　導(dǎo)航機制 102
5．　1． 1 硬件特性 102
5．　1． 2 iOS導(dǎo)航機制 102
5．　1． 3 Android導(dǎo)航機制 103
5．2　界面布局 105
5．　2． 1 結(jié)構(gòu)差異 105
5．　2． 2 操作欄 106
5．　2． 3 多任務(wù) 107
5．3　消息推送 108
5．　3． 1 推送方式 108
5．　3． 2 通知方式 109
5．4　操作方式 110
5．　4． 1 編輯 110
5．　4． 2 選擇 111
5．　4． 3 復(fù)制粘貼 112
5．　4． 4 刪除 113
5．5　Android系統(tǒng)的插件 114
5．　5． 1 桌面插件 114
5．　5． 2 設(shè)計趨勢 114
道之篇
06建立規(guī)范
6．1　組建規(guī)范 116
6．　1． 1 設(shè)計規(guī)范的目的 116
6．　1． 2 規(guī)范的組成 116
6．2　顏色規(guī)范 119
6．　2． 1 為什么選擇HSB 119
6．　2． 2 創(chuàng)建調(diào)色板 120
6．　2． 3 調(diào)色板應(yīng)用 121
6．3　文字規(guī)范 123
6．　3． 1 iOS系統(tǒng) 123
6．　3． 2 Android系統(tǒng) 123
6．　3． 3 系統(tǒng)字號 123
6．4　布局 125
6．　4． 1 框架 125
6．　4． 2 頂部導(dǎo)航欄 126
6．　4． 3 頂部標簽欄 126
6．　4． 4 底部標簽欄 127
6．5　圖片規(guī)范 127
6．　5． 1 用戶頭像 127
6．　5． 2 商品圖片 129
6．　5． 3 無數(shù)據(jù)圖片 129
07設(shè)計組件
7．1　控制元素 132
7．　1． 1 活動指示器 132
7．　1． 2 進度指示器 132
7．　1． 3 頁碼控制器 134
7．　1． 4 刷新控件 134
7．　1． 5 滑動器 137
7．　1． 6 開關(guān) 137
7．　1． 7 步進器 137
7．2　篩選器 138
7．　2． 1 選擇器 138
7．　2． 2 日期時間選擇器 138
7．　2． 3 分段控件 139
7．　2． 4 選項卡 139
7．　2． 5 排序 140
7．　2． 6 地區(qū)選擇 140
7．3　表單控件 141
7．　3． 1 單選框 141
7．　3． 2 復(fù)選框 142
7．　3． 3 文本框 142
7．　3． 4 下拉框 143
7．　3． 5 表格 144
7．4　按鈕規(guī)范 144
7．　4． 1 背景+文字 144
7．　4． 2 背景+圖標 145
7．　4． 3 圖標+文字 146
7．　4． 4 文字 146
7．5　其他組件 147
7．　5． 1 加載更多 147
7．　5． 2 非模態(tài)浮層 147
7．　5． 3 模態(tài)浮層 148
08導(dǎo)航設(shè)計
8．1　扁平導(dǎo)航 150
8．　1． 1 標簽導(dǎo)航 150
8．　1． 2 舵式導(dǎo)航 151
8．　1． 3 宮格式導(dǎo)航 152
8．2　內(nèi)容主導(dǎo)式導(dǎo)航 153
8．　2． 1 陳列式導(dǎo)航 153
8．　2． 2 旋轉(zhuǎn)木馬式導(dǎo)航 154
8．3　列表式導(dǎo)航 155
8．　3． 1 列表式 155
8．　3． 2 抽屜式 156
8．4　其他導(dǎo)航 157
8．　4． 1 點聚式導(dǎo)航 157
8．　4． 2 瀑布式導(dǎo)航 158
09界面設(shè)計
9．1　首頁 160
9．　1． 1 搜索欄 160
9．　1． 2 標簽欄 161
9．　1． 3 卡片式設(shè)計 161
9．　1． 4 樓層設(shè)計 162
9．2　列表頁 163
9．　2． 1 消息列表 163
9．　2． 2 橫向卡片 163
9．　2． 3 瀑布流 164
9．3　詳情頁 165
9．　3． 1 全局按鈕 165
9．　3． 2 快速通道 166
9．4　個人中心 167
9．　4． 1 頭像區(qū)域 167
9．　4． 2 個人信息 168
9．　4． 3 功能模塊 169
9．5　啟動頁 170
9．　5． 1 品牌宣傳類 170
9．　5． 2 首頁樣式類 171
9．　5． 3 情感故事類 172
9．　5． 4 節(jié)日氛圍類 173
9．6　引導(dǎo)頁 173
9．　6． 1 功能介紹類 173
9．　6． 2 使用說明類 176
9．　6． 3 情感故事類 177
10設(shè)計適配
10．1　iOS系統(tǒng)適配 180
10．　1． 1 設(shè)計基準 180
10．　1． 2 設(shè)計適配 181
10．　1． 3 適配規(guī)則 182
10．2　Android系統(tǒng)適配 183
10．　2． 1 密度獨立像素 183
10．　2． 2 設(shè)計基準 184
10．　2． 3 適配方法 185
10．3　iOS系統(tǒng)適配Android系統(tǒng) 185
10．　3． 1 設(shè)計目的 185
10．　3． 2 換算關(guān)系 185
10．　3． 3 適配方法 186
10．4　標注設(shè)計 186
10．　4． 1 標注基準 187
10．　4． 2 標注方法 187
10．5　點九圖 189
10．　5． 1 什么是點九圖 189
10．　5． 2 如何制作點九圖 191
10．6　切圖 191
10．　6． 1 界面切圖 191
10．　6． 2 圖標切圖 192
10．　6． 3 命名規(guī)則 192
11手勢應(yīng)用
11．1　為什么使用手勢 194
11．2　常用手勢操作 195
11．　2． 1 單擊 195
11．　2． 2 雙擊 195
11．　2． 3 上下滑動 196
11．　2． 4 左右滑動 196
11．　2． 5 拖曳 197
11．　2． 6 張開 閉合 197
11．　2． 7 長按 198
11．　2． 8 搖晃 198
11．3　手勢設(shè)計禁忌 199
11．　3． 1 使用標準手勢 199
11．　3． 2 定義標準手勢 199
11．　3． 3 使用簡單手勢 199
11．　3． 4 手勢使用說明 199
12設(shè)計資源
12．1　網(wǎng)站資源 201
12．2　圖標資源 202
12．3　圖片資源 203
附錄 204
參考文獻 211