轩枫阁

首页 / UI设计 / 渐变设计的艺术

渐变设计的艺术

渐变的艺术

渐变是PS里的基本功能。PS渐变工具中设置好两端不同的颜色,简单一拉就就会产生渐变,还需要研究吗?实际上如何选用合适的渐变是一个设计师的基本功,也是一个界面好的开始,更是一门艺术。

效果类渐变

根据应用场景层面把界面设计分2类:效果类界面应用类界面

效果类渐变,例如网站专题,娱乐性的软件操作界面,单一界面用户停留时间不会太长,界面需要追求华丽的效果,夺人眼球,所以需要华丽的渐变搭配。

  • 效果类界面使用的渐变具有饱和度高,渐变跨度大的特点
  • 渐变亮部暗部色调可不一致
  • 渐变塑造的质感比较厚重

GEZOJC}$K0$X2CLUXQ95$(A

祖玛游戏操作界面

dwafeaf

专题界面-顶部Banner

应用类渐变

应用类界面,例如常见的电商网站,应用操作类的软件。这类界面用户实现需要在界面停留很长时间。所以需要褪去华丽的渐变,给用户创造出简单舒服的界面,所以这类界面需要的是轻量级的渐变。

  • 应用类界面使用的渐变明度跨度小
  • 渐变亮部暗部色相保持一致
  • 渐变塑造的质感比较平实

safded1

淘宝搜索栏

FN]B4182CI~HLW2P[2M[~_Y

Chrome标签导航栏

选择合适渐变的手法

先介绍下HSB颜色模式的知识。HSB分为色相、饱和度、明度三个因素。色相(H)代表这是什么颜色,比如蓝色。如果说这个蓝色比较淡,那就是饱和度(S)比较低。如果说这个蓝色比较暗,就是明度(B)比较低。

y5eyethrt6

通过PS拾色器可以观察到效果类渐变色相、饱和度和明度色值都在变,变化的幅度都比较大。而应用类一组渐变色相几乎是不变的,只是饱和度和明度色值在编。色值一般在10到15左右。

再来看通过对色相、饱和度和明度的变化会得到怎么样的渐变。

L6C$P~11V_A[W2Z{QS2O1MO

组1:色相发生变化,选取更加亮的颜色。这种手法用于效果类渐变,配合不同的颜色可稍许调节明度

组2:色相不变,明度增加。这种手法用于应用类渐变,值调节明度,使界面保持色系高度统一

组3:色相不变,饱和度增加。这种手法在效果类渐变和应用类渐变中都可以使用,比如土黄色,如果使用组2手法,容易使颜色显得很脏,这时候通过饱和度调节,加些颜色,使界面保持亮丽

选用合适颜色的渐变

一个合适的渐变先从选择合适的颜色开始,那么什么界面适用什么颜色的渐变呢?

CXHG_T2Y5M7B23Q_R0~VO(U

灰黑渐变给网站带来科技感,玻璃质感营造了时尚娱乐气息。

dfdsfgrs

蓝色渐变应用在公司、企业类官网,展示企业严谨形象,加深提高品牌。

Z(ASCQ78ZIO_NK[$X8$1

暖色调渐变橘色、黄色、红色)应用在电子商务类网站,运用暖色调渲染气氛,让用户感受到网站整体的活跃氛围和愉悦感。

zfcwcwer

黑色、咖啡色、紫色、酒红色,可应用在奢侈品网站上,表现一种定位高端、产品品质一流的感觉。

渐变使用注意点

  • 一个界面上应用的色彩体系不宜超过4个以上,否则界面显得杂乱无章。一个色相就是一个色彩体系。
  • 一个界面上出现的渐变尽量保持明度跨度一致。举例说明渐变A的明度跨度为+10,同一个界面上的渐变B的渐变跨度不应该为+30。不必死板的都要+10,因为色彩是微妙感性的,不应该过于被数字所束缚,但严谨的色彩体系一定是有系统有意识的控制颜色。

如下图,绿色系渐变明显跨度比其他3组要大,显得突兀。

sacedf

  • 灵活使用灰度渐变,会让你的界面统一高雅。
  • 渐变与整体界面气质保持一致,如果整个界面走平实路线,那么就要统一到底,不要界面中突然冒出无厘头的玻璃质感。

转载自:风尾竹-站酷

本文标题:渐变设计的艺术 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
208/456
210/456

相关文章

文章评论

  • 我也想听大家的建议!谢

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]