網頁設計配色從入門到精通

《網頁設計配色從入門到精通》是2018年上海交通大學出版社出版的一本圖書,作者是瞿穎健。

基本介紹

基本信息,內容簡介,目錄,

基本信息

作者:瞿穎健 主編
出版日期:2018年1月
書號:978-7-122-30364-6
開本:16K 787×1092 1/16
裝幀:平
版次:1版1次
頁數:195頁

內容簡介

本書是一本講解網頁設計和配色的圖書,內容涉及色彩達人必學知識、網頁設計的基礎知識、了解基礎色、網頁布局技巧與色彩、網頁色彩的視覺印象、不同類型的網頁色彩搭配、不同行業的網頁色彩搭配、不同風格的網頁設計、綜合網頁配色。
本書章節安排合理,理論紮實、案例精彩,全書設定了“動手練習”、“設計師談”、“配色方案”、“猜你喜歡”等特色模組。
書中大量的國內外優秀案例和作品賞析,均為國際較新潮和流行的設計作品,既有經典的理論分析,又有豐富的思路拓展,案例中還有精準的色彩數值和設計剖析,非常值得讀者借鑑和學習。
本書是網頁設計、版式設計、海報設計、平面設計、廣告設計、書刊設計、展示設計等專業必備的速查工具書,也可作為各大培訓機構、大中專院校師生的理論參考書。

目錄

