邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

最强的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

如何在网页设计中正确应用色彩?

Cherry 2019-02-15 16:51:36 阅读:2850

以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器


如何在网页设计中正确应用色彩?


在网页设计中正确应用色彩从来都不是一件容易的事情!当网页上的产品介绍、推销言辞和客户评价在为访问者传递产品信息时,颜色也会在情感层次上与访客产生交流。应用正确的颜色不仅可以帮助访问者快速理解看到的内容,还会促使访客对品牌总体产生积极的看法。反之,在网页设计中错误地应用色彩,则可能会导致潜在用户流失。


简而言之,色彩是给访客留下良好印象最快、最直接的方式。如何才能正确应用色彩?别着急!了解了这些色彩理论和原则,你就能轻松应对了!


不同的颜色分别代表什么?

选择颜色不能光凭个人喜好,还需要知道其背后的含义。每种颜色都有不同的含义,并且以特定的方式影响着人们的情感。这就是色彩对于网页设计如此重要的原因—— 能够迅速传达关于网站业务/产品的正确信息。


接下来,让我们一起看看颜色背后的含义以及它们在情绪上发挥的作用。


暖色系

暖色活力设计案例

红色能唤起激情与活力的网页设计,由Aneley设计。


暖色常常带给来访者一种充满活力的感觉,但如果单独使用它们,则会用力过猛。但将它们与清爽中性的颜色搭配不失为达到平衡的好办法。


红色 —— 活跃,情绪化,热情,力量,爱,强烈。

粉色 —— 甜蜜,浪漫,俏皮,温暖,富有同情心,柔软。

橘色 —— 温暖、热情、成功、决心、友好。

黄色 —— 年轻,活泼,精力充沛,新鲜,乐观。


冷色系

冷色能带给来访者一种平静的感觉,这也是它们经常被应用在网站上的原因。但是需要注意的是:过度使用冷色会带给来访者冷漠、没有人情味的感觉。


绿色 —— 清新,平静,放松,信任,和平,希望,治愈。

蓝色 —— 舒适,清澈,冷静,信任,正直,忠诚,可靠。

紫色 —— 魅力、力量、怀旧、奢华、野心、精神。


颜色含义设计案例


通过用蓝色来达到一种忠诚和信任的网页设计,由DSKY设计。


中性色

中性色一般适合与暖色或冷色搭配使用。它们通常被用来淡化原色,在网页设计中起到平衡色彩的作用。


灰色 —— 尊敬,智慧,耐心,现代,长寿,智慧。

黑色 —— 力量,大胆,严肃,优雅,豪华,戏剧性,正式。

棕色 —— 友好、大地、家庭、户外、信誉、简单、持久。


色彩平衡设计


一个使用色彩平衡创造豪华,简约感觉的网页设计,由martinthehorrible设计。


色彩心理学与品牌认知

当涉及到创建和推广网站品牌时,颜色背负着吸引注意力、创造欲望、推动转化率和赢得访问者忠诚度的重要任务。只有选择并应用了正确的颜色,用户即使没有看到商标也能认出熟悉的品牌。



除了上面提到的颜色背后的含义外,还有一些常见的色彩应用规律可以帮助品牌创造知名度。例如,餐厅通常是红色和橙色,银行和金融机构通常是蓝色,奢侈品包装通常是黑色,酒店通常使用白色,蓝色,黑色或绿色。一些以颜色著称的标志性品牌包括CNN(美国有线电视新闻网)的黑白红应用,国家地理的黄色应用,以及麦当劳使用的红黄搭配等。


如果你还在纠结于选择一种能让你的品牌产生共鸣的颜色,最有效的方法就是多看看知名品牌的Logo或网站配色。然后根据上文提供的颜色含义,弄清楚为什么要选择这些颜色进行设计。这样,很快你就能找到自己想要的颜色了。


网页设计中的色彩理论

在上文中我们了解了颜色对访问者的情感影响,那么接下来我们可以利用色彩理论进行色彩搭配,来获得对用户行为的进一步影响。


配色方案


简单地说,色彩理论就是色彩在色轮上相互作用背后的科学。在设计中,色彩理论带给设计者的配色灵感非常受用。最常见的配色结构是三色系、互补色和相似色。


配色结构设计案例


设计师可以通过考虑颜色的互补、对比和活力三方面来对色轮进行更细致的选择。


