4001606928Mon. - Fri. 10:00-22:00

网站设计 | 网页用色简易指南(上)

网站设计 | 网页用色简易指南(上)

导语:对于色彩理论这种东西,我一向是没什么好感的,可能是因为我总是对它的作用持有一种怀疑的态度。但是怀疑并不代表它不存在,所以,我还是很乐意坐下来,利用手中的色彩轮盘,在挑选互补色系、分散的互补色系以及三色系的过程中,让我身边的朋友、家人以及客户都惊艳一把的。

a.webp

当然了,如果你是一个配色新手,那么色彩理论实际上没有多大作用,不是吗?光说不练假把式!这也是为什么在这篇文章里,我不会只是简单地向大家展示一个色轮的原因。我要展示的,是一个简易的色彩渲染流程,下次大家要是有新的网页设计方案,就可以借用一下了。

在阅读这篇文章的过程中,你会受到这种理论潜移默化的熏陶。我发誓,你会比现在更能领悟到这其中的奥妙之处!

选择底色

无论什么时候,只要一想到1000万种颜色,就觉得荒谬可笑。你想啊,1000万种啊,而这么多种颜色里,我们实际上只需要为网站和品牌挑选一种颜色作为底色。如果只选一种颜色的话,那么其它那些颜色意义何在,种类如此庞大的颜色又有什么用呢。

不过,由此可见,挑选底色是一件很谨慎很重要的事情,因为网页的其它配色都是从这个颜色衍生出来的。不过无需担心:照着步骤走的话,你肯定错不了的。

如何选择初始颜色

现在突然要你从蓝色系里挑选出一种颜色,你肯定会觉得这件事易如反掌啊,不过,选色不是我们要做的事。我们要做的是,无论是什么项目,一旦需要你跟客户打交道,就尽可能地用强大的理由说服他们,证明你之所以选这些颜色都是事出有因的。如果不这样做,最后的情况会变成你喜欢的颜色和客户喜欢的颜色在打架,要知道,他们付了钱的,他们是上帝,所以最后肯定是客户赢,即使他们对设计一窍不通。

别想太多,只要确保你挑选的颜色(就此而言,是每一种颜色),都是出于正当的理由,那起码在被客户质问时,不至于显得太尴尬。

b.webp

选择初始颜色的小诀窍

合理利用手头资源

如果你的logo是有颜色的,那么通常情况下,这种颜色是初始颜色的不二之选。

禁选竞争对手的用色

如果主色和某个主要竞争对手的品牌色相近,不到万不得已,千万不要选用这种颜色。在自己的配色方案里找到竞争对手的用色,把它们一一挑出,剔除掉。

仔细定位目标受众

殡仪馆网站的用色绝对跟儿童俱乐部网站的用色是不一样的,这都不用教了。目标受众决定网站的用色,所以网页开发者在设计过程中要时刻想着这些问题:谁会浏览这个网站,这个网站会给访客带来什么样的感受(是激动的,严肃的,还是关爱般的,等等)。

不要使用默认颜色

如果网站的目标受众是年轻的女孩子,那就不要再选用粉色了,这个颜色已经被用到烂了。想要赢得信誉有很多种方法,那些老套的就免了吧。

玩玩文字游戏

你是不是正绞尽脑汁地在想一些跟客户业务相关的广告语?如果真是这样,希望这条小贴士能给你一些关于颜色意义的启发。随意搜索一些网站,观察它们的用色都有什么含义,再看看哪一个的配色是最符合网站主题的。对于网页设计,你心里应该有一个大概的底色了。底色首选简单的纯色,像红色、绿色、蓝色、黄色或者粉色,这一类的。接下来我们会进入到精准色度(即一种颜色的深浅)这一话题。

我们先假设你选了蓝色。(顺便一说,蓝色是个不错的选择!)

选择准确的底色

Photoshop的颜色拾取器是不是经常让你在选择蓝色深浅的时候觉得自己头都大了?没关系,我们先像艺术家偷师一样,借用一下别人的设计用色,解决难关再说。

首先,同时打开Dribbble(注:一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站)和Designspiration(注:国外设计艺术网站)这两个网站,点击上面的“颜色”选项,可以看到,两个网站呈现的页面都是大同小异的:

c.webp

使用灵感类网站可以为设计找到合适的配色

你可以把这一步当作“选了蓝色”的下一步,即选择正确色度的蓝色。

对充满年轻活力的品牌来说,选择一种更浅更明亮的蓝色是再合适不过的(下图中前五种色度)。而对一些较为注重团体和严肃的品牌来说,后五种色度则更合适些。

d.webp

色度不同的蓝色有不同的含义和特征,所以一定要谨慎选择!

从这两类网站中各选一种色度,看看网站实际的设计是如何运用这种色彩的。然后再借助CSS-Tricks的颜色拾取技术,在浏览器中捕捉精确的用色。

e.webp

这么多种蓝色! 你要做的就是选出你认为最适合你品牌的那种颜色。小菜一碟嘛!

你不仅可以看到各种不同版本的底色,而且还可以看到最匹配的颜色。

 

注:本文内容由九枝兰团队翻译,转载请加上九枝兰微信ID:jiuzhilan或二维码。对于不署名者,九枝兰将保留追究的权利。
原文作者:Laura Elizabeth
翻译:刘正君@九枝兰