移動 UI 色彩搭配

人們在回憶所看到過的場景和事物時，對色彩的記憶度要高於形態。也就是說，從視覺角度來看，一款產品給用戶留下最深印象的部分往往是其配色。對於設計師而言，色彩是偉大的工具，配色是每個設計師的必修課，是設計過程中無法繞開的一個環節。 《移動UI色彩搭配》力求跟隨當前UI配色設計的潮流趨勢，詳細講解UI配色設計的相關方法和技巧，精選國內外優秀的UI設計作品進行配色分析，提供**吸引力的UI設計配色方案，同時結合UI作品的配色設計實戰練習，全面提升讀者的UI配色設計水平，能夠真正達到學以致用的目的。另外，《移動UI色彩搭配》贈送配色演示微視頻、源文件、教學PPT課件及課後測試答案，讀者可掃描書中二維碼獲取。 《移動UI色彩搭配》適合正準備學習或者正在學習UI設計的初中級讀者，也可以作為各類在職設計人員在實際配色工作中的理想參考用書。

1章 初識UI設計配色
1.1 色彩的基礎理論 001
1.1.1 認識色彩 001
1.1.2 色彩三要素  001
1.1.3 無彩色與有彩色 004
1.2 UI設計配色的基本步驟 005
1.2.1 明確產品定位與目標 005
1.2.2 確定目標用戶體 007
1.2.3 分析競爭對手 008
1.2.4 產品測試 009
1.3 理解色彩印象 009
1.3.1 紅色 010
1.3.2 橙色 010
1.3.3 黃色 011
1.3.4 綠色 012
1.3.5 青色 013
1.3.6 藍色 013
1.3.7 紫色 014
1.3.8 黑色 015
1.3.9 白色 016
1.3.10 灰色 017
1.4 課堂作——在線圖書App配色設計 017
1.5 UI設計中的色彩角色 021
1.5.1 主題色——傳遞界面主題 021
1.5.2 背景色——支配UI整體情感 023
1.5.3 輔助色——營造獨特的UI風格 024
1.5.4 點綴色——強調重點信息與功能 026
1.6 課堂作——運動鞋App配色設計 027
1.7 UI配色的基礎原則 031
1.7.1 色調的一致性 031
1.7.2 選擇符合人們使用習慣的色彩 032
1.7.3 使用色彩劃分界面元素和內容 032
1.7.4 為用戶提供界面可選配色方案 034
1.7.5 提升界面內容的可讀性 034
1.7.6 控制色彩的使用數量 035
1.8 課堂作——影視App配色設計 036
1.9 拓展知識——了解UI和GUI設計 040
1.10 本章小結 041
1.11 課後測試 041
一、選擇題 041
二、填空題 041
三、作題 041
 
2章 UI設計配色的基本方法
2.1 色調對UI配色的影響 042
2.1.1 認識色調 042
2.1.2 基於色調的配色 043
2.2 UI元素配色 044
2.2.1 圖標配色方法 045
2.2.2 文字配色方法 046
2.2.3 UI文字易讀性規範 048
2.3 基礎配色方法 051
2.3.1 基於色相的配色關係 051
2.3.2 同類色配色 051
2.3.3 鄰近色配色 052
2.3.4 同明度配色 053
2.3.5 同純度配色 053
2.3.6 明豔色調配色 054
2.3.7 暗濁色調配色 055
2.3.8 灰調配色 056
2.4 課堂作——智能家居管理App配色設計 056
2.5 對比配色方法 060
2.5.1 色相對比配色 060
2.5.2 原色對比配色 061
2.5.3 間色對比配色 062
2.5.4 補色對比配色 063
2.5.5 冷暖對比配色 063
2.5.6 面積對比配色 064
2.5.7 主體突出的配色 065
2.6 課堂作——旅行服務App配色設計 066
2.7 通過配色表現UI情感印象 070
2.7.1 暖色調配色 070
2.7.2 冷色調配色 071
2.7.3 高調的配色 071
2.7.4 低調的配色 072
2.7.5 健康的配色 073
2.7.6 警示的配色 074
2.8 課堂作——飲料預訂App配色設計 074
2.9 拓展知識——色彩對人的心理影響 079
2.10 本章小結 080
2.11 課後測試 080
一、選擇題 080
二、填空題 081
三、作題 081
 
