怎樣才能設(shè)計(jì)出與眾不同的漂亮網(wǎng)頁呢？一個(gè)優(yōu)秀的網(wǎng)頁除了有合理的版式、恰當(dāng)?shù)膬?nèi)容之外，精美的色彩搭配也是優(yōu)秀的網(wǎng)頁必不可少的要素。在網(wǎng)絡(luò)世界中，人們不再局限于簡(jiǎn)單的文字與圖片的組合，而是更加追求網(wǎng)頁的美觀與舒適。布局版式風(fēng)格特色鮮明，并有與網(wǎng)站主題相得益彰的配色方案，是決定網(wǎng)站成功與否的重要因素。所以網(wǎng)頁設(shè)計(jì)者不僅要掌握基本的網(wǎng)頁制作技術(shù)，還需要掌握有關(guān)頁面布局風(fēng)格設(shè)計(jì)及色彩搭配等方面的知識(shí)和技巧，才能成為一名優(yōu)秀的網(wǎng)頁設(shè)計(jì)師。
本書主要內(nèi)容
本書在講解版式布局和網(wǎng)頁配色原理的基礎(chǔ)之上，采用了大量國內(nèi)外網(wǎng)站的配色成功案例進(jìn)行實(shí)戰(zhàn)分析。幫助讀者在鑒賞過程中逐步掌握不同情況下網(wǎng)頁配色的規(guī)律與技巧，進(jìn)而成為網(wǎng)頁設(shè)計(jì)的行家里手。本書共11章。
第1章網(wǎng)頁設(shè)計(jì)入門基礎(chǔ)，講解網(wǎng)頁設(shè)計(jì)的原則、什么才是好的網(wǎng)頁設(shè)計(jì)、好的網(wǎng)頁設(shè)計(jì)是怎樣做出來的、色彩在網(wǎng)頁設(shè)計(jì)中的重要性。
第2~4章頁面的布局與創(chuàng)意風(fēng)格，講述網(wǎng)站布局的基本元素、網(wǎng)站頁面布局方法、常見的版面布局形式、網(wǎng)站頁面的視覺元素文字、圖片和導(dǎo)航的設(shè)計(jì)、網(wǎng)站頁面創(chuàng)意的方法和風(fēng)格。
第5~8章介紹色彩的基礎(chǔ)知識(shí)、常用色彩處理手法、網(wǎng)頁配色標(biāo)準(zhǔn)與技巧、主色、輔色、點(diǎn)綴色。幫助讀者掌握最基本的理論，為系統(tǒng)學(xué)習(xí)網(wǎng)頁配色知識(shí)打好基礎(chǔ)。
第9章基本配色搭配，介紹常見的配色搭配方法，詳解配色方案，供讀者即學(xué)即用。
第10章網(wǎng)站色相與配色，重點(diǎn)介紹不同色彩紅、橙、黃、綠、青、藍(lán)、紫、黑、灰的配色方案，和適用的網(wǎng)站分析，同時(shí)提供經(jīng)典案例，對(duì)其進(jìn)行解析。
第11章各類網(wǎng)站設(shè)計(jì)與配色案例解析，介紹18類不同網(wǎng)站的特點(diǎn)、網(wǎng)頁精彩配色
案例。把理論融入到設(shè)計(jì)中，既可鍛煉網(wǎng)頁設(shè)計(jì)者對(duì)網(wǎng)頁設(shè)計(jì)的分析能力和審美能力，又能夠激發(fā)出網(wǎng)頁設(shè)計(jì)者的創(chuàng)意與靈感，使網(wǎng)頁設(shè)計(jì)者能夠很好地掌握網(wǎng)頁配色在設(shè)計(jì)中的應(yīng)用要點(diǎn)。
本書主要特點(diǎn)
●通過本書，可以系統(tǒng)地學(xué)習(xí)網(wǎng)站色彩知識(shí)，掌握網(wǎng)站色彩搭配技巧，提升網(wǎng)站色彩運(yùn)用理念。讀者也可以將它作為一本字典式的工具書。
●緊跟當(dāng)今最前衛(wèi)的色彩流行趨勢(shì)。本書展示了最時(shí)尚的網(wǎng)頁設(shè)計(jì)風(fēng)格，提供了最實(shí)用的設(shè)計(jì)版式和最前衛(wèi)的配色經(jīng)驗(yàn)，拓展讀者的創(chuàng)意空間。強(qiáng)化對(duì)視覺心理的分析能力，把握設(shè)計(jì)網(wǎng)頁與色彩心理表現(xiàn)之間的關(guān)系，發(fā)揮讀者的視覺審美能力和藝術(shù)鑒賞能力。
●本書通過分析不同類型網(wǎng)站的特點(diǎn)，并針對(duì)不同的網(wǎng)站主題來合理布置色彩，有針對(duì)性地使用色彩來體現(xiàn)網(wǎng)站的特色，使讀者快速領(lǐng)會(huì)配色要訣。
●通過案例培養(yǎng)讀者的實(shí)際操作能力，將理論與實(shí)際相結(jié)合，注重讀者思維、方法、技能的多向性，及創(chuàng)造性思維能力的培養(yǎng)，讓讀者在獲得知識(shí)和提高能力上同步發(fā)展。
●提供最豐富的配色方案和版式設(shè)計(jì)方案。顏色搭配得當(dāng)，網(wǎng)頁就成功了一半，再搭配合理的版式設(shè)計(jì)，使網(wǎng)頁更成功。
●本書通過優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品，以多個(gè)角度、多個(gè)案例的結(jié)合，為讀者的實(shí)務(wù)設(shè)計(jì)提供新的靈感和創(chuàng)意點(diǎn)。在開闊讀者眼界的同時(shí)，結(jié)合理論進(jìn)行講解，幫助讀者全面地掌握網(wǎng)站設(shè)計(jì)的精髓。
本書作者
本書由上海工程技術(shù)大學(xué)鐵鐘編寫，由上海市設(shè)計(jì)學(xué)IV類高峰學(xué)科項(xiàng)目-包裝文化與品牌研究團(tuán)隊(duì)資助，另外參加編寫的還有王彩梅、程振宏、馮雷雷、晁輝、陳石送、何琛、吳秀紅、王冬霞、何本軍、喬海麗、鄧仰偉、孫雷杰、孫文記、何立、倪慶軍、趙良濤、徐曦、劉桂香、葛俊科、葛俊彬等。在編寫本書的過程中，我們以科學(xué)、嚴(yán)謹(jǐn)?shù)膽B(tài)度，力求精益求精，但書中不足之處在所難免，歡迎廣大讀者批評(píng)指正。
2017年6月
作者
第1章 網(wǎng)頁設(shè)計(jì)入門
1.1 網(wǎng)頁設(shè)計(jì)的原則 / 2
1.1.1 了解用戶需要 / 2
1.1.2 內(nèi)容與形式的統(tǒng)一 / 2
1.1.3 主題鮮明 / 4
1.1.4 易用性 / 4
1.1.5 整體統(tǒng)一 / 6
1.1.6 對(duì)比性 / 7
1.2 網(wǎng)頁設(shè)計(jì)的定位 / 7
1.2.1 什么才是好的網(wǎng)頁設(shè)計(jì) / 7
1.2.2 怎樣做好網(wǎng)頁設(shè)計(jì) / 8
1.3 色彩在網(wǎng)頁設(shè)計(jì)中的重要性 / 11
第2章 網(wǎng)站頁面的策劃與布局
2.1 網(wǎng)站欄目和頁面設(shè)計(jì)策劃/ 14
2.1.1 為什么要進(jìn)行策劃 / 14
2.1.2 網(wǎng)站的欄目策劃 / 15
2.1.3 網(wǎng)站的頁面策劃 / 16
2.2 網(wǎng)站布局的基本元素/ 17
2.2.1 網(wǎng)站Logo / 17
2.2.2 網(wǎng)站Banner / 17
2.2.3 導(dǎo)航欄 / 18
2.2.4 主體內(nèi)容 / 18
2.2.5 文本 / 19
2.2.6 圖像 / 19
2.2.7 Flash 動(dòng)畫 / 19
2.2.8 頁腳 / 20
2.2.9 廣告區(qū) / 20
2.3 版面布局設(shè)計(jì)/ 20
2.3.1 版面布局原則 / 21
2.3.2 紙上布局 / 22
2.3.3 軟件布局 / 23
2.4 常見的版面布局形式/ 23
2.4.1 “國”字型布局 / 23
2.4.2 “廠”字型布局 / 23
2.4.3 “框架”型布局 / 24
2.4.4 “封面”型布局 / 24
2.4.5 Flash 型布局 / 24
2.5 頁面排版布局趨勢(shì)/ 25
第3章 網(wǎng)站頁面的視覺元素設(shè)計(jì)
3.1 網(wǎng)頁構(gòu)成/ 28
3.1.1 點(diǎn)的應(yīng)用 / 28
3.1.2 線的應(yīng)用 / 28
3.1.3 面的應(yīng)用 / 29
3.2 頁面中的文字設(shè)計(jì)/ 29
3.2.1 文字的字體、字號(hào)、行距 / 30
3.2.2 文字的顏色 / 30
3.2.3 文字的圖形化 / 31
3.2.4 讓文字易讀 / 31
3.3 頁面中的圖像應(yīng)用/ 32
3.3.1 常見的網(wǎng)頁圖像格式 / 32
3.3.2 網(wǎng)頁中應(yīng)用圖像的注意要點(diǎn) / 33
3.3.3 讓圖片更合理 / 34
3.4 網(wǎng)站導(dǎo)航設(shè)計(jì)/ 35
3.4.1 導(dǎo)航設(shè)計(jì)的基本要求 / 35
3.4.2 全局導(dǎo)航的基礎(chǔ)要素 / 36
3.4.3 導(dǎo)航設(shè)計(jì)注意要點(diǎn) / 36
3.4.4 讓按鈕更易點(diǎn)擊 / 37
第4章 網(wǎng)站頁面創(chuàng)意和風(fēng)格
4.1 頁面設(shè)計(jì)創(chuàng)意思維/ 40
4.1.1 什么是創(chuàng)意 / 40
4.1.2 創(chuàng)意思維的原則 / 40
4.1.3 創(chuàng)意過程 / 41
4.2 創(chuàng)意的方法/ 41
4.2.1 富于聯(lián)想 / 42
4.2.2 巧用對(duì)比 / 42
4.2.3 大膽夸張 / 42
4.2.4 趣味幽默 / 43
4.2.5 善用比喻 / 43
4.2.6 以小見大 / 43
4.2.7 偶像崇拜 / 44
4.2.8 古典傳統(tǒng) / 44
4.2.9 流行時(shí)尚 / 44
4.2.10 設(shè)置懸念 / 45
4.2.11 突出人物 / 45
4.2.12 神奇夢(mèng)幻 / 45
4.2.13 綜合創(chuàng)意 / 46
4.3 網(wǎng)站頁面風(fēng)格/ 46
4.3.1 金屬風(fēng)格 / 46
4.3.2 大幅配圖 / 47
4.3.3 面板風(fēng)格 / 47
4.3.4 像素風(fēng)格 / 47
4.3.5 三維風(fēng)格 / 47
4.3.6 書報(bào)風(fēng)格 / 48
4.4 網(wǎng)頁的創(chuàng)意視覺表現(xiàn)/ 48
第5章 頁面色彩搭配基礎(chǔ)知識(shí)
5.1 色彩的原理/ 52
5.2 色彩的分類/ 52
5.2.1 無彩色 / 52
5.2.2 有彩色 / 53
5.3 色彩的三要素/ 54
5.3.1 明度 / 54
5.3.2 色相 / 55
5.3.3 純度 / 55
5.4 色彩模式/ 56
5.4.1 RGB 模式 / 56
5.4.2 CMYK 模式 / 56
5.4.3 Lab 模式 / 57
5.5 色調(diào)分析/ 57
5.5.1 純色調(diào) / 57
5.5.2 中純調(diào) / 58
5.5.3 低純調(diào) / 58
5.5.4 明灰調(diào) / 58
5.5.5 中灰調(diào) / 58
5.5.6 暗灰調(diào) / 59
5.5.7 中暗調(diào) / 59
5.5.8 深暗調(diào) / 59
第6章 常用色彩處理手法
6.1 色彩對(duì)比/ 62
6.1.1 色相對(duì)比 / 62
6.1.2 明度對(duì)比 / 67
6.1.3 純度對(duì)比 / 68
6.1.4 色彩的面積對(duì)比 / 70
6.1.5 色彩的冷暖對(duì)比 / 71
6.2 色彩的調(diào)和/ 73
6.2.1 色彩調(diào)和的原則 / 73
6.2.2 色彩調(diào)和的基本方法 / 75
6.3 色彩調(diào)和的類型/ 76
6.3.1 同類色調(diào)和 / 76
6.3.2 漸變色調(diào)和 / 77
6.3.3 對(duì)比調(diào)和 / 78
6.3.4 同一調(diào)和 / 78
6.3.5 面積調(diào)和 / 79
第7章 網(wǎng)頁配色標(biāo)準(zhǔn)與技巧
7.1 網(wǎng)頁配色安全/ 82
7.1.1 216 網(wǎng)頁安全色 / 82
7.1.2 網(wǎng)頁安全色配色辭典 / 82
7.1.3 使用各種不同的安全色調(diào)色板 / 83
7.2 網(wǎng)頁配色技巧/ 84
7.2.1 背景與文字顏色搭配 / 84
7.2.2 使用一種色彩 / 86
7.2.3 兩色搭配是用色的基礎(chǔ) / 86
7.2.4 色彩的數(shù)量 / 87
7.3 使用配色軟件/ 88
7.3.1 ColorKey Xp 軟件 / 88
7.3.2 Color Scheme Designer / 88
7.3.3 Check My Colours / 89
7.3.4 ColorJack / 89
7.3.5 Color Schemer Online v2 / 90
第8章 主色、輔助色、點(diǎn)綴色
8.1 主色的魅力/ 92
8.1.1 主色可以決定整個(gè)作品風(fēng)格 /92
8.1.2 主色的面積原理 / 92
8.1.3 區(qū)別主色的關(guān)鍵 / 94
8.2 輔助色的秘密/ 94
8.2.1 輔助色的功能 / 94
8.2.2 背景色是特殊的輔助色 / 95
8.2.3 選擇輔助色的訣竅 / 96
8.3 點(diǎn)綴色的應(yīng)用/ 96
8.3.1 點(diǎn)綴色也會(huì)影響頁面風(fēng)格 / 96
8.3.2 點(diǎn)綴色能讓頁面放光彩 / 97
第9章 常見基本配色搭配方案
9.1 配色色標(biāo)/ 100
9.2 強(qiáng)烈/ 102
9.2.1 推薦配色方案 / 102
9.2.2 配色解析 / 103
9.3 豐富/ 103
9.3.1 推薦配色方案 / 103
9.3.2 配色解析 / 105
9.4 浪漫/ 105
9.4.1 推薦配色方案 / 105
9.4.2 配色解析 / 106
9.5 奔放/ 106
9.5.1 推薦配色方案 / 107
9.5.2 配色解析 / 108
9.6 柔和 / 108
9.6.1 推薦配色方案 / 108
9.6.2 配色解析 / 109
9.7 熱情 / 109
9.7.1 推薦配色方案 / 110
9.7.2 配色解析 / 111
9.8 動(dòng)感 / 111
9.8.1 推薦配色方案 / 111
9.8.2 配色解析 / 112
9.9 高雅 / 112
9.9.1 推薦配色方案 / 113
9.9.2 配色解析 / 114
9.10 流行 / 114
9.10.1 推薦配色方案 / 114
9.10.2 配色解析 / 116
9.11 清新 / 116
9.11.1 推薦配色方案 / 116
9.11.2 配色解析 / 117
9.12 古典 / 118
9.12.1 推薦配色方案 / 118
9.12.2 配色解析 / 119
9.13 堂皇 / 119
9.13.1 推薦配色方案 / 119
9.13.2 配色解析 / 121
9.14 神奇 / 121
9.14.1 推薦配色方案 / 121
9.14.2 配色解析 / 122
9.15 職業(yè) / 122
9.15.1 推薦配色方案 / 123
9.15.2 配色解析 / 124
第10章 網(wǎng)站色相與配色
10.1 紅色系的配色/ 126
10.1.1 紅色系的分類/ 126
10.1.2 紅色適合的配色方案/ 128
10.1.3 適用紅色系的網(wǎng)站/ 130
10.2 橙色系的配色/ 131
10.2.1 橙色系的分類/ 131
10.2.2 橙色適合的配色方案/ 133
10.2.3 適用橙色系的網(wǎng)站/ 134
10.3 黃色系的配色/ 135
10.3.1 黃色系的分類/ 135
10.3.2 黃色適合的配色方案/ 137
10.3.3 適用黃色系的網(wǎng)站/ 138
10.4 紫色系的配色/ 141
10.4.1 紫色系的分類/ 141
10.4.2 紫色適合的配色方案/ 142
10.4.3 適用紫色系的網(wǎng)站/ 144
10.5 綠色系的配色/ 146
10.5.1 綠色系的分類/ 146
10.5.2 綠色適合的配色方案/ 147
10.5.3 適用綠色系的網(wǎng)站/ 149
10.6 藍(lán)色系的配色/ 151
10.6.1 藍(lán)色系的分類/ 151
10.6.2 藍(lán)色適合的配色方案/ 153
10.6.3 適用藍(lán)色系的網(wǎng)站/ 154
10.7 無彩色的配色/ 157
10.7.1 白色系的網(wǎng)站/ 157
10.7.2 灰色系的網(wǎng)站/ 157
10.7.3 黑色系的網(wǎng)站/ 157
第11章 各類網(wǎng)站設(shè)計(jì)與配色案例解析
11.1 個(gè)人網(wǎng)站/ 160
11.1.1 個(gè)人網(wǎng)站特點(diǎn)/ 160
11.1.2 頁面分析/ 160
11.1.3 網(wǎng)站配色講解/ 161
11.2 政府網(wǎng)站/ 161
11.2.1 政府網(wǎng)站的特點(diǎn)/ 161
11.2.2 頁面分析/ 163
11.2.3 網(wǎng)站配色講解/ 164
11.3 藝術(shù)網(wǎng)站/ 164
11.3.1 藝術(shù)網(wǎng)站的特點(diǎn)/ 164
11.3.2 頁面分析/ 165
11.3.3 網(wǎng)站配色講解/ 165
11.4 在線視頻網(wǎng)站/ 166
11.4.1 在線視頻網(wǎng)站的特點(diǎn)/ 166
11.4.2 頁面分析/ 166
11.4.3 網(wǎng)站配色講解/ 167
11.5 音樂網(wǎng)站/ 167
11.5.1 音樂網(wǎng)站的特點(diǎn)/ 167
11.5.2 頁面分析/ 168
11.5.3 網(wǎng)站配色講解 / 168
11.6 游戲網(wǎng)站 / 168
11.6.1 游戲網(wǎng)站的特點(diǎn) / 168
11.6.2 頁面分析 / 170
11.6.3 網(wǎng)站配色講解 / 171
11.7 婚戀交友網(wǎng)站 / 171
11.7.1 婚戀交友網(wǎng)站的特點(diǎn) / 171
11.7.2 頁面分析 / 172
11.7.3 網(wǎng)站配色講解 / 172
11.8 旅游網(wǎng)站 / 173
11.8.1 旅游網(wǎng)站的特點(diǎn) / 173
11.8.2 頁面分析 / 175
11.8.3 網(wǎng)站配色講解 / 176
11.9 醫(yī)療保健網(wǎng)站 / 176
11.9.1 醫(yī)療保健網(wǎng)站的特點(diǎn) / 176
11.9.2 頁面分析 / 177
11.9.3 網(wǎng)站配色講解 / 178
11.10 設(shè)計(jì)裝飾類網(wǎng)站 / 179
11.10.1 設(shè)計(jì)裝飾類網(wǎng)站的特點(diǎn) / 179
11.10.2 頁面分析 / 179
11.10.3 網(wǎng)站配色講解 / 180
11.11 房地產(chǎn)網(wǎng)站 / 180
11.11.1 房地產(chǎn)網(wǎng)站的特點(diǎn) / 180
11.11.2 頁面分析 / 180
11.11.3 網(wǎng)站配色講解 / 181
11.12 餐飲酒店網(wǎng)站 / 182
11.12 餐飲酒店網(wǎng)站/ 182
11.12.1 餐飲酒店網(wǎng)站的特點(diǎn)/ 182
11.12.2 頁面分析/ 182
11.12.3 網(wǎng)站配色講解/ 183
11.13 新聞網(wǎng)站/ 184
11.13.1 新聞網(wǎng)站的特點(diǎn)/ 184
11.13.2 頁面分析/ 185
11.13.3 網(wǎng)站配色講解/ 187
11.14 教育網(wǎng)站/ 188
11.14.1 教育網(wǎng)站的特點(diǎn)/ 188
11.14.2 頁面分析/ 188
11.14.3 網(wǎng)站配色講解/ 189
11.15 綜合門戶網(wǎng)站/ 189
11.15.1 綜合門戶網(wǎng)站的特點(diǎn)/ 190
11.15.2 頁面分析/ 190
11.15.3 網(wǎng)站配色講解/ 191
11.16 女裝網(wǎng)站/ 191
11.16.1 女裝網(wǎng)站的特點(diǎn)/ 191
11.16.2 頁面分析/ 192
11.16.3 網(wǎng)站配色講解/ 192
11.17 美容化妝網(wǎng)站/ 193
11.17.1 美容化妝網(wǎng)站的特點(diǎn)/ 193
11.17.2 頁面分析/ 194
11.17.3 網(wǎng)站配色講解/ 195
11.18 IT 數(shù)碼網(wǎng)站/ 196
11.18.1 IT 數(shù)碼網(wǎng)站的特點(diǎn)/ 196
11.18.2 頁面分析/ 197
11.18.3 網(wǎng)站配色講解/ 198
11.19 家居日用品網(wǎng)站/ 198
11.19.1 家居日用品網(wǎng)站的特點(diǎn)/ 198
11.19.2 頁面分析/ 199
11.19.3 網(wǎng)站配色講解/ 200
11.20 男性商品類網(wǎng)站/ 201
11.20.1 男性商品類網(wǎng)站的特點(diǎn)/ 201
11.20.2 頁面分析/ 201
11.20.3 網(wǎng)站配色講解/ 201
11.21 鞋類網(wǎng)站/ 202
11.21.1 鞋類網(wǎng)站的特點(diǎn)/ 202
11.21.2 頁面分析/ 202
11.21.3 網(wǎng)站配色講解/ 202
11.22 童裝網(wǎng)站/ 204
11.22.1 童裝網(wǎng)站的特點(diǎn)/ 204
11.22.2 頁面分析/ 204
11.22.3 網(wǎng)站配色講解/ 204
11.23 珠寶飾品網(wǎng)站/ 206
11.23.1 珠寶飾品網(wǎng)站的特點(diǎn)/ 206
11.23.2 頁面分析/ 206
11.23.3 網(wǎng)站配色講解/ 207
11.24 食品網(wǎng)站/ 207
11.24.1 食品網(wǎng)站的特點(diǎn)/ 207
11.24.2 頁面分析/ 208
11.24.3 網(wǎng)站配色講解/ 208
附錄1 各行業(yè)網(wǎng)站色彩搭配/ 209
附錄2 配色形容詞色卡/ 214
附錄3 頁面安全色/ 218
附錄4 160 種配色方案/ 221
新書資訊