广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

掌握了这几个点,网站配色更高级
发布日期:2024-11-16 11:09:12 浏览次数: 809 来源:术心


文末有福利

......



·写在前面


说到网站设计,可能很多的设计师无从下手,这是什么原因导致的呢?一般都是现在的企业做网站基本上都是套模板,要么就是基于第三方模板去做的,所以在这样的企业干设计时间长了基本上就废了。


我们来看看下面这个以前的12306的网站,很古板,不管是设计还是配色。相信大家在不同的位置看到12306的例子太多了,这里不做多的介绍了。



我记得前几天还有同学给我发微信问我现在做东西基本上都是套模板,我怎么做才能够提升我的设计能力呢?


在这个时候,如果你想要跳出套模板的这个局限,自己设计,那说明你还有救哦,抓紧时间动起来吧。


想要提升主要还是抓住三个点:多看、多想、多做。你再看看下面这个12306更新后的网页,无论是设计感还是配色上面都有了天翻地覆的变化。



不知道大家有没有发现,现在大大小小的企业都要搞一个自己公司的网站,但是基本上都是为了形式,不去重视,一般都是在发现别人家的网站盈利还不错的情况下,才想着把自己的网站好好的做一下,这个时候就要找设计师开始制作了。


我们先来看一看网站有哪些作用:

  1. 梳理企业品牌形象

  2. 提升企业信誉

  3. 品牌推广功能

  4. 产品展示功能

  5. 传播企业文化

  6. 网上销售功能

  7. 发布企业资讯

  8. 扩展销售渠道


网站建设给客户的第一印象至关重要,其中视觉设计起到重要的决定作用。我们作为设计师必须牢记真实的受众群体以及我们为他们提供的产品,为我们的网站或品牌选择完美的配色方案。最重要的是使印象值得信赖,有利可图和有吸引力。




一、确定目的


在开始设计之前,先确定设计目的。那么我们就要问自己这么几个问题:

  1. 你想用你的设计传达什么信息?
  2. 你的设计目的是什么?
  3. 要提供用户什么信息?
  4. 说服用户什么?
  5. 你想让你的设计唤起什么情绪?

你的设计目的应该是你选择调色板时的指南


二、确定你的受众群体

人们对颜色的感觉是不同的。颜色是观察者内部出现的心理现象。颜色根据个人偏好,文化培养和经验对人们有不同的影响。因此,为了了解人们如何对你的设计做出反应,你需要确定你的受众。

比如说我们刚才看到的12306更新后的网站首页:


考虑到受众,我们发现大家上这个网站的首要目的是买票而不是看新闻,所以说我们要把主要功能突出表现,配色方面采用了国企的标准蓝色60%和带有食欲的橙色10%还有白色30%,不知道大家还记不记得我们上篇文章当中提到的60+30+10的配色方案。当然这篇文章当中也会说到。
上一篇:一线大厂设计师原来都是这么配色的!


三、对比方案

我们再来看一看下面的这个配色方案,深蓝色、黄色、黑色。整个网站的配色占比是黑色60%、黄色30%、深蓝色10%。网站设计有一种高级的感觉。而我们今天只说配色,后期会专门写文章说版式排版。

(颜色搭配)

(网站首页)

(网站首页)

(整个网站页面)

当然了,也有一些普遍使用色彩的含义。绿色普遍代表大自然,因为是植被的颜色。


然而,像红色这样的颜色在不同文化中的解释不同。在西方世界,红色与火、暴力和战争有关。它也与爱和激情有关。然而,像中国这样的国家将红色与繁荣和幸福联系在一起。


优秀的网页配色不是单纯好看就行了,颜色是有功能和目的的,了解颜色背后所能传达的信息、氛围、价值观......当你在面对已知的受众时,你就知道,你应该从什么方向的颜色入手。网页面向的人群的年龄段、性别比例、消费层次、风格偏好等等,都应该作为选色的考量因素。

例如:下面的香奈儿


(颜色搭配)

(网站首页)

(网站首页)

上面我们看了一些大牌的网站设计相对来说无论是配色还是设计都是很高级的。

下面我们来看一看一些品牌服装类的网站,下面是配色方案

(颜色搭配)

(网站首页)

(网站首页尾部)

很明显这个品牌的衣服主要面向的是24-40岁左右的上班族,具有一定的消费水平,我们希望我们的网站可以更加吸引用户,给用户留下深刻的第一印象,同时可以刺激顾客的购买欲,根据调研得知现在的这个年龄阶段的上班族大部分都喜欢淡淡的颜色,因此采用了很素的淡蓝色。


