零基礎學網頁配色

1章 色彩搭配基礎 001
1.1 認識色彩 002
1.1.1 色彩是什麼 002
1.1.2 色彩的分類 002
1.1.3 色彩的屬性 003
1.1.4 色彩在網頁中的應用 004
1.2 主題色、輔助色和點綴色 005
1.2.1 主題色 005
1.2.2 輔助色 006
1.2.3 點綴色 006
1.2.4 主題色、輔助色、點綴色的關係 007
1.3 色彩的對比 008
1.3.1 明度對比 008
1.3.2 純度對比 008
1.3.3 色相對比 009
1.3.4 面積對比 010
1.3.5 冷暖對比 010
1.4 色彩的作用 011
1.4.1 紅色 011
1.4.2 橙色 011
1.4.3 黃色 012
1.4.4 綠色 012
1.4.5 藍色 013
1.4.6 紫色 014
1.4.7 黑、白、灰 014
1.5 色彩搭配基礎 015
1.5.1 網頁配色的注意事項 015
1.5.2 基於色相的配色關係 016
1.5.3 基於色調的配色關係 016
1.5.4 配色時選擇雙色和多色組合 017
1.5.5 盡可能使用兩至三種色彩搭配 017
1.5.6 如何快速實現的配色 018

2章 網頁構成與佈局 019
2.1 網頁的構成 020
2.1.1 網頁標題 020
2.1.2 網頁的尺寸 020
2.1.3 網站的Logo 021
2.1.4 網頁頁眉 022
2.1.5 網頁頁腳 023
2.1.6 網頁導航 024
2.1.7 網頁的主體內容 024
2.2 網頁的色彩 025
2.2.1 RGB色彩模式 025
2.2.2 網絡安全色 026
2.3 網頁常用佈局方式 027
2.3.1 “國”字型佈局 027
2.3.2 拐角型佈局 027
2.3.3 封面型佈局 027
2.3.4 對稱型佈局 028
2.3.5 Flash動畫型佈局 028
2.3.6 上下框架型佈局 029
2.3.7 標題正文型佈局 029
2.4 網頁版面設計常用技巧 030
2.4.1 對比技巧 030
2.4.2 重複技巧 031
2.4.3 簡單技巧 031

3章 網頁配色與視覺印象 032
3.1 網頁配色技巧 033
3.1.1 配色原則 033
3.1.2 網頁文本配色 034
3.2 網頁風格配色 034
3.2.1 冷暖配色 035
3.2.2 白色的應用 035
3.2.3 飽和度 036
3.3 網頁配色元素 037
3.3.1 行業特徵 037
3.3.2 色彩聯想 038
3.3.3 受眾色彩偏好 039
3.3.4 生命週期配色 040
3.4 網頁佈局配色 041
3.4.1 分組和整合 041
3.4.2 對稱和平衡 042
3.4.3 強調和突出 043
3.4.4 虛實和留白 043
3.5 網頁色彩的視覺印象 044
3.5.1 熱情 044
3.5.2 兒童 044
3.5.3 華麗 045
3.5.4 女性 045
3.5.5 環保 045
3.5.6 美食 046
3.5.7 甜蜜 046

4章 色彩搭配標準 047
4.1 色彩區域 048
4.1.1 色彩區域大小 048
4.1.2 色彩區域位置 049
4.2 網頁主題配色技巧 050
4.2.1 深色系配色技巧 050
4.2.2 鄰近色配色技巧 051
4.2.3 對比色對比技巧 051
4.2.4 零度對比色 052
4.2.5 明度對比 053
4.2.6 純度對比 054
4.3 網頁元素色彩搭配 054
4.3.1 導航菜單 055
4.3.2 背景與文字 055
4.3.3 鏈接文字 056
4.3.4 Logo與網頁廣告 057
4.4 網頁頁面配色技巧 057
4.4.1 色相的概念 057
4.4.2 明度概念 058
4.4.3 近似配色 058
4.4.4 雙色漸變 059
4.5 網頁基本配色 059
4.5.1 網頁主題色 059
4.5.2 網頁背景色 060
4.5.3 網頁輔助色 060

5章 網站佈局配色 062
5.1 網站標誌配色 063
5.1.1 網站標誌配色 063
5.1.2 瀏覽器網站標誌配色 064
5.1.3 音樂網站標誌配色 064
5.1.4美容類網站標誌配色 064
5.1.5 牙醫類網站標誌配色 065
5.2 網站導航佈局配色 066
5.2.1 美妝網站導航佈局配色 066
5.2.2 教育網站導航佈局配色 067
5.2.3 兒童網站導航佈局配色 067
5.2.4 女性網站導航佈局配色 068
5.2.5 服飾網站導航佈局配色 068
5.3 網站導航欄佈局設計 069
5.3.1 頂部導航佈局設計 069
5.3.2 底部導航佈局設計 069
5.3.3 漢堡包式導航佈局設計 070
5.3.4 水平式滾動導航佈局設計 070
5.4 網站圖片配色 071
5.4.1 美食網站圖片配色 071
5.4.2 企業網站圖片配色 072
5.4.3 學校網站圖片配色 072
5.4.4 民族網站圖片配色 073
5.5 網站整體佈局配色 074
5.5.1 美食網站佈局配色 074
5.5.2 教育網站佈局配色 074
5.5.3 藝術網站佈局配色 075
5.5.4 企業網站佈局配色 076

