術之篇
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的開發流程 / 25
1.3 智能手機的屏幕 / 26
1.3.1 英寸（Inch） / 27
1.3.2 像素（Pixel） / 27
1.3.3 分辨率（Resolution） / 28
1.4 網點密度與像素密度 / 28
1.4.1 網點密度（DPI） / 28
1.4.2 像素密度（PPI） / 29
1.4.3 DPI與PPI / 29
1.4.4 邏輯分辨率與像素倍率 / 30
1.4.5 視網膜屏幕 / 30
1.5 常見手機屏幕規格 / 31
1.5.1 熱門手機規格 / 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 係統內置字體 / 62
2.4.3 什麼時候選擇內嵌字體 / 62
2.4.4 如何使用內嵌字體 / 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 第五步：調整細節 / 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圖標規範 / 77
3.4.1 iOS圖標適配 / 77
3.4.2 iOS圖標標準 / 78
3.5 Android圖標規範 / 79
3.5.1 Android圖標適配 / 79
3.5.2 圖標的視覺統一 / 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 像素對齊的微調 / 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 iOS係統界麵
4.1 欄 / 94
4.1.1 狀態欄 / 94
4.1.2 導航欄 / 94
4.1.3 標簽欄 / 95
4.1.4 工具欄 / 96
4.2 內容視圖 / 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
05 Android係統界麵
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係統的插件 / 114
5.5.1 桌麵插件 / 114
5.5.2 設計趨勢 / 114
道之篇
06 建立規範
6.1 組建規範 / 116
6.1.1 設計規範的目的 / 116
6.1.2 規範的組成 / 116
6.2 顔色規範 / 119
6.2.1 為什麼選擇HSB / 119
6.2.2 創建調色闆 / 120
6.2.3 調色闆應用 / 121
6.3 文字規範 / 123
6.3.1 iOS係統 / 123
6.3.2 Android係統 / 123
6.3.3 係統字號 / 123
6.4 布局 / 125
6.4.1 框架 / 125
6.4.2 頂部導航欄 / 126
6.4.3 頂部標簽欄 / 126
6.4.4 底部標簽欄 / 127
6.5 圖片規範 / 127
6.5.1 用戶頭像 / 127
6.5.2 商品圖片 / 129
6.5.3 無數據圖片 / 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 地區選擇 / 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 按鈕規範 / 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 非模態浮層 / 147
7.5.3 模態浮層 / 148
08 導航設計
8.1 扁平導航 / 150
8.1.1 標簽導航 / 150
8.1.2 舵式導航 / 151
8.1.3 宮格式導航 / 152
8.2 內容主導式導航 / 153
8.2.1 陳列式導航 / 153
8.2.2 鏇轉木馬式導航 / 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 頭像區域 / 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 節日氛圍類 / 173
9.6 引導頁 / 173
9.6.1 功能介紹類 / 173
9.6.2 使用說明類 / 176
9.6.3 情感故事類 / 177
10 設計適配
10.1 iOS係統適配 / 180
10.1.1 設計基準 / 180
10.1.2 設計適配 / 181
10.1.3 適配規則 / 182
10.2 Android係統適配 / 183
10.2.1 密度獨立像素 / 183
10.2.2 設計基準 / 184
10.2.3 適配方法 / 185
10.3 iOS係統適配Android係統 / 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 命名規則 / 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 網站資源 / 201
12.2 圖標資源 / 202
12.3 圖片資源 / 203
參考文獻 / 204
· · · · · · (收起)