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

第 1章　網(wǎng)站設計基礎
1．1　了解網(wǎng)站設計　2
1．1．1　什么是網(wǎng)站設計　2
1．1．2　網(wǎng)站設計的特點　2
1．2　網(wǎng)站設計構成元素　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)站設計原則　8
1．3．1　以用戶為中心　8
1．3．2　主題明確　9
1．3．3　視覺美觀　11
1．3．4　內(nèi)容與形式統(tǒng)一　11
1．3．5　有機的整體　12
1．4　色彩在網(wǎng)站設計中的作用　13
1．4．1　突出網(wǎng)頁主題　13
1．4．2　劃分視覺區(qū)域　14
1．4．3　吸引瀏覽者的目光　14
1．4．4　增強網(wǎng)站頁面的藝術性　14
1．5　如何設計出好的網(wǎng)站　15
1．5．1　不要主動降低自己的眼光　15
1．5．2　多嘗試新技術、新方法　15
1．6　如何提升網(wǎng)站的用戶體驗　16
1．6．1　用戶體驗包含的內(nèi)容　16
1．6．2　用戶體驗對于網(wǎng)站的重要性　18
1．6．3　網(wǎng)站如何尋求突破　19
1．6．4　提升網(wǎng)站用戶體驗　20
第　2章 網(wǎng)站頁面規(guī)劃與元素設計
2．1　網(wǎng)站欄目結(jié)構與頁面策劃　22
2．1．1　網(wǎng)站欄目結(jié)構　22
2．1．2　網(wǎng)站欄目規(guī)劃　24
2．1．3　網(wǎng)站頁面策劃　24
2．2　網(wǎng)站 Logo設計　25
2．2．1　網(wǎng)站 Logo的特點　25
2．2．2　網(wǎng)站 Logo的設計規(guī)范　26
2．2．3　網(wǎng)站 Logo的表現(xiàn)形式　28
2．2．4　實戰(zhàn)分析：設計影視 網(wǎng)站 Logo　29
2．3　網(wǎng)站圖標設計　31
2．3．1　了解網(wǎng)站圖標　31
2．3．2　網(wǎng)站圖標設計原則　31
2．3．3　網(wǎng)站圖標應用　33
2．3．4　實戰(zhàn)分析：設計簡約實用的 網(wǎng)站圖標　34
2．4　網(wǎng)站按鈕設計　36
2．4．1　網(wǎng)站按鈕的功能　36
2．4．2　如何設計出色的網(wǎng)站按鈕　38
2．4．3　實戰(zhàn)分析：設計游戲 網(wǎng)站按鈕　42
2．5　網(wǎng)站導航設計　43
2．5．1　了解網(wǎng)站導航　43
2．5．2　導航在網(wǎng)站頁面中的布局位置　45
2．5．3　網(wǎng)站導航設計的基本原則　49
2．5．4　實戰(zhàn)分析：設計汽車網(wǎng)站 導航菜單　50
2．6　網(wǎng)站廣告設計　53
2．6．1　網(wǎng)站廣告的常見類型　53
2．6．2　如何設計出色的網(wǎng)站廣告　55
2．6．3　實戰(zhàn)分析：設計家電網(wǎng)站 宣傳廣告　56
第3　章 網(wǎng)站中的圖形與文字排版設計
3．1　網(wǎng)站頁面中的文字　59
3．1．1　關于字體　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　文字排版設計常用手法　67
3．2．3　實戰(zhàn)分析：設計手機宣傳網(wǎng)站頁面　70
3．3　圖形在網(wǎng)站設計中的作用　73
3．4　網(wǎng)站圖形設計類型　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　下一張圖片預覽　79
3．5．5　實戰(zhàn)分析：設計產(chǎn)品促銷活動頁面　80
第4　章 網(wǎ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)頁布局的設計　87
4．2．2　網(wǎng)頁布局的構成原則　87
4．2．3　實戰(zhàn)分析：設計手機宣傳網(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　縱向與橫向復合型　98
4．4．4　運用固定區(qū)域的設計　99
4．4．5　實戰(zhàn)分析：設計類網(wǎng)站頁面　100
4．5　初始頁面的網(wǎng)頁布局類型　102
4．6　網(wǎng)頁布局的要點　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　點　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　實戰(zhàn)分析：設計產(chǎn)品促銷頁面　117
5．3　大眾化網(wǎng)頁布局形態(tài)　120
5．4　個性化網(wǎng)頁布局形態(tài)　122
5．5　常見網(wǎng)頁視覺風格解析　123
5．5．1　簡潔風格　123
5．5．2　極簡風格　124
5．5．3　扁平化風格　124
5．5．4　插畫風格　125
5．5．5　懷舊風格　126
5．5．6　照片風格　127
5．5．7　立體風格　128
5．5．8　大字體風格　129
5．5．9　實戰(zhàn)分析：設計企業(yè)網(wǎng)站頁面　130
第6　章 網(wǎng)頁配色基礎
6．1　色彩基礎　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　藍色　143
6．4．9　紫色　143
6．4．10　黑色　144
6．4．11　白色　144
6．4．12　灰色　144
6．4．13　實戰(zhàn)分析：設計珠寶首飾網(wǎng)站頁面　145
6．5　網(wǎng)頁配色常見問題　147
6．5．1　如何培養(yǎng)色彩的敏感度　147
6．5．2　通用配色理論是否適用　148
6．5．3　配色時應該選擇雙色還是多色組合　148
6．5．4　盡可能使用兩至三種顏色進行搭配　149
6．5．5　如何快速實現(xiàn)完美的配色　149
6．5．6　實戰(zhàn)分析：設計汽車宣傳網(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　點綴色　157
7．2　網(wǎng)頁文本配色　158
7．2．1　網(wǎng)頁與文本的配色關系　158
7．2．2　良好的網(wǎng)頁文本配色　159
7．3　網(wǎng)頁元素色彩搭配160
7．3．1　Logo 與網(wǎng)頁廣告　160
7．3．2　導航菜單　161
7．3．3　背景與文字　161
7．3．4　鏈接文字　162
7．3．5　實戰(zhàn)分析：設計咖啡館宣傳網(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　實戰(zhàn)分析：設計酒類產(chǎn)品宣傳網(wǎng)站頁面　170
7．6　如何打造成功的網(wǎng)頁配色　172
7．6．1　遵循色彩的基本原理　172
7．6．2　考慮網(wǎng)頁的特點　173
7．6．3　靈活應用配色技巧　174
7．6．4　避免配色混亂　175
7．6．5　實戰(zhàn)分析：設計產(chǎn)品宣傳網(wǎng)站頁面　176
第8　章 網(wǎng)頁配色的方法
8．1　基于色相進行配色　180
8．1．1　基于色相的配色關系　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)進行配色　183
8．2．1　基于色調(diào)的配色關系　184
8．2．2　同一色相或類似色相、類似色調(diào)配色　184
8．2．3　同一色相或類似色相、相反色調(diào)配色　185
8．3　色彩感覺在網(wǎ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　華麗感與樸實感　191
8．3．7　寧靜感與興奮感　192
8．3．8　活力感與莊重感　193
8．3．9　實戰(zhàn)分析：設計計算機產(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　實戰(zhàn)分析：設計運動鞋宣傳網(wǎng)站頁面　205
第9　章 網(wǎng)頁配色的技巧
9．1　突出主題的配色技巧　209
9．1．1　明確主題焦點　209
9．1．2　提高飽和度　209
9．1．3　增大明度差　210
9．1．4　增強色相　211
9．1．5　增強點綴色　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　實戰(zhàn)分析：設計房地產(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　清爽和風的網(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　實戰(zhàn)分析：設計清新自然的環(huán)保網(wǎng)站頁面　231
9．4　使用配色軟件進行配色　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