写给大家看的建站配色方案

须知

  • 我为设计初学者和非设计用户编写了本指南
  • 您可以免费使用本指南
  • 禁止销售本指南
  • 禁止复制(部分)本指南并将其做为您自己的指南
  • 未经我的许可,禁止在商业学习环境(商业培训)中使用本指南。
  • 不对任何内容错误和失误,任何利润损失或任何其他商业损害承担责任。

如有问题,不要犹豫,通过imaiko.com上的联系表单与我联系。

WordPress 外贸建站后台截图 指导

前言

  1. 你知道为什么快餐店选择橙红色?
  2. 你知道为什么社交网站选择蓝色?
  3. 你知道为什么淘宝和亚马逊选择橙色?
  4. 你知道为什么交通警示灯是黄红蓝吗?
  5. 你知道为什么保险柜多为黑色而冰箱多为白色吗?
  6. 你知道为什么正装西装以深色为主吗?
  7. 你知道为什么卧室颜色多为淡色吗?

色彩搭配是网站的第一印象。深思熟虑的色彩搭配可以大大提高用户体验。在网页设计中,颜色的作用非常重要。有效的网页设计是由网站的用户,而不是网站所有者来判断的。影响网站可用性的因素很多,颜色是第一位的。

近代大神乔布斯帮主曾经说过:

设计不仅是看起来怎样或者感觉如何,设计是理想的运行(design is how it works, 翻译略有不当,或者翻译为设计不是好看是好用)。

提纲如下:

  • 基本颜色,红蓝橙
  • 网站设计颜色建议参考
  • 色彩推荐
  • 配色工具
  • 规避的色彩搭配
  • 高档的色彩搭配
  • 颜色与感情

基本颜色,红蓝橙

每种颜色背后都有心理影响,比如:

红色,在时间上会让人感觉时间比实际时间长;在空间上暖色是前进色,会有停止的压力;传达情感丰富,印象深刻,是合作按钮,是品牌的首选颜色,做背景时要特别小心处理。

蓝色,在时间上会让人感觉时间比实际时间短,所以社交和咖啡店都是蓝色,希望人们尽量多的停留;冷色在空间上暖色是后退色,是合作背景,一张杂乱的工厂图加上蓝色蒙版瞬间高大上。

橙色,没有红色的危险警惕,暖色是一种前进色,起到兴奋和引注意力的作用,是购物网站按钮的首选;

综上,做品牌用红色,常规外贸官网用蓝色,商城网站用橙色,是不会错的颜色。

网站设计颜色建议参考

单色原则

单色制造出简洁的感觉,配合适合的留白就可以制作出大方的风格;单色+空白/负空间是非常有效的给你的网站一个现代和整洁的外观。

颜色色号通常用HEX或者RGBA来表示。在单色原则上可以略微调整颜色的浓度,饱和度,亮度等等来获得辅助色。推荐工具来直接获得色号。

互补色

互补色彩创造平衡与和谐。对文字和背景使用对比色将使阅读更容易,注意要有主次之分;

如果是三种颜色

比例可以考虑7:2:1,个人不推荐多色彩搭配。

永远不要超过3个颜色,除非你在构图超过达芬奇,配色超过梵高。

色彩推荐

冷色配深色;
推荐的几种颜色
红色+白色:突出品牌
红色+黑色:高性能运动
蓝色+白色:商务
明黄+黑色:机械
红色:#c71a1d
蓝色:#112a88
用色一般考虑是logo颜色和行业颜色,颜色有情感性别。

 

配色工具

paletton.com
自定义高级配色

gradient.shapefactory.co
不同渐变颜色

colorfavs.com
上传图片来分析图片的配色

getuicolors.com
深色单色做背景

www.peise.net
提供大量优秀配色方案

nipponcolors.com
日本文艺传统色

webgradients.com
推荐网站渐变背景色参考

color.adobe.com
Adobe 官方出品的配色工具

lolcolors
简洁,但非常好用的配色网站

flatuicolors.com
漂亮的扁平化配色

规避的色彩搭配

  • 避免高饱和度+高饱和度
  • 避免低饱和度+低饱和度
  • 避免亮色+亮色
  • 避免冷色+深色

总之看起来不舒服,是对比和可读性问题

高档的色彩搭配

想要网站看起来更高级(高大上),则尽量少输出颜色,即颜色浓度较低,造成高级感。之所以一些颜色看起来会显得高档,其实是因为该颜色传提出的情绪很少。而降低色彩饱和度,或者不明确色相的颜色,其实就是在降低和削减色彩对人情绪的影响。所以会看起来略显高档。

颜色越少感觉越高级,最高级的就是黑色+白色,这两种在网页设计中不算是颜色。黑白照片看起来比彩色照片高档,大部分奢侈品牌选择黑白,其实都是在降低色彩本身对于人情绪的影响,而使人感觉高档。

色彩饱和度较高的颜色,也就是我们通常所说的鲜艳的颜色,本身就会对我们观看者的情绪造成影响。鲜艳的色彩创造情感,应该谨慎使用。从用户体验角度来讲,鲜艳的色彩给人危险和警示的作用,用户看到大面积鲜艳的色彩后会迅速离开,这是本能反应。

颜色与感情


色彩的心理感受,并不是人类后期赋予或者毫无根据杜撰出来的。我们现代人的行为、思维等等,其实都是因进化演变而形成的一种自然生理机制。为什么蓝色会给人没有食欲?因为自然界中就没有天然存在的蓝色食物。为什么红色橙色会给人危险的感觉?因为自然界中,很多有毒的生物表体的颜色就是如此,因此在人类长期的进化演变过程中,对于过分鲜艳的颜色,便有了独特的警觉性。还有更多的色彩心理,其实,都是因人类进化而逐渐被我们确定认知的。

  • 红色,会让人感觉时间比实际时间长;会有停止的压力;传达情感丰富,印象深刻,是品牌的首选颜色。
  • 蓝色,会让人感觉时间比实际时间短,所以社交和咖啡店都是蓝色。
  • 橙色,没有红色的危险警惕,暖色是一种前进色,起到引注意力的作用,是购物网站的首选;
  • 而想要网站看起来更高级,则尽量少输出情感,即颜色饱和度较低,可以造成高级感。
  • 黄色是充满活力的,给人以幸福和活力的感觉。此外,它与好奇心,智慧,亮度等有关。
  • 绿色是和谐,自然,生命和健康的颜色。此外,它通常与金钱有关。在设计中,绿色可以具有平衡和协调效果。
  • 绿色加黑:给人安稳、自私、沉默、刻苦的心理感觉。较深和较灰的绿色会产生相反的效果。这些橄榄绿色让我们想起腐烂和死亡,实际上可能对身体和情绪健康产生不利影响。
  • 蓝色意味着耐心,和平,可信赖和稳定。它是最受欢迎的颜色之一,尤其是男性。它与专业,信任和荣誉有关。这就是为什么最大的社交网络使用蓝色的原因。
  • 紫色传统上与权力,贵族和财富有关。在您的设计中,紫色可以给人一种智慧,皇室,高贵,奢华和神秘感。
  • 粉红色表达浪漫,被动,关心,和平,感情等。
  • 当力量,激情,力量和兴奋想要传递时,红色是一种很好的颜色。更明亮的色调更有活力,更暗的色调更强大和优雅。
  • 橙色吸引注意力而不像红色那样过于强烈。这意味着快乐和创造力。橙色可以与友善,自信和勇气联系在一起。
  • 加深的棕色意味着朴实,自然,耐用,舒适和可靠,放松和自信。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Fill out this field
Fill out this field
请输入正确的电子邮件地址。

菜单