设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

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

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

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

Cherry
2019-02-15
135316

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


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

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

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

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

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

暖色系

暖色活力设计案例

红色能唤起激情与活力的网页设计,由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-...

上一篇
iPhone设计资源合集——25个免费的iPhone 8模型素材下载 [PSD+Sketch]

Summer   02/19

Mac上值得推荐的五款思维导图软件

Mignon   02/14

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com