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

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