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

第 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)站界面設計的特點與要素　6
1．2．1　網(wǎng)站界面設計的特點　7
1．2．2　網(wǎng)站界面設計的要素　9
1．3　網(wǎng)頁UI設計的基本元素　22
1．3．1　基本構成元素　22
1．3．2　視聽元素　23
1．3．3　版式元素　23
1．4　網(wǎng)頁風格設計　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)頁設計命名規(guī)范　28
1．6　課堂提問　29
1．6．1　網(wǎng)站建設流程　29
1．6．2　什么是虛擬主機　29
1．7　本章小結　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)頁色彩搭配基礎　34
2．3．2　網(wǎng)頁色彩搭配原則　36
2．4　色彩在各個領域中的表現(xiàn)力　38
2．4．1　綜合門戶型網(wǎng)站　38
2．4．2　娛樂休閑類網(wǎng)站　38
2．4．3　商業(yè)經濟類網(wǎng)站　39
2．4．4　人類藝術類網(wǎng)站　39
2．4．5　政府機構類網(wǎng)站　39
2．4．6　體育休閑類網(wǎng)站　40
2．4．7　個人網(wǎng)站　40
2．5　網(wǎng)頁色彩的編排設計　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　本章小結　50
第3章　網(wǎng)站UI設計的板式與布局
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)頁文字的設計原則　56
3．3．1　可讀性　56
3．3．2　藝術化　57
3．4　網(wǎng)頁文字的排版方式　58
3．4．1　文字排版規(guī)則　58
3．4．2　文字排版的常用手法　60
3．5　根據(jù)內容決定布局　62
3．5．1　左側的頁面布局　62
3．5．2　水平居中的頁面布局　63
3．5．3　水平和垂直居中的頁面布局　63
3．5．4　滿屏的頁面布局　63
3．6　課堂提問　64
3．6．1　在進行網(wǎng)頁UI設計時，如何控制頁面的連貫性和多樣性？　64
3．6．2　頁面的分割方式對頁面有哪些影響？　64
3．7　本章小結　66
第4章　網(wǎng)站UI設計的版式與布局
4．1　網(wǎng)站中的圖像　68
4．1．1　網(wǎng)站中使用的圖片格式　68
4．1．2　網(wǎng)站中的顏色模式　69
4．2　圖章工具的使用　70
4．2．1　仿制圖章的應用　70
操作案例　去除圖片中的水印效果　70
4．2．2　圖案圖章工具的應用　71
4．3　修復網(wǎng)頁中的圖像　72
4．3．1　污點修復畫筆工具　72
操作案例　修復圖像瑕疵　72
4．3．2　修復畫筆工具　74
4．3．3　修補工具　74
4．3．4　內容感知移動工具　75
4．4　自動調整圖像色彩　75
4．4．1　自動色調　76
4．4．2　自動對比度　76
4．4．3　自動顏色　76
4．5　手動調整圖像色彩　77
4．4．1　亮度/對比度　77
操作案例　調整網(wǎng)頁中圖像亮度　77
4．4．2　色階　80
4．4．3　曲線　81
操作案例　執(zhí)行“曲線”命令調整圖像　81
4．4．4　自然飽和度　84
操作實例　制作炫彩展示圖　84
4．4．5　色相/飽和度　87
4．4．6　陰影/高光　87
4．6　填充和調整圖層　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　本章小結　91
第5章　網(wǎng)站圖標的設計
5．1　認識網(wǎng)站圖標　93
5．1．1　圖標的概述　93
5．1．2　網(wǎng)頁圖標應用　93
操作案例　設計簡約風格網(wǎng)站圖標　94
5．2　網(wǎng)站圖標設計原則　100
5．2．1　可識別性　100
5．2．2　風格統(tǒng)一性　100
5．2．3　與環(huán)境協(xié)調　101
5．2．4　創(chuàng)意性　101
操作案例　設計水晶質感圖標　101
5．3　網(wǎng)站按鈕的特點　111
5．3．1　易用性　111
5．3．2　可操作性　112
5．3．3　動態(tài)效果　112
操作案例　設計網(wǎng)站個性按鈕　113
5．4　網(wǎng)站按鈕的表現(xiàn)形式　117
5．4．1　提交功能按鈕　117
5．4．2　超鏈接圖片按鈕　118
操作案例　設計網(wǎng)站下載按鈕　118
5．5　課堂提問　124
5．5．1　圖標和按鈕的作用是什么？　124
5．5．2　網(wǎng)頁中常用的圖形格式是什么？　124
5．6　本章小結　125
第6章　網(wǎng)站導航設計
6．1　網(wǎng)站導航概述　127
6．2　網(wǎng)站導航的作用　127
6．3　網(wǎng)站導航的設計標準　127
6．4　網(wǎng)站導航的表現(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　多導航系統(tǒng)形式　129
操作案例　繪制女裝網(wǎng)站導航條　129
6．5　網(wǎng)站導航位置　132
6．5．1　布局在網(wǎng)頁頂部　133
6．5．2　布局在網(wǎng)頁底部　133
6．5．3　布局在網(wǎng)頁左側　134
操作案例　繪制網(wǎng)站左側導航　135
6．5．4　布局在網(wǎng)頁右側　138
6．5．5　布局在網(wǎng)頁中心　139
6．6　網(wǎng)站導航的視覺風格　139
6．6．1　規(guī)矩的導航　140
6．6．2　另類的導航　140
6．6．3　卡通的導航　140
6．6．4　醒目的導航　141
6．6．5　形象的導航　141
6．6．6　流動的導航　141
6．6．7　活躍的導航　142
6．6．8　大氣的導航　142
6．6．9　古樸的導航　142
實例　繪制精致導航條　143
6．7　專家支招　147
6．7．1　導航條的設計原則是什么　147
6．7．2　交互式導航的優(yōu)勢和劣勢是什么　147
6．8　本章小結　147
第7章　網(wǎng)站文字與廣告設計
7．1　文字在網(wǎng)頁界面中的作用　149
7．2　網(wǎng)站界面中文字設計要求　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
操作案例　設計網(wǎng)站標題文字　151
7．3　網(wǎng)頁文字的排版設計　157
7．3．1　對比形式法則　157
7．3．2　統(tǒng)一與協(xié)調　159
7．3．3　平衡　160
7．3．4　節(jié)奏與韻律　160
7．3．5　視覺誘導　160
操作案例　設計網(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
操作案例　設計網(wǎng)站宣傳廣告　171
7．6　課堂提問　178
7．6．1　文字排版設計在網(wǎng)站界面中起到的作用是什么？　178
7．6．2　網(wǎng)站廣告的表現(xiàn)形式有哪些？　178
7．7　本章小結　178
第8章　PC端網(wǎng)頁UI設計
8．1　PC端網(wǎng)頁和移動端網(wǎng)頁的不同　181
8．1．1　操作方式不同　181
8．1．2　屏幕尺寸不同　181
8．1．3　網(wǎng)絡環(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
操作案例　設計登陸界面背景　182
操作案例　設計登陸界面標題　186
操作案例　設計登錄界面按鈕和文本框　189
操作案例　頁面切圖輸出　193
8．3　制作時尚簡潔電子商務網(wǎng)站界面　196
8．3．1　制作思路分析　196
8．3．2　色彩分析　196
操作案例　設計導航與索引菜單　196
操作案例　設計網(wǎng)站界面背景　199
操作案例　設計界面主體與版底信息　203
操作案例　網(wǎng)頁界面切片輸出　208
8．4　課堂提問　211
8．4．1　PC端網(wǎng)頁尺寸有哪些規(guī)范？　211
8．4．2　如何保證頁面在不同分辨率顯示器中的顯示效果？　212
8．5　本章小結　212
第9章　移動APP界面設計
9．1　移動APP界面設計基礎　214
9．1．1　了解APP應用平臺　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)界面設計　216
9．3．1　iOS系統(tǒng)概述　216
9．3．2　iOS系統(tǒng)的界面元素　217
9．3．3　iOS系統(tǒng)界面設計規(guī)范　223
9．4　設計iOS系統(tǒng)音樂APP界面　224
9．4．1　制作思路分析　225
9．4．2　色彩分析　225
9．5　Android系統(tǒng)界面設計　231
9．5．1　Android系統(tǒng)的界面設計規(guī)范　232
9．5．2　Android系統(tǒng)用戶界面元素　232
9．5．3　操作欄　234
9．6　設計Android系統(tǒng)音樂APP界面　234
9．6．1　制作思路分析　235
9．6．2　色彩分析　235
9．7　課堂提問　241
9．7．1　如何適配iOS設備中的圖片　241
9．7．2　如何處理Android碎片化？　241
9．8　本章小結　242