网页+App UI配色设计教程电子书

内容简介

PREFACE 前言

读者服务

第1章 色彩理论

1.1 什么是色彩

1.1.1 认识色彩

1.1.2 色光三原色与色料三原色

1.1.3 光源色与物体色

1.2 色彩属性

1.2.1 色相表现出不同的色彩意象

1.2.2 明度体现出色彩的明暗程度

1.2.3 饱和度决定了色彩的鲜艳程度

1.3 无彩色与有彩色

1.4 色彩模式

1.4.1 适合屏幕显示的色彩模式——RGB

1.4.2 适合印刷品的色彩模式——CMYK

1.4.3 加法混合与减法混合

1.4.4 网页安全色

1.5 配色的基础规律——色系

1.5.1 原色

1.5.2 间色

1.5.3 复色

1.5.4 类似色

1.5.5 邻近色

1.5.6 对比色

1.6 影响作品总体色彩印象的要素——色调

1.7 色彩对人的心理影响

1.8 色彩的视觉感受

1.8.1 色彩的轻重感

1.8.2 色彩的冷暖感

1.8.3 色彩的前进与后退

1.8.4 色彩的华丽与质朴

1.8.5 色彩的软硬感

1.8.6 色彩的大小感

1.8.7 色彩的兴奋与沉静

1.8.8 色彩的活泼与庄重

1.9 UI配色欣赏

第2章 UI配色基础

2.1 关于UI设计

2.1.1 什么是UI设计

2.1.2 什么是GUI设计

2.1.3 关于UE/UX

2.1.4 移动UI设计的崛起

2.2 UI配色的基本步骤

2.2.1 明确产品的定位与目标

2.2.2 确定目标用户群体

2.2.3 分析竞争对手

2.2.4 产品测试

2.3 影响UI配色的因素

2.3.1 UI的可读性和易读性

2.3.2 产品的可访问性

2.3.3 UI清晰度

2.3.4 适配不同设备

2.3.5 考虑到使用场景

2.3.6 通过配色在UI中创造视觉层次

2.4 感知色彩

2.4.1 红色

2.4.2 橙色

2.4.3 黄色

2.4.4 绿色

2.4.5 青色

2.4.6 蓝色

2.4.7 紫色

2.4.8 黑色

2.4.9 白色

2.4.10 灰色

2.5 色彩在UI中所扮演的角色

2.5.1 主题色——传递作品核心主题

2.5.2 背景色——支配UI整体情感

2.5.3 辅助色——营造独特的UI风格

2.5.4 点缀色——强调界面重点信息与功能

2.6 UI配色的基础原则

2.6.1 色调的一致性

2.6.2 保守地使用色彩

2.6.3 色彩的选择尽可能符合人们的审美习惯

2.6.4 使用色彩作为功能分界的识别元素

2.6.5 能够让用户调整界面的配色方案

2.6.6 色彩搭配要便于阅读

2.6.7 控制色彩的使用数量

2.7 使用配色软件进行配色

2.7.1 ColorKey XP

2.7.2 Color Scheme Designer

2.7.3 Check My Colours

2.7.4 ColorJack

2.8 UI配色欣赏

第3章 UI配色基本方法

3.1 色相配色方法

3.1.1 基于色相的配色关系

3.1.2 相反色相、类似色调配色

3.1.3 相反色相、相反色调配色

3.1.4 渐变配色

3.1.5 无彩色和彩色

3.2 色调配色方法

3.2.1 基于色调的配色关系

3.2.2 相同色相或类似色相、类似色调配色

3.2.3 相同色相或类似色相、相反色调配色

3.3 融合配色使UI的表现更加平稳

3.3.1 同明度配色使界面更融合

3.3.2 同饱和度配色使界面表现更和谐

3.3.3 同类色单色调配色

3.3.4 复合色调配色

3.3.5 暗浊色调配色

3.3.6 明艳色调配色

3.3.7 灰色调配色

3.3.8 层次感配色

3.4 对比配色使UI的表现更加强烈

3.4.1 在UI中加入强调色

3.4.2 色相对比配色

3.4.3 原色对比配色

3.4.4 间色对比配色

3.4.5 补色对比配色

3.4.6 冷暖对比配色

3.4.7 面积对比配色

3.4.8 主体突出的配色

3.5 文字配色方法

3.5.1 UI与文字配色关系

3.5.2 良好的UI文字配色

3.5.3 最佳易读性规范

3.6 图标配色方法

3.6.1 通过情绪板选择图标颜色

3.6.2 通过目标人群选择图标配色

3.6.3 根据品牌选择图标颜色

3.6.4 四色原则

3.7 表现情感与心理的配色

3.7.1 暖色调配色

3.7.2 冷色调配色

3.7.3 高调的配色

3.7.4 低调的配色

3.7.5 健康的配色

3.7.6 警示的配色

3.8 UI配色欣赏

第4章 UI配色技巧

4.1 给你的配色做减法

4.1.1 视觉区分

4.1.2 调整界面风格

4.1.3 吸引用户注意力

