猪窝_产品设计

视觉设计离不开颜色,这是最基础的.最近看了很多关于这方面的资料,包括视频文章和书籍,里面的概念有些凌乱,在此汇总整理一下.基本概念了解了才能更好的理解视觉设计,能够针对视觉上的问题提出些有效的建议,同时可以保证更高效的沟通.至少现在个人上是只能看出问题,提不出来原因及解决方案,这是很无力的..

颜色的基本属性

1. 色相(Hue)

• 在web视觉设计这本书中,把色相的概念等同于色度(chroma),不过查了几个参考之后(来源1_百度百科,来源2_SmashingMagazine)个人认为色度还是与色值等价,不该与色度等价
• 色相即是什么颜色(如蓝色/红色)
• 由于各种颜色的波长不同,所以导致色相不同,颜色就不同
• 所有的颜色一起可以构成”色轮”,在photoshop中是用一个水平条表示的,而实际这个色条的顶端和尾端的颜色是相同的

2. 色值(Value)

• 也叫色度(chroma),指的是颜色的深浅程度,指包含的单种标准色成分的多少,缺乏白色,加入黑色或灰色

3. 饱和度(Saturation)

• 颜色的鲜艳程度是强还是弱
• 单纯色相纯度或浓度的大小
• 完全饱和的色相(fully-saturated hue),指的是没有混合黑,白,灰或互补色的色相.这种颜色纯度最高
• 饱和度降到最低,则图像会变为黑白色

4. 明度(Intensity)

• 明度是类似与照片的曝光过度或曝光不足时的效果
• 明度低的时候色彩会很暗,明度高的时候色彩会很亮
• 明度最低时图像就会一片黑

5. HSI颜色模式

• 以上的三个属性:色相/饱和度/明度构成的对于颜色的控制模式就是HSI颜色模式
• 一般图形/图像处理软件都是使用的这种模式,通过对色相/饱和度/明度的调节来实现对颜色的控制

6. 浅色/深色(阴影色)/调和色(色调)

• 这几种颜色都是平时设计中常用的颜色
• 对纯的色相混合白色可以得到浅色
• 对纯的色相混合黑色可以得到深色(阴影色)
• 对纯的色相混合灰色/互补色可以得到调和色
• 因为纯的色相是饱和度最高的,所以浅色/深色/调和色都是低饱和度的颜色
• 一般web设计使用的颜色都是低饱和度的颜色,可以获得更舒服更合适的颜色

暂时附个图可以更好的理解上面的概念,最近会再更新把”写给大家写的设计书”里面经典的图贴出来

• 色轮最外圈的即圆周上的点都是纯的色相,饱和度最高的
• 从圆周向圆心的方向上都是纯色混合白色,获得浅色

参考资料:

• Web视觉设计(豆瓣链接,读书笔记)
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology