互联网产品视觉设计-配色篇

《互联网产品视觉设计-配色篇》-罗慧

1.了解色彩

1.1色彩的属性

色相H

Hue，色彩的不同相貌

1.色相环：蒙赛尔十色相环

2.色相对比

* 同类色相：色相相距15度以内的对比

* 类似色相：色相相距30度左右的对比，特点是和谐统一，比同类色相的效果更为丰富。

* 邻近色相：色相距离50-60度左右（90度以内），既能保持统一，又克服视觉不满足的缺点。

* 对比色相：色相相距120度左右，对比鲜明，体现生动。

* 互补色相：色相距离180度，给人生动、刺激的强烈感受，适合短时间获得深刻印象。

明度V

value，色的明暗程度，可称色的亮度、深浅。

分为：

1.高明度

2.中明度：网站配色常用的

3.低明度

4.色的易见度（注目度）：色彩的属性差异越大，注目就大。

 彩度S

saturation,色彩的鲜艳度，即饱和度。色相的彩度、明度是不成正比，由人的视觉生理条件决定。

色相的明度与彩度的关系

* 高彩度：高纯度、生动鲜明的颜色。

* 中彩度：使用较多

* 低彩度

色调

tone，三属性中除了色相意外的明度和彩度的复合称谓。

色调的11个阶段：

色调的11个阶段

色调与色相分布：

色调和色相分布图

1.类似色调分布

2.相反色调分布

相反色调关系

冷暖

人体本身的经验习惯赋予的一种感觉。

色环上的冷暖分布

1.2网页色彩的模式

RGB色彩模式

三原色，适用于显示器上的所有图形。

Index色彩模式

又即索引模式，把图像限制为不超过256种颜色，可以有效缩减图像文件的大小，同时适度保持图像文件的色彩品质。

216种网页安全色

在不同硬件环境、操作系统、浏览器上都能正常显示的216种网页安全色

1.3色彩在界面中的作用

主辅色与强调色

强调色：与主色彩行程对比的色相、色调，面积较小引人注目。

营造氛围，塑造风格

色调决定网页的整体印象，色相带给人们不同联想。

强化视觉区域，引导视觉流程

区分不同的内容板块，或者利用色彩的主次关系做不同层次信息的表达，控制流浪者的关注点的变化过程。

1.4配色原则

1. 准确：符合企业形象、社会文化环境、用户喜好

2. 整体：主页和辅页采取统一的主色彩

主页和辅页采取不同色相的主色彩：需用不同色相、类似色调来加强统一感。

考虑图片和网站色彩计划之间的联系。

3.个性

2.基于色相的配色

3.基于色彩印象的配色

色彩印象空间：色彩具有直感性心理效应，或间接性心理效应

* 低彩度：含灰的亮色，有柔软感，飘逸感，含灰的纯色及暗色有坚硬感和结实感。

温和、隐约、高尚印象

* 高彩度：可爱、欢快、动感

* 中彩度：洁净、自然、优雅、华丽、稳重

附：

常用配色搭配

中日配色方案

4.基于桌面网站内容与类型的配色

从汽车类等多领域的特性着手，介绍相关的网站的配色方案，案例丰富，可以作为相关设计人员的参考。

常用：灰、蓝、白。色彩不宜过多，抓住细节。

5.基于移动网站/app内容的配色

阅读类、餐饮类（多用精美大图）

6.界面配色技巧

配色工具：adobe kuler、colorschemedesigner

加强界面色彩调和：

* 类似色相、类似色调

在色调相同或类似基础上，用色相的差别来表现出细微不同的感觉。如果是同一色相，或类似色相，则用色调的差别来打破单一。

* 相反色相、类似色调

对比色相很强，但通过同一或类似的色调得到调和的配色方法，决定最终效果的是色调的面貌。

加强网页色彩对比

* 相反色相、相反色调

富于变化感和冲突性，需要根据主题和月度的舒适度，综合色相和色调来调整和分配色彩所占比例的大小。

* 类似色相、相反色调

营造“统一中的突出效果”，色调差异越大突出的效果越明显。

渐变

以色彩的排列为主的配色方案，会给人韵律感

分离

通过向颜色之间插入一个分离色，通常用白色或黑色等非彩色，一般面积不宜过大。

三角调和与四角调和

三角调和：凡在色相环中构成等边三角形或等腰三角形的三个色是调和的色相。

四角调和：凡在色相环中构成正方形或长方形的四个色是调和的色组。

总结

整本书专业度一般，对于PM了解色彩及配色原理来说有一定价值，已有基础的人可以不看。特点在于结合配色的原理，具有丰富的互联网网站及APP的案例，对于实操的相关人员有一定启发作用。