主页 > 行业动态

网站设计关于网站配色的极大规律总结!

作者: 行业动态 发布时间:2019-03-12 20:10 浏览次数:100

  在一开端规划网站时,咱们遇到的第.一个问题往往都是该怎么挑选网站的配色。毫无疑问,网站的配色是用户第.一眼就能留意到的工作之一,这就很好解释为什么挑选一个好的色彩计划是如此重要。重庆网站规划八条规矩让你把握佳的网站配色计划

 

 

  色彩调配不只会影响到网站全体的外观和风格,还会在与用户的互动中发挥重要作用,有研讨标明,挑选的色彩会影响用户的拜访时刻、点击率以及产品的销售等。

 

 

  你知道吗,咱们90%的产品评估都只运用了一种色彩?

 

 

  虽然色彩是规划师强有力的东西之一,但把握好色彩调配并不是那么简单。许多种色彩有许多种调配,咱们很难抉择该在网站上运用什么色彩。许多相关的文章都在辅导咱们怎么运用色彩理论和来从头缔造咱们的调色板,但在本文中,咱们并不需求这么做。我将会共享怎么挑选网站配色计划但不触及色彩理论的有用机巧。我还会给咱们介绍一些便利挑选调色板的东西。

 

 

  重庆网站设计关于网站配色的极大规律总结

 

 

  创立自己专属的色彩计划并没有那么杂乱,咱们能够运用一下技巧,不费力气地调配色彩。

 

 

  1. 源于你想要表达的心情

 

 

  当咱们在进行色彩调配时,不能只考虑事物的外观,还必须考虑事物给予人的感觉。众所周知,色彩会引发心情,色彩所体现的意义将直接影响到用户对产品的感知。因而,咱们需求理解咱们所想表达的心情。

 

 

  问问自己:我期望我的用户和网站相关联的心情或者感触是什么?

 

 

  为此,我查找了一些色彩与认知的根本关系,仅作为快速参考:

 

 

  · 赤色 - 热情、有力、风险、重要 - 赤色是一种极具影响性的色彩,它能给人留下速度与力气的形象,传递着一种重要性或是风险性。经证明,赤色有着促进血液循环和进步推陈出新的生理效应。

 

 

  · 橙色 - 愉悦、活力、魅力、廉价 - 橙色是温暖而艳丽的色彩,它给人一种充满活力的感觉,能让访客满腔热枕。

 

 

  · 黄色 - 振奋、友善、影响、寻求留意力 - 不同的黄色能表达不一样的心情。淡黄色往往与太阳有关,因而传达一种积极性和温暖,深黄色往往又给人老旧感和时代感。

 

 

  · 绿色 - 天然、安全、新鲜 - 绿色能传递一种环保和挨近天然的心情,它也意味着成长,所以绿色往往与挣钱的职业联系到一同。

 

 

  · 蓝色 - 信任、安静、牢靠-  蓝色往往是安静且放松的,往往能激起人们心里的安全感。所以许多银行和科技公司都喜爱用这种色彩。

 

 

  · 紫色 - 豪华、奥秘、浪漫、信仰 - 紫色往往能体现一种尊贵的感觉,在西方,紫色在历史上与王室相关。

 

 

  · 粉色 - 女性、纯真、芳华 - 粉色往往被以为是女性化的意思,许多人以为这是女孩的色彩。但依据Joe Hallock的研讨,粉色并不是受女性欢迎的色彩。不过粉色常用在比较浪漫的主题中。

 

 

  · 黑色 - 权利、杂乱、奥秘、锋利 - 能够说黑色是光谱中强壮的色彩了,它能迅速地捉住人的留意力,甚至在这一点上超过了赤色。这就是为什么文字和着要点常常都用黑色/当黑色作为布景或是首要组成部分是,就能营造出一种权利感和豪华感。

 

 

  · 白色 - 纯洁、健康、洁净、天真 - 白色能杰出和其调配的色彩,所以白色很合适作为非必须的配色。当作为主角时,白色出现一种洁净的感觉,并能让用户的留意力更简单会集在重要的元素,比方具有召唤性的按钮上。

 

 

  · 灰色 - 中性、正式、杂乱、禁欲 - 灰色往往表达中立的心情。以灰色为主调的配色往往都有方式感,所以商业范畴很喜爱运用灰色。

 

 

  不同的色彩能够引发不同的心情

 

 

  2.色彩数量不要太多

 

 

  色彩在规划中的运用需求保持一种平衡,运用的色彩越多,就越难到达这种平衡。

 

 

  在规划中运用太多种色彩就想妄图一.次传达一百万种感触和信息,这只会混杂用户的视听。

 

 

  假如限制规划中 运用的色彩数量,咱们将会得到更好的作用。依据经验,配色中多能够运用三种主色。事实证明,大多数用户更喜爱简练的配色计划。依据多伦多大学关于人们怎么运用Abode Color CC的研讨,大多数人表明他们喜爱简练的色彩组合,只是依托两种或三种色彩。

 

 

  提示:假如需求运用调色板之外的色彩,请运用不同的色彩。

 

 

  五种蓝色色彩

 

 

  3.防止运用纯黑色

 

 

  当咱们在现实生活中看到漆黑时,咱们默许那是黑色的东西,事实上,纯黑色在现实生活中简直不存在咱们周围一切的黑色物体都会反射一些光,这意味着它们并不是纯粹的黑色,而是深灰色的。

 

 

  路途不是黑色的。暗影不是黑色的。它们都是深灰色的。

 

 

  假如咱们将纯黑色放在其他色彩周围,黑色就会占有咱们绝大多数的视野,由于这并不天然,略显突兀。咱们所接触到的APP和网站都有黑色,但并不是纯黑色,而是深灰色。例如,苹果网站顶端的色彩并不是#000000,而是#333333。所以在运用色彩时记住为色彩增加一点饱和度。

 

 

  苹果网站的顶部运用挨近黑色的色彩,但比较浅,这样就不会有压倒页面上其他元素的感觉。

 

 

  4.60-30-10规律

 

 

  这是一个永恒的装修规律,能够帮助咱们轻松地将色彩调配在一同,60%+30%+10%的份额是为了平衡空间中所运用的色彩。

 

 

  这个概念用起来很简单:60%的主调,30%的次调,10%的装点。这个规律其实就是,次调能够更好地支撑主调,但两者之间有明显地不同之处,而10%的装点就是一个亮点色彩,可所以你想要杰出体现的色彩。

 

 

  60%主调+30%次调+10%装点

 

 

  5.运用灰度进行规划

 

 

  色彩调配是一件很风趣的事,咱们在开端新项目之前往往都要先做色彩的调配。有时咱们会很想从一开端就运用不同的色彩组合,但我强烈建议要忍住,不要被此引诱,而是先专心于灰度的规划。再增加色彩之前,运用灰度进行规划,会使得咱们愈加专心于页面的结构与布局。

 

 

  首要,找出层次结构:

 

 

  灰度使咱们不得不专心于结构

 

 

  之后再对色彩进行配比:

 

 

  终再依据意图增加色彩。灰度图更有利于规划元素。

 

 

  6.比照度

 

 

  比照度是两种色彩之间改变的衡量。这是一个有利于捉住留意力的东西。一般来说,高比照度是重要内容或要害要素的佳体现局势。你想要杰出的东西阅览,就越需求比照度。

 

 

  假如按钮与布景具有相同的色彩,就很难看到按钮了

 

 

  咱们能够看看下面的比方。在第.一个示例中,布景和按钮的色彩简直相同,因而用户根本留意不到按钮“Get Evernote,It’s Free”。

 

 

  按钮与布景具有相同的色彩,就很难看到按钮了

 

 

  但在第二个比方中,咱们就能够很简单找到按钮。

 

 

  火狐网站运用比照明显的绿色来引导用户的留意力

 

 

  7.遵从连续性规矩

 

 

  咱们在规划中需求考虑到整个网站色彩的连续性。但连续性并不意味着每个页面都要运用相同的色彩,这也太无聊了!但咱们需求留意在从一个页面跳转到另一个页面时,色彩的改变应该滑润些。当用户在拜访这些网页时,就会发生一种了解感。在大多数状况下,咱们运用一种色彩就能到达衔接的作用。例如,当用户从主页面前往产品详情页面时,咱们能够将品牌的主打色作为标题,以发生一体的连贯性

 

 

  Intercom在每个页面上都运用蓝色(品牌色彩)的标题和插图等元素

 

 

  8.规划的可用性

 

 

  可用性是运用色彩进行规划时一个必须考虑的要害因素。今天的产品应该尽可能地适用于每一个人。在考虑规划中的可用性和色彩时,请留意以下几点:

 

 

  防止运用独自的一种色彩作为目标

 

 

  大约8%的男性和0.5%的女性,也就是每12个男人中或每200个女性中就有一人遭到某种色盲的影响。虽然有许多种色盲的方式,但在这其间,红绿色盲是常见的。还有这种色盲的人,一般无法看到赤色和绿色的改变。

 

 

  全视觉(左) 红绿色盲患者(中心和右)看到的相同色彩

 

 

  咱们所规划的网站中,大部分都会让红绿色盲患者变成遇到困难的瞎子用户。比方接下来这个非常常见的事例:当咱们在网站上填写注册表单时,有时会收到一个信息:标红的字段是必填的。这可能也不是一件大事,但关于色觉缺乏的人来说,这个信息的体现能够说非常令人懊丧了。

 

 

  左:全视觉 右:视觉妨碍

 

 

  咱们需求留意,色盲也有不一样的状况,比方红绿、黄蓝或者是单色,因而运用多种的视觉头绪来传递重要信息是非常必需的。除了色彩之外,咱们还能够用到标志、目标、图画、形状或文字等元从来描绘状况或内容。

          

 

  左:全视觉 右:视觉妨碍

 

 

  防止低比照度的文字

 

 

  色彩比照是色彩理论关于规划的可用性至关重要的一个范畴。假如咱们需求在文本中运用色彩时,请留意运用两种比照度较低的色彩可能会使得副本难以阅览。

 

 

  低比照度的文本难以阅览

 

 

  查看比照度以布景和内容之间有着足够的比照度,适用于色盲或者是弱视人士。实际上这并不难,只需求查看一下比照度。

 

 

  比照度代表一种色彩和另一种色彩的差异,通常写作1:1或21:1,两个数字之间的差异越高,色彩之间的相对亮度差异就越大。W3C引荐,正文文本和图画      之间的比照应该是:

 

 

  · 小文本与布景的比照度至少为4.5:1。

 

 

  · 大文本(在14pt粗体/18pt正常以上)的布景比照度至少为3:1

 

 

  即便业界大佬也存在色彩比照的问题

 

 

  好消息,你不用亲自去仔细查看比照度,能够运用色彩比照查看器这个东西,只需求点击几下就能够查看了。WebAIM:色彩比照查看器

 

 

版权声明:本文部分内容来自互联网转载整编而成,不代表本站观点和立场,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请在线联系站长,一经查实,本站将立刻删除。

专题推荐