网页设计怎么都不会错的6条配色原则

   身为网页设计新手的你,是不是还在纠结于你制作的网页找不到一组完美的配色方案?在本教程中我们将与你分享6条肯定会火,并且“错不了”的指导方针,你可以按照这些原则把握最基本的色彩规律。现在我们分享的这些原则都不是规则,你会在你的职业生涯中创造出更多的配色方案。相反,他们是一个起点,是你如何生存在网页设计领域色彩方向的安全指南。

  1. 需要配色的是你的画布,而不是你的图片

  一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台,目的是帮助突出网站的内容。


  淡色的画布突出了图像,而明亮的画布有时反而不能突出你的内容。

  用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上,网页设计的过程是和内容紧密相连的,很多制作高品质的网页看上去空空荡荡,几乎没有内容。

  这是一个伟大的想法:你可以在你的网站上先铺陈出你的内容,用设计软件也好用代码也好,然后在你内容的周围设计你的网页。当然这也是一个特殊情况,如果一个特定风格的图像和照片都能和你的设计和谐的融为一体,那么你的设计配色才算是完美。试想一下,网站的配色对内容而言就像衣服对于人的重要性,对此你必须制定一套完美的并且合身的衣服。

  2. 选择简单的灰色作为你网站的基调

  你可以为你的网站基调选择无数种颜色,不过我建议你采用最简单的颜色,比如白色/浅灰色与深灰色的搭配文字背景。

  你可以看看任何热门的网站、模版、主题,白色或浅灰色与深灰色搭配成了大多数的选择,这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性,并且把你的图片突出在最前方。


  一般来说,你的文字最好避免使用墨黑色,深灰色一般更容易阅读。

  文字颜色建议范围:#333333到#666666;背景颜色建议范围:#FFFFFF到#CCCCCC。

  当然,这些颜色的选择都不是固定死的。只不过如果你是新手,以上的配色方案你可以放心使用。

  3. 只选择一种颜色突出显示

  如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的。你颜色用得越多,你的页面就越来越难以控制。所以,在你网页以灰色基调的前提下,你最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色,等等。

  你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器,并单击你彩色方块的中心。


  向上或向下移动你的滑块,你可以仔细选择你认为最合适的颜色。


  现在,你设计的页面有了三个基本的颜色:背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色,但现在对于新手来说还是选择一种比较合适。

  4. 如果有疑问,请使用蓝色

  如果你对你的高亮色的选择有疑惑的话,不妨使用蓝色。蓝色是一种弹性比较大的颜色,可以和很多种颜色搭配。

  这里介绍了30个以蓝色为主调的网站,可以作为借鉴:Blue

  另一方面,如果你是用蓝色,那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好,不妨使用蓝色。比较安全的蓝色包括从海军蓝到深蓝色(H235-H190),而我通常选择H205的蓝色。


  如果你选定了一种颜色作为你的高亮色,那么也请你在其他需要的地方使用这种颜色。如果你的按钮、标题等需要高亮,把它们的颜色也换成同一种蓝色。在下面这个例子中我把白色换成了蓝色,大家感受一下。


  5. 给你的高亮色增加变化

  你一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单,但又不显得乏味。如:

  悬停效果:


  边界:


  通过突出显示颜色:


  渐变:


  光影效果:


  6. 尽量不要使用颜色选择器右上角的颜色

  颜色选择器的右上角是一块肥沃的土地。它们可以执行出惊人的效果,而且非常诱人,但通常想用好需要大量的经验。如果没有足够的经验,它们可能会导致事故的发生,所​​以最好以削弱你的颜色,最好都保持比较淡化的色彩。

  这就是为什么在本教程的第三部分,我问你点击的颜色在地图右上角的中心选择您的高亮颜色之前,要确保你有一个比较柔和的颜色拉开序幕。

  为了说明这一点,看看如果我只是改变了设计的色调,会发生什么。


  上图看上去还是挺舒服的对吧?

  但是如果你把颜色调整为选择器右上角的颜色,我们再来看看效果如何:


  分分钟亮瞎了访客的双眼!如果你想确保你不烧焦你的访客的视网膜,遵循留出颜色选择器的右上角的格子的一般原则。

  学习建议:单色配色方案

  单色的配色方案是,你以一个基本的色调和扩展它的色相,饱和度和亮度。因此,通过采摘一大亮点的颜色和它创造的变化,你实际上创建了一个单色方案。


  下一步?

  坚持练习对灰度基础的单色配色方案,直到你感到很有信心为止。试着用不同的色调,尝试创建不同的高亮色,看看它是如何改变饱和度和亮度的设置,直到可以使用为止。

  当你感觉很舒服,可以增加一个额外的高亮颜色。我建议尝试橙色和蓝色,因为他们往往​​是最简单的二重奏。然后尝试绿色和蓝色,这在我的经验中是第二个最简单的。这两种往往是与客户和访客都会称赞的搭配。

  为了推动了你对Web的配色方案的理解,最​好的事情就是抓住自己喜欢颜色,你可以用取样器(浏览器扩展Colorzilla),并用它来​研究经验丰富的设计师是怎么做到的丰富的色彩搭配的。当你在浏览互联网的时候,看到一个很大的配合突破,你可以用颜色取样器看看在页面上使用的颜色的配色方案。你甚至可以尝试每个色相,看看哪些饱和度和亮度水平效果最好吧。另外要注意它的颜色组合的和谐度。

  如果有疑问,可以随时回到属于你的“安全第一”的指导方针,这无论如何都是不会错的。

时间: 2025-01-02 08:00:51

网页设计怎么都不会错的6条配色原则的相关文章

