《網頁+App UI配色設計教程》是2021年6月電子工業出版社出版的圖書，作者是張曉景。本書從研究色彩的構成開始，圖文並茂、循序漸進地講解色彩的原理、配色方法和技巧。
基本介紹
- 中文名：網頁+App UI配色設計教程
- 作者：張曉景
- 出版社：電子工業出版社
- 出版時間：2021年6月
- 頁數：260 頁
- 定價：89.8 元
- 開本：16 開
- ISBN：9787121411151
內容簡介,圖書目錄,作者簡介,
內容簡介
任何UI設計都離不開色彩，良好的配色是UI設計成功的基礎。每一種色彩都有不同的屬性和意象，掌握一定的配色方法和技巧，能夠使我們在UI設計過程中更加精準地使用色彩。色彩給人的第一印象往往非常重要，成功的配色能夠將UI設計所包含的信息快速準確地傳遞給客群群體。反之，如果配色不合理，則會使UI設計的表現效果大打折扣，甚至令人反感。
本書從研究色彩的構成開始，圖文並茂、循序漸進地講解色彩的原理、配色方法和技巧，通過對色彩理論、UI配色基礎、UI配色基本方法、UI配色技巧、網站UI配色和移動端UI配色進行深入的講解，同時結合相關案例的配色分析，全面提升讀者的UI配色設計水平，能夠真正達到學以致用的目的。
圖書目錄
第1章 色彩理論
1．1 什麼是色彩 1
1．1．1 認識色彩 1
1．1．2 色光三原色與色料三原色 2
1．1．3 光源色與物體色 2
1．2 色彩屬性 4
1．2．1 色相表現出不同的色彩意象 4
1．2．2 明度體現出色彩的明暗程度 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 網頁安全色 11
1．5 配色的基礎規律――色系 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 影響作品總體色彩印象的要素――色調 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 明確產品的定位與目標 34
2．2．2 確定目標用戶群體 35
2．2．3 分析競爭對手 36
2．2．4 產品測試 37
2．3 影響UI配色的因素 38
2．3．1 UI的可讀性和易讀性 38
2．3．2 產品的可訪問性 39
2．3．3 UI清晰度 39
2．3．4 適配不同設備 40
2．3．5 考慮到使用場景 41
2．3．6 通過配色在UI中創造視覺層次 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 點綴色――強調界面重點信息與功能 56
2．6 UI配色的基礎原則 57
2．6．1 色調的一致性 57
2．6．2 保守地使用色彩 58
2．6．3 色彩的選擇儘可能符合人們的審美習慣 58
2．6．4 使用色彩作為功能分界的識別元素 59
2．6．5 能夠讓用戶調整界面的配色方案 60
2．6．6 色彩搭配要便於閱讀 60
2．6．7 控制色彩的使用數量 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 相反色相、類似色調配色 68
3．1．3 相反色相、相反色調配色 69
3．1．4 漸變配色 70
3．1．5 無彩色和彩色 70
3．2 色調配色方法 71
3．2．1 基於色調的配色關係 71
3．2．2 相同色相或類似色相、類似色調配色 73
3．2．3 相同色相或類似色相、相反色調配色 73
3．3 融合配色使UI的表現更加平穩 74
3．3．1 同明度配色使界面更融合 74
3．3．2 同飽和度配色使界面表現更和諧 75
3．3．3 同類色單色調配色 77
3．3．4 複合色調配色 79
3．3．5 暗濁色調配色 80
3．3．6 明艷色調配色 82
3．3．7 灰色調配色 83
3．3．8 層次感配色 85
3．4 對比配色使UI的表現更加強烈 86
3．4．1 在UI中加入強調色 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 最佳易讀性規範 99
3．6 圖示配色方法 102
3．6．1 通過情緒板選擇圖示顏色 102
3．6．2 通過目標人群選擇圖示配色 103
3．6．3 根據品牌選擇圖示顏色 103
3．6．4 四色原則 104
3．7 表現情感與心理的配色 104
3．7．1 暖色調配色 104
3．7．2 冷色調配色 106
3．7．3 高調的配色 108
3．7．4 低調的配色 109
3．7．5 健康的配色 111
3．7．6 警示的配色 113
3．8 UI配色欣賞 114
第4章 UI配色技巧
4．1 給你的配色做減法 117
4．1．1 視覺區分 117
4．1．2 調整界面風格 118
4．1．3 吸引用戶注意力 120
4．2 突出界面主題的配色技巧 121
4．2．1 提高色彩純度烘托主題 121
4．2．2 增加色彩明度差表現層次感 123
4．2．3 添加鮮艷的色相使界面表現出活力 124
4．2．4 添加點綴色為界面帶來亮點 125
4．2．5 抑制輔助色或背景色 126
4．2．6 使用留白突出界面主題 127
4．3 黑白灰配色技巧 128
4．3．1 調和白色使畫面具有透氣感 128
4．3．2 調和黑色使畫面具有穩定感 129
4．3．3 調和灰色使畫面表現出質感 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 缺少風格和調性 137
4．5．3 鮮艷的色彩並不適合所有群體 138
4．5．4 鮮艷的色彩在移動端螢幕上顯得過於扎眼 139
4．6 UI設計深色系背景使用技巧 140
4．6．1 套用深色背景的產品較少 140
4．6．2 深色背景的適用條件 141
4．6．3 深色界面的視覺風格 142
4．6．4 哪些類型的產品適合使用深色背景 144
4．6．5 使用深色背景需要注意的問題 146
4．7 UI配色欣賞 149
第5章 網站UI配色
5．1 網站UI配色常見問題 151
5．1．1 培養色彩的敏感度 151
5．1．2 通用配色理論是否適用 152
5．1．3 配色時應該選擇單色還是多色組合 153
5．1．4 快速實現完美的配色 154
5．2 網站UI元素色彩搭配 155
5．2．1 Logo與網站廣告 155
5．2．2 導航選單 156
5．2．3 背景與文字 157
5．2．4 連結文字 158
5．3 根據客群群體選擇網站UI配色 159
5．3．1 不同性別的色彩偏好 159
5．3．2 不同年齡的色彩偏好 161
5．4 根據商品銷售階段選擇網站UI配色 162
5．4．1 產品上市期的網站UI配色 162
5．4．2 產品拓展期的網站UI配色 163
5．4．3 產品銷售期的網站UI配色 163
5．4．4 產品衰退期的網站UI配色 164
5．5 如何打造成功的網站UI配色 164
5．5．1 遵循色彩的基本原理 165
5．5．2 靈活套用配色技巧 166
5．5．3 無彩色界麵點綴鮮艷色彩 167
5．5．4 選擇商品主色調作為網頁主色調 168
5．5．5 避免配色的混亂 169
5．6 根據網站內容進行UI配色 171
5．6．1 兒童網站配色 171
5．6．2 體育運動網站配色 173
5．6．3 手機數碼網站配色 174
5．6．4 文化藝術網站配色 176
5．6．5 服裝服飾網站配色 178
5．6．6 影視音樂網站配色 179
5．6．7 旅遊休閒網站配色 181
5．6．8 美食餐飲網站配色 183
5．6．9 醫療保健網站配色 185
5．6．10 房產家居網站配色 187
5．7 常見網站配色效果 189
5．7．1 女性化網站配色 189
5．7．2 男性化網站配色 191
5．7．3 穩定安靜的網站配色 192
5．7．4 興奮激昂的網站配色 194
5．7．5 輕快律動的網站配色 196
5．7．6 生動活力的網站配色 197
5．7．7 清爽自然的網站配色 199
5．7．8 高貴典雅的網站配色 200
5．7．9 優雅的網站配色 202
5．7．10 成熟的網站配色 203
5．8 網站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 調性分析，確定風格 218
6．3．2 確定主色 220
6．3．3 確定輔助色 224
6．3．4 配色微調 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種統一配色 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 控制界面的色彩數量 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配色中使用漸變的優勢 247
6．7．7 漸變配色工具 250
6．8 移動端UI配色欣賞 251
作者簡介
張曉景 男 43歲 資深設計師
Adobe 專家委員會成員
Adobe 網頁設計師認證講師
Adobe 用戶界面設計師
國家信息產業部653工程講師
中國軟體行業協會專家委員
參與國家開放大學網頁設計和網頁界面設計課程體系開發。從事平面設計、網站設計和UI設計多年，參與開發過數十個多媒體商業網站。曾參與設計了999集團設計宣傳冊，北京西單金澤大廈設計VI設計，以及國務院國資委電子資料室設計製作網站等眾多設計工作。
有豐富的教學經驗，曾參與製作教學微課、幕課上百小時。熟悉微課策劃、設計、拍攝、製作全過程。為中國石油、中國鐵路等大型企業做專業企業培訓，參與培訓北京骨幹教師活動，曾在中國傳媒大學、北京大學、北京師範大學、北京交通大學等重點院校以及Adobe創意大學和新東方等培訓機構教授設計課程。出版過相關設計類書籍數十種，參與清華大學中職教材的編寫、國家開放大學網頁設計課程規劃及教材策劃等工作。
