网页设计配色方案

相关推荐

网页设计配色方案

　　为了确保事情或工作科学有序进行，常常需要提前制定一份优秀的方案，一份好的方案一定会注重受众的参与性及互动性。你知道什么样的方案才能切实地帮助到我们吗？下面是小编为大家收集的网页设计配色方案，供大家参考借鉴，希望可以帮助到有需要的朋友。

网页设计配色方案

　　每个网站都有一个配色方案，在它的主要区域使用主要颜色。正如我们一直在讨论的，这些颜色的重复使用将影响用户的心态和心情，通常是潜意识，所以选择它们会很好。

　　虽然有很多不同的方式来把颜色混合在一起，我们将关注3个最成功，最常见的：

　　三元组

　　三元组是三个结构中最基本和平衡的。使用活力和互补，但偏离了棘手的对比，三元结构是最安全和最可靠的方案。在12步色轮上，选择彼此相隔120度的任意三种颜色：一种颜色用于背景，两种颜色用于内容和导航。

　　复合(分裂互补)

　　这个配色方案略微复杂，但如果用得好，可以收到不错的效果。该概念使用四种颜色：两个对比对和两个互补对。

　　下图中 Florida Flourish的配色就是很好的例子。红色和绿色的对比与文本标签和植物，加上沙漠上面的蓝色和橙色的天空。同时，红色/橙色和蓝色/绿色的补充让整个视图很协调。

　　类似

　　最后有类似的方案，专注于互补色。真正突出了所选择的颜色的活力，例如，一个红橙黄色的类似方案将看起来非常活泼和活泼。虽然这个方案相对容易拉开，诀窍是决定使用哪种颜色的活力，因为它会被夸大。

　　通过使用蓝色，绿松石和绿色的类似网站。下面这个网页设计案例，注意他们如何使用对比的黄色来吸引注意他们的号召力。

　　扩展资料：

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

　　一、需要配色的是你的画布，而不是你的图片

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

　　淡色的画布突出了图像，而明亮的画布反而不能突出你的内容。(别笑，后者是发生在网络上的真实案例^—^)

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

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

　　二、选择简单的灰色作为你网站的基调

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

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

　　一般来说，你的文字最好避免使用墨黑色，深灰色一般更容易阅读。我们提供一个比较舒服的文字颜色范围：#333333到#666666。

　　对于你的背景色，全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。如果你想选用其他的背景颜色，我们建议采用#FFFFFF到#CCCCCC

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

　　三、只选择一种颜色突出显示

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

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

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

　　现在，你设计的页面有了三个基本的颜色：背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色，但现在对于新手的你来说还是选择一种比较合适。你现在已经掌握了基本的配色，如果你有信心，你以后还可以尝试更多种不同的方案。

　　你刚刚学到：

　　学会了如何选择“色相”。概括来说，色相是基本色，当你移动滑块，你会看到h值在颜色选择器中的变化。

　　“H”代表色相，一旦你选择了你的高亮颜色，文本框中显示的就是你当前颜色的色相。

　　四、如果有疑问，请使用蓝色

　　如果你对你的高亮色的选择有疑惑的话，不妨使用蓝色。蓝色是一种弹性比较大的颜色，可以和很多种颜色搭配。黄色和紫色也很不错，但是如果使用不当会适得其反。

　　另一方面，如果你是用蓝色，那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好，不妨使用蓝色。比较安全的蓝色包括从H235到H190，从海军蓝到深蓝色。

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

　　五、给你的高亮色增加变化

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

【网页设计配色方案】相关文章：