跨平臺設(shè)計寶典 版權(quán)信息
- ISBN:9787113245566
- 條形碼:9787113245566 ; 978-7-113-24556-6
- 裝幀:80g膠版紙
- 冊數(shù):暫無
- 重量:暫無
- 所屬分類:>>
跨平臺設(shè)計寶典 本書特色
(1)覆蓋面廣。(2)實(shí)戰(zhàn)性強(qiáng)。(3)入門簡單。(4)知識新穎。
跨平臺設(shè)計寶典 內(nèi)容簡介
本教材針對的是已掌握 Photoshop 軟件基本工具操作的人群,以既定的編寫體例(實(shí)例 + 項(xiàng)
目的形式)鞏固對理論知識點(diǎn)的學(xué)習(xí)。在內(nèi)容編排上,本書以移動端、PC 端和多媒體終端的 UI
設(shè)計作為主線,結(jié)合實(shí)例的演練和實(shí)際項(xiàng)目的操作,讓讀者更好地體會設(shè)計思路、技巧和理念。
在內(nèi)容選擇、結(jié)構(gòu)安排上更加符合從業(yè)人員職業(yè)技能水平提高的要求。書中的每個知識點(diǎn)都融
入到實(shí)例中,加深讀者的理解。
全書共分 11 章,以 Photoshop CC 作為基礎(chǔ)操作軟件,提供了 14 個精選實(shí)例和 3 個綜合項(xiàng)
目。每個精選實(shí)例均有詳細(xì)的制作步驟,以幫助讀者全面、快速掌握知識。全書按照基礎(chǔ)—進(jìn)階—
項(xiàng)目的編寫思路,全面、系統(tǒng)、規(guī)范性地對 UI 設(shè)計的相關(guān)知識進(jìn)行了梳理,實(shí)例豐富,實(shí)操性強(qiáng)。
本書附有配套視頻和實(shí)例源文件,并且為了幫助初學(xué)者更好地學(xué)習(xí)本書的內(nèi)容,還提供了在
線答疑,希望得到更多讀者的關(guān)注。
本書既可作為高等院校本、?葡嚓P(guān)專業(yè)的 UI 設(shè)計課程的教材,也可作為 UI 設(shè)計愛好者
以及初級 UI 設(shè)計師的培訓(xùn)教材,是一本適合業(yè)內(nèi)人士閱讀與參考的讀物。
跨平臺設(shè)計寶典 目錄
"目錄
第1章 UI設(shè)計基礎(chǔ) ..................................1
1.1 UI設(shè)計概述 ................................2
1.1.1 什么是UI設(shè)計 ................... 2
1.1.2 UI的發(fā)展史 ....................... 3
1.1.3 UI設(shè)計分類 ....................... 6
1.1.4 UI設(shè)計師**技能 ........... 9
1.1.5 UI設(shè)計術(shù)語 ..................... 10
1.1.6 互聯(lián)網(wǎng)公司崗位架構(gòu) ..... 10
1.2 常用的UI設(shè)計工具 ................. 12
1.2.1 設(shè)計型工具 ..................... 12
1.2.2 輔助型工具 ..................... 13
1.3 UI設(shè)計流程 ............................. 14
1.4 UI設(shè)計原則 ............................. 16
1.5 UI設(shè)計要素 ............................. 17
1.5.1 設(shè)計風(fēng)格 ......................... 17
1.5.2 設(shè)計色彩 ......................... 19
1.5.3 設(shè)計字體 ......................... 26
第2章 移動端UI設(shè)計常識 ................... 28
2.1 移動應(yīng)用平臺 ......................... 29
2.2 移動設(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 移動UI設(shè)計規(guī)范 ..................... 34
2.3.1 移動設(shè)備參數(shù) ................. 34
2.3.2 UI尺寸規(guī)范 ..................... 36
2.3.3 文本規(guī)范 ......................... 42
2.4 認(rèn)識App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的優(yōu)勢 ..................... 44
2.4.3 App的分類 ..................... 44
2.4.4 App元素構(gòu)成 ................. 45
第3章 PC端UI設(shè)計常識 ..................... 49
3.1 網(wǎng)頁UI設(shè)計概述 ..................... 50
3.1.1 認(rèn)識網(wǎng)頁UI ..................... 50
3.1.2 網(wǎng)頁結(jié)構(gòu)分析 ................. 50
3.1.3 網(wǎng)頁分類 ......................... 51
3.2 移動端UI設(shè)計和PC端網(wǎng)頁UI
設(shè)計區(qū)別 ................................. 54
3.3 網(wǎng)頁UI設(shè)計特點(diǎn) ..................... 54
3.4 網(wǎng)頁UI設(shè)計原則 ..................... 57
3.5 網(wǎng)頁的構(gòu)成元素 ..................... 61
3.6 網(wǎng)頁UI設(shè)計規(guī)范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 網(wǎng)頁設(shè)計尺寸大小 ......... 63
3.6.3 網(wǎng)頁設(shè)計命名規(guī)范 ......... 63
3.6.4 網(wǎng)頁設(shè)計中字體編排 ..... 64
第4章 圖標(biāo)設(shè)計 ................................... 65
4.1 認(rèn)識圖標(biāo) ................................. 66
4.1.1 什么是圖標(biāo) ..................... 66
4.1.2 圖標(biāo)類型 ......................... 66
4.1.3 圖標(biāo)設(shè)計原則 ................. 67
4.1.4 圖標(biāo)設(shè)計技巧 ................. 69
4.1.5 圖標(biāo)設(shè)計流程 ................. 70
4.2 圖標(biāo)設(shè)計風(fēng)格 ......................... 73
4.2.1 扁平化風(fēng)格 ..................... 73
4.2.2 擬物化風(fēng)格 ..................... 74
4.3 【實(shí)例1】扁平相機(jī)圖標(biāo)
設(shè)計 .......................................... 75
4.3.1 實(shí)例分析 ......................... 75
4.3.2 實(shí)現(xiàn)步驟 ......................... 76
4.4 【實(shí)例2】微扁平鐘表圖標(biāo)
設(shè)計 .......................................... 79
4.4.1 實(shí)例分析 ......................... 79
4.4.2 實(shí)現(xiàn)步驟 ......................... 80
4.5 【實(shí)例3】擬物化天氣圖標(biāo)
設(shè)計 .......................................... 84
4.5.1 實(shí)例分析 ......................... 85
4.5.2 實(shí)現(xiàn)步驟 ......................... 85
4.6 【實(shí)例4】手機(jī)主題系統(tǒng)圖標(biāo)
設(shè)計 .......................................... 90
4.6.1 實(shí)例分析 ......................... 90
4.6.2 實(shí)現(xiàn)步驟 ......................... 90
第5章 移動端界面結(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)的分類 ............. 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 【實(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章 移動端常用控件 .....................117
6.1 認(rèn)識控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按鈕控件 ....................... 121
6.1.4 表單控件 ....................... 122
6.2 【實(shí)例7】播放進(jìn)度滑塊
設(shè)計 ........................................ 123
6.2.1 實(shí)例分析 ....................... 123
6.2.2 實(shí)現(xiàn)步驟 ....................... 124
6.3 【實(shí)例8】登錄按鈕設(shè)計 ....... 127
6.3.1 實(shí)例分析 ....................... 127
6.3.2 實(shí)現(xiàn)步驟 ....................... 128
第7章 移動端設(shè)計適配 .....................131
7.1 iOS設(shè)計適配 ........................ 132
7.1.1 設(shè)計基準(zhǔn)選擇 ............... 132
7.1.2 設(shè)計基準(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 切圖輸出類型 ............... 142
7.3.6 命名規(guī)則 ....................... 144
7.4 【實(shí)例9】改版Android頁面 ....144
7.4.1 實(shí)例分析 ....................... 145
7.4.2 實(shí)現(xiàn)步驟 ....................... 145
7.5 【實(shí)例10】標(biāo)注登錄頁面 ....148
7.5.1 實(shí)例分析 ....................... 148
7.5.2 實(shí)現(xiàn)步驟 ....................... 148
7.6 【實(shí)例11】發(fā)現(xiàn)頁面切圖 .... 152
7.6.1 實(shí)例分析 ....................... 153
7.6.2 實(shí)現(xiàn)步驟 ....................... 153
第8章 網(wǎng)站頁面布局和模塊設(shè)計 .....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設(shè)計 .....................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è)計流程 ..... 165
8.3 網(wǎng)站導(dǎo)航設(shè)計 .......................166
8.3.1 認(rèn)識網(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è)計 .................170
8.4.1 認(rèn)識網(wǎng)站Banner .......... 170
8.4.2 Banner設(shè)計特點(diǎn) .......... 171
8.4.3 Banner設(shè)計原則 .......... 171
8.4.4 Banner構(gòu)圖方式 .......... 173
8.5 【實(shí)例12】咨詢公司Logo ...175
8.5.1 實(shí)例分析 ....................... 175
8.5.2 實(shí)現(xiàn)步驟 ....................... 175
8.6 【實(shí)例13】導(dǎo)航設(shè)計 ............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)目名稱 ....................... 192
9.1.2 項(xiàng)目定位 ....................... 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 訂單結(jié)算頁 ................... 197
9.2.8 個人中心頁 ................... 198
9.3 項(xiàng)目設(shè)計定位 .......................198
9.3.1 設(shè)計風(fēng)格 ....................... 199
9.3.2 顏色定位 ....................... 199
9.3.3 字體大小選擇 ............... 199
9.4 優(yōu)選網(wǎng)App的設(shè)計優(yōu)化 .......200
9.4.1 啟動圖標(biāo) ....................... 200
9.4.2 啟動頁 ........................... 200
9.4.3 引導(dǎo)頁 ........................... 201
9.4.4 首頁 ............................... 202
9.4.5 搜索頁 ........................... 207
9.4.6 搜索結(jié)果頁 ................... 208
9.4.7 商品分類頁 ................... 209
9.4.8 商品詳情頁 ................... 211
9.4.9 登錄注冊頁 ................... 212
9.4.10 購物車頁 ..................... 214
9.4.11 訂單結(jié)算頁 ................. 215
9.4.12 個人中心頁 ................. 216
9.5 優(yōu)選網(wǎng)App的標(biāo)注切圖 .......218
9.5.1 啟動圖標(biāo) ....................... 218
9.5.2 啟動頁 ........................... 219
9.5.3 引導(dǎo)頁 ........................... 219
9.5.4 首頁 ............................... 219
9.5.5 搜索頁和搜索結(jié)果頁 .... 220
9.5.6 其余頁面 ....................... 222
第10章 極速云盤項(xiàng)目 ....................... 223
10.1 項(xiàng)目概述 ............................. 224
10.1.1 項(xiàng)目名稱 ..................... 224
10.1.2 項(xiàng)目定位 ..................... 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 新建下載任務(wù) ............. 228
10.2.6 鎖定和驗(yàn)證碼 ............. 229
10.2.7 隱藏空間 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 項(xiàng)目設(shè)計定位 ..................... 231
10.3.1 設(shè)計風(fēng)格 ..................... 231
10.3.2 顏色定位 ..................... 231
10.3.3 尺寸和字體規(guī)范 ......... 231
10.4 極速云盤的設(shè)計優(yōu)化 ......... 232
10.4.1 啟動圖標(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 極速云盤的標(biāo)注切圖 .........246
10.5.1 啟動圖標(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)識智能電視 ............. 251
11.1.2 智能電視設(shè)計特點(diǎn) ..... 251
11.1.3 項(xiàng)目名稱 ..................... 253
11.1.4 項(xiàng)目定位 ..................... 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)設(shè)置 ..................... 257
11.2.8 網(wǎng)絡(luò)設(shè)置 ..................... 257
11.3 項(xiàng)目設(shè)計定位 .....................258
11.3.1 設(shè)計風(fēng)格 ..................... 258
11.3.2 顏色定位 ..................... 258
11.3.3 字體大小選擇 ............. 258
11.4 小米電視界面的設(shè)計
優(yōu)化 ...................................... 259
11.4.1 啟動頁 ......................... 259
11.4.2 首頁 ............................. 259
11.4.3 熱門推薦 ..................... 261
11.4.4 影片詳情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影視分類 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系統(tǒng)設(shè)置 ..................... 267
11.4.9 網(wǎng)絡(luò)設(shè)置 ..................... 268
11.5 小米電視界面項(xiàng)目的標(biāo)注
切圖 .....................................269
11.5.1 啟動頁 ......................... 269
11.5.2 首頁 ............................. 269
11.5.3 影片詳情和播放影片 .. 270
11.5.4 熱門推薦、影視分類和
排行榜 ......................... 272
11.5.5 系統(tǒng)設(shè)置和網(wǎng)絡(luò)設(shè)置 ... 272"
"目錄
第1章 UI設(shè)計基礎(chǔ) ..................................1
1.1 UI設(shè)計概述 ................................2
1.1.1 什么是UI設(shè)計 ................... 2
1.1.2 UI的發(fā)展史 ....................... 3
1.1.3 UI設(shè)計分類 ....................... 6
1.1.4 UI設(shè)計師**技能 ........... 9
1.1.5 UI設(shè)計術(shù)語 ..................... 10
1.1.6 互聯(lián)網(wǎng)公司崗位架構(gòu) ..... 10
1.2 常用的UI設(shè)計工具 ................. 12
1.2.1 設(shè)計型工具 ..................... 12
1.2.2 輔助型工具 ..................... 13
1.3 UI設(shè)計流程 ............................. 14
1.4 UI設(shè)計原則 ............................. 16
1.5 UI設(shè)計要素 ............................. 17
1.5.1 設(shè)計風(fēng)格 ......................... 17
1.5.2 設(shè)計色彩 ......................... 19
1.5.3 設(shè)計字體 ......................... 26
第2章 移動端UI設(shè)計常識 ................... 28
2.1 移動應(yīng)用平臺 ......................... 29
2.2 移動設(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 移動UI設(shè)計規(guī)范 ..................... 34
2.3.1 移動設(shè)備參數(shù) ................. 34
2.3.2 UI尺寸規(guī)范 ..................... 36
2.3.3 文本規(guī)范 ......................... 42
2.4 認(rèn)識App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的優(yōu)勢 ..................... 44
2.4.3 App的分類 ..................... 44
2.4.4 App元素構(gòu)成 ................. 45
第3章 PC端UI設(shè)計常識 ..................... 49
3.1 網(wǎng)頁UI設(shè)計概述 ..................... 50
3.1.1 認(rèn)識網(wǎng)頁UI ..................... 50
3.1.2 網(wǎng)頁結(jié)構(gòu)分析 ................. 50
3.1.3 網(wǎng)頁分類 ......................... 51
3.2 移動端UI設(shè)計和PC端網(wǎng)頁UI
設(shè)計區(qū)別 ................................. 54
3.3 網(wǎng)頁UI設(shè)計特點(diǎn) ..................... 54
3.4 網(wǎng)頁UI設(shè)計原則 ..................... 57
3.5 網(wǎng)頁的構(gòu)成元素 ..................... 61
3.6 網(wǎng)頁UI設(shè)計規(guī)范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 網(wǎng)頁設(shè)計尺寸大小 ......... 63
3.6.3 網(wǎng)頁設(shè)計命名規(guī)范 ......... 63
3.6.4 網(wǎng)頁設(shè)計中字體編排 ..... 64
第4章 圖標(biāo)設(shè)計 ................................... 65
4.1 認(rèn)識圖標(biāo) ................................. 66
4.1.1 什么是圖標(biāo) ..................... 66
4.1.2 圖標(biāo)類型 ......................... 66
4.1.3 圖標(biāo)設(shè)計原則 ................. 67
4.1.4 圖標(biāo)設(shè)計技巧 ................. 69
4.1.5 圖標(biāo)設(shè)計流程 ................. 70
4.2 圖標(biāo)設(shè)計風(fēng)格 ......................... 73
4.2.1 扁平化風(fēng)格 ..................... 73
4.2.2 擬物化風(fēng)格 ..................... 74
4.3 【實(shí)例1】扁平相機(jī)圖標(biāo)
設(shè)計 .......................................... 75
4.3.1 實(shí)例分析 ......................... 75
4.3.2 實(shí)現(xiàn)步驟 ......................... 76
4.4 【實(shí)例2】微扁平鐘表圖標(biāo)
設(shè)計 .......................................... 79
4.4.1 實(shí)例分析 ......................... 79
4.4.2 實(shí)現(xiàn)步驟 ......................... 80
4.5 【實(shí)例3】擬物化天氣圖標(biāo)
設(shè)計 .......................................... 84
4.5.1 實(shí)例分析 ......................... 85
4.5.2 實(shí)現(xiàn)步驟 ......................... 85
4.6 【實(shí)例4】手機(jī)主題系統(tǒng)圖標(biāo)
設(shè)計 .......................................... 90
4.6.1 實(shí)例分析 ......................... 90
4.6.2 實(shí)現(xiàn)步驟 ......................... 90
第5章 移動端界面結(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)的分類 ............. 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 【實(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章 移動端常用控件 .....................117
6.1 認(rèn)識控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按鈕控件 ....................... 121
6.1.4 表單控件 ....................... 122
6.2 【實(shí)例7】播放進(jìn)度滑塊
設(shè)計 ........................................ 123
6.2.1 實(shí)例分析 ....................... 123
6.2.2 實(shí)現(xiàn)步驟 ....................... 124
6.3 【實(shí)例8】登錄按鈕設(shè)計 ....... 127
6.3.1 實(shí)例分析 ....................... 127
6.3.2 實(shí)現(xiàn)步驟 ....................... 128
第7章 移動端設(shè)計適配 .....................131
7.1 iOS設(shè)計適配 ........................ 132
7.1.1 設(shè)計基準(zhǔn)選擇 ............... 132
7.1.2 設(shè)計基準(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 切圖輸出類型 ............... 142
7.3.6 命名規(guī)則 ....................... 144
7.4 【實(shí)例9】改版Android頁面 ....144
7.4.1 實(shí)例分析 ....................... 145
7.4.2 實(shí)現(xiàn)步驟 ....................... 145
7.5 【實(shí)例10】標(biāo)注登錄頁面 ....148
7.5.1 實(shí)例分析 ....................... 148
7.5.2 實(shí)現(xiàn)步驟 ....................... 148
7.6 【實(shí)例11】發(fā)現(xiàn)頁面切圖 .... 152
7.6.1 實(shí)例分析 ....................... 153
7.6.2 實(shí)現(xiàn)步驟 ....................... 153
第8章 網(wǎng)站頁面布局和模塊設(shè)計 .....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設(shè)計 .....................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è)計流程 ..... 165
8.3 網(wǎng)站導(dǎo)航設(shè)計 .......................166
8.3.1 認(rèn)識網(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è)計 .................170
8.4.1 認(rèn)識網(wǎng)站Banner .......... 170
8.4.2 Banner設(shè)計特點(diǎn) .......... 171
8.4.3 Banner設(shè)計原則 .......... 171
8.4.4 Banner構(gòu)圖方式 .......... 173
8.5 【實(shí)例12】咨詢公司Logo ...175
8.5.1 實(shí)例分析 ....................... 175
8.5.2 實(shí)現(xiàn)步驟 ....................... 175
8.6 【實(shí)例13】導(dǎo)航設(shè)計 ............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)目名稱 ....................... 192
9.1.2 項(xiàng)目定位 ....................... 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 訂單結(jié)算頁 ................... 197
9.2.8 個人中心頁 ................... 198
9.3 項(xiàng)目設(shè)計定位 .......................198
9.3.1 設(shè)計風(fēng)格 ....................... 199
9.3.2 顏色定位 ....................... 199
9.3.3 字體大小選擇 ............... 199
9.4 優(yōu)選網(wǎng)App的設(shè)計優(yōu)化 .......200
9.4.1 啟動圖標(biāo) ....................... 200
9.4.2 啟動頁 ........................... 200
9.4.3 引導(dǎo)頁 ........................... 201
9.4.4 首頁 ............................... 202
9.4.5 搜索頁 ........................... 207
9.4.6 搜索結(jié)果頁 ................... 208
9.4.7 商品分類頁 ................... 209
9.4.8 商品詳情頁 ................... 211
9.4.9 登錄注冊頁 ................... 212
9.4.10 購物車頁 ..................... 214
9.4.11 訂單結(jié)算頁 ................. 215
9.4.12 個人中心頁 ................. 216
9.5 優(yōu)選網(wǎng)App的標(biāo)注切圖 .......218
9.5.1 啟動圖標(biāo) ....................... 218
9.5.2 啟動頁 ........................... 219
9.5.3 引導(dǎo)頁 ........................... 219
9.5.4 首頁 ............................... 219
9.5.5 搜索頁和搜索結(jié)果頁 .... 220
9.5.6 其余頁面 ....................... 222
第10章 極速云盤項(xiàng)目 ....................... 223
10.1 項(xiàng)目概述 ............................. 224
10.1.1 項(xiàng)目名稱 ..................... 224
10.1.2 項(xiàng)目定位 ..................... 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 新建下載任務(wù) ............. 228
10.2.6 鎖定和驗(yàn)證碼 ............. 229
10.2.7 隱藏空間 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 項(xiàng)目設(shè)計定位 ..................... 231
10.3.1 設(shè)計風(fēng)格 ..................... 231
10.3.2 顏色定位 ..................... 231
10.3.3 尺寸和字體規(guī)范 ......... 231
10.4 極速云盤的設(shè)計優(yōu)化 ......... 232
10.4.1 啟動圖標(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 極速云盤的標(biāo)注切圖 .........246
10.5.1 啟動圖標(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)識智能電視 ............. 251
11.1.2 智能電視設(shè)計特點(diǎn) ..... 251
11.1.3 項(xiàng)目名稱 ..................... 253
11.1.4 項(xiàng)目定位 ..................... 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)設(shè)置 ..................... 257
11.2.8 網(wǎng)絡(luò)設(shè)置 ..................... 257
11.3 項(xiàng)目設(shè)計定位 .....................258
11.3.1 設(shè)計風(fēng)格 ..................... 258
11.3.2 顏色定位 ..................... 258
11.3.3 字體大小選擇 ............. 258
11.4 小米電視界面的設(shè)計
優(yōu)化 ...................................... 259
11.4.1 啟動頁 ......................... 259
11.4.2 首頁 ............................. 259
11.4.3 熱門推薦 ..................... 261
11.4.4 影片詳情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影視分類 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系統(tǒng)設(shè)置 ..................... 267
11.4.9 網(wǎng)絡(luò)設(shè)置 ..................... 268
11.5 小米電視界面項(xiàng)目的標(biāo)注
切圖 .....................................269
11.5.1 啟動頁 ......................... 269
11.5.2 首頁 ............................. 269
11.5.3 影片詳情和播放影片 .. 270
11.5.4 熱門推薦、影視分類和
排行榜 ......................... 272
11.5.5 系統(tǒng)設(shè)置和網(wǎng)絡(luò)設(shè)置 ... 272"
展開全部
跨平臺設(shè)計寶典 作者簡介
黑馬程序員:江蘇傳智播客教育科技股份有限公司(簡稱傳智播客)是一家專門致力于高素質(zhì)軟件開發(fā)人才培養(yǎng)的高科技公司。傳智播客致力于為企業(yè)優(yōu)選一流的人才的培訓(xùn)理念,經(jīng)過多年的教學(xué)探索及戰(zhàn)略布局,已向著綜合型職業(yè)教育集團(tuán)發(fā)展。目前,傳智播客旗下已涵蓋傳智播客IT教育培訓(xùn)、黑馬程序員訓(xùn)練營及博學(xué)谷三大子品牌。“黑馬程序員”是傳智播客旗下高端IT教育品牌。