颜色互补是我们看到颜色与其他颜色相互作用的方式。当你从颜色轮的相反的两端匹配颜色时,你会有在视觉上被吸引的感觉。这是因为当一种颜色增强另一种颜色时,它为眼睛提供了视觉上的平衡。


对比色通过清晰划分页面上的元素来吸引访问者注意力,既可以提高文本的可读性,也可以将来访者注意力吸引到页面的特定部分。


活力色可以影响访问者的情绪反应。明亮的颜色可以让来访者感受到活力;深沉的颜色可以让他们感到放松,从而更能专注于内容。


选择原色

开始搭配网页设计的颜色之前,设计师的首要任务是为品牌建立原色。设计师可以从品牌标志或品牌其他素材中提取,倘若不能,也可以利用色彩心理学和色彩联想来选择原色。


提取原色网页设计案例


这个网页设计从品牌标志中提取了原色的网页设计,由Iconic Graphics设计。


色彩渲染和阴影

一旦网站选定了基本的品牌原色,就可以开始考虑配色方案了。有些网站在设计时会使用单一颜色,但大多数时候建议你使用一些不同的色调。


在整个设计中只使用原色不见得是最好的色彩方案。你可以在保持基础颜色不变的情况下,将颜色调暗或变亮,在网站上创造出一些微妙的变化。例如,如果你在网站各个板块使用了浅色调的原色,那么你可以在CTA按钮上使用主色调或更突出的色调,这样就可以起到强调的作用。在下面的例子中,我们来看看设计师UI Maniac是如何做到这一点的。


不同色调使用案例


原色橙色被用在不同的色调中来创造不同的色调案例,由UI Maniac设计。


60-30-10法则

这种比例法则非常简单,但对搭配不同的颜色非常有效。为了营造和谐的视觉效果,色彩的组合一般应按60%-30%-10%的比例进行。设计师不必总是用三种颜色,但这个比例确实是平衡色彩的一个安全数字。使用这个法则时需注意,60%的部分代表的是主色,30%代表副色,10%应该是强调色。这个比例的配色是最赏心悦目的,因为它可以让视觉元素逐渐浮现,层层递进。


60-30-10规则案例


一个实现60-30-10规则的网站案例,由JPSDesign设计。


色彩对比

色彩对比是视觉构图中非常重要的一部分。例如,如果需要访客注意到网站的某个特定区域(如CTA按钮),设计可以使用两种对比度很高的颜色,如橙色和绿色,或红色和蓝色分别应用于网站背景和按钮。


高对比度案例


对比度高但不伤眼睛的案例,该网站由JPSDesign设计 。


虽然高对比色的强调作用很棒,但也应该谨慎使用。如果你在整个网站上都使用高对比度,访问者就很难阅读或查看文本。建议设计师在大多数设计中使用中等对比色,只有在突出关键元素时才应用高对比色。


从图像着手

在某些情况下,从图像开始设计是有帮助的。如果你的脑海中有一个可以定义品牌的图像,或者客户已经选择了图像,那么你就可以直接从中提取主要颜色。


中性色平衡案例


在这个设计中有多种颜色,中性色调提供平衡。 ——arosto


处理多个图像可能有些棘手,因为你必须在设计中找到一种保持颜色和谐的方法。在这种情况下,以下几种方法可以有效平衡你的图像。


考虑把它们转换成灰度图像:

(1)调整图像的活力降低色调,

(2)使用中性色来平衡图像,

(3)使用网页设计应用的调色板颜色创建一个渐变叠加。


以上的解决方案可以根据项目具体情况使用,就可以轻松地将所选的图像和谐地组合在一起。


色彩赋予网页设计生命

色彩无处不在,如果使用得当,它们可以唤起访客情感并促成操作或购买。虽然颜色在网页设计中扮演着极其重要的角色,但它们并不是完美布局的唯一关键。色彩理论只是无数创建优秀网页设计策略中的一个,你可以应用它来创建优秀的网页设计。


希望本文的色彩理论和配色技巧对你有所帮助,但是请记住,在设计中没有严格的规则。事实上,最好的设计往往会打破常规。用色彩心理学作为指导进行设计,但同时也要相信自己在设计上的创造本能!


原文作者:Mike Projkovski

原文链接:https://99designs.com/blog/web-digital/web-design-...


学习工具,但不受限于某种工具。摹客iDoc,高效协作,从产品到开发,只要一个文档,让你的团队高效协作!

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:809081150 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