網(wǎng)頁+App UI配色設(shè)計教程

第1章 色彩理論
1.1 什么是色彩 1
1.1.1 認(rèn)識色彩 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 配色的基礎(chǔ)規(guī)律——色系 12
1.5.1 原色 12
1.5.2 間色 12
1.5.3 復(fù)色 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 色彩的前進(jìn)與后退 22
1.8.4 色彩的華麗與質(zhì)樸 22
1.8.5 色彩的軟硬感 23
1.8.6 色彩的大小感 24
1.8.7 色彩的興奮與沉靜 25
1.8.8 色彩的活潑與莊重 26
1.9 UI配色欣賞 27
第2章 UI配色基礎(chǔ)
2.1 關(guān)于UI設(shè)計 29
2.1.1 什么是UI設(shè)計 29
2.1.2 什么是GUI設(shè)計 29
2.1.3 關(guān)于UE/UX 30
2.1.4 移動UI設(shè)計的崛起 31
2.2 UI配色的基本步驟 34
2.2.1 明確產(chǎn)品的定位與目標(biāo) 34
2.2.2 確定目標(biāo)用戶群體 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 適配不同設(shè)備 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 藍(lán)色 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 輔助色——營造獨(dú)特的UI風(fēng)格 55
2.5.4 點綴色——強(qiáng)調(diào)界面重點信息與功能 56
2.6 UI配色的基礎(chǔ)原則 57
2.6.1 色調(diào)的一致性 57
2.6.2 保守地使用色彩 58
2.6.3 色彩的選擇盡可能符合人們的審美習(xí)慣 58
2.6.4 使用色彩作為功能分界的識別元素 59
2.6.5 能夠讓用戶調(diào)整界面的配色方案 60
2.6.6 色彩搭配要便于閱讀 60
2.6.7 控制色彩的使用數(shù)量 61
2.7 使用配色軟件進(jìn)行配色 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 基于色相的配色關(guān)系 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)的配色關(guān)系 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 復(fù)合色調(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)更加強(qiáng)烈 86
3.4.1 在UI中加入強(qiáng)調(diào)色 86
3.4.2 色相對比配色 88
3.4.3 原色對比配色 90
3.4.4 間色對比配色 92
3.4.5 補(bǔ)色對比配色 93
3.4.6 冷暖對比配色 94
3.4.7 面積對比配色 95
3.4.8 主體突出的配色 96
3.5 文字配色方法 96
3.5.1 UI與文字配色關(guān)系 96
3.5.2 良好的UI文字配色 99
3.5.3 易讀性規(guī)范 99
3.6 圖標(biāo)配色方法 102
3.6.1 通過情緒板選擇圖標(biāo)顏色 102
3.6.2 通過目標(biāo)人群選擇圖標(biāo)配色 103
3.6.3 根據(jù)品牌選擇圖標(biāo)顏色 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)整界面風(fēng)格 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)出質(zhì)感 130
4.3.4 綜合運(yùn)用黑白灰搭配 131
4.4 使用鮮艷的配色方案提升UI設(shè)計效果 132
4.4.1 提升界面的可讀性和易讀性 132
4.4.2 銳化導(dǎo)航并提升互動 133
4.4.3 可識別性 134
4.4.4 營造氛圍，傳遞情緒 134
4.4.5 時尚的UI設(shè)計風(fēng)格 135
4.5 鮮艷的配色方案在UI設(shè)計中存在的問題 136
4.5.1 鮮艷的配色不易搭配 136
4.5.2 缺少風(fēng)格和調(diào)性 137
4.5.3 鮮艷的色彩并不適合所有群體 138
4.5.4 鮮艷的色彩在移動端屏幕上顯得過于扎眼 139
4.6 UI設(shè)計深色系背景使用技巧 140
4.6.1 應(yīng)用深色背景的產(chǎn)品較少 140
4.6.2 深色背景的適用條件 141
4.6.3 深色界面的視覺風(fēng)格 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 配色時應(yīng)該選擇單色還是多色組合 153
5.1.4 快速實現(xiàn)完美的配色 154
5.2 網(wǎng)站UI元素色彩搭配 155
5.2.1 Logo與網(wǎng)站廣告 155
5.2.2 導(dǎo)航菜單 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 靈活應(yīng)用配色技巧 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)容進(jìn)行UI配色 171
5.6.1 兒童網(wǎng)站配色 171
5.6.2 體育運(yùn)動網(wǎng)站配色 173
5.6.3 手機(jī)數(shù)碼網(wǎng)站配色 174
5.6.4 文化藝術(shù)網(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設(shè)計概述 207
6.1.1 視覺設(shè)計 207
6.1.2 版式設(shè)計 209
6.1.3 色彩在移動端UI設(shè)計中的作用 211
6.2 移動端UI配色需要注意的問題 213
6.2.1 切忌把賞心悅目、形式感放在位 213
6.2.2 UI配色需要符合人們的預(yù)期 214
6.2.3 配色要便于閱讀 215
6.2.4 保守地使用色彩 216
6.2.5 雜亂的配色會增加用戶的記憶負(fù)擔(dān) 217
6.3 移動端UI配色的基本流程 218
6.3.1 調(diào)性分析，確定風(fēng)格 218
6.3.2 確定主色 220
6.3.3 確定輔助色 224
6.3.4 配色微調(diào) 224
6.4 使用HSB色彩模式進(jìn)行配色 226
6.4.1 什么是HSB色彩模式 226
6.4.2 使用HSB色彩模式進(jìn)行配色的方法 227
6.4.3 柔和的微漸變配色 229
6.5 移動端UI設(shè)計常用配色方法 229
6.5.1 5種統(tǒng)一配色 229
6.5.2 4種對比配色 233
6.5.3 3種強(qiáng)視覺效果的配色 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