3章 UI設計配色技巧
3.1 UI中色彩的作用與心理感受 082
3.1.1 UI中色彩的作用 082
3.1.2 應用色彩感覺進行配色 084
3.2 使用無彩色調和UI配色 088
3.2.1 加入白色調和，使界面更加輕盈、透氣 088
3.2.2 加入黑色調和，使界面更加穩重、大氣 089
3.2.3 加入灰色調和，使UI更具有質感 091
3.2.4 綜合運用無彩色進行調和配色 092
3.3 課堂作——照片視頻分享App配色設計 092
3.4 使用色彩突出UI主題 097
3.4.1 使用高飽和度色彩烘托主題表現 097
3.4.2 通過留白突出UI主題 099
3.4.3 添加鮮豔色彩表現出UI活力 100
3.4.4 添加點綴色為UI帶來亮點 101
3.4.5 通過色彩明度對比表現出層次感 101
3.4.6 抑制輔助色或背景 103
3.5 高飽和度色彩搭配技巧 103
3.5.1 使UI內容更易讀 103
3.5.2 為交互元素應用鮮豔色彩 104
3.5.3 鮮豔的色彩更易被識別 105
3.5.4 營造氛圍，傳遞情緒 106
3.5.5 UI表現更加時尚 106
3.6 課堂作——電影票預訂App配色設計 107
3.7 拓展知識——UI使用深色背景時需要注意的問題 111
3.8 本章小結 112
3.9 課後測試 113
一、選擇題 113
二、填空題 113
三、作題 113
 
4章 網站UI配色設計
4.1 網站UI元素配色 114
4.1.1 Logo與網站廣告 114
4.1.2 導航菜單 115
4.1.3 背景與文字 115
4.1.4 鏈接文字 116
4.2 打造成功的網站UI配色 117
4.2.1 遵循色彩的基本原理 117
4.2.2 靈活應用配色技巧 118
4.2.3 無彩色界麵點綴鮮豔色彩 119
4.2.4 保持與產品色彩統一的配色設計 120
4.2.5 避免混亂的配色 120
4.3 課堂作——耳機產品宣傳網站UI配色設計 123
4.4 根據用戶體選擇網站UI配色 126
4.4.1 不同性別的色彩偏好 126
4.4.2 不同年齡的色彩偏好 127
4.5 根據商品銷售階段選擇網站UI配色 129
4.5.1 新產品上市期的網站UI配色 129
4.5.2 產品拓展期的網站UI配色 130
4.5.3 產品穩定銷售期的網站UI配色 131
4.5.4 產品衰期的網站UI配色 131
4.6 課堂作——設計服務網站UI配色設計 132
4.7 常見的網站配色印象 135
4.7.1 女性化網站配色 135
4.7.2 男性化網站配色 136
4.7.3 兒童網站配色 136
4.7.4 穩定安靜的網站配色 137
4.7.5 興奮激昂的網站配色 137
4.7.6 輕快律動的網站配色 138
4.7.7 生動活力的網站配色 139
4.7.8 清爽自然的網站配色 140
4.7.9 高貴典雅的網站配色 140
4.7.10 成熟的網站配色 141
4.8 課堂作——滑板產品宣傳網站UI配色設計 142
4.9 拓展知識——如何培養色彩敏感度 145
4.10 本章小結 146
4.11 課後測試 146
一、選擇題 146
二、填空題 147
三、作題 147
 
5章 移動UI配色設計
5.1 移動UI配色需要注意的問題 148
5.1.1 切忌把精緻美觀放在一位 148
5.1.2 UI配色要符合人們的心理印象 149
5.1.3 界面內容要便於閱讀 150
5.1.4 保守地使用色彩 150
5.1.5 切忌使用雜亂的配色 151
5.2 移動UI配色的基本流程 152
5.2.1 產品分析，確定風格 152
5.2.2 確定主題色 153
5.2.3 確定輔助色 157
5.2.4 配色調整 157
5.3 課堂作——智能停車App配色設計 159
5.4 移動UI常用的配色方法 162
5.4.1 表現統一、和諧的配色方法 163
5.4.2 表現突出、對比的配色方法 166
5.5 課堂作——時尚運動App配色設計 169
5.6 移動UI配色技巧 173
5.6.1 遵循6∶3∶1的配色原則 173
5.6.2 控制界面的色彩數量 176
5.6.3 巧用色彩對比 176
5.6.4 從大自然中獲取配色靈感 177
5.7 課堂作——電商App配色設計 178
5.8 拓展知識——色彩在移動UI設計中的作用 182
5.9 本章小結 183
5.10 課後測試 183
一、選擇題 183
二、填空題 184
三、作題 184