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

術(shù)之篇
01基礎(chǔ)知識(shí)
1．1　什么是UI設(shè)計(jì) 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的開(kāi)發(fā)流程 25
1．3　智能手機(jī)的屏幕 26
1．3．1　英寸（Inch） 27
1．3．2　像素（Pixel） 27
1．3．3　分辨率（Resolution） 28
1．4　網(wǎng)點(diǎn)密度與像素密度 28
1．4．1　網(wǎng)點(diǎn)密度（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　常見(jiàn)手機(jī)屏幕規(guī)格 31
1．5．1　熱門手機(jī)規(guī)格 31
1．5．2　熱門手機(jī)分辨率 33
1．6　iPhone 6 Plus的屏幕 34
1．7　智能手機(jī)的傳感器 37
1．7．1　攝像頭 37
1．7．2　麥克風(fēng) 38
1．7．3　GPS 38
1．7．4　電子羅盤(pán) 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è)計(jì)風(fēng)格
2．1　風(fēng)格 46
2．1．1　什么是設(shè)計(jì)風(fēng)格 46
2．1．2　如何確立設(shè)計(jì)風(fēng)格 47
2．2　顏色 50
2．　2． 1 認(rèn)識(shí)色彩 50
2．　2． 2 RGB與HSB 50
2．　2． 3 顏色搭配基礎(chǔ) 52
2．3　如何選擇顏色 53
2．　3． 1 常見(jiàn)App的顏色 53
2．　3． 2 顏色的性格 55
2．4　字體 61
2．　4． 1 襯線體和無(wú)襯線體 61
2．　4． 2 系統(tǒng)內(nèi)置字體 62
2．　4． 3 什么時(shí)候選擇內(nèi)嵌字體 62
2．　4． 4 如何使用內(nèi)嵌字體 63
03圖標(biāo)與圖片
3．1　App圖標(biāo)特點(diǎn) 66
3．　1． 1 獨(dú)特的圖形 66
3．　1． 2 表意準(zhǔn)確 67
3．　1． 3 謹(jǐn)慎用色 67
3．　1． 4 避免使用大量文字 68
3．　1． 5 避免使用照片 68
3．　1． 6 適應(yīng)不同場(chǎng)景 69
3．2　App圖標(biāo)設(shè)計(jì)流程 69
3．　2． 1 第一步：尋找隱喻 69
3．　2． 2 第二步：抽象圖形 70
3．　2． 3 第三步：競(jìng)品分析 71
3．　2． 4 第四步：確定風(fēng)格 71
3．　2． 5 第五步：調(diào)整細(xì)節(jié) 72
3．　2． 6 第六步：場(chǎng)景測(cè)試 73
3．3　App圖標(biāo)設(shè)計(jì)方法 74
3．　3． 1 正負(fù)形組合 74
3．　3． 2 折疊圖形 75
3．　3． 3 局部提取 75
3．　3． 4 線性圖標(biāo) 75
3．　3． 5 透明漸變 76
3．　3． 6 色塊拼接 76
3．　3． 7 圖形復(fù)用 76
3．　3． 8 背景組合 77
3．4　iOS圖標(biāo)規(guī)范 77
3．　4． 1 iOS圖標(biāo)適配 77
3．　4． 2 iOS圖標(biāo)標(biāo)準(zhǔn) 78
3．5　Android圖標(biāo)規(guī)范 79
3．　5． 1 Android圖標(biāo)適配 79
3．　5． 2 圖標(biāo)的視覺(jué)統(tǒng)一 80
3．　5． 3 Android圖標(biāo)標(biāo)準(zhǔn) 81
3．6　設(shè)計(jì)線性圖標(biāo) 83
3．　6． 1 線性圖標(biāo)的風(fēng)格 83
3．　6． 2 線性圖標(biāo)的繪制方法 84
3．7　像素對(duì)齊 87
3．　7． 1 像素為什么要對(duì)齊 87
3．　7． 2 像素如何對(duì)齊 88
3．　7． 3 像素縮放的對(duì)齊 89
3．　7． 4 像素對(duì)齊的微調(diào) 89
3．8　圖片的使用 89
3．　8． 1 矢量圖與位圖 89
3．　8． 2 圖片的格式 90
3．　8． 3 圖片的使用 91
3．　8． 4 圖片的存儲(chǔ) 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 標(biāo)簽欄 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　臨時(shí)視圖 100
4．　3． 1 對(duì)話框 100
4．　3． 2 操作列表 100
05Android系統(tǒng)界面
5．1　導(dǎo)航機(jī)制 102
5．　1． 1 硬件特性 102
5．　1． 2 iOS導(dǎo)航機(jī)制 102
5．　1． 3 Android導(dǎo)航機(jī)制 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è)計(jì)趨勢(shì) 114
道之篇
06建立規(guī)范
6．1　組建規(guī)范 116
6．　1． 1 設(shè)計(jì)規(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)字號(hào) 123
6．4　布局 125
6．　4． 1 框架 125
6．　4． 2 頂部導(dǎo)航欄 126
6．　4． 3 頂部標(biāo)簽欄 126
6．　4． 4 底部標(biāo)簽欄 127
6．5　圖片規(guī)范 127
6．　5． 1 用戶頭像 127
6．　5． 2 商品圖片 129
6．　5． 3 無(wú)數(shù)據(jù)圖片 129
07設(shè)計(jì)組件
7．1　控制元素 132
7．　1． 1 活動(dòng)指示器 132
7．　1． 2 進(jìn)度指示器 132
7．　1． 3 頁(yè)碼控制器 134
7．　1． 4 刷新控件 134
7．　1． 5 滑動(dòng)器 137
7．　1． 6 開(kāi)關(guān) 137
7．　1． 7 步進(jìn)器 137
7．2　篩選器 138
7．　2． 1 選擇器 138
7．　2． 2 日期時(shí)間選擇器 138
7．　2． 3 分段控件 139
7．　2． 4 選項(xiàng)卡 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 背景+圖標(biāo) 145
7．　4． 3 圖標(biāo)+文字 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è)計(jì)
8．1　扁平導(dǎo)航 150
8．　1． 1 標(biāo)簽導(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 點(diǎn)聚式導(dǎo)航 157
8．　4． 2 瀑布式導(dǎo)航 158
09界面設(shè)計(jì)
9．1　首頁(yè) 160
9．　1． 1 搜索欄 160
9．　1． 2 標(biāo)簽欄 161
9．　1． 3 卡片式設(shè)計(jì) 161
9．　1． 4 樓層設(shè)計(jì) 162
9．2　列表頁(yè) 163
9．　2． 1 消息列表 163
9．　2． 2 橫向卡片 163
9．　2． 3 瀑布流 164
9．3　詳情頁(yè) 165
9．　3． 1 全局按鈕 165
9．　3． 2 快速通道 166
9．4　個(gè)人中心 167
9．　4． 1 頭像區(qū)域 167
9．　4． 2 個(gè)人信息 168
9．　4． 3 功能模塊 169
9．5　啟動(dòng)頁(yè) 170
9．　5． 1 品牌宣傳類 170
9．　5． 2 首頁(yè)樣式類 171
9．　5． 3 情感故事類 172
9．　5． 4 節(jié)日氛圍類 173
9．6　引導(dǎo)頁(yè) 173
9．　6． 1 功能介紹類 173
9．　6． 2 使用說(shuō)明類 176
9．　6． 3 情感故事類 177
10設(shè)計(jì)適配
10．1　iOS系統(tǒng)適配 180
10．　1． 1 設(shè)計(jì)基準(zhǔn) 180
10．　1． 2 設(shè)計(jì)適配 181
10．　1． 3 適配規(guī)則 182
10．2　Android系統(tǒng)適配 183
10．　2． 1 密度獨(dú)立像素 183
10．　2． 2 設(shè)計(jì)基準(zhǔn) 184
10．　2． 3 適配方法 185
10．3　iOS系統(tǒng)適配Android系統(tǒng) 185
10．　3． 1 設(shè)計(jì)目的 185
10．　3． 2 換算關(guān)系 185
10．　3． 3 適配方法 186
10．4　標(biāo)注設(shè)計(jì) 186
10．　4． 1 標(biāo)注基準(zhǔn) 187
10．　4． 2 標(biāo)注方法 187
10．5　點(diǎn)九圖 189
10．　5． 1 什么是點(diǎn)九圖 189
10．　5． 2 如何制作點(diǎn)九圖 191
10．6　切圖 191
10．　6． 1 界面切圖 191
10．　6． 2 圖標(biāo)切圖 192
10．　6． 3 命名規(guī)則 192
11手勢(shì)應(yīng)用
11．1　為什么使用手勢(shì) 194
11．2　常用手勢(shì)操作 195
11．　2． 1 單擊 195
11．　2． 2 雙擊 195
11．　2． 3 上下滑動(dòng) 196
11．　2． 4 左右滑動(dòng) 196
11．　2． 5 拖曳 197
11．　2． 6 張開(kāi) 閉合 197
11．　2． 7 長(zhǎng)按 198
11．　2． 8 搖晃 198
11．3　手勢(shì)設(shè)計(jì)禁忌 199
11．　3． 1 使用標(biāo)準(zhǔn)手勢(shì) 199
11．　3． 2 定義標(biāo)準(zhǔn)手勢(shì) 199
11．　3． 3 使用簡(jiǎn)單手勢(shì) 199
11．　3． 4 手勢(shì)使用說(shuō)明 199
12設(shè)計(jì)資源
12．1　網(wǎng)站資源 201
12．2　圖標(biāo)資源 202
12．3　圖片資源 203
附錄 204
參考文獻(xiàn) 211