網(wǎng)站布局與網(wǎng)頁配色設(shè)計

第 1章　網(wǎng)站設(shè)計基礎(chǔ)
1．1　了解網(wǎng)站設(shè)計　2
1．1．1　什么是網(wǎng)站設(shè)計　2
1．1．2　網(wǎng)站設(shè)計的特點(diǎn)　2
1．2　網(wǎng)站設(shè)計構(gòu)成元素　6
1．2．1　文字　6
1．2．2　圖形符號　6
1．2．3　圖像　7
1．2．4　多媒體　7
1．2．5　色彩　7
1．3　網(wǎng)站設(shè)計原則　8
1．3．1　以用戶為中心　8
1．3．2　主題明確　9
1．3．3　視覺美觀　11
1．3．4　內(nèi)容與形式統(tǒng)一　11
1．3．5　有機(jī)的整體　12
1．4　色彩在網(wǎng)站設(shè)計中的作用　13
1．4．1　突出網(wǎng)頁主題　13
1．4．2　劃分視覺區(qū)域　14
1．4．3　吸引瀏覽者的目光　14
1．4．4　增強(qiáng)網(wǎng)站頁面的藝術(shù)性　14
1．5　如何設(shè)計出好的網(wǎng)站　15
1．5．1　不要主動降低自己的眼光　15
1．5．2　多嘗試新技術(shù)、新方法　15
1．6　如何提升網(wǎng)站的用戶體驗(yàn)　16
1．6．1　用戶體驗(yàn)包含的內(nèi)容　16
1．6．2　用戶體驗(yàn)對于網(wǎng)站的重要性　18
1．6．3　網(wǎng)站如何尋求突破　19
1．6．4　提升網(wǎng)站用戶體驗(yàn)　20
第　2章 網(wǎng)站頁面規(guī)劃與元素設(shè)計
2．1　網(wǎng)站欄目結(jié)構(gòu)與頁面策劃　22
2．1．1　網(wǎng)站欄目結(jié)構(gòu)　22
2．1．2　網(wǎng)站欄目規(guī)劃　24
2．1．3　網(wǎng)站頁面策劃　24
2．2　網(wǎng)站 Logo設(shè)計　25
2．2．1　網(wǎng)站 Logo的特點(diǎn)　25
2．2．2　網(wǎng)站 Logo的設(shè)計規(guī)范　26
2．2．3　網(wǎng)站 Logo的表現(xiàn)形式　28
2．2．4　實(shí)戰(zhàn)分析：設(shè)計影視 網(wǎng)站 Logo　29
2．3　網(wǎng)站圖標(biāo)設(shè)計　31
2．3．1　了解網(wǎng)站圖標(biāo)　31
2．3．2　網(wǎng)站圖標(biāo)設(shè)計原則　31
2．3．3　網(wǎng)站圖標(biāo)應(yīng)用　33
2．3．4　實(shí)戰(zhàn)分析：設(shè)計簡約實(shí)用的 網(wǎng)站圖標(biāo)　34
2．4　網(wǎng)站按鈕設(shè)計　36
2．4．1　網(wǎng)站按鈕的功能　36
2．4．2　如何設(shè)計出色的網(wǎng)站按鈕　38
2．4．3　實(shí)戰(zhàn)分析：設(shè)計游戲 網(wǎng)站按鈕　42
2．5　網(wǎng)站導(dǎo)航設(shè)計　43
2．5．1　了解網(wǎng)站導(dǎo)航　43
2．5．2　導(dǎo)航在網(wǎng)站頁面中的布局位置　45
2．5．3　網(wǎng)站導(dǎo)航設(shè)計的基本原則　49
2．5．4　實(shí)戰(zhàn)分析：設(shè)計汽車網(wǎng)站 導(dǎo)航菜單　50
2．6　網(wǎng)站廣告設(shè)計　53
2．6．1　網(wǎng)站廣告的常見類型　53
2．6．2　如何設(shè)計出色的網(wǎng)站廣告　55
2．6．3　實(shí)戰(zhàn)分析：設(shè)計家電網(wǎng)站 宣傳廣告　56
第3　章 網(wǎng)站中的圖形與文字排版設(shè)計
3．1　網(wǎng)站頁面中的文字　59
3．1．1　關(guān)于字體　59
3．1．2　網(wǎng)頁中常用的中文字體　59
3．1．3　字體大小　60
3．1．4　網(wǎng)頁文字使用技巧　63
3．2　網(wǎng)頁文字的排版　65
3．2．1　文字排版的易讀性規(guī)則　65
3．2．2　文字排版設(shè)計常用手法　67
3．2．3　實(shí)戰(zhàn)分析：設(shè)計手機(jī)宣傳網(wǎng)站頁面　70
3．3　圖形在網(wǎng)站設(shè)計中的作用　73
3．4　網(wǎng)站圖形設(shè)計類型　75
3．4．1　插圖　75
3．4．2　圖形符號　75
3．4．3　照片　76
3．4．4　頁面分割　77
3．4．5　立體圖形　77
3．5　網(wǎng)站圖片的排列布局形式　78
3．5．1　傳統(tǒng)矩陣展示　78
3．5．2　大小不一的矩陣展示　79
3．5．3　瀑布流展示　79
3．5．4　下一張圖片預(yù)覽　79
3．5．5　實(shí)戰(zhàn)分析：設(shè)計產(chǎn)品促銷活動頁面　80
第4　章 網(wǎng)站頁面布局與視覺風(fēng)格
4．1　了解網(wǎng)站頁面布局　85
4．1．1　網(wǎng)站頁面布局的目的　85
4．1．2　網(wǎng)站頁面布局的操作順序　86
4．2　網(wǎng)頁布局的基本方法　86
4．2．1　網(wǎng)頁布局的設(shè)計　87
4．2．2　網(wǎng)頁布局的構(gòu)成原則　87
4．2．3　實(shí)戰(zhàn)分析：設(shè)計手機(jī)宣傳網(wǎng)站頁面　88
4．3　根據(jù)整體內(nèi)容位置決定的網(wǎng)頁視覺布局　91
4．3．1　滿屏式頁面布局　91
4．3．2　兩欄式頁面布局　92
4．3．3　三欄式頁面布局　95
4．3．4　水平和垂直居中的頁面布局　96
4．4　頁面分割方向的布局方式　97
4．4．1　縱向分割　97
4．4．2　橫向分割　98
4．4．3　縱向與橫向復(fù)合型　98
4．4．4　運(yùn)用固定區(qū)域的設(shè)計　99
4．4．5　實(shí)戰(zhàn)分析：設(shè)計類網(wǎng)站頁面　100
4．5　初始頁面的網(wǎng)頁布局類型　102
4．6　網(wǎng)頁布局的要點(diǎn)　104
第5　章 網(wǎng)站頁面視覺布局形態(tài)
5．1　網(wǎng)頁功能與網(wǎng)頁形態(tài)哪個更重要　107
5．2　網(wǎng)頁布局形態(tài)的含義及情感　108
5．2．1　點(diǎn)　108
5．2．2　圓　109
5．2．3　三角形　110
5．2．4　矩形　111
5．2．5　菱形　112
5．2．6　直線　113
5．2．7　斜線　114
5．2．8　曲線　115
5．2．9　自由曲線　116
5．2．10　實(shí)戰(zhàn)分析：設(shè)計產(chǎn)品促銷頁面　117
5．3　大眾化網(wǎng)頁布局形態(tài)　120
5．4　個性化網(wǎng)頁布局形態(tài)　122
5．5　常見網(wǎng)頁視覺風(fēng)格解析　123
5．5．1　簡潔風(fēng)格　123
5．5．2　極簡風(fēng)格　124
5．5．3　扁平化風(fēng)格　124
5．5．4　插畫風(fēng)格　125
5．5．5　懷舊風(fēng)格　126
5．5．6　照片風(fēng)格　127
5．5．7　立體風(fēng)格　128
5．5．8　大字體風(fēng)格　129
5．5．9　實(shí)戰(zhàn)分析：設(shè)計企業(yè)網(wǎng)站頁面　130
第6　章 網(wǎng)頁配色基礎(chǔ)
6．1　色彩基礎(chǔ)　134
6．1．1　色彩的產(chǎn)生　134
6．1．2　光源色與物體色　135
6．2　RGB 顏色與CMYK 顏色的區(qū)別　135
6．2．1　RGB 顏色　136
6．2．2　CMYK 顏色　137
6．3　色彩的屬性　137
6．3．1　色相　137
6．3．2　明度　138
6．3．3　飽和度　138
6．3．4　色調(diào)　139
6．3．5　無彩色與有彩色　139
6．4　網(wǎng)頁配色的聯(lián)想作用　140
6．4．1　色彩聯(lián)想和心理效果　140
6．4．2　紅色　141
6．4．3　粉色　141
6．4．4　橙色　141
6．4．5　黃色　142
6．4．6　棕色　142
6．4．7　綠色　142
6．4．8　藍(lán)色　143
6．4．9　紫色　143
6．4．10　黑色　144
6．4．11　白色　144
6．4．12　灰色　144
6．4．13　實(shí)戰(zhàn)分析：設(shè)計珠寶首飾網(wǎng)站頁面　145
6．5　網(wǎng)頁配色常見問題　147
6．5．1　如何培養(yǎng)色彩的敏感度　147
6．5．2　通用配色理論是否適用　148
6．5．3　配色時應(yīng)該選擇雙色還是多色組合　148
6．5．4　盡可能使用兩至三種顏色進(jìn)行搭配　149
6．5．5　如何快速實(shí)現(xiàn)完美的配色　149
6．5．6　實(shí)戰(zhàn)分析：設(shè)計汽車宣傳網(wǎng)站頁面　150
第7　章 網(wǎng)頁元素的基本配色
7．1　網(wǎng)頁配色的基本方法　154
7．1．1　主題色　154
7．1．2　背景色　155
7．1．3　輔助色　156
7．1．4　點(diǎn)綴色　157
7．2　網(wǎng)頁文本配色　158
7．2．1　網(wǎng)頁與文本的配色關(guān)系　158
7．2．2　良好的網(wǎng)頁文本配色　159
7．3　網(wǎng)頁元素色彩搭配160
7．3．1　Logo 與網(wǎng)頁廣告　160
7．3．2　導(dǎo)航菜單　161
7．3．3　背景與文字　161
7．3．4　鏈接文字　162
7．3．5　實(shí)戰(zhàn)分析：設(shè)計咖啡館宣傳網(wǎng)站頁面　162
7．4　根據(jù)受眾群體選擇網(wǎng)頁配色　165
7．4．1　不同性別的色彩偏好　165
7．4．2　不同年齡的色彩偏好　166
7．5　根據(jù)商品銷售階段選擇網(wǎng)頁配色　168
7．5．1　新產(chǎn)品上市期的網(wǎng)頁配色　168
7．5．2　產(chǎn)品拓展期的網(wǎng)頁配色　168
7．5．3　產(chǎn)品穩(wěn)定銷售期的網(wǎng)頁配色　169
7．5．4　產(chǎn)品衰退期的網(wǎng)頁配色　169
7．5．5　實(shí)戰(zhàn)分析：設(shè)計酒類產(chǎn)品宣傳網(wǎng)站頁面　170
7．6　如何打造成功的網(wǎng)頁配色　172
7．6．1　遵循色彩的基本原理　172
7．6．2　考慮網(wǎng)頁的特點(diǎn)　173
7．6．3　靈活應(yīng)用配色技巧　174
7．6．4　避免配色混亂　175
7．6．5　實(shí)戰(zhàn)分析：設(shè)計產(chǎn)品宣傳網(wǎng)站頁面　176
第8　章 網(wǎng)頁配色的方法
8．1　基于色相進(jìn)行配色　180
8．1．1　基于色相的配色關(guān)系　180
8．1．2　相反色相、類似色調(diào)配色　181
8．1．3　相反色相、相反色調(diào)配色　181
8．1．4　漸變配色　182
8．1．5　無彩色和彩色　183
8．2　基于色調(diào)進(jìn)行配色　183
8．2．1　基于色調(diào)的配色關(guān)系　184
8．2．2　同一色相或類似色相、類似色調(diào)配色　184
8．2．3　同一色相或類似色相、相反色調(diào)配色　185
8．3　色彩感覺在網(wǎng)頁配色中的應(yīng)用　186
8．3．1　冷暖感　186
8．3．2　輕重感　188
8．3．3　軟硬感　189
8．3．4　前后感　189
8．3．5　大小感　190
8．3．6　華麗感與樸實(shí)感　191
8．3．7　寧靜感與興奮感　192
8．3．8　活力感與莊重感　193
8．3．9　實(shí)戰(zhàn)分析：設(shè)計計算機(jī)產(chǎn)品促銷廣告頁面　193
8．4　色彩對比的配色　196
8．4．1　冷暖對比　196
8．4．2　面積對比　198
8．4．3　色相對比　200
8．4．4　同時對比　204
8．4．5　連續(xù)對比　204
8．4．6　實(shí)戰(zhàn)分析：設(shè)計運(yùn)動鞋宣傳網(wǎng)站頁面　205
第9　章 網(wǎng)頁配色的技巧
9．1　突出主題的配色技巧　209
9．1．1　明確主題焦點(diǎn)　209
9．1．2　提高飽和度　209
9．1．3　增大明度差　210
9．1．4　增強(qiáng)色相　211
9．1．5　增強(qiáng)點(diǎn)綴色　212
9．1．6　抑制輔助色或背景　213
9．2　整體融合的配色技巧　214
9．2．1　接近色相　215
9．2．2　統(tǒng)一明度　216
9．2．3　接近色調(diào)　216
9．2．4　添加類似色或同類色　217
9．2．5　網(wǎng)頁產(chǎn)生穩(wěn)定感　217
9．2．6　實(shí)戰(zhàn)分析：設(shè)計房地產(chǎn)宣傳網(wǎng)站頁面　218
9．3　網(wǎng)頁配色印象　221
9．3．1　女性化的網(wǎng)站配色　221
9．3．2　男性化的網(wǎng)站配色　222
9．3．3　穩(wěn)定安靜的網(wǎng)站配色　223
9．3．4　興奮激昂的網(wǎng)站配色　224
9．3．5　輕快律動的網(wǎng)站配色　225
9．3．6　清爽和風(fēng)的網(wǎng)站配色　226
9．3．7　浪漫甜美的網(wǎng)站配色　227
9．3．8　傳統(tǒng)穩(wěn)重的網(wǎng)站配色　229
9．3．9　雍容華貴的網(wǎng)站配色　230
9．3．10　實(shí)戰(zhàn)分析：設(shè)計清新自然的環(huán)保網(wǎng)站頁面　231
9．4　使用配色軟件進(jìn)行配色　233
9．4．1　ColorKey XP 軟件　233
9．4．2　Color Scheme Designer　235
9．4．3　Check My Colours　236
9．4．4　ColorJack　236