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

第1章 色彩理論
1.1 什么是色彩 1
1.1.1 認(rèn)識(shí)色彩 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 無(wú)彩色與有彩色 6
1.4 色彩模式 8
1.4.1 適合屏幕顯示的色彩模式——RGB 8
1.4.2 適合印刷品的色彩模式——CMYK 10
1.4.3 加法混合與減法混合 10
1.4.4 網(wǎng)頁(yè)安全色 11
1.5 配色的基礎(chǔ)規(guī)律——色系 12
1.5.1 原色 12
1.5.2 間色 12
1.5.3 復(fù)色 13
1.5.4 類(lèi)似色 14
1.5.5 鄰近色 15
1.5.6 對(duì)比色 15
1.6 影響作品總體色彩印象的要素——色調(diào) 16
1.7 色彩對(duì)人的心理影響 18
1.8 色彩的視覺(jué)感受 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è)計(jì) 29
2.1.1 什么是UI設(shè)計(jì) 29
2.1.2 什么是GUI設(shè)計(jì) 29
2.1.3 關(guān)于UE/UX 30
2.1.4 移動(dòng)UI設(shè)計(jì)的崛起 31
2.2 UI配色的基本步驟 34
2.2.1 明確產(chǎn)品的定位與目標(biāo) 34
2.2.2 確定目標(biāo)用戶(hù)群體 35
2.2.3 分析競(jìng)爭(zhēng)對(duì)手 36
2.2.4 產(chǎn)品測(cè)試 37
2.3 影響UI配色的因素 38
2.3.1 UI的可讀性和易讀性 38
2.3.2 產(chǎn)品的可訪(fǎng)問(wèn)性 39
2.3.3 UI清晰度 39
2.3.4 適配不同設(shè)備 40
2.3.5 考慮到使用場(chǎng)景 41
2.3.6 通過(guò)配色在UI中創(chuàng)造視覺(jué)層次 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 輔助色——營(yíng)造獨(dú)特的UI風(fēng)格 55
2.5.4 點(diǎn)綴色——強(qiáng)調(diào)界面重點(diǎn)信息與功能 56
2.6 UI配色的基礎(chǔ)原則 57
2.6.1 色調(diào)的一致性 57
2.6.2 保守地使用色彩 58
2.6.3 色彩的選擇盡可能符合人們的審美習(xí)慣 58
2.6.4 使用色彩作為功能分界的識(shí)別元素 59
2.6.5 能夠讓用戶(hù)調(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 相反色相、類(lèi)似色調(diào)配色 68
3.1.3 相反色相、相反色調(diào)配色 69
3.1.4 漸變配色 70
3.1.5 無(wú)彩色和彩色 70
3.2 色調(diào)配色方法 71
3.2.1 基于色調(diào)的配色關(guān)系 71
3.2.2 相同色相或類(lèi)似色相、類(lèi)似色調(diào)配色 73
3.2.3 相同色相或類(lèi)似色相、相反色調(diào)配色 73
3.3 融合配色使UI的表現(xiàn)更加平穩(wěn) 74
3.3.1 同明度配色使界面更融合 74
3.3.2 同飽和度配色使界面表現(xiàn)更和諧 75
3.3.3 同類(lèi)色單色調(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 對(duì)比配色使UI的表現(xiàn)更加強(qiáng)烈 86
3.4.1 在UI中加入強(qiáng)調(diào)色 86
3.4.2 色相對(duì)比配色 88
3.4.3 原色對(duì)比配色 90
3.4.4 間色對(duì)比配色 92
3.4.5 補(bǔ)色對(duì)比配色 93
3.4.6 冷暖對(duì)比配色 94
3.4.7 面積對(duì)比配色 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 通過(guò)情緒板選擇圖標(biāo)顏色 102
3.6.2 通過(guò)目標(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 視覺(jué)區(qū)分 117
4.1.2 調(diào)整界面風(fēng)格 118
4.1.3 吸引用戶(hù)注意力 120
4.2 突出界面主題的配色技巧 121
4.2.1 提高色彩純度烘托主題 121
4.2.2 增加色彩明度差表現(xiàn)層次感 123
4.2.3 添加鮮艷的色相使界面表現(xiàn)出活力 124
4.2.4 添加點(diǎn)綴色為界面帶來(lái)亮點(diǎn) 125
4.2.5 抑制輔助色或背景色 126
4.2.6 使用留白突出界面主題 127
4.3 黑白灰配色技巧 128
4.3.1 調(diào)和白色使畫(huà)面具有透氣感 128
4.3.2 調(diào)和黑色使畫(huà)面具有穩(wěn)定感 129
4.3.3 調(diào)和灰色使畫(huà)面表現(xiàn)出質(zhì)感 130
4.3.4 綜合運(yùn)用黑白灰搭配 131
4.4 使用鮮艷的配色方案提升UI設(shè)計(jì)效果 132
4.4.1 提升界面的可讀性和易讀性 132
4.4.2 銳化導(dǎo)航并提升互動(dòng) 133
4.4.3 可識(shí)別性 134
4.4.4 營(yíng)造氛圍，傳遞情緒 134
4.4.5 時(shí)尚的UI設(shè)計(jì)風(fēng)格 135
4.5 鮮艷的配色方案在UI設(shè)計(jì)中存在的問(wèn)題 136
4.5.1 鮮艷的配色不易搭配 136
4.5.2 缺少風(fēng)格和調(diào)性 137
4.5.3 鮮艷的色彩并不適合所有群體 138
4.5.4 鮮艷的色彩在移動(dòng)端屏幕上顯得過(guò)于扎眼 139
4.6 UI設(shè)計(jì)深色系背景使用技巧 140
4.6.1 應(yīng)用深色背景的產(chǎn)品較少 140
4.6.2 深色背景的適用條件 141
4.6.3 深色界面的視覺(jué)風(fēng)格 142
4.6.4 哪些類(lèi)型的產(chǎn)品適合使用深色背景 144
4.6.5 使用深色背景需要注意的問(wèn)題 146
4.7 UI配色欣賞 149
第5章 網(wǎng)站UI配色
5.1 網(wǎng)站UI配色常見(jiàn)問(wèn)題 151
5.1.1 培養(yǎng)色彩的敏感度 151
5.1.2 通用配色理論是否適用 152
5.1.3 配色時(shí)應(yīng)該選擇單色還是多色組合 153
5.1.4 快速實(shí)現(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ù)商品銷(xiāo)售階段選擇網(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)品銷(xiāo)售期的網(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 無(wú)彩色界面點(diǎn)綴鮮艷色彩 167
5.5.4 選擇商品主色調(diào)作為網(wǎng)頁(yè)主色調(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)動(dòng)網(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 影視音樂(lè)網(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 常見(jiàn)網(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 輕快律動(dòng)的網(wǎng)站配色 196
5.7.6 生動(dòng)活力的網(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章 移動(dòng)端UI配色
6.1 移動(dòng)端UI設(shè)計(jì)概述 207
6.1.1 視覺(jué)設(shè)計(jì) 207
6.1.2 版式設(shè)計(jì) 209
6.1.3 色彩在移動(dòng)端UI設(shè)計(jì)中的作用 211
6.2 移動(dòng)端UI配色需要注意的問(wèn)題 213
6.2.1 切忌把賞心悅目、形式感放在位 213
6.2.2 UI配色需要符合人們的預(yù)期 214
6.2.3 配色要便于閱讀 215
6.2.4 保守地使用色彩 216
6.2.5 雜亂的配色會(huì)增加用戶(hù)的記憶負(fù)擔(dān) 217
6.3 移動(dòng)端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 移動(dòng)端UI設(shè)計(jì)常用配色方法 229
6.5.1 5種統(tǒng)一配色 229
6.5.2 4種對(duì)比配色 233
6.5.3 3種強(qiáng)視覺(jué)效果的配色 236
6.6 移動(dòng)端UI配色技巧 237
6.6.1 遵循6:3:1的配色原則 237
6.6.2 控制界面的色彩數(shù)量 240
6.6.3 巧用色彩對(duì)比 241
6.6.4 從大自然中獲取配色靈感 242
6.7 UI配色的新趨勢(shì)——漸變 242
6.7.1 漸變色的趨勢(shì) 242
6.7.2 線(xiàn)性漸變 244
6.7.3 在圖片上疊加漸變 244
6.7.4 多角度、多層次漸變疊加 246
6.7.5 具有功能性的漸變效果 246
6.7.6 在UI配色中使用漸變的優(yōu)勢(shì) 247
6.7.7 漸變配色工具 250
6.8 移動(dòng)端UI配色欣賞 251