網(wǎng)站UI設(shè)計(jì)案例教程（微課版）

第 1章 網(wǎng)站UI概述
1．1　初識(shí)網(wǎng)站UI　2
1．1．1　什么是網(wǎng)頁(yè)界面　2
1．1．2　網(wǎng)頁(yè)界面的分類　2
1．2　網(wǎng)站界面設(shè)計(jì)的特點(diǎn)與要素　6
1．2．1　網(wǎng)站界面設(shè)計(jì)的特點(diǎn)　7
1．2．2　網(wǎng)站界面設(shè)計(jì)的要素　9
1．3　網(wǎng)頁(yè)UI設(shè)計(jì)的基本元素　22
1．3．1　基本構(gòu)成元素　22
1．3．2　視聽元素　23
1．3．3　版式元素　23
1．4　網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)　24
1．4．1　扁平化風(fēng)格　24
1．4．2　3D風(fēng)格　24
1．4．3　極簡(jiǎn)風(fēng)格　25
1．4．4　無(wú)邊框風(fēng)格　25
1．4．5　插畫風(fēng)格　26
1．4．6　黑板風(fēng)格　26
1．4．7　超級(jí)頭版　26
1．5　網(wǎng)頁(yè)設(shè)計(jì)命名規(guī)范　28
1．6　課堂提問(wèn)　29
1．6．1　網(wǎng)站建設(shè)流程　29
1．6．2　什么是虛擬主機(jī)　29
1．7　本章小結(jié)　29
第　2章 網(wǎng)站UI色彩搭配
2．1　色彩的基本理解　31
2．1．1　色彩用語(yǔ)　31
2．1．2　配色　32
2．3　網(wǎng)頁(yè)中色彩的搭配　33
2．3．1　網(wǎng)頁(yè)色彩搭配基礎(chǔ)　34
2．3．2　網(wǎng)頁(yè)色彩搭配原則　36
2．4　色彩在各個(gè)領(lǐng)域中的表現(xiàn)力　38
2．4．1　綜合門戶型網(wǎng)站　38
2．4．2　娛樂(lè)休閑類網(wǎng)站　38
2．4．3　商業(yè)經(jīng)濟(jì)類網(wǎng)站　39
2．4．4　人類藝術(shù)類網(wǎng)站　39
2．4．5　政府機(jī)構(gòu)類網(wǎng)站　39
2．4．6　體育休閑類網(wǎng)站　40
2．4．7　個(gè)人網(wǎng)站　40
2．5　網(wǎng)頁(yè)色彩的編排設(shè)計(jì)　40
2．5．1　網(wǎng)頁(yè)色彩的4種功能角色　40
2．5．2　網(wǎng)頁(yè)配色的基本方法　44
2．5．3　使用基本色配色　46
2．5．4　使用多色彩配色　47
2．6　課堂提問(wèn)　48
2．6．1　在進(jìn)行網(wǎng)頁(yè)配色時(shí)，需要注意什么？　49
2．6．2　怎樣培養(yǎng)對(duì)色彩的敏感度？　49
2．6．3　使用了成功案例的配色，但感覺怪怪的？　50
2．7　本章小結(jié)　50
第3章　網(wǎng)站UI設(shè)計(jì)的板式與布局
3．1　常見的網(wǎng)頁(yè)布局方式　52
3．1．1　“國(guó)”字型　52
3．1．2　拐角型　52
3．1．3　標(biāo)題正文型　53
3．1．4　左右框架型　53
3．1．5　上下框架型　54
3．1．6　封面型　54
3．1．7　變化型　54
3．2　文字在網(wǎng)頁(yè)中的作用　55
3．2．1　明確性　55
3．3．2　易讀性　55
3．3．3　美觀性　56
3．3　網(wǎng)頁(yè)文字的設(shè)計(jì)原則　56
3．3．1　可讀性　56
3．3．2　藝術(shù)化　57
3．4　網(wǎng)頁(yè)文字的排版方式　58
3．4．1　文字排版規(guī)則　58
3．4．2　文字排版的常用手法　60
3．5　根據(jù)內(nèi)容決定布局　62
3．5．1　左側(cè)的頁(yè)面布局　62
3．5．2　水平居中的頁(yè)面布局　63
3．5．3　水平和垂直居中的頁(yè)面布局　63
3．5．4　滿屏的頁(yè)面布局　63
3．6　課堂提問(wèn)　64
3．6．1　在進(jìn)行網(wǎng)頁(yè)UI設(shè)計(jì)時(shí)，如何控制頁(yè)面的連貫性和多樣性？　64
3．6．2　頁(yè)面的分割方式對(duì)頁(yè)面有哪些影響？　64
3．7　本章小結(jié)　66
第4章　網(wǎng)站UI設(shè)計(jì)的版式與布局
4．1　網(wǎng)站中的圖像　68
4．1．1　網(wǎng)站中使用的圖片格式　68
4．1．2　網(wǎng)站中的顏色模式　69
4．2　圖章工具的使用　70
4．2．1　仿制圖章的應(yīng)用　70
操作案例　去除圖片中的水印效果　70
4．2．2　圖案圖章工具的應(yīng)用　71
4．3　修復(fù)網(wǎng)頁(yè)中的圖像　72
4．3．1　污點(diǎn)修復(fù)畫筆工具　72
操作案例　修復(fù)圖像瑕疵　72
4．3．2　修復(fù)畫筆工具　74
4．3．3　修補(bǔ)工具　74
4．3．4　內(nèi)容感知移動(dòng)工具　75
4．4　自動(dòng)調(diào)整圖像色彩　75
4．4．1　自動(dòng)色調(diào)　76
4．4．2　自動(dòng)對(duì)比度　76
4．4．3　自動(dòng)顏色　76
4．5　手動(dòng)調(diào)整圖像色彩　77
4．4．1　亮度/對(duì)比度　77
操作案例　調(diào)整網(wǎng)頁(yè)中圖像亮度　77
4．4．2　色階　80
4．4．3　曲線　81
操作案例　執(zhí)行“曲線”命令調(diào)整圖像　81
4．4．4　自然飽和度　84
操作實(shí)例　制作炫彩展示圖　84
4．4．5　色相/飽和度　87
4．4．6　陰影/高光　87
4．6　填充和調(diào)整圖層　88
4．6．1　純色填充圖層　88
4．6．2　漸變填充圖層　88
4．6．3　圖案填充圖層　89
4．7　批處理　89
4．7．1　動(dòng)作　90
4．7．2　自定義動(dòng)作　90
4．8　課堂提問(wèn)　90
4．8．1　如何提高圖像清晰度？　90
4．8．2　如何快速處理掃描圖像　91
4．9　本章小結(jié)　91
第5章　網(wǎng)站圖標(biāo)的設(shè)計(jì)
5．1　認(rèn)識(shí)網(wǎng)站圖標(biāo)　93
5．1．1　圖標(biāo)的概述　93
5．1．2　網(wǎng)頁(yè)圖標(biāo)應(yīng)用　93
操作案例　設(shè)計(jì)簡(jiǎn)約風(fēng)格網(wǎng)站圖標(biāo)　94
5．2　網(wǎng)站圖標(biāo)設(shè)計(jì)原則　100
5．2．1　可識(shí)別性　100
5．2．2　風(fēng)格統(tǒng)一性　100
5．2．3　與環(huán)境協(xié)調(diào)　101
5．2．4　創(chuàng)意性　101
操作案例　設(shè)計(jì)水晶質(zhì)感圖標(biāo)　101
5．3　網(wǎng)站按鈕的特點(diǎn)　111
5．3．1　易用性　111
5．3．2　可操作性　112
5．3．3　動(dòng)態(tài)效果　112
操作案例　設(shè)計(jì)網(wǎng)站個(gè)性按鈕　113
5．4　網(wǎng)站按鈕的表現(xiàn)形式　117
5．4．1　提交功能按鈕　117
5．4．2　超鏈接圖片按鈕　118
操作案例　設(shè)計(jì)網(wǎng)站下載按鈕　118
5．5　課堂提問(wèn)　124
5．5．1　圖標(biāo)和按鈕的作用是什么？　124
5．5．2　網(wǎng)頁(yè)中常用的圖形格式是什么？　124
5．6　本章小結(jié)　125
第6章　網(wǎng)站導(dǎo)航設(shè)計(jì)
6．1　網(wǎng)站導(dǎo)航概述　127
6．2　網(wǎng)站導(dǎo)航的作用　127
6．3　網(wǎng)站導(dǎo)航的設(shè)計(jì)標(biāo)準(zhǔn)　127
6．4　網(wǎng)站導(dǎo)航的表現(xiàn)形式　127
6．4．1　標(biāo)簽形式　127
6．4．2　按鈕形式　128
6．4．3　彈出菜單形式　128
6．4．4　無(wú)邊框形式　128
6．4．5　Flash形式　129
6．4．6　多導(dǎo)航系統(tǒng)形式　129
操作案例　繪制女裝網(wǎng)站導(dǎo)航條　129
6．5　網(wǎng)站導(dǎo)航位置　132
6．5．1　布局在網(wǎng)頁(yè)頂部　133
6．5．2　布局在網(wǎng)頁(yè)底部　133
6．5．3　布局在網(wǎng)頁(yè)左側(cè)　134
操作案例　繪制網(wǎng)站左側(cè)導(dǎo)航　135
6．5．4　布局在網(wǎng)頁(yè)右側(cè)　138
6．5．5　布局在網(wǎng)頁(yè)中心　139
6．6　網(wǎng)站導(dǎo)航的視覺風(fēng)格　139
6．6．1　規(guī)矩的導(dǎo)航　140
6．6．2　另類的導(dǎo)航　140
6．6．3　卡通的導(dǎo)航　140
6．6．4　醒目的導(dǎo)航　141
6．6．5　形象的導(dǎo)航　141
6．6．6　流動(dòng)的導(dǎo)航　141
6．6．7　活躍的導(dǎo)航　142
6．6．8　大氣的導(dǎo)航　142
6．6．9　古樸的導(dǎo)航　142
實(shí)例　繪制精致導(dǎo)航條　143
6．7　專家支招　147
6．7．1　導(dǎo)航條的設(shè)計(jì)原則是什么　147
6．7．2　交互式導(dǎo)航的優(yōu)勢(shì)和劣勢(shì)是什么　147
6．8　本章小結(jié)　147
第7章　網(wǎng)站文字與廣告設(shè)計(jì)
7．1　文字在網(wǎng)頁(yè)界面中的作用　149
7．2　網(wǎng)站界面中文字設(shè)計(jì)要求　149
7．2．1　形式適合　149
7．2．2　信息明確　150
7．2．3　容易閱讀　150
7．2．4　表現(xiàn)美觀　150
7．2．4　創(chuàng)新表現(xiàn)手法　151
操作案例　設(shè)計(jì)網(wǎng)站標(biāo)題文字　151
7．3　網(wǎng)頁(yè)文字的排版設(shè)計(jì)　157
7．3．1　對(duì)比形式法則　157
7．3．2　統(tǒng)一與協(xié)調(diào)　159
7．3．3　平衡　160
7．3．4　節(jié)奏與韻律　160
7．3．5　視覺誘導(dǎo)　160
操作案例　設(shè)計(jì)網(wǎng)站頁(yè)面立體標(biāo)題　161
7．4　網(wǎng)站廣告的特點(diǎn)　169
7．5　網(wǎng)站廣告的常見類型　169
7．5．1　文字廣告　169
7．5．2　橫幅廣告　170
7．5．3　對(duì)聯(lián)廣告　170
7．5．4　漂浮廣告　171
7．5．5　彈出廣告　171
操作案例　設(shè)計(jì)網(wǎng)站宣傳廣告　171
7．6　課堂提問(wèn)　178
7．6．1　文字排版設(shè)計(jì)在網(wǎng)站界面中起到的作用是什么？　178
7．6．2　網(wǎng)站廣告的表現(xiàn)形式有哪些？　178
7．7　本章小結(jié)　178
第8章　PC端網(wǎng)頁(yè)UI設(shè)計(jì)
8．1　PC端網(wǎng)頁(yè)和移動(dòng)端網(wǎng)頁(yè)的不同　181
8．1．1　操作方式不同　181
8．1．2　屏幕尺寸不同　181
8．1．3　網(wǎng)絡(luò)環(huán)境不同　181
8．1．4　傳感器不同　181
8．1．5　使用場(chǎng)景與使用時(shí)間　181
8．1．6　軟件迭代時(shí)間以及更新頻次　181
8．2　制作網(wǎng)站登錄界面　182
8．2．1　制作思路分析　182
8．2．2　色彩分析　182
操作案例　設(shè)計(jì)登陸界面背景　182
操作案例　設(shè)計(jì)登陸界面標(biāo)題　186
操作案例　設(shè)計(jì)登錄界面按鈕和文本框　189
操作案例　頁(yè)面切圖輸出　193
8．3　制作時(shí)尚簡(jiǎn)潔電子商務(wù)網(wǎng)站界面　196
8．3．1　制作思路分析　196
8．3．2　色彩分析　196
操作案例　設(shè)計(jì)導(dǎo)航與索引菜單　196
操作案例　設(shè)計(jì)網(wǎng)站界面背景　199
操作案例　設(shè)計(jì)界面主體與版底信息　203
操作案例　網(wǎng)頁(yè)界面切片輸出　208
8．4　課堂提問(wèn)　211
8．4．1　PC端網(wǎng)頁(yè)尺寸有哪些規(guī)范？　211
8．4．2　如何保證頁(yè)面在不同分辨率顯示器中的顯示效果？　212
8．5　本章小結(jié)　212
第9章　移動(dòng)APP界面設(shè)計(jì)
9．1　移動(dòng)APP界面設(shè)計(jì)基礎(chǔ)　214
9．1．1　了解APP應(yīng)用平臺(tái)　214
9．1．2　APP的開發(fā)語(yǔ)言　214
9．1．3　移動(dòng)APP的優(yōu)勢(shì)　215
9．2　移動(dòng)APP UI與PC端UI的區(qū)別　215
9．3　iOS系統(tǒng)界面設(shè)計(jì)　216
9．3．1　iOS系統(tǒng)概述　216
9．3．2　iOS系統(tǒng)的界面元素　217
9．3．3　iOS系統(tǒng)界面設(shè)計(jì)規(guī)范　223
9．4　設(shè)計(jì)iOS系統(tǒng)音樂(lè)APP界面　224
9．4．1　制作思路分析　225
9．4．2　色彩分析　225
9．5　Android系統(tǒng)界面設(shè)計(jì)　231
9．5．1　Android系統(tǒng)的界面設(shè)計(jì)規(guī)范　232
9．5．2　Android系統(tǒng)用戶界面元素　232
9．5．3　操作欄　234
9．6　設(shè)計(jì)Android系統(tǒng)音樂(lè)APP界面　234
9．6．1　制作思路分析　235
9．6．2　色彩分析　235
9．7　課堂提問(wèn)　241
9．7．1　如何適配iOS設(shè)備中的圖片　241
9．7．2　如何處理Android碎片化？　241
9．8　本章小結(jié)　242