在建立这个网站的时候,需要为配色方案仔细选择颜色,不同的颜色会向你的访问者传达各种信息,因为每种颜色都与特定的人类情感相关联,从而改变了他们对网站的理解,也许这并不是你想要的。

这样一来问题就出现了,我们需要学习或者做什么?创建网站配色方案,并避免犯这种类似的设计错误。

在这之前我们需要了解一下下面的信息:
  • 根据研究,人们在与人或产品的最初互动后的90秒内就会下定决心,大约60%-90%是针对颜色。
  • 你需要花多长时间吸引你网站上的某人关注?
  • 彩色图像比黑白更容易让人记住。
  • 蓝色是世界上最受欢迎的颜色。


·总结

如何为你的品牌或网站创建完美的配色方案?

构建设计配色方案时,尽量简单,颜色越少越好
  • 主色调60%
  • 次要颜色30%
  • 强调色10%


主色调


主色调是控制你设计的一种颜色,这意味着突出的材料将使用你的主色调,包括徽标,你的主色调是与品牌相关的颜色。

要确定你的主色调是什么,使用花瓣或站酷等网站进行启发。在查看的过程中,你可能会找到一些特别吸引人的颜色,要想办法把它保存下来,创建一个属于自己的配色列表,浏览各种大品牌的网站,去查看并琢磨他们的配色方案。

方案中的颜色数量:3种是最佳的。

你已经有了主色调;现在是时候在配色方案中抓住其他颜色了。在此之前,你需要确定完成一个配色方案需要多少种颜色。

对于调色板,建议使用三种颜色。根据三色方案中的色彩理论。传统上,它使用三个在色相环周围均匀分布的色相。

60–30–10规则是老设计师关于如何在设计中使用颜色的规则。其中 60% 是主色调,30% 是次要色,10% 是强调色。

次要颜色和强调色

在设计当中,次要颜色最主要的作用就是突出主色以及更好的体现主色的优点,在完成传达信息的同时又使得整个画面更加饱满。次要颜色在强调和突出主色的同时,也必须符合设计所需要传达的风格,如此才能最大化的体现出副色的作用和意义,至少使用10%的颜色是强调色。

可以通过使用工具尝试不同的颜色理论来选择辅助颜色和强调颜色,这些工具允许您使用颜色理论(例如色相环或色空间或色差)创建调色板。

中性色:白色,黑色,灰色

中性表示没有颜色,包括米色,象牙色,灰褐色,黑色,灰色和白色阴影。请谨慎使用,将用于文本的这些颜色(白色,黑色和灰色),以创建元素的对比度或作为背景色。



推荐色彩工具

1.Mycolour
复制网址在浏览器打开:https://mycolor.space/


2.Colorsinspo
复制网址在浏览器打开:https://colorsinspo.com/


3.culrs.com
复制网址在浏览器打开:https://www.culrs.com/#/


4.Colour Tool
复制网址在浏览器打开:
https://material.io/resources/color/#!/?view.left=0&view.right=1&primary.color=ff783d

下图也是这个网站的截图,大家可以看到可以在线设置颜色的搭配,选择不同模块底色文字颜色元素颜色等。


·写在后面

我相信你已经听说过设计中的暗模式和亮模式。现在,大多数流行的网站和应用程序都支持暗模式。如果你打算使用深色模式和浅色模式,则应选择浅色和深色中性色以在不同情况下使用。同样,关于如何使用深色和浅色中性色的想法,请在花瓣或者Dribbble上搜索灵感。

使用特定颜色的地方

你如何在网站上应用选定的调色板,在哪里使用哪种颜色,为什么?
  • 网站上“热点/重要空间”中使用的主色调,用于CTA按钮(召唤按钮),标题,图标,下载表格,并使用主色突出显示其他相关信息。
  • 次要颜色用于突出显示不太重要的信息,例如副标题,支持内容,推荐,次要按钮和常见问题。
  • “中性色”最有可能用于文本和背景,但特别是在网站的彩色部分中,可以帮助淡化并重新聚焦眼睛。


- THANKS -
感谢阅读,如果你发现有用
记得给术心「点赞」「在看」「分享」♡☟


—————————————————————

  设计师的群  


术心 | 欢迎小伙伴们进设计师的群,如果喜欢术心的文章就「把我设置为星标」吧;我们一同前行;各位,明天见!!!

————
推荐阅读

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询