任何UI設計都離不開色彩，良好的配色是UI設計成功的基礎。每一種色彩都有不同的屬性和意象，掌握一定的配色方法和技巧，能夠使我們在UI設計過程中更加精準地使用色彩。色彩給人的第一印象往往非常重要，成功的配色能夠將UI設計所包含的信息快速準確地傳遞給受眾群體。反之，如果配色不合理，則會使UI設計的表現(xiàn)效果大打折扣，甚至令人反感。 本書從研究色彩的構成開始，圖文并茂、循序漸進地講解色彩的原理、配色方法和技巧，通過對色彩理論、UI配色基礎、UI配色基本方法、UI配色技巧、網(wǎng)站UI配色和移動端UI配色進行深入的講解，同時結合相關案例的配色分析，全面提升讀者的UI配色設計水平，能夠真正達到學以致用的目的。
張曉景 男 43歲 資深設計師 Adobe 專家委員會成員 Adobe 網(wǎng)頁設計師認證講師Adobe 用戶界面設計師國家信息產(chǎn)業(yè)部653工程講師中國軟件行業(yè)協(xié)會專家委員 參與國家開放大學網(wǎng)頁設計和網(wǎng)頁界面設計課程體系開發(fā)。從事平面設計、網(wǎng)站設計和UI設計多年，參與開發(fā)過數(shù)十個多媒體商業(yè)網(wǎng)站。曾參與設計了999集團設計宣傳冊，北京西單金澤大廈設計VI設計，以及國務院國資委電子資料室設計制作網(wǎng)站等眾多設計工作。有豐富的教學經(jīng)驗，曾參與制作教學微課、幕課上百小時。熟悉微課策劃、設計、拍攝、制作全過程。為中國石油、中國鐵路等大型企業(yè)做專業(yè)企業(yè)培訓，參與培訓北京骨干教師活動，曾在中國傳媒大學、北京大學、北京師范大學、北京交通大學等重點院校以及Adobe創(chuàng)意大學和新東方等培訓機構教授設計課程。出版過相關設計類書籍數(shù)十種，參與清華大學中職教材的編寫、國家開放大學網(wǎng)頁設計課程規(guī)劃及教材策劃等工作。
第1章 色彩理論
1.1 什么是色彩 1
1.1.1 認識色彩 1
1.1.2 色光三原色與色料三原色 2
1.1.3 光源色與物體色 2
1.2 色彩屬性 4
1.2.1 色相表現(xiàn)出不同的色彩意象 4
1.2.2 明度體現(xiàn)出色彩的明暗程度 5
1.2.3 飽和度決定了色彩的鮮艷程度 5
1.3 無彩色與有彩色 6
1.4 色彩模式 8
1.4.1 適合屏幕顯示的色彩模式——RGB 8
1.4.2 適合印刷品的色彩模式——CMYK 10
1.4.3 加法混合與減法混合 10
1.4.4 網(wǎng)頁安全色 11
1.5 配色的基礎規(guī)律——色系 12
1.5.1 原色 12
1.5.2 間色 12
1.5.3 復色 13
1.5.4 類似色 14
1.5.5 鄰近色 15
1.5.6 對比色 15
1.6 影響作品總體色彩印象的要素——色調(diào) 16
1.7 色彩對人的心理影響 18
1.8 色彩的視覺感受 19
1.8.1 色彩的輕重感 19
1.8.2 色彩的冷暖感 20
1.8.3 色彩的前進與后退 22
1.8.4 色彩的華麗與質樸 22
1.8.5 色彩的軟硬感 23
1.8.6 色彩的大小感 24
1.8.7 色彩的興奮與沉靜 25
1.8.8 色彩的活潑與莊重 26
1.9 UI配色欣賞 27
第2章 UI配色基礎
2.1 關于UI設計 29
2.1.1 什么是UI設計 29
2.1.2 什么是GUI設計 29
2.1.3 關于UE/UX 30
2.1.4 移動UI設計的崛起 31
2.2 UI配色的基本步驟 34
2.2.1 明確產(chǎn)品的定位與目標 34
2.2.2 確定目標用戶群體 35
2.2.3 分析競爭對手 36
2.2.4 產(chǎn)品測試 37
2.3 影響UI配色的因素 38
2.3.1 UI的可讀性和易讀性 38
2.3.2 產(chǎn)品的可訪問性 39
2.3.3 UI清晰度 39
2.3.4 適配不同設備 40
2.3.5 考慮到使用場景 41
2.3.6 通過配色在UI中創(chuàng)造視覺層次 42
2.4 感知色彩 42
2.4.1 紅色 42
2.4.2 橙色 44
2.4.3 黃色 45
2.4.4 綠色 46
2.4.5 青色 46
2.4.6 藍色 47
2.4.7 紫色 49
2.4.8 黑色 49
2.4.9 白色 50
2.4.10 灰色 51
2.5 色彩在UI中所扮演的角色 51
2.5.1 主題色——傳遞作品核心主題 52
2.5.2 背景色——支配UI整體情感 53
2.5.3 輔助色——營造獨特的UI風格 55
2.5.4 點綴色——強調(diào)界面重點信息與功能 56
2.6 UI配色的基礎原則 57
2.6.1 色調(diào)的一致性 57
2.6.2 保守地使用色彩 58
2.6.3 色彩的選擇盡可能符合人們的審美習慣 58
2.6.4 使用色彩作為功能分界的識別元素 59
2.6.5 能夠讓用戶調(diào)整界面的配色方案 60
2.6.6 色彩搭配要便于閱讀 60
2.6.7 控制色彩的使用數(shù)量 61
2.7 使用配色軟件進行配色 61
2.7.1 ColorKey XP 62
2.7.2 Color Scheme Designer 63
2.7.3 Check My Colours 64
2.7.4 ColorJack 64
2.8 UI配色欣賞 64
第3章 UI配色基本方法
3.1 色相配色方法 67
3.1.1 基于色相的配色關系 67
3.1.2 相反色相、類似色調(diào)配色 68
3.1.3 相反色相、相反色調(diào)配色 69
3.1.4 漸變配色 70
3.1.5 無彩色和彩色 70
3.2 色調(diào)配色方法 71
3.2.1 基于色調(diào)的配色關系 71
3.2.2 相同色相或類似色相、類似色調(diào)配色 73
3.2.3 相同色相或類似色相、相反色調(diào)配色 73
3.3 融合配色使UI的表現(xiàn)更加平穩(wěn) 74
3.3.1 同明度配色使界面更融合 74
3.3.2 同飽和度配色使界面表現(xiàn)更和諧 75
3.3.3 同類色單色調(diào)配色 77
3.3.4 復合色調(diào)配色 79
3.3.5 暗濁色調(diào)配色 80
3.3.6 明艷色調(diào)配色 82
3.3.7 灰色調(diào)配色 83
3.3.8 層次感配色 85
3.4 對比配色使UI的表現(xiàn)更加強烈 86
3.4.1 在UI中加入強調(diào)色 86
3.4.2 色相對比配色 88
3.4.3 原色對比配色 90
3.4.4 間色對比配色 92
3.4.5 補色對比配色 93
3.4.6 冷暖對比配色 94
3.4.7 面積對比配色 95
3.4.8 主體突出的配色 96
3.5 文字配色方法 96
3.5.1 UI與文字配色關系 96
3.5.2 良好的UI文字配色 99
3.5.3 最佳易讀性規(guī)范 99
3.6 圖標配色方法 102
3.6.1 通過情緒板選擇圖標顏色 102
3.6.2 通過目標人群選擇圖標配色 103
3.6.3 根據(jù)品牌選擇圖標顏色 103
3.6.4 四色原則 104
3.7 表現(xiàn)情感與心理的配色 104
3.7.1 暖色調(diào)配色 104
3.7.2 冷色調(diào)配色 106
3.7.3 高調(diào)的配色 108
3.7.4 低調(diào)的配色 109
3.7.5 健康的配色 111
3.7.6 警示的配色 113
3.8 UI配色欣賞 114
第4章 UI配色技巧
4.1 給你的配色做減法 117
4.1.1 視覺區(qū)分 117
4.1.2 調(diào)整界面風格 118
4.1.3 吸引用戶注意力 120
4.2 突出界面主題的配色技巧 121
4.2.1 提高色彩純度烘托主題 121
4.2.2 增加色彩明度差表現(xiàn)層次感 123
4.2.3 添加鮮艷的色相使界面表現(xiàn)出活力 124
4.2.4 添加點綴色為界面帶來亮點 125
4.2.5 抑制輔助色或背景色 126
4.2.6 使用留白突出界面主題 127
4.3 黑白灰配色技巧 128
4.3.1 調(diào)和白色使畫面具有透氣感 128
4.3.2 調(diào)和黑色使畫面具有穩(wěn)定感 129
4.3.3 調(diào)和灰色使畫面表現(xiàn)出質感 130
4.3.4 綜合運用黑白灰搭配 131
4.4 使用鮮艷的配色方案提升UI設計效果 132
4.4.1 提升界面的可讀性和易讀性 132
4.4.2 銳化導航并提升互動 133
4.4.3 可識別性 134
4.4.4 營造氛圍，傳遞情緒 134
4.4.5 時尚的UI設計風格 135
4.5 鮮艷的配色方案在UI設計中存在的問題 136
4.5.1 鮮艷的配色不易搭配 136
4.5.2 缺少風格和調(diào)性 137
4.5.3 鮮艷的色彩并不適合所有群體 138
4.5.4 鮮艷的色彩在移動端屏幕上顯得過于扎眼 139
4.6 UI設計深色系背景使用技巧 140
4.6.1 應用深色背景的產(chǎn)品較少 140
4.6.2 深色背景的適用條件 141
4.6.3 深色界面的視覺風格 142
4.6.4 哪些類型的產(chǎn)品適合使用深色背景 144
4.6.5 使用深色背景需要注意的問題 146
4.7 UI配色欣賞 149
第5章 網(wǎng)站UI配色
5.1 網(wǎng)站UI配色常見問題 151
5.1.1 培養(yǎng)色彩的敏感度 151
5.1.2 通用配色理論是否適用 152
5.1.3 配色時應該選擇單色還是多色組合 153
5.1.4 快速實現(xiàn)完美的配色 154
5.2 網(wǎng)站UI元素色彩搭配 155
5.2.1 Logo與網(wǎng)站廣告 155
5.2.2 導航菜單 156
5.2.3 背景與文字 157
5.2.4 鏈接文字 158
5.3 根據(jù)受眾群體選擇網(wǎng)站UI配色 159
5.3.1 不同性別的色彩偏好 159
5.3.2 不同年齡的色彩偏好 161
5.4 根據(jù)商品銷售階段選擇網(wǎng)站UI配色 162
5.4.1 產(chǎn)品上市期的網(wǎng)站UI配色 162
5.4.2 產(chǎn)品拓展期的網(wǎng)站UI配色 163
5.4.3 產(chǎn)品銷售期的網(wǎng)站UI配色 163
5.4.4 產(chǎn)品衰退期的網(wǎng)站UI配色 164
5.5 如何打造成功的網(wǎng)站UI配色 164
5.5.1 遵循色彩的基本原理 165
5.5.2 靈活應用配色技巧 166
5.5.3 無彩色界面點綴鮮艷色彩 167
5.5.4 選擇商品主色調(diào)作為網(wǎng)頁主色調(diào) 168
5.5.5 避免配色的混亂 169
5.6 根據(jù)網(wǎng)站內(nèi)容進行UI配色 171
5.6.1 兒童網(wǎng)站配色 171
5.6.2 體育運動網(wǎng)站配色 173
5.6.3 手機數(shù)碼網(wǎng)站配色 174
5.6.4 文化藝術網(wǎng)站配色 176
5.6.5 服裝服飾網(wǎng)站配色 178
5.6.6 影視音樂網(wǎng)站配色 179
5.6.7 旅游休閑網(wǎng)站配色 181
5.6.8 美食餐飲網(wǎng)站配色 183
5.6.9 醫(yī)療保健網(wǎng)站配色 185
5.6.10 房產(chǎn)家居網(wǎng)站配色 187
5.7 常見網(wǎng)站配色效果 189
5.7.1 女性化網(wǎng)站配色 189
5.7.2 男性化網(wǎng)站配色 191
5.7.3 穩(wěn)定安靜的網(wǎng)站配色 192
5.7.4 興奮激昂的網(wǎng)站配色 194
5.7.5 輕快律動的網(wǎng)站配色 196
5.7.6 生動活力的網(wǎng)站配色 197
5.7.7 清爽自然的網(wǎng)站配色 199
5.7.8 高貴典雅的網(wǎng)站配色 200
5.7.9 優(yōu)雅的網(wǎng)站配色 202
5.7.10 成熟的網(wǎng)站配色 203
5.8 網(wǎng)站UI配色欣賞 205
第6章 移動端UI配色
6.1 移動端UI設計概述 207
6.1.1 視覺設計 207
6.1.2 版式設計 209
6.1.3 色彩在移動端UI設計中的作用 211
6.2 移動端UI配色需要注意的問題 213
6.2.1 切忌把賞心悅目、形式感放在第一位 213
6.2.2 UI配色需要符合人們的預期 214
6.2.3 配色要便于閱讀 215
6.2.4 保守地使用色彩 216
6.2.5 雜亂的配色會增加用戶的記憶負擔 217
6.3 移動端UI配色的基本流程 218
6.3.1 調(diào)性分析，確定風格 218
6.3.2 確定主色 220
6.3.3 確定輔助色 224
6.3.4 配色微調(diào) 224
6.4 使用HSB色彩模式進行配色 226
6.4.1 什么是HSB色彩模式 226
6.4.2 使用HSB色彩模式進行配色的方法 227
6.4.3 柔和的微漸變配色 229
6.5 移動端UI設計常用配色方法 229
6.5.1 5種統(tǒng)一配色 229
6.5.2 4種對比配色 233
6.5.3 3種強視覺效果的配色 236
6.6 移動端UI配色技巧 237
6.6.1 遵循6:3:1的配色原則 237
6.6.2 控制界面的色彩數(shù)量 240
6.6.3 巧用色彩對比 241
6.6.4 從大自然中獲取配色靈感 242
6.7 UI配色的新趨勢——漸變 242
6.7.1 漸變色的趨勢 242
6.7.2 線性漸變 244
6.7.3 在圖片上疊加漸變 244
6.7.4 多角度、多層次漸變疊加 246
6.7.5 具有功能性的漸變效果 246
6.7.6 在UI配色中使用漸變的優(yōu)勢 247
6.7.7 漸變配色工具 250
6.8 移動端UI配色欣賞 251
書單推薦
