网页配色从入门到精通

第 1章 色彩搭配基础

1.1 色彩入门知识

1.1.1 色彩的产生

1.1.2 光源色、物体色和固有色

1.2 色彩的属性

1.2.1 色相

1.2.2 明度

1.2.3 饱和度

1.3 色彩在网页中的应用

1.3.1 网页色彩特征

1.3.2 网页安全色

1.4 色彩的联想作用

1.4.1 红色

1.4.2 橙色

1.4.3 黄色

1.4.4 绿色

1.4.5 蓝色

1.4.6 紫色

1.4.7 黑、白、灰

1.5 网页色彩搭配的基础

1.5.1 网页配色的注意事项

1.5.2 灵活应用配色技巧

1.5.3 避免配色的混乱

1.6 网页配色搭配的常见问题

1.6.1 培养色彩的敏感度

1.6.2 通用配色理论是否适用

1.6.3 配色时选择双色和多色组合

1.6.4 尽可能使用两至三种色彩搭配

1.6.5 如何快速实现完美的配色

1.7 培养色彩搭配的感觉

1.7.1 基于色相的配色关系

1.7.2 基于色彩的配色关系

1.7.3 渐变配色

1.7.4 相反色相/类似色调配色

1.7.5 相反色相、相反色调配色

1.7.6 同一或类似色相/类似色调配色

1.7.7 同一或类似色相/相反色调配色

第 2章 网页设计配色基础

2.1 色彩在网页视觉设计中的作用

2.1.1 突出网页主题

2.1.2 划分视觉区域

2.1.3 吸引浏览者目光

2.1.4 增强网页艺术性

2.2 色彩的联想作用与心理效果

2.2.1 色彩的软硬

2.2.2 色彩的冷暖

2.2.3 色彩的轻重

2.2.4 色彩的前后

2.2.5 色彩的大小

2.2.6 色彩的活泼和端庄感

2.2.7 色彩的兴奋和沉稳感

2.2.8 色彩的华丽和朴素感

2.3 网页配色的方法

2.3.1 背景色

2.3.2 主色

2.3.3 辅助色

2.3.4 点缀色

2.4 网页配色技巧

2.4.1 配色原则

2.4.2 确定网页文本配色

2.5 影响网页风格的配色

2.5.1 冷暖配色

2.5.2 白色的应用

2.5.3 饱和度影响配色

2.6 影响配色的元素

2.6.1 根据行业特征选择网页配色

2.6.2 根据色彩联想选择网页配色

2.6.3 根据受众色彩偏好选择网页配色

2.6.4 根据生命周期选择网页配色

2.7 色彩与网站布局

2.7.1 布局和配色的分组和整合

2.7.2 布局和配色的对称和平衡

2.7.3 布局和配色的强调和突出

2.7.4 布局和配色的虚实和留白

2.8 色彩对网站交互的影响

2.8.1 颜色的呈现效果由底色决定

2.8.2字体的可读性由颜色的明度差异影响

2.9 移动端网站配色特点

2.9.1 色调的统一

2.9.2 巧用对比配色

2.9.3 巧用色彩类别

2.9.4 测试配色方案

第3章 色彩搭配的选择标准

3.1 合理应用色彩的对比

3.1.1 色彩面积大小

3.1.2 色彩面积的位置对比

3.2 网页主题突出的配色

3.2.1 提高色彩纯度

3.2.2 增大色彩明度差

3.2.3 增强色相型

3.2.4 控制点缀点

3.2.5 抑制辅助色或背景色

3.3 保持页面一致性的配色技巧

3.3.1 接近色相

3.3.2 统一明度

3.3.3 添加类似色或同类色

3.3.4 控制稳定感

3.3.5 接近色调

3.3.6 网页的渐变配色

3.4 配出四季的颜色

3.4.1 春天

3.4.2 夏天

3.4.3 秋天

3.4.4 冬天

3.5网页元素色彩搭配

3.5.1 导航菜单

3.5.2 Logo与内容

3.5.3背景与文字

3.5.4 链接文字

第4章 网页布局配色

4.1 网站标志配色

4.1.1 游戏网站标志配色

4.1.2 新闻网站标志配色

4.1.3 电商网站标志配色

4.1.4 图书网站标志配色

4.1.5 个人网站标志配色

4.2 网站导航配色

4.2.1 教育网站导航配色

4.2.2 家居网站导航配色

4.2.3 家居网站导航配色

4.2.4 食品网站导航配色

4.4.5 个人网站导航配色

4.3 网站图片配色

4.3.1 家居网站图片配色

4.3.2 企业网站图片配色

4.3.3 学校网站图片配色

4.3.4 社交网站图片配色

4.3.5 旅游网站图片配色

4.4 网站整体布局配色

4.4.1 美食网站布局配色

4.4.2 教育网站布局配色

4.4.3 休闲网站布局配色

4.4.4 儿童网站布局配色

4.4.5 美食网站布局配色

第5章 网页交互配色

5.1 按钮交互的颜色搭配

5.1.1 企业网站按钮交互的颜色搭配

5.1.2 数码网页按钮交互的颜色搭配

5.1.3 美食网页按钮交互的颜色搭配

5.1.4 家电网页按钮交互的颜色搭配

5.1.5 旅游网页按钮交互的颜色搭配

5.2 页面交互的配色搭配

5.2.1 家居页面交互的配色搭配

5.2.2 服装页面交互的配色搭配

5.2.3 教育页面交互的配色搭配

5.2.4 汽车页面交互的颜色搭配

5.2.5 餐厅页面交互的颜色搭配

5.3 弹出菜单的颜色搭配

5.3.1 儿童网页弹出菜单的颜色搭配

5.3.2 咖啡网页弹出菜单的颜色搭配

5.3.3 休闲网页弹出菜单的颜色搭配

5.3.4 信息网页弹出菜单的颜色搭配

5.3.5 汽车网页弹出菜单的颜色搭配

5.4 超链接的颜色搭配

5.4.1 公司网页超链接颜色搭配

5.4.2 室内装饰网页超链接颜色搭配

5.4.3 信息网页超链接颜色搭配

5.4.4 绘画网页超链接颜色搭配

5.4.5 数码网页超链接颜色搭配

第6章 移动端网页配色

6.1 移动端图标的色彩搭配

6.1.1 天气APP图标的色彩搭配

6.1.2 医疗APP图标的色彩搭配

6.1.3 购物APP图标的色彩搭配

6.1.4 运动APP图标的色彩搭配

6.2 移动端登录界面色彩搭配

6.2.1 美食APP登录界面色彩搭配

6.2.2 社交APP登录界面色彩搭配

6.2.3 绘图APP登录界面色彩搭配

6.2.4 邮箱APP登录界面色彩搭配

6.3 移动界面广告色彩搭配

6.3.1 商场APP广告色彩搭配

6.3.2 食品APP广告界彩搭配

6.3.3 外卖APP广告色彩搭配

6.3.4 品牌APP界面广告色彩搭配

6.4 APP启动界面色彩搭配

6.4.1 修图APP启动界面色彩搭配

6.4.2 美食APP启动界面色彩搭配

6.4.3 理财APP启动界面色彩搭配

6.4.4 交友APP启动界面色彩搭配

6.5 电商活动页的色彩搭配

6.5.1 金融活动APP色彩搭配

6.5.2 服装活动APP色彩搭配

6.5.3 电商活动APP色彩搭配

6.5.4 产品活动APP色彩搭配