術與道 移動應用UI設計必修課（第2版）

術之篇
01基礎知識
1．1　什么是UI設計 20
1．1．1　UI的相關概念 20
1．1．2　UI的學習方法 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　麥克風 38
1．7．3　GPS 38
1．7．4　電子羅盤 39
1．7．5　重力感應器 39
1．7．6　加速度傳感器 40
1．7．7　光線傳感器 41
1．7．8　距離傳感器 41
1．7．9　氣壓傳感器 42
1．7．10　三軸陀螺儀 43
02設計風格
2．1　風格 46
2．1．1　什么是設計風格 46
2．1．2　如何確立設計風格 47
2．2　顏色 50
2．　2． 1 認識色彩 50
2．　2． 2 RGB與HSB 50
2．　2． 3 顏色搭配基礎 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 適應不同場景 69
3．2　App圖標設計流程 69
3．　2． 1 第一步：尋找隱喻 69
3．　2． 2 第二步：抽象圖形 70
3．　2． 3 第三步：競品分析 71
3．　2． 4 第四步：確定風格 71
3．　2． 5 第五步：調(diào)整細節(jié) 72
3．　2． 6 第六步：場景測試 73
3．3　App圖標設計方法 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 圖形復用 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　設計線性圖標 83
3．　6． 1 線性圖標的風格 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 導航欄 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　導航機制 102
5．　1． 1 硬件特性 102
5．　1． 2 iOS導航機制 102
5．　1． 3 Android導航機制 103
5．2　界面布局 105
5．　2． 1 結構差異 105
5．　2． 2 操作欄 106
5．　2． 3 多任務 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 復制粘貼 112
5．　4． 4 刪除 113
5．5　Android系統(tǒng)的插件 114
5．　5． 1 桌面插件 114
5．　5． 2 設計趨勢 114
道之篇
06建立規(guī)范
6．1　組建規(guī)范 116
6．　1． 1 設計規(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)色板應用 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 頂部導航欄 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設計組件
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 開關 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 復選框 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導航設計
8．1　扁平導航 150
8．　1． 1 標簽導航 150
8．　1． 2 舵式導航 151
8．　1． 3 宮格式導航 152
8．2　內(nèi)容主導式導航 153
8．　2． 1 陳列式導航 153
8．　2． 2 旋轉(zhuǎn)木馬式導航 154
8．3　列表式導航 155
8．　3． 1 列表式 155
8．　3． 2 抽屜式 156
8．4　其他導航 157
8．　4． 1 點聚式導航 157
8．　4． 2 瀑布式導航 158
09界面設計
9．1　首頁 160
9．　1． 1 搜索欄 160
9．　1． 2 標簽欄 161
9．　1． 3 卡片式設計 161
9．　1． 4 樓層設計 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　引導頁 173
9．　6． 1 功能介紹類 173
9．　6． 2 使用說明類 176
9．　6． 3 情感故事類 177
10設計適配
10．1　iOS系統(tǒng)適配 180
10．　1． 1 設計基準 180
10．　1． 2 設計適配 181
10．　1． 3 適配規(guī)則 182
10．2　Android系統(tǒng)適配 183
10．　2． 1 密度獨立像素 183
10．　2． 2 設計基準 184
10．　2． 3 適配方法 185
10．3　iOS系統(tǒng)適配Android系統(tǒng) 185
10．　3． 1 設計目的 185
10．　3． 2 換算關系 185
10．　3． 3 適配方法 186
10．4　標注設計 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手勢應用
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　手勢設計禁忌 199
11．　3． 1 使用標準手勢 199
11．　3． 2 定義標準手勢 199
11．　3． 3 使用簡單手勢 199
11．　3． 4 手勢使用說明 199
12設計資源
12．1　網(wǎng)站資源 201
12．2　圖標資源 202
12．3　圖片資源 203
附錄 204
參考文獻 211