软月互动-基于网络营销的完美网站建设服务商

    网页设计时配色不够协调怎么办?

  • 来源:
    美工美邦
    栏目:
    用户体验
  • 南京网页设计:设计工作中,配色一直以来都是设计圈内老生常谈的话题,一幅优秀的作品离不开合理协调的颜色搭配。不同的颜色所表达的含义不同。即便是相同的颜色,明度和纯度不同,给人的视觉感受也不同。

    虽然说配色是感性的,但每个人对于色彩的把控力和敏感度不尽相同,所以导致配色能力也参差不齐,这时候我们就需要运用到一些配色规则,提升我们对色彩的感知力。

    商业设计师跟艺术家不一样,配色要考虑普通用户的认可度和接受能力,有效的传递信息才是最重要的。所以在商业设计中,配色并不是越有艺术感越好,如何做到协调才是重点。

    色相一致的配色

    关于颜色的属性,色相、明度、纯度网上有很多相关的文章,感兴趣的朋友可以百度一下。

    色相一致的配色更协调

    简单的理解就是,如果使用蓝色就全部使用蓝色,这种形式的配色给人的视觉感受更协调、一致,也易于大家接受。

    我们都知道,颜色的属性有:色相、明度、纯度,在保持一个属性情况下,另外2个就是变量,即明度和纯度。

    网页设计时配色不够协调怎么办

    如上图所示,两种配色形式给人的感觉都比较协调且不单调,这就是色相一致的配色所带来的直观感受。

    类似案例:

    网页设计时配色不够协调怎么办

    网页设计时配色不够协调怎么办

    如上图所示,色相一致的配色总是给人一种协调、平和的视觉感受,但如果大面积的使用,因为色彩上变化不够强烈,也会给人一种单调的感觉,我们应该如何解决?

    网页设计时配色不够协调怎么办

    美食都讲究色香味俱全,所谓色,就是食物看起来是否足够吸引人,就如同上面的烧鸡一样,第一眼看上去,你会选择吃哪个?

    肯定大家都会选择右边,花同样的钱,能够多吃点一点不香吗?

    当配色单调的时候,就可以加点料,例如:

    网页设计时配色不够协调怎么办

    通过上下改动对比不难发现,点缀色的使用能够很好的规避因主色色相一致导致的单调感。所以不管是网页设计还是海报画册设计,尽量不要从头到尾的大面积使用相同的一个色相。

    PS:使用色相相近的色相,画面整体配色的协调感和统一感也不会消失,只会在色相上增加一些微妙的变化,比如黄色和橙色。

    明度一致的配色

    明度一致的配色,即使多种颜色相互组合,也能让整体显得很协调、富有均衡感,并且能有效的避免出现单调的情况。

    比起纯度及色相,明度是让眼睛更容易捕捉到的“变化”。而明度一致,意味着没有特别凸显或者醒目的视觉效果,配色上相对来说比较均衡。

    明度越低,色彩的属性越弱,越接近黑色。

    网页设计时配色不够协调怎么办

    其实,颜色本身就带有明度的特性,即便我们在数值上调整明度一致,但视觉上依然会有差别,比如蓝色本身就要比黄色明度低。

    网页设计时配色不够协调怎么办

    所以,如果我们想要视觉上明度相似的配色形式,可以去色处理。灰色的明度差就和原色相等,例如:

    网页设计时配色不够协调怎么办

    所以去色之后的灰色相似,也就意味去色前颜色视觉上明度相似。

    网页设计时配色不够协调怎么办

    前面提到,明度是让眼睛更容易感受到“变化”的颜色属性,明度一致的配色方式,相对来说各种色相对于视觉的影响力比较均衡,所以对比并不会很强烈,多用于偏文艺风格,这种配色形式有一定的局限性。

    如何通过明度一致的配色,营造强烈的视觉冲击呢?

    在特定的情况下,也是可以办到的!

    比如有彩色和无彩色,这两者本身就是具有对比性,所以即便是明度一致的配色,在无彩色的衬托下,依然可以营造强烈的视觉冲击。

    网页设计时配色不够协调怎么办

    所以说“理论是死的,人是活的”,一定要学会灵活运用。

    纯度一致的配色

    纯度,顾名思义就是颜色的鲜艳程度,相比前两者,纯度一致的配色给人的印象变化比较大,纯度对人的心理影响更大。

    当色相种类多的时候,纯度不同的配色,会让整体缺少一致性,没那么协调,例如:

    网页设计时配色不够协调怎么办

    通过上图,我们不难发现,相比之下,纯度一致的配色给人一种统一感,并且,纯度高的配色更让人感觉活泼、有张力。纯度低的配色更冷静、稳重和信赖。

    但纯度一致的配色在现实工作中运用的并不多,这里简单了解即可。

    从生活中取色

    其实,我们日常工作、生活中,配色并不是凭空想象的,可以建立在某些基础上,从而通过配色让作品整体协调统一。

    简单来说,协调的配色就在我们身边,比如树木,我们会想到绿色,海洋会想到蓝色,再比如花卉对应的有红色、粉色、黄色等等。

    那么,我们就可以从大自然中获得协调的配色,当主题确定时,我们可以尝试从自然界中的配色或者熟悉的风景色彩中找到。

    比如:围绕“立秋”为主题,如何配色符合主题协调性呢?

    网页设计时配色不够协调怎么办

    说到秋天,我们会想到的颜色是金黄色,先不考虑怎么配色,既然想到了秋天,我们就可以先找一张秋天的照片,获取灵感。图片下载后,如何提取颜色呢?我们可以放到PS里,滤镜-像素化-马赛克,就可以得到下图:

    网页设计时配色不够协调怎么办

    图片马赛克处理之后,就会变成大的像素格子,我们就可以从像素格子里面吸取颜色,相互组合,可以得到下面这个色卡:

    网页设计时配色不够协调怎么办

    应用到实际案例中:

    网页设计时配色不够协调怎么办

    是不是给人的感觉很协调、一致呢?

    像这种马赛克取色的方式,就为我们提供了很好的配色灵感,我们只需要根据实际运用,稍微调整下,就可以让作品整体的配色协调、统一。

    用这种方法,可以得到很多不同类型的配色方案:

    网页设计时配色不够协调怎么办

    这种从自然图片中马赛克的取色方式,能得到很协调的配色,运用到设计工作中也很方便。

    在设计工作中,协调的配色还可以更直接。

    选取画面中的主体物作为配色的参考,可以让整体配色极具协调性,这种配色形式我们再工作中也经常会用到。

    一般有以下几种情况:

    1、当画面主体是某种产品时

    商业设计很多时候是离不开产品的,当有色感的产品作为画面主体时,产品本身的固有配色形式就能很好的成为我们的配色参考。

    网页设计时配色不够协调怎么办

    上图所示,产品本身色感很强,整体配色完全沿用了键盘本身的颜色搭配,尽管色相种类挺多,但整体的配色形式与产品本身形成了很好的呼应关系,所以丝毫不影响整体的协调性。

    网页设计时配色不够协调怎么办

    PS:当产品是纯色时,可能会出现配色因为色相过于统一导致整体单独。那么可以考虑给整体加点点缀色,既不改变整体的协调性,又能很好的避免出现单调的情况。

    网页设计时配色不够协调怎么办

    另外,也可以选择与产品本身相冲突的颜色进行搭配,这种配色形式在视觉上冲击力更强。

    网页设计时配色不够协调怎么办

    2、当画面主体是图像时

    比如我们的主体是图像,场景图,那么协调的配色就可以参考图像中的颜色,并且这种形式会更方便。

    网页设计时配色不够协调怎么办

    其原理是一样的,就是与主体在色彩上形成呼应关系,所以作品整体看会比较协调。


    最后:软月互动深耕南京网站制作行业12年,始于梦想,衷于初心!主营南京网站建设、小程序开发、品牌包装设计、视频动漫等业务,欢迎来电咨询。

    郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如有侵权,请第一时间联系我们修改或删除,多谢。
    软月互动成立于2008年,先后在南京江北新区、山东济南成立办事处,总部位于南京市大行宫。软月是一家集网站建设、网页设计、软件开发、企业画册设计、企业宣传片制作和动漫动画设计制作于一体的企业信息化服务机构。欢迎广大新老用户来电洽谈咨询,我们将竭诚为您服务!热线:025-81559996
      最新文章
  • 网页设计时配色不够协调怎么办?
    网页设计时配色不够协调怎么办?

    南京网页设计:设计工作中,配色一直以来都是设计圈内老生常谈的话题,一幅优秀的作品离不开合理协调的颜色搭配。不同的颜色所表达的含义不同。即便是相同的颜色,明度和纯...

  • 微信“话题标签”:六度理论与二度理论的“兼容”悖论
    微信“话题标签”:六度理论与二度理论的“兼容”悖论

    编者按:本文为专栏作者师天浩授权创业邦发表,版权归原作者所有。微信正在进行一场旷日持久并小心翼翼的“自我革命”。特殊时期的长假最该休息,反最忙碌,走亲访友、结婚...

  • 拼多多董事长黄峥五周年庆内部讲话,激励全员开启“硬核奋斗模式”
    拼多多董事长黄峥五周年庆内部讲话,激励全员开启“硬核奋斗模式”

    10月8日下午,拼多多内部举行成立5周年庆祝活动。在活动上,拼多多董事长黄峥发表了内部讲话,拼多多CEO陈磊则向合作伙伴发布了一封公开信。“虽然经历了飞速发展,...

  • 南京网页设计时网站顶部的内容如何设计排版更好?
    南京网页设计时网站顶部的内容如何设计排版更好?

    无论作为设计师还是普通浏览者,大家观看一个网站时最先接触到的就是网页的头部区域,这部分内容为网站的其他各个方面设定了基调,在网页设计中起着非常关键的作用。尤其是...

  • 南京网站建设如何提升网站内页长尾关键词的排名?
    南京网站建设如何提升网站内页长尾关键词的排名?

    南京网站建设:熟悉SEO优化的都知道,网站70%以上的流量是来自于长尾词,并且长尾词带来的是更精准的客户。当一个网站核心关键词达到很好的排名时,带来的流量可能往...

  • 工作时间:周一至周五 9:00-18:00
  • 创意部地址:南京市江北新区弘阳时代中心二期7幢2006室
  • CopyRight © 2008-2020 All Rights Reserved. 南京软月科技有限公司 苏公网安备 32010402000332号 苏ICP备08110927号-6