网页设计中怎么配色

相关推荐

网页设计中怎么配色

　　网页设计怎么配色?为什么我总是配不好颜色，弄的整个页面乱七八糟?配色有没有方法?方法懂了之后有无什么捷径?网页设计中配色要弄好其实也不难，下面是小编为大家整理的网页设计中怎么配色，欢迎阅读！

　　选色：这是最基本的一步

　　开始设计网页的时候应该规划好选取哪些颜色

　　颜色的选取不是无中生有的

　　是根据网站的产品定位、风格、以及需要传达出的理念等为基础进行选取

　　而不是无中生有随着自己的喜好来选取

　　那具体怎么选

　　很简单，比如51rgb在线教育，因为是一家在线教育机构

　　口号是让一切学习变得简单起来

　　所以主题定位是轻松，愉悦的感觉

　　可以选择清爽宜人的淡青蓝色为主色

　　而不会去选择紫色系这样的神秘色调

　　也不会去选择红橙色系这样的火热的色调

　　那么换你为客户进行网页设计的时候

　　需要怎样配色是不是有点思路了

　　分配颜色：这是第二步

　　当你选好颜色之后就该考虑怎么把他们分配到网页的每个版块

　　分配颜色也是很讲究的

　　色彩分为主色、辅助色、点缀色

　　什么是主色?——面积最大的!最大!大!

　　是能够传达出网站整体风格的颜色，

　　把你前面选择好的颜色拿一个出来定为主色!

　　什么?你还要问那到底用在哪些地方是大的区块?

　　banner的颜色啊

　　导航的背景色啊

　　文字标题的颜色啊

　　什么是辅助色?比主色用到少一半的!一半!半!

　　(其实也没谁规定是一半拉，反正就是比主色用到要少的咯)

　　注意(敲黑板了)

　　点缀色一般是饱和度较高的颜色，

　　一般用在网页中的强调内容或者突出的内容，

　　如按钮、链接等，

　　三种颜色在整个网页的比重大概是60%、30%、10%

　　拓展阅读：

　　网页设计黄金配色的6条原则

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　你刚刚学到：

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

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

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

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

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

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

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

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

　　使用这些类型的颜色变化的东西，如：

　　悬停效果：

　　边界：

　　通过突出显示颜色：

　　渐变：

　　光影效果：

　　六、尽量不要使用颜色选择器右上角的颜色

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

【网页设计中怎么配色】相关文章：

怎么用Dreamweaver设计网页12-28

网页设计中色彩搭配的原则与技巧12-15

网页设计中的页面尺寸标准参考12-19

网页设计中重要标签必不可少11-11

网页设计中图片有哪些常见的使用技巧03-21