打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
UI设计中色彩搭配原则

如何在设计过程中更好的运用色彩,相信是很多设计师心头的一大疑难。对于新手来说可能不知道从而下手,不知道界面的色彩改怎么去搭配,小编想了想,如果是直接给一个教程的,跟着学,或许你可以运用的不错,但是抛开案例教程自己重新操作的,可能又会回到无头苍蝇的状态,不知道如何配色。所以先 从理论知识去认识色彩,然后结合案例,真正的掌握



色彩三要素

色彩的三要素指的就是色相、明度和纯度。这三个分别是什么意思呢?我们可以这样理解:


色相

色相指色彩的相貌,不同的波长决定不同的色相,这是大家最直观感受到的色彩。色相对于色彩是最直接的代表,是色彩的灵魂。



在光谱中,红、橙、黄、绿、蓝、紫等由于有着不同的波长,带给我们不同的色彩感受,它们是最基本的色相,其他诸如象牙白、柠檬黄等都是指色彩特定的色相,是人们对不同色相的不同称谓。有一个地方要注意,黑色和白色是无色相的

打个比方,色相就好比人的长相,我们区分两个人的不同通常是说两个人长的不一样的相貌,色相中的“相”其实也是一样的意思,在日常生活中,一般人往往会忽视色彩的明度、纯度等要素,对色彩最直接的印象就是色彩的色相表现了。


明度

明度指色彩的明暗程度。明度可以说是色彩的骨架,明度对色彩的结构起着关键性的作用。明度具有定的独立性,它可以离开色相和纯度单独存在,而色彩的色相和纯度总是伴随着明度一起出现的,所以明度是色彩的骨架。


这样子说可能有的人还不是很理解,通俗点解释就是通过色相的加白加黑的一个变化,任何色彩都存在明暗变化的,从明度光谱上可以看到最明亮的颜色是黄色,处于光谱的中心位置。最暗的是紫色,处于光谱的边缘。


色彩从白到黑的两端靠近亮的一端的色彩称为高调,靠近暗的一端的色彩称为低调,中间部分为中调;明度反差大的配色称为长调,明度反差小的配色称为短调,明度反差适中的配色称为中调。提高色彩明度的方法有加入白色或稀释颜色。


纯度

纯度指色彩的鲜艳程度,就是色彩的饱和度、纯净度、彩度。直观理解就是指色彩的鲜浊程度。纯度最高的色彩就是原色,随着纯度的降低,色彩就会变的暗、淡。纯度降到最低就是失去色相,变为无彩色,也就是黑色、白色和灰色。



三者之间的关系

明白了具体的色彩原理,那么他们之间是什么关系,根据上面的说法,那么明度和纯度又有什么关系?我们通过几张张图来表示:



明度和纯度的关系



UI设计中色彩的使用


那么在UI设计过程中色彩该如何去搭配?主要通过4部分来讲解。在UI界面设计比例中:用色一般分为主色,次色和辅助色,它们的比例是按照20%-30%、5%-10%5%来进行配色,通过不同的配色比例让界面看起来不会出现突兀或者是主次不分的情况。


○认识APP界面的颜色


  • 主色

一款APP中的主色就是我们在一款APP中见到的除了背景之外最多的颜色,也可以说这个主色就是这一款APP的代表色



在UI设计界面中,主色主要用于导航栏、状态栏和标签栏等,但一般用色的面积也不会太多,只占了我们页面的20%—30%左右。



  •  次色

所谓的次色主要用于主色的配合,调整一些状态,例如图标的按下状态。



一般就是通过我们的主色相同的色调,加黑或者加白来调整深色和明暗。


  • 辅助色

辅助色顾名思义,就是用来辅助的APP的颜色,也可以简答的理解为点缀色,通过辅助色的点缀,让整个界面看起来更加的丰富,一般用在分类导航图标、设置功能图标、消息通知(多用红色)、标签等,它的用色占了整个页面用色的5%—10%左右。




  • 背景色

一般一款APP的背景色我们使用得最多的是无色系(黑白灰为主),通过无色系作为背景让整个界面看起来更加的整洁干净,它一般会用在界面中的背景、文字、区块、分割线、边框这些地方。这个背景色也是界面中颜色最多的,




○颜色的选择

通常来说,为了让页面更加的生动突出,一般我们常用鲜艳色调,但是不要用饱和度明度高和很纯的颜色,因为这些颜色太刺眼,所以我们再做的时候会要求要去注意做到柔和不刺激。


刚才也说了,不要使用很纯的颜色:例如纯黑和纯灰,因为纯色不好看,太刺眼。用色的时候,可以善用透明度去让颜色之间有过度,还可以通过叠加、柔光的模式去调整多种颜色之间的融合,让页面看起来更加的协调。当然再用色的时候我们也要时刻注意内容之间的对比,让文字和其它内容有足够的辨识度。

好了,希望对大家有用~本文为原创文章,如需用于商业用途或装载的记得联系小编获得授权哦~



本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
色彩的基础
这是最简单粗暴的色彩解决方案
影楼数码照片的后期制作
一看就会的配色理论,不再被说配色“辣眼睛”!
色彩构成 - 色彩学5
颜色在灯光设计中的使用
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服