网页+App UI配色设计教程

图书标准信息

• 作者 张晓景
• 出版社 电子工业出版社
• 出版时间 2021-06
• 版次 1
• ISBN 9787121411151
• 定价 89.80元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 260页
• 字数 416.000千字

【内容简介】

任何UI设计都离不开色彩，良好的配色是UI设计成功的基础。每一种色彩都有不同的属性和意象，掌握一定的配色方法和技巧，能够使我们在UI设计过程中更加精准地使用色彩。色彩给人的印象往往非常重要，成功的配色能够将UI设计所包含的信息快速准确地传递给受众群体。反之，如果配色不合理，则会使UI设计的表现效果大打折扣，甚至令人反感。
  本书从研究色彩的构成开始，图文并茂、循序渐进地讲解色彩的原理、配色方法和技巧，通过对色彩理论、UI配色基础、UI配色基本方法、UI配色技巧、网站UI配色和移动端UI配色进行深入的讲解，同时结合相关案例的配色分析，全面提升读者的UI配色设计水平，能够真正达到学以致用的目的。

【作者简介】

张晓景  男  43岁  资深设计师 

Adobe 专家委员会成员 

Adobe 网页设计师认证讲师

Adobe 用户界面设计师

国家信息产业部653工程讲师

中国软件行业协会专家委员

       参与国家开放大学网页设计和网页界面设计课程体系开发。从事平面设计、网站设计和UI设计多年，参与开发过数十个多媒体商业网站。曾参与设计了999集团设计宣传册，北京西单金泽大厦设计VI设计，以及国务院国资委电子资料室设计制作网站等众多设计工作。

有丰富的教学经验，曾参与制作教学微课、幕课上百小时。熟悉微课策划、设计、拍摄、制作全过程。为中国石油、中国铁路等大型企业做专业企业培训，参与培训北京骨干教师活动，曾在中国传媒大学、北京大学、北京师范大学、北京交通大学等重点院校以及Adobe创意大学和新东方等培训机构教授设计课程。出版过相关设计类书籍数十种，参与清华大学中职教材的编写、国家开放大学网页设计课程规划及教材策划等工作。

【目录】

第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