基本介紹
- 書名：術與道移動套用UI設計必修課
- 作者：余振華
- ISBN：9787115418814
- 頁數：212
- 定價：59
- 出版時間： 2016-4-1
- 裝幀：平裝
內容簡介,目錄,
內容簡介
這是一本系統介紹移動設計知識的書籍， 全書分為上下兩篇。
上篇為術之篇，主要講解了移動套用設計相關的基礎知識。通過基礎知識的學習，使大家了解手機螢幕顯示的原理及各種手機硬體的感測器使用方法。通過講解基本的設計規範及圖示設計方法，使讀者初步掌握移動套用設計知識。
下篇為道之篇，是進階套用設計知識，詳細講解了從如何組建設計規範，到各種組件的功能介紹及套用設計方法，使讀者完整掌握移動套用的設計方法和流程。本書通過大量的案例演示，使讀者可以靈活運用設計方法理論。
本書適合想要從事和已經從事UI設計行業相關工作的讀者學習使用，也可以作為高校平面設計、網頁設計等相關專業和相關培訓機構的教學參考書。
目錄
術之篇
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
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
