第 1章網站設計基礎
1．1了解網站設計2
1．1．1什麼是網站設計2
1．1．2網站設計的特點2
1．2網站設素6
1．2．1文字6
1．2．2圖形符號6
1．2．3圖像7
1．2．4多媒體7
1．2．5色彩7
1．3網站設計原則8
1．3．1以用戶為中心8
1．3．2主題明確9
1．3．3視覺美觀11
1．3．4內容與形式統一11
1．3．5有機的整體12
1．4色彩在網站設計中的作用13
1．4．1突出網頁主題13
1．4．2劃分視覺區域14
1．4．3吸引瀏覽者的目光14
1．4．4增強網站頁面的藝術性14
1．5如何設計出好的網站15
1．5．1不要主動降低自己的眼光15
1．5．2多嘗試新技術、新方法15
1．6如何提升網站的用戶體驗16
1．6．1用戶體驗包含的內容16
1．6．2用戶體驗對於網站的重要性18
1．6．3網站如何尋求突破19
1．6．4提升網站用戶體驗20
第2章 網站頁面素設計
2．1網站欄目結構與頁面策劃22
2．1．1網站欄目結構22
2．1．2網站欄目規劃24
2．1．3網站頁面策劃24
2．2網站 Logo設計25
2．2．1網站 Logo的特點25
2．2．2網站 Logo的設計規範26
2．2．3網站 Logo的表現形式28
2．2．4實戰分析：設計影視 網站 Logo29
2．3網站圖標設計31
2．3．1了解網站圖標31
2．3．2網站圖標設計原則31
2．3．3網站圖標應用33
2．3．4實戰分析：設計簡約實用的 網站圖標34
2．4網站按鈕設計36
2．4．1網站按鈕的功能36
2．4．2如何設計出色的網站按鈕38
2．4．3實戰分析：設計遊戲 網站按鈕42
2．5網站導航設計43
2．5．1了解網站導航43
2．5．2導航在網站頁面中的布局位置45
2．5．3網站導航設計的基本原則49
2．5．4實戰分析：設計汽車網站 導航菜單50
2．6網站廣告設計53
2．6．1網站廣告的常見類型53
2．6．2如何設計出色的網站廣告55
2．6．3實戰分析：設計家電網站 宣傳廣告56
第3章 網站中的圖形與文字排版設計
3．1網站頁面中的文字59
3．1．1關於字體59
3．1．2網頁中常用的中文字體59
3．1．3字體大小60
3．1．4網頁文字使用技巧63
3．2網頁文字的排版65
3．2．1文字排版的易讀性規則65
3．2．2文字排版設計常用手法67
3．2．3實戰分析：設計手機宣傳網站頁面70
3．3圖形在網站設計中的作用73
3．4網站圖形設計類型75
3．4．1插圖75
3．4．2圖形符號75
3．4．3照片76
3．4．4頁面分割77
3．4．5立體圖形77
3．5網站圖片的排列布局形式78
3．5．1傳統矩陣展示78
3．5．2大小不一的矩陣展示79
3．5．3瀑布流展示79
3．5．4下一張圖片預覽79
3．5．5實戰分析：設計產品促銷活動頁面80
第4章 網站頁面布局與視覺風格
4．1了解網站頁面布局85
4．1．1網站頁面布局的目的85
4．1．2網站頁面布局的操作順序86
4．2網頁布局的基本方法86
4．2．1網頁布局的設計87
4．2．2網頁布局的構成原則87
4．2．3實戰分析：設計手機宣傳網站頁面88
4．3根據整體內容位置決定的網頁視覺布局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運用固定區域的設計99
4．4．5實戰分析：設計類網站頁面100
4．5初始頁面的網頁布局類型102
4．6網頁布局的要點104
第5章 網站頁面視覺布局形態
5．1網頁功能與網頁形態哪個更重要107
5．2網頁布局形態的含義及情感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實戰分析：設計產品促銷頁面117
5．3大眾化網頁布局形態120
5．4個性化網頁布局形態122
5．5常見網頁視覺風格解析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實戰分析：設計企業網站頁面130
第6章 網頁配色基礎
6．1色彩基礎134
6．1．1色彩的產生134
6．1．2光源色與物體色135
6．2RGB 顏色與CMYK 顏色的區別135
6．2．1RGB 顏色136
6．2．2CMYK 顏色137
6．3色彩的屬性137
6．3．1色相137
6．3．2明度138
6．3．3飽和度138
6．3．4色調139
6．3．5無彩色與有彩色139
6．4網頁配色的聯想作用140
6．4．1色彩聯想和心理效果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實戰分析：設計珠寶首飾網站頁面145
6．5網頁配色常見問題147
6．5．1如何培養色彩的敏感度147
6．5．2通用配色理論是否適用148
6．5．3配色時應該選擇雙色還是多色組合148
6．5．4盡可能使用兩至三種顏色進行搭配149
6．5．5如何快速實現完美的配色149
6．5．6實戰分析：設計汽車宣傳網站頁面150
第7章素的基本配色
7．1網頁配色的基本方法154
7．1．1主題色154
7．1．2背景色155
7．1．3輔助色156
7．1．4點綴色157
7．2網頁文本配色158
7．2．1網頁與文本的配色關繫158
7．2．2良好的網頁文本配色159
7．3素色彩搭配160
7．3．1Logo 與網頁廣告160
7．3．2導航菜單161
7．3．3背景與文字161
7．3．4鏈接文字162
7．3．5實戰分析：設計咖啡館宣傳網站頁面162
7．4根據受眾群體選擇網頁配色165
7．4．1不同性別的色彩偏好165
7．4．2不同年齡的色彩偏好166
7．5根據商品銷售階段選擇網頁配色168
7．5．1新產品上市期的網頁配色168
7．5．2產品拓展期的網頁配色168
7．5．3產品穩定銷售期的網頁配色169
7．5．4產品衰退期的網頁配色169
7．5．5實戰分析：設計酒類產品宣傳網站頁面170
7．6如何打造成功的網頁配色172
7．6．1遵循色彩的基本原理172
7．6．2考慮網頁的特點173
7．6．3靈活應用配色技巧174
7．6．4避免配色混亂175
7．6．5實戰分析：設計產品宣傳網站頁面176
第8章 網頁配色的方法
8．1基於色相進行配色180
8．1．1基於色相的配色關繫180
8．1．2相反色相、類似色調配色181
8．1．3相反色相、相反色調配色181
8．1．4漸變配色182
8．1．5無彩色和彩色183
8．2基於色調進行配色183
8．2．1基於色調的配色關繫184
8．2．2同一色相或類似色相、類似色調配色184
8．2．3同一色相或類似色相、相反色調配色185
8．3色彩感覺在網頁配色中的應用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實戰分析：設計計算機產品促銷廣告頁面193
8．4色彩對比的配色196
8．4．1冷暖對比196
8．4．2面積對比198
8．4．3色相對比200
8．4．4同時對比204
8．4．5連續對比204
8．4．6實戰分析：設計運動鞋宣傳網站頁面205
第9章 網頁配色的技巧
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統一明度216
9．2．3接近色調216
9．2．4添加類似色或同類色217
9．2．5網頁產生穩定感217
9．2．6實戰分析：設計房地產宣傳網站頁面218
9．3網頁配色印像221
9．3．1女性化的網站配色221
9．3．2男性化的網站配色222
9．3．3穩定安靜的網站配色223
9．3．4興奮激昂的網站配色224
9．3．5輕快律動的網站配色225
9．3．6清爽和風的網站配色226
9．3．7浪漫甜美的網站配色227
9．3．8傳統穩重的網站配色229
9．3．9雍容華貴的網站配色230
9．3．10實戰分析：設計清新自然的環保網站頁面231
9．4使用配色軟件進行配色233
9．4．1ColorKey XP 軟件233
9．4．2Color Scheme Designer235
9．4．3Check My Colours236
9．4．4ColorJack236