4.2 突出界面主题的配色技巧

4.2.1 提高色彩纯度烘托主题

4.2.2 增加色彩明度差表现层次感

4.2.3 添加鲜艳的色相使界面表现出活力

4.2.4 添加点缀色为界面带来亮点

4.2.5 抑制辅助色或背景色

4.2.6 使用留白突出界面主题

4.3 黑白灰配色技巧

4.3.1 调和白色使画面具有透气感

4.3.2 调和黑色使画面具有稳定感

4.3.3 调和灰色使画面表现出质感

4.3.4 综合运用黑白灰搭配

4.4 使用鲜艳的配色方案提升UI设计效果

4.4.1 提升界面的可读性和易读性

4.4.2 锐化导航并提升互动

4.4.3 可识别性

4.4.4 营造氛围，传递情绪

4.4.5 时尚的UI设计风格

4.5 鲜艳的配色方案在UI设计中存在的问题

4.5.1 鲜艳的配色不易搭配

4.5.2 缺少风格和调性

4.5.3 鲜艳的色彩并不适合所有群体

4.5.4 鲜艳的色彩在移动端屏幕上显得过于扎眼

4.6 UI设计深色系背景使用技巧

4.6.1 应用深色背景的产品较少

4.6.2 深色背景的适用条件

4.6.3 深色界面的视觉风格

4.6.4 哪些类型的产品适合使用深色背景

4.6.5 使用深色背景需要注意的问题

4.7 UI配色欣赏

第5章 网站UI配色

5.1 网站UI配色常见问题

5.1.1 培养色彩的敏感度

5.1.2 通用配色理论是否适用

5.1.3 配色时应该选择单色还是多色组合

5.1.4 快速实现完美的配色

5.2 网站UI元素色彩搭配

5.2.1 Logo与网站广告

5.2.2 导航菜单

5.2.3 背景与文字

5.2.4 链接文字

5.3 根据受众群体选择网站UI配色

5.3.1 不同性别的色彩偏好

5.3.2 不同年龄的色彩偏好

5.4 根据商品销售阶段选择网站UI配色

5.4.1 产品上市期的网站UI配色

5.4.2 产品拓展期的网站UI配色

5.4.3 产品销售期的网站UI配色

5.4.4 产品衰退期的网站UI配色

5.5 如何打造成功的网站UI配色

5.5.1 遵循色彩的基本原理

5.5.2 灵活应用配色技巧

5.5.3 无彩色界面点缀鲜艳色彩

5.5.4 选择商品主色调作为网页主色调

5.5.5 避免配色的混乱

5.6 根据网站内容进行UI配色

5.6.1 儿童网站配色

5.6.2 体育运动网站配色

5.6.3 手机数码网站配色

5.6.4 文化艺术网站配色

5.6.5 服装服饰网站配色

5.6.6 影视音乐网站配色

5.6.7 旅游休闲网站配色

5.6.8 美食餐饮网站配色

5.6.9 医疗保健网站配色

5.6.10 房产家居网站配色

5.7 常见网站配色效果

5.7.1 女性化网站配色

5.7.2 男性化网站配色

5.7.3 稳定安静的网站配色

5.7.4 兴奋激昂的网站配色

5.7.5 轻快律动的网站配色

5.7.6 生动活力的网站配色

5.7.7 清爽自然的网站配色

5.7.8 高贵典雅的网站配色

5.7.9 优雅的网站配色

5.7.10 成熟的网站配色

5.8 网站UI配色欣赏

第6章 移动端UI配色

6.1 移动端UI设计概述

6.1.1 视觉设计

6.1.2 版式设计

6.1.3 色彩在移动端UI设计中的作用

6.2 移动端UI配色需要注意的问题

6.2.1 切忌把赏心悦目、形式感放在第一位

6.2.2 UI配色需要符合人们的预期

6.2.3 配色要便于阅读

6.2.4 保守地使用色彩

6.2.5 杂乱的配色会增加用户的记忆负担

6.3 移动端UI配色的基本流程

6.3.1 调性分析，确定风格

6.3.2 确定主色

6.3.3 确定辅助色

6.3.4 配色微调

6.4 使用HSB色彩模式进行配色

6.4.1 什么是HSB色彩模式

6.4.2 使用HSB色彩模式进行配色的方法

6.4.3 柔和的微渐变配色

6.5 移动端UI设计常用配色方法

6.5.1 5种统一配色

6.5.2 4种对比配色

6.5.3 3种强视觉效果的配色

6.6 移动端UI配色技巧

6.6.1 遵循6:3:1的配色原则

6.6.2 控制界面的色彩数量

6.6.3 巧用色彩对比

6.6.4 从大自然中获取配色灵感

6.7 UI配色的新趋势——渐变

6.7.1 渐变色的趋势

6.7.2 线性渐变

6.7.3 在图片上叠加渐变

6.7.4 多角度、多层次渐变叠加

6.7.5 具有功能性的渐变效果

6.7.6 在UI配色中使用渐变的优势

6.7.7 渐变配色工具

6.8 移动端UI配色欣赏