6章 網頁交互配色 077
6.1 網頁按鈕配色 078
6.1.1 產品網頁按鈕交互的顏色搭配 078
6.1.2 服裝網頁按鈕交互的顏色搭配 079
6.1.3 文教網頁按鈕交互的顏色搭配 079
6.1.4 店舖網頁按鈕交互的顏色搭配 080
6.1.5 美食網頁按鈕交互的顏色搭配 080
6.2 頁面交互配色 081
6.2.1 單色基調頁面交互的配色搭配 081
6.2.2 汽車頁面交互的配色搭配 082
6.2.3 科技頁面交互的配色搭配 082
6.2.4 個性頁面交互的配色搭配 083
6.2.5 風景主圖頁面交互的配色搭配 084
6.3 彈出菜單配色 084
6.3.1 綜合網頁彈出菜單的顏色搭配 084
6.3.2 公司網頁彈出菜單的顏色搭配 085
6.3.3 品牌網頁彈出菜單的顏色搭配 085
6.3.4 個性網頁彈出菜單的顏色搭配 085
6.3.5 寵物網頁彈出菜單的顏色搭配 086
6.3.6 商城網頁彈出菜單的顏色搭配 086
6.3.7 動畫網頁彈出菜單的顏色搭配 087
6.4 鏈接配色 087
6.4.1 公司網頁鏈接顏色搭配  088
6.4.2 室內裝飾網頁鏈接顏色搭配  088
6.4.3 餐飲類網頁鏈接顏色搭配 089
6.4.4 數碼產品網頁鏈接顏色搭配 089

7章 常見的網站色彩搭配 090
7.1 門戶網站色彩搭配 091
7.1.1 門戶類網站配色分析 091
7.1.2 定位門戶網站主色調 092
7.1.3頭條門戶網站色彩分析 092
7.1.4 搜索框對於門戶網站的意義 093
7.1.5 文字色彩與可讀性 094
7.2 企業網站 095
7.2.1 優化企業網站的設計 096
7.2.2 企業網站的用色 096
7.2.3 企業網站色彩搭配方法 097
7.2.4 企業網站配色技巧 098
7.2.5 塑造企業網站形象 099
7.3 活動類網站 100
7.3.1 活動網站單色配色 100
7.3.2 活動網站雙色配色 101
7.3.3 活動網站多色配色 102
7.3.4 常見網站的配色方案 103
7.4 購物網站 103
7.4.1 巧用色相環色彩搭配 103
7.4.2 相似色搭配購物網站 104
7.4.3 對比色搭配購物網站 105
7.4.4 互補色搭配購物網站 106
7.5 產品展示詳情頁 106
7.5.1 產品展示詳情頁配色概述 106
7.5.2 產品展示詳情頁構圖分析 107
7.5.3 圖片創建顏色展示產品 109

8章 不同風格的網頁設計 110
8.1 視覺效果 111
8.1.1 簡約風格 111
8.1.2 整齊規整風格 111
8.1.3 網站分析——使網頁看起來美觀、整潔 112
8.1.4 設計師談——簡約是一種特殊的表達 113
8.1.5 常見色彩搭配 114
8.2 歐美風格設計 114
8.2.1 主題風格 114
8.2.2 精緻細膩 115
8.2.3 色彩解讀——頁面中純度色彩基調 115
8.2.4 設計師談——歐美風格網站的色彩搭配 116
8.2.5 常見色彩搭配 117
8.3 韓式風格設計 118
8.3.1 韓式色彩搭配 118
8.3.2 層次感設計 119
8.3.3 色彩解讀——頁面高純度和低純度色彩基調 119
8.3.4 設計師談——韓式的淡雅清新 120
8.4 日式風格設計 121
8.4.1 手繪式風格 121
8.4.2 民族式風格 122
8.4.3 網站分析——日式田園系風格 122
8.4.4 設計師談——日式風格 123
8.4.5 常見色彩搭配 124
8.5 空間感效果 125
8.5.1 空間感網頁概述 125
8.5.2 三維空間感設計 127
8.5.3 網站分析——如何創造空間感的設計作品 127
8.5.4 設計師談——打造頁面空間感 128
8.6 扁平化設計 129
8.6.1 扁平化微影 129
8.6.2 扁平化幽靈按鈕 130
8.6.3 扁平化漸變色調 131
8.6.4 扁平化圓形元素 132
8.6.5 設計師談——扁平化配色雙色搭配 133
8.7 特色風格設計 133
8.7.1 分隔符網頁 133
8.7.2 手繪網頁字體 134
8.7.3 網站欣賞——手繪網頁設計 135
8.7.4 設計師談——流行網頁設計趨勢 137

9章 不同行業的網頁色彩搭配 140
9.1 數碼科技類 141
9.1.1 軟件研發類 141
9.1.2 如何使頁面更有科技感 141
9.2 建築裝潢類 142
9.2.1 室內設計 142
9.2.2 景觀設計 143
9.3 汽車類 143
9.3.1 現代風格 143
9.3.2 尊貴風格 143
9.4 服飾類 144
9.4.1 品牌時裝網頁 144
9.4.2 年輕服裝類網頁 144
9.5類 145
9.5.1類網站風格 145
9.5.2美容類網站風格 146
9.5.3 牙醫類網站風格 146
9.5.4 心理健康類網站風格 146
9.6 食品類 147
9.6.1 寫實風格 147
9.6.2 清爽風格 147
9.7 珠寶類 148
9.7.1 優雅風格 148
9.7.2 神秘風格 148