网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一个要学习web前端设计的新手来说,这都是一个重要的学习过程.在本教程中我们将与你分享6条肯定会火,并且“错不了”的指导方针,你可以按照这些原则把握最基本的色彩规律 。现在我们分享的这些原则都不是规则,你会在你的职业生涯中创造出更多的配色方案 。相反,他们是一个起点,是你如何生存在网页设计领域色彩方向的安全指南 。
6条网页配色原则:
一、需要配色的是你的画布,而不是你的图片二、选择简单的灰色作为你网站的基调三、只选择一种颜色突出显示四、如果有疑问,请使用蓝色五、给你的高亮色增加变化六、尽量不要使用颜色选择器右上角的颜色 现在我们再详细解说这六条原则:
第一条,需要配色的是你的画布,而不是你的图片
一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置 。你的配色方案永远不应该比它呈现的内容的更加“响亮” 。你的设计应该是在后台,目的是帮助突出网站的内容 。
下面请看两组图对比一下:
文章插图
文章插图
文章插图
文章插图
淡色的画布突出了图像,而明亮的画布反而不能突出你的内容 。(别笑,后者是发生在网络上的真实案例^—^)
用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的 。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力 。事实上,网页设计的过程是和内容紧密相连的,很多制作高品质的网页看上去空空荡荡,几乎没有内容 。
网站的配色对内容而言就像衣服对于人的重要性,对此你必须制定一套完美的并且合身的衣服 。
第二条,选择简单的灰色作为你网站的基调
你可以为你的网站基调选择无数种颜色,不过我建议你采用最简单的颜色,比如白色/浅灰色与深灰色的搭配文字背景 。
你可以看看任何热门的网站、模版、主题,白色或浅灰色与深灰色搭配成了大多数的选择,这当然也是有充分理由的 。这样的搭配对访客而言提高了你内容的可读性,并且把你的图片突出在最前方 。
【6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配】
文章插图
文章插图
一般来说,你的文字最好避免使用墨黑色,深灰色一般更容易阅读 。我们提供一个比较舒服的文字颜色范围:#333333到#666666 。
对于你的背景色,全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色 。如果你想选用其他的背景颜色,我们建议采用#FFFFFF到#CCCCCC当然,这些颜色的选择都不是固定死的 。只不过如果你是新手,以上的配色方案你可以放心使用 。
三、只选择一种颜色突出显示如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的 。你颜色用得越多,你的页面就越来越难以控制 。所以,在你网页以灰色基调的前提下,你最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等 。你的高亮颜色可以是蓝色、红色、绿色,等等 。
你最好选择与你的基调颜色相关的高亮颜色 。打开你的颜色选择器,并单击你彩色方块的中心 。
经验总结扩展阅读
- 30岁不到,我已经离婚了 | 青年离婚的6条忠告
- 做到这6条,你的心理健康水平就不会差
- 装修配色指南:高颜值房子都这样搭!
- 五一旅游线路 6条出行旅游线路推荐
- NikeNBA球员上脚:詹姆斯7代湖人配色,这三双AJ34太好看了
- 农历安踏GH3“立春”配色正式曝光!以农历二十四节气立春为设计灵感
- CurryNBA球员上脚:Curry8勇士配色,匹克和安踏的球鞋都有
- 易小雅易小雅给《七时吉祥》杨超越的造型配色跳脱,很灵很精致
- 人群集齐Reno8 Pro四款配色,哪些消费者人群会买OPPO?
- 魔杖mac黑魔杖来啦!四种热门配色上齐,价格却是官网的一半多,还不来看看