跨平臺UI設計寶典

目錄
第1章 UI設計基礎 ..................................1
1.1　UI設計概述 ................................2
1.1.1 什么是UI設計 ................... 2
1.1.2 UI的發(fā)展史 ....................... 3
1.1.3 UI設計分類 ....................... 6
1.1.4 UI設計師技能 ........... 9
1.1.5 UI設計術語 ..................... 10
1.1.6 互聯(lián)網(wǎng)公司崗位架構 ..... 10
1.2 常用的UI設計工具 ................. 12
1.2.1 設計型工具 ..................... 12
1.2.2 輔助型工具 ..................... 13
1.3　UI設計流程 ............................. 14
1.4　UI設計原則 ............................. 16
1.5　UI設計要素 ............................. 17
1.5.1 設計風格 ......................... 17
1.5.2 設計色彩 ......................... 19
1.5.3 設計字體 ......................... 26
第2章 移動端UI設計常識 ................... 28
2.1　移動應用平臺 ......................... 29
2.2　移動設備尺寸標準 ................. 31
2.2.1　英寸 ................................. 32
2.2.2　像素 ................................. 32
2.2.3　分辨率 ............................. 33
2.2.4　網(wǎng)點密度 ......................... 33
2.2.5　像素密度 ......................... 33
2.3　移動UI設計規(guī)范 ..................... 34
2.3.1　移動設備參數(shù) ................. 34
2.3.2　UI尺寸規(guī)范 ..................... 36
2.3.3　文本規(guī)范 ......................... 42
2.4　認識App ................................. 43
2.4.1　什么是App .................... 43
2.4.2　App的優(yōu)勢 ..................... 44
2.4.3　App的分類 ..................... 44
2.4.4　App元素構成 ................. 45
第3章 PC端UI設計常識 ..................... 49
3.1　網(wǎng)頁UI設計概述 ..................... 50
3.1.1 認識網(wǎng)頁UI ..................... 50
3.1.2 網(wǎng)頁結構分析 ................. 50
3.1.3 網(wǎng)頁分類 ......................... 51
3.2 移動端UI設計和PC端網(wǎng)頁UI
設計區(qū)別 ................................. 54
3.3 網(wǎng)頁UI設計特點 ..................... 54
3.4 網(wǎng)頁UI設計原則 ..................... 57
3.5 網(wǎng)頁的構成元素 ..................... 61
3.6 網(wǎng)頁UI設計規(guī)范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 網(wǎng)頁設計尺寸大小 ......... 63
3.6.3 網(wǎng)頁設計命名規(guī)范 ......... 63
3.6.4 網(wǎng)頁設計中字體編排 ..... 64
第4章 圖標設計 ................................... 65
4.1 認識圖標 ................................. 66
4.1.1 什么是圖標 ..................... 66
4.1.2 圖標類型 ......................... 66
4.1.3 圖標設計原則 ................. 67
4.1.4 圖標設計技巧 ................. 69
4.1.5 圖標設計流程 ................. 70
4.2 圖標設計風格 ......................... 73
4.2.1 扁平化風格 ..................... 73
4.2.2 擬物化風格 ..................... 74
4.3 【實例1】扁平相機圖標
設計 .......................................... 75
4.3.1 實例分析 ......................... 75
4.3.2 實現(xiàn)步驟 ......................... 76
4.4 【實例2】微扁平鐘表圖標
設計 .......................................... 79
4.4.1 實例分析 ......................... 79
4.4.2 實現(xiàn)步驟 ......................... 80
4.5 【實例3】擬物化天氣圖標
設計 .......................................... 84
4.5.1 實例分析 ......................... 85
4.5.2 實現(xiàn)步驟 ......................... 85
4.6 【實例4】手機主題系統(tǒng)圖標
設計 .......................................... 90
4.6.1 實例分析 ......................... 90
4.6.2 實現(xiàn)步驟 ......................... 90
第5章 移動端界面結構 ....................... 96
5.1 欄 ............................................. 97
5.2 導航結構 ................................. 97
5.2.1 什么是導航結構 ............. 97
5.2.2 導航結構的分類 ............. 98
5.3 內(nèi)容視圖 ...............................105
5.3.1 什么是內(nèi)容視圖 ........... 105
5.3.2 內(nèi)容視圖的分類 ........... 105
5.4 臨時視圖 ...............................108
5.4.1 什么是臨時視圖 ........... 108
5.4.2 臨時視圖的分類 ........... 108
5.5 【實例5】制作標簽欄導航
圖標 ........................................110
5.5.1 實例分析 ....................... 110
5.5.2 實現(xiàn)步驟 ....................... 110
5.6 【實例6】列表式內(nèi)容視圖 ...113
5.6.1 實例分析 ....................... 113
5.6.2 實現(xiàn)步驟 ....................... 114
第6章 移動端常用控件 .....................117
6.1 認識控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按鈕控件 ....................... 121
6.1.4 表單控件 ....................... 122
6.2 【實例7】播放進度滑塊
設計 ........................................ 123
6.2.1 實例分析 ....................... 123
6.2.2 實現(xiàn)步驟 ....................... 124
6.3 【實例8】登錄按鈕設計 ....... 127
6.3.1 實例分析 ....................... 127
6.3.2 實現(xiàn)步驟 ....................... 128
第7章 移動端設計適配 .....................131
7.1 iOS設計適配 ........................ 132
7.1.1 設計基準選擇 ............... 132
7.1.2 設計基準圖 ................... 132
7.2 標注 .......................................135
7.2.1 什么是標注 ................... 135
7.2.2 標注內(nèi)容 ....................... 136
7.2.3 標注方法 ....................... 137
7.3 切圖 .......................................137
7.3.1 什么是切圖 ................... 137
7.3.2 切圖內(nèi)容 ....................... 137
7.3.3 切圖方法 ....................... 139
7.3.4 切圖原則 ....................... 140
7.3.5 切圖輸出類型 ............... 142
7.3.6 命名規(guī)則 ....................... 144
7.4 【實例9】改版Android頁面 ....144
7.4.1 實例分析 ....................... 145
7.4.2 實現(xiàn)步驟 ....................... 145
7.5 【實例10】標注登錄頁面 ....148
7.5.1 實例分析 ....................... 148
7.5.2 實現(xiàn)步驟 ....................... 148
7.6 【實例11】發(fā)現(xiàn)頁面切圖 .... 152
7.6.1 實例分析 ....................... 153
7.6.2 實現(xiàn)步驟 ....................... 153
第8章 網(wǎng)站頁面布局和模塊設計 .....157
8.1 網(wǎng)站頁面布局 .......................158
8.1.1 網(wǎng)站UI視覺規(guī)律 ........... 158
8.1.2 常見的網(wǎng)頁布局方式 .... 159
8.2 網(wǎng)站Logo設計 .....................164
8.2.1 Logo概述 ...................... 164
8.2.2 網(wǎng)站Logo的作用 .......... 164
8.2.3 網(wǎng)站Logo表現(xiàn)形式 ...... 165
8.2.4 網(wǎng)站Logo設計流程 ..... 165
8.3 網(wǎng)站導航設計 .......................166
8.3.1 認識網(wǎng)站導航 ............... 166
8.3.2 網(wǎng)站導航的作用 ........... 166
8.3.3 導航在網(wǎng)站中的位置 .... 167
8.3.4 網(wǎng)站導航形式 ............... 169
8.4 網(wǎng)站Banner設計 .................170
8.4.1 認識網(wǎng)站Banner .......... 170
8.4.2 Banner設計特點 .......... 171
8.4.3 Banner設計原則 .......... 171
8.4.4 Banner構圖方式 .......... 173
8.5 【實例12】咨詢公司Logo ...175
8.5.1 實例分析 ....................... 175
8.5.2 實現(xiàn)步驟 ....................... 175
8.6 【實例13】導航設計 ............178
8.6.1 實例分析 ....................... 178
8.6.2 實現(xiàn)步驟 ....................... 178
8.7 【實例14】耳麥Banner ......182
8.7.1 實例分析 ....................... 183
8.7.2 實現(xiàn)步驟 ....................... 183
第9章 優(yōu)選網(wǎng)App項目 .....................191
9.1 項目概述 ...............................192
9.1.1 項目名稱 ....................... 192
9.1.2 項目定位 ....................... 192
9.1.3 功能介紹 ....................... 192
9.2 原型分析 ...............................193
9.2.1 首頁 ............................... 193
9.2.2 搜索頁 ........................... 193
9.2.3 商品分類頁 ................... 194
9.2.4 商品詳情頁 ................... 195
9.2.5 登錄注冊頁 ................... 196
9.2.6 購物車頁 ....................... 196
9.2.7 訂單結算頁 ................... 197
9.2.8 個人中心頁 ................... 198
9.3 項目設計定位 .......................198
9.3.1 設計風格 ....................... 199
9.3.2 顏色定位 ....................... 199
9.3.3 字體大小選擇 ............... 199
9.4 優(yōu)選網(wǎng)App的設計優(yōu)化 .......200
9.4.1 啟動圖標 ....................... 200
9.4.2 啟動頁 ........................... 200
9.4.3 引導頁 ........................... 201
9.4.4 首頁 ............................... 202
9.4.5 搜索頁 ........................... 207
9.4.6 搜索結果頁 ................... 208
9.4.7 商品分類頁 ................... 209
9.4.8 商品詳情頁 ................... 211
9.4.9 登錄注冊頁 ................... 212
9.4.10 購物車頁 ..................... 214
9.4.11 訂單結算頁 ................. 215
9.4.12 個人中心頁 ................. 216
9.5 優(yōu)選網(wǎng)App的標注切圖 .......218
9.5.1 啟動圖標 ....................... 218
9.5.2 啟動頁 ........................... 219
9.5.3 引導頁 ........................... 219
9.5.4 首頁 ............................... 219
9.5.5 搜索頁和搜索結果頁 .... 220
9.5.6 其余頁面 ....................... 222
第10章 極速云盤項目 ....................... 223
10.1 項目概述 ............................. 224
10.1.1 項目名稱 ..................... 224
10.1.2 項目定位 ..................... 224
10.1.3 競品分析 ..................... 224
10.1.4 功能介紹 ..................... 224
10.2 原型分析 ............................. 225
10.2.1 登錄界面 ..................... 225
10.2.2 主界面 ......................... 225
10.2.3 傳輸列表 ..................... 227
10.2.4 分享窗口 ..................... 227
10.2.5 新建下載任務 ............. 228
10.2.6 鎖定和驗證碼 ............. 229
10.2.7 隱藏空間 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 項目設計定位 ..................... 231
10.3.1 設計風格 ..................... 231
10.3.2 顏色定位 ..................... 231
10.3.3 尺寸和字體規(guī)范 ......... 231
10.4 極速云盤的設計優(yōu)化 ......... 232
10.4.1 啟動圖標 ..................... 232
10.4.2 登錄界面 ..................... 233
10.4.3 主界面 ......................... 235
10.4.4 傳輸列表 ..................... 239
10.4.5 分享窗口 ..................... 241
10.4.6 新建下載任務 ............. 242
10.4.7 鎖定和驗證碼 ............. 243
10.4.8 隱藏空間 ..................... 244
10.4.9 功能大全 ..................... 245
10.5 極速云盤的標注切圖 .........246
10.5.1 啟動圖標 ..................... 247
10.5.2 主界面 ......................... 247
10.5.3 傳輸列表和鎖定 ......... 248
第11章 小米電視界面項目 ............... 250
11.1 項目概述 ............................. 251
11.1.1 認識智能電視 ............. 251
11.1.2 智能電視設計特點 ..... 251
11.1.3 項目名稱 ..................... 253
11.1.4 項目定位 ..................... 253
11.1.5 功能介紹 ..................... 253
11.2 原型分析 ............................. 254
11.2.1 首頁 ............................. 254
11.2.2 熱門推薦 ..................... 254
11.2.3 影片詳情 ..................... 255
11.2.4 播放影片 ..................... 255
11.2.5 影視分類 ..................... 256
11.2.6 排行榜 ......................... 256
11.2.7 系統(tǒng)設置 ..................... 257
11.2.8 網(wǎng)絡設置 ..................... 257
11.3 項目設計定位 .....................258
11.3.1 設計風格 ..................... 258
11.3.2 顏色定位 ..................... 258
11.3.3 字體大小選擇 ............. 258
11.4 小米電視界面的設計
優(yōu)化 ...................................... 259
11.4.1 啟動頁 ......................... 259
11.4.2 首頁 ............................. 259