怎么都不会错的6条网页设计配色原则

  身为网页设计新手的你,是不是还在纠结于你制作的网页找不到一组完美的配色方案?在本教程中我们将与你分享6条肯定会火,并且"错不了"的指导方针,你可以按照这些原则把握最基本的色彩规律.现在我们分享的这些原则都不是规则,你会在你的职业生涯中创造出更多的配色方案.相反,他们是一个起点,是你如何生存在网页设计领域色彩方向的安全指南. 一.需要配色的是你的画布,而不是你的图片 一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置.你的配色方

移动/PC网页设计的都需要遵守的几个原则

文章描述:任何网站的新时代时,响应能力,奉献完美呈现,不管接入设备,但它带来了另一个巨大的优势,网页设计.响应时代的网页设计原则确认的价值,因此更加明显,这些都是有效的和有用的,无论时间或设计师的做法.这里有七个基本原则是普遍有效的,所以当设计新的网站,让他们 专家并未达成共识,有关互联网的出生日期,但无论如何,30年前,互联网只是由数量非常有限的人使用的一个术语.发展如此之快,以这样的方式我很难相信真的有人认为其指数的成功.十年前,网站尚处于起步阶段,但互联网是一个坚实的组成部分,我们的日常生

带你展望2015年的网页设计配色趋势

  一.Metro和柔和鲜嫩的色彩 Odam Luiran的网站是Metro风格,这种风格尤其适合一些比较鲜嫩柔和的颜色,扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛.这样的色彩基调将在2015年得到进一步的延续,马卡龙色系也许会常常出现在网页设计中. 二.偏灰的冷色系粉彩 偏灰的冷色系色彩是一种看起来比较百搭的颜色,但是实际上,要将这类颜色使用的恰如其分却并不是一件容易的事情.这类色彩表现的比较中性,所以搭配任何颜色都不会显得突兀,但也不算出挑,而要让色彩之间真正融合,应该

25个来自法国最优秀的网页设计

  法国是个时尚而浪漫的国度,文化和艺术的殿堂.在这样的沃土之上,现代文明和传统经典碰撞之下,法国的设计师对于艺术和设计有着独到的见解,多元的文化孕育出了参差多态的设计作品.毫无疑问,你可以这些无与伦比的法国设计师的网页中获取灵感,汲取养分. 法国设计师和艺术家的创意思维有着他们独特的文化根源.回溯法国的历史,从早期的凯尔特文化,到罗马帝国时代,从中世纪一路到现代,每一个阶段都有着璀璨的文化.中世纪有梅罗文加王朝的艺术,加洛林艺术,文艺复兴时期的也有巴洛克.洛可可.古典主义和新古典主义,近现代的

网页设计发展之路 迎合用户敢于创新

网页设计的出现就是为了迎合用户需求,而当下的网页设计已经不再是几年前的"设计开发一体"了.简单的说,曾经可以一张华丽的图片做网页,现在还可以吗?答案自然是否定的,现在的网页除了追求华丽也要追求实用了,实用俨然成为了网页设计的一部分. 网页设计发展之字体布局.简单而言,就是增加网页设计中的字体设计,字体设计在之前我们常用Photoshop等工具做出图片再导出,引用到网页.这样会产生一些弊端,比如说会增加服务器负担,网页打开速度慢,不方便修改诸如此类的问题.而将字体导入服务器,这样展出的形

网页设计的苦与乐

设计|网页|网页设计    事物都是矛盾的统一体,苦与乐就是一对互相依存又相互独立的矛盾体.正如人们常说的"没有苦哪有甜?",在网页制作过程中,我的感受尤为明显,从事网页制作两年以来,从一个对网页一窍不通到现在略有所得,这之间经历了一个漫长的苦和乐交织的过程.这期间漫漫的独自探索路,让人回想起来,诸多的回味. 在刚刚跨入这个网页领域的门槛的时候,就是一个从无到有的学习的过程,当然不可避免的是一个痛苦的过程,每天面对很多的新名词,诸如超链接,IP,URL等等,就让我好不头疼,不过只有硬着

网页设计时必须思考的5个网页设计目标

文章描述:我在以下列出的5个目标,是在每一次开始网页设计时都必须思考的. 这是最近看到的一篇很不错很实用的文章,主要侧重于设计前的思考.思路,看完有很大的启发,所以推荐给大家,因为是翻译的,翻译不准确的地方还请见谅~ 在生活中,拥有目标是非常重要的. 特别对于网站设计而言,因为没有目标就没有动力,更无法衡量你的成功与否. 目标有助于设计师专注于重要的事情,把握设计方案的走向.目标能帮助设计者设计出令人眼前一亮的网站. 设计任何一个网站,过程都是大同小异的:我完成了一份设计稿,然后把它交给客户.虽

网页设计7大技巧

对于许多优秀网页设计作品都有一些共性,作为网页设计师我们必须要掌握这些设计技巧,比如页面的留白,文字的选择,元素的组合,像素效果的使用等等!这里我们一共总结出7种常见的设计技巧,对于网页设计师来说可以在许多网站中看到这些技巧的体现! "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的

摄影与网页设计的亲密关系

  21世纪是图像.网络和多媒体的时代,越是充满活力的网站越是注重网页图片的质量,而图片的作用也不像过去仅仅是起着纪实的作用,而是结合了纪实性.瞬间性.艺术性等综合性特征,体现了网页设计视觉传达的方式和过程. 摄影与网页设计其实在某种意义上具有一致性和相似性.摄影活动也是具有创造性的行为,不论是新闻.人像.广告.风光还是创意摄影,摄影者都要求拍摄的照片所传达的信息主题明确,并符合审美规律.这与网页设计在审美特征上是一致的.从创作过程来看,摄影与网页设计活动都要求具有可实现性.多媒体技术推动了数码