第1章 色彩達人必學知識 |1
1.1 認識色彩 |2
1.1.1 色彩是什麼 |2
1.1.2 色彩能夠做什麼 |2
1.1.3 色彩的屬性 |4
1.2 主色、輔助色、點綴色的關係 |8
1.2.1 主色 |8
1.2.2 輔助色 |8
1.2.3 點綴色 |9
1.2.4 設計師談——畫龍點睛的點綴色 |9
1.2.5 動手練習——視覺中心的主色秘訣 |10
1.3 色彩的對比 |11
1.3.1 明度對比 |12
1.3.2 純度對比 |12
1.3.3 色相對比 |13
1.3.4 面積對比 |15
1.3.5 冷暖對比 |16
第2章 網頁設計的基礎知識 |17
2.1 什麼是網頁 |18
2.2 網頁的構成 |18
2.2.1 網頁簡介 |18
2.2.2 網頁標題 |19
2.2.3 網站的LOGO |20
2.2.4 網頁頁眉 |20
2.2.5 網頁頁腳 |21
2.2.6 網頁導航 |21
2.2.7 網頁的主體內容 |21
2.3 網頁的尺寸 |22
2.4 網頁的色彩  |23
2.4.1 RGB色彩模式 |23
2.4.2 HTML語言對色彩的描述 |24
2.4.3 網路安全色 |25
第3章 了解基礎色 |27
3.1 紅 |29
3.1.1 淺談紅色 |29
3.1.2 套用實例 |30
3.1.3 常見色分析 |30
3.1.4 猜你喜歡 |31
3.2 橙 |32
3.2.1 淺談橙色 |32
3.2.2 套用實例 |33
3.2.3 常見色分析 |33
3.2.4 猜你喜歡 |34
3.3 黃 |35
3.3.1 淺談黃色 |35
3.3.2 套用實例 |36
3.3.3 常見色分析 |36
3.3.4 猜你喜歡 |37
3.4 綠 |38
3.4.1 淺談綠色 |38
3.4.2 套用實例 |39
3.4.3 常見色分析 |39
3.4.4 猜你喜歡 |40
3.5 青 |41
3.5.1 淺談青色 |41
3.5.2 套用實例 |42
3.5.3 常見色分析 |42
3.5.4 猜你喜歡 |43
3.6 藍 |44
3.6.1 淺談藍色 |44
3.6.2 套用實例 |45
3.6.3 常見色分析 |45
3.6.4 猜你喜歡 |46
3.7 紫 |47
3.7.1 淺談紫色 |47
3.7.2 套用實例 |48
3.7.3 常見色分析 |48
3.7.4 猜你喜歡 |49
3.8 黑 |50
3.8.1 淺談黑色 |50
3.8.2 套用實例 |50
3.8.3 猜你喜歡 |51
3.9 白 |52
3.9.1 淺談白色 |52
3.9.2 套用實例 |52
3.9.3 猜你喜歡 |53
3.10 灰 |54
3.10.1 淺談灰色 |54
3.10.2 套用實例 |54
3.10.3 猜你喜歡 |55
第4章 網頁布局技巧與色彩 |57
4.1 網頁布局的基礎知識 |58
4.2 黃金分割式布局與左右對齊式布局 |59
4.2.1 黃金分割式布局 |60
4.2.2 左右對齊式布局 |60
4.2.3 動手練習——修改背景顏色 |61
4.2.4 設計師談——黑色配色方案 |61
4.2.5 配色實戰 |61
4.2.6 常見色彩搭配 |62
4.2.7 猜你喜歡 |62
4.3 全景式布局與衛星式布局 |63
4.3.1 全景式布局 |64
4.3.2 衛星式布局 |64
4.3.3 動手練習——使用點綴色 |65
4.3.4 設計師談——按鈕的設計 |65
4.3.5 配色實戰 |65
4.3.6 常見色彩搭配 |66
4.3.7 猜你喜歡 |66
4.4 照片組合式布局與包圍式布局 |67
4.4.1  照片組合式布局 |68
4.4.2 包圍式布局 |68
4.4.3 動手練習——LOGO的設計 |69
4.4.4 設計師談——扁平化 |69
4.4.5 配色實戰 |69
4.4.6 常見色彩搭配 |70
4.4.7 猜你喜歡 |70
4.5 散開式布局與對稱式布局 |71
4.5.1 敞開式布局 |72
4.5.2 對稱式布局 |72
4.5.3 動手練習——提高顏色的純度 |73
4.5.4 設計師談——留白 |73
4.5.5 配色實戰 |73
4.5.6 常見色彩搭配 |74
4.5.7 猜你喜歡 |74
第5章 網頁色彩的視覺印象 |75
5.1 女性 |76
5.1.1 甜美 |76
5.1.2 時尚 |76
5.2 男性 |77
5.2.1 理智 |77
5.2.2 堅韌 |77
5.3 兒童 |78
5.3.1 可愛 |78
5.3.2 活力 |78
5.4 老人 |79
5.4.1 溫暖 |79
5.4.2 踏實 |79
5.5 華麗 |80
5.5.1 優雅 |80
5.5.2 華美 |80
5.6 質樸 |81
5.6.1 淳樸 |81
5.6.2 乾淨 |81
5.7 活潑 |82
5.7.1 天真 |82
5.7.2 活力 |82
5.8 莊重 |83
5.8.1 莊嚴 |83
5.8.2 穩重 |83
5.9 興奮 |84
5.9.1 亢奮 |84
5.9.2 刺激 |84
5.10 沉靜 |85
5.10.1 安靜 |85
5.10.2 沉寂 |85
5.11 溫暖 |86
5.11.1 溫馨 |86
5.11.2 和煦 |86
5.12 涼爽 |87
5.12.1 勁爽 |87
5.12.2 冰涼 |87
5.13 專業 |88
5.13.1 品質 |88
5.13.2 專注 |88
5.14 時尚 |89
5.14.1 新潮 |89
5.14.2 前衛 |89
5.15 雅致 |90
5.15.1 精緻 |90
5.15.2 優雅 |90
5.16 環保 |91
5.16.1 放心 |91
5.16.2 健康 |91
5.17 安全 |92
5.17.1 安穩 |92
5.17.2 安然 |92
5.18 信譽 |93
5.18.1 大氣 |93
5.18.2 信任 |93
5.19 榮耀 |94
5.19.1 華麗 |94
5.19.2 光輝 |94
5.20 美味 |95
5.20.1 香甜 |95
5.20.2 濃香 |95
5.21 神秘 |96
5.21.1 奇幻 |96
5.21.2 深邃 |96
5.22 夢幻 |97
5.22.1 絢麗 |97
5.22.2 迷幻 |97
5.23 自然 |98
5.23.1 綠色 |98
5.23.2 清新 |98
5.24 嚴肅 |99
5.24.1 典範 |99
5.24.2 規範 |99
第6章 不同網站的網頁色彩搭配 |101
6.1  門戶網頁 |102
6.1.1 什麼是入口網站 |102
6.1.2 案例分析 |103
6.1.3 動手練習——降低文字的飽和度 |104
6.1.4 設計師談——別忽視網頁中的搜尋框 |104
6.1.5 配色實戰——扁平化網頁的配色方案 |104
6.1.6 常見色彩搭配 |104
6.1.7 猜你喜歡 |105
6.2 企業網站 |106
6.2.1 什麼是企業網站 |106
6.2.2 案例分析 |107
6.2.3 動手練習——增加頁面空間感,集中用戶視線 |108
6.2.4 設計師談——企業網站的形象塑造 |108
6.2.5 配色實戰——網頁中點綴色配色方案 |109
6.2.6 常見色彩搭配 |109
6.2.7 猜你喜歡 |109
6.3 產品展示  |110
6.3.1 什麼是產品展示網頁 |110
6.3.2 案例分析 |111
6.3.3 動手練習——減少畫面顏色 |112
6.3.4 設計師談——各國家的顏色內涵 |112
6.3.5 配色實戰——網頁配色方案 |113
6.3.6 常見色彩搭配 |113
6.3.7 猜你喜歡 |113
6.4 購物網站  |114
6.4.1 什麼是購物網站 |114
6.4.2 案例分析 |115
6.4.3 動手練習——為留白空間添加裝飾 |116
6.4.4 設計師談——色彩激發你的購買慾 |116
6.4.5 配色實戰——網頁色彩搭配 |117
6.4.6 常見色彩搭配 |117
6.4.7 猜你喜歡 |117
6.5 社交網頁 |118
6.5.1 什麼是社交網站 |118
6.5.2 案例分析 |119
6.5.3 動手練習——網站色調應該與產品相呼應 |120
6.5.4 設計師談——網站設計中字型粗細的選擇 |120
6.5.5 配色實戰——不同配色方案的視覺效果 |121
6.5.6 常見色彩搭配 |121
6.5.7 猜你喜歡 |121
6.6 個人網頁  |122
6.6.1 什麼是個人網頁 |122
6.6.2 案例分析 |123
6.6.3 動手練習——為畫面添加合適素材 |124
6.6.4 設計師談——網頁設計中的三個小細節 |124
6.6.5 配色實戰——舞蹈網站的色彩搭配 |124
6.6.6 常見色彩搭配 |125
6.6.7 猜你喜歡 |125
6.7 社區論壇 |126
6.7.1 什麼是社區論壇 |126
6.7.2 案例分析 |127
6.7.3 動手練習——別把選項藏起來 |128
6.7.4 設計師談——單色網頁設計 |128
6.7.5 配色實戰——網頁色彩搭配 |128
6.7.6 常見色彩搭配 |129
6.7.7 猜你喜歡 |129
6.8 活動網站 |130
6.8.1 什麼是活動網站 |130
6.8.2 案例分析 |131
6.8.3 動手練習——儘量減少表單問題 |132
6.8.4 設計師談——選用兩種色彩進行色彩搭配 |132
6.8.5 配色實戰——同一網站的配色方案 |132
6.8.6 常見色彩搭配 |133
6.8.7 猜你喜歡 |133
第7章 不同行業的網頁色彩搭配 |135
7.1 車品類 |136
7.1.1 現代風格車品網頁 |136
7.1.2 粗獷風格車品網頁 |136
7.1.3 動手練習——打造豪華質感的車品網頁 |137
7.1.4 設計師談——為網頁製作一個漂亮的等待頁面 |137
7.1.5 常見色彩搭配 |137
7.2 服飾類 |138
7.2.1 品牌時裝網頁 |138
7.2.2 年輕服裝網頁 |138
7.2.3 動手練習——將商品突顯出來 |139
7.2.4 設計師談——使用菱形進行頁面的分割 |139
7.2.5 常見色彩搭配 |139
7.3 珠寶類 |140
7.3.1 珠寶類購物網頁 |140
7.3.2 品牌珠寶網站 |140
7.3.3 動手練習——淺色與深色背景對珠寶產品的影響 |141
7.3.4 設計師談——色塊拼貼法 |141
7.3.5 常見色彩搭配 |141
7.4 建築裝潢 |142
7.4.1 室內設計裝飾公司網頁 |142
7.4.2 景觀事務所網頁 |142
7.4.3 動手練習——為導航欄添加圖示增加其識別性 |143
7.4.4 設計師談——簡潔明快的網頁設計風格 |143
7.4.5 常見色彩搭配 |143
7.5 媒體、音樂類 |144
7.5.1 音樂類網頁 |144
7.5.2 電視劇網頁 |144
7.5.3 動手練習——為界面換一個合適的點綴色 |145
7.5.4 設計師談——利用視差滾動,打造全新感官享受 |145
7.5.5 常見色彩搭配 |145
7.6 IT科技 |146
7.6.1 軟體研發公司網頁 |146
7.6.2 電腦製造商網頁 |146
7.6.3 動手練習——衛星式布局方式的妙用 |147
7.6.4 設計師談——為界面添加一個合適的字型 |147
7.6.5 常見色彩搭配 |147
7.7 教育類 |148
7.7.1 知名大學網頁 |148
7.7.2 私立學校網頁 |148
7.7.3 動手練習——為頁面填寫一個顯眼的輔助色 |149
7.7.4 設計師談——為網站設計一個漂亮的404界面 |149
7.7.5 常見色彩搭配 |149
第8章 不同風格的網頁設計 |151
8.1 簡約至上主義風格 |152
8.1.1 簡潔 |153
8.1.2 整齊 |153
8.1.3 動手練習——使網頁看起來唯美、整潔 |154
8.1.4 設計師談——簡約是一種特殊的表達 |154
8.1.5 常見色彩搭配 |154
8.2 絢麗的歐美風格 |155
8.2.1 突出 |156
8.2.2 細膩 |156
8.2.3 動手練習——將頁面改為中純度色彩基調 |157
8.2.4 設計師談——歐美風網站的色彩搭配 |157
8.2.5 常見色彩搭配 |157
8.3 淡雅的韓式風格 |158
8.3.1 淡雅 |159
8.3.2 醇厚 |159
8.3.3 動手練習——使網頁看起來清新淡雅 |160
8.3.4 設計師談——韓式的淡雅清新 |160
8.3.5 常見色彩搭配 |160
8.4 悠遠的日式風格 |161
8.4.1 細膩 |162
8.4.2 民族 |162
8.4.3 動手練習——使網頁看起來更富意境 |163
8.4.4 設計師談——日式風格 |163
8.4.5 常見色彩搭配 |163
8.5 空間感網頁設計 |164
8.5.1 層次 |165
8.5.2 立體 |165
8.5.3 動手練習——使網頁層次更加清晰 |166
8.5.4 設計師談——“立體感”的產生 |166
8.5.5 常見色彩搭配 |166
8.6 扁平化設計  |167
8.6.1 整潔 |168
8.6.2 簡約 |168
8.6.3 動手練習——為頁面選擇一個合適的顏色 |169
8.6.4 設計師談——力求簡約的扁平化設計 |169
8.6.5 常見色彩搭配 |169
8.7 趣味的手繪風格  |170
8.7.1 趣味 |171
8.7.2 鮮活 |171
8.7.3 動手練習——添加插畫,活躍頁面氣氛 |172
8.7.4 設計師談——富有親和力的手繪風 |172
8.7.5 常見色彩搭配 |172
8.8 抽象的網頁設計  |173
8.8.1 精煉 |174
8.8.2 情緒 |174
8.8.3 動手練習——使網頁風格更加簡約 |175
8.8.4 設計師談——抽象風是情緒的精煉 |175
8.8.5 常見色彩搭配 |175
8.9 懷舊的復古風格  |176
8.9.1 回憶 |177
8.9.2 濃厚 |177
8.9.3 動手練習——使網頁視覺重點突出 |178
8.9.4 設計師談——復古風的融情 |178
8.9.5 常見色彩搭配 |178
第9章 綜合版式配色 |179
9.1 兒童主題網頁 |180
9.1.1 項目分析 |180
9.1.2 案例分析 |180
9.1.3 版式分析 |181
9.1.4 配色方案 |182
9.1.5 佳作欣賞 |183
9.2 自然主題網頁 |184
9.2.1 項目分析 |184
9.2.2 案例分析 |184
9.2.3 版式分析 |185
9.2.4 配色方案 |186
9.2.5 佳作欣賞 |187
9.3 科技類網頁 |188
9.3.1 項目分析 |188
9.3.2 案例分析 |188
9.3.3 版式分析 |189
9.3.4 配色方案 |190
9.3.5 佳作欣賞 |191
9.4 商務風格網頁 |192
9.4.1 項目分析 |192
9.4.2 案例分析 |192
9.4.3 版式分析 |193
9.4.4 配色方案 |194
9.4.5 佳作欣賞 |195

相關詞條

熱門詞條

聯絡我們