跨平臺(tái)UI設(shè)計(jì)寶典

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