平常我们在网页中都会看到一些很常见的分隔线,比如在博客主题设计中侧栏列表的分隔横线,或者是文章标题与正文之间的分隔线。我也发现最近在越来越多的网页设计中,设计师会把它们设计成紧靠在一起的两条不同颜色的线,并借此得到比普通只有一种颜色的分隔线更为精致的设计表现和深邃的视觉感觉。
可能题目的意思不好明白,因为我不是做网页设计的,所以我是找不到合适的词语来描述。看看下面的图示会清楚很多:
在SOHTANAKA 网站上我们能看到正文一栏各文章之间的分隔横线,还有它在侧栏列表中的分隔线,都是由两种颜色并且高度均为1px的两横线组成。效果大家能看到,是不是觉得很不一样,至少会觉得让人喜欢。相同的例子还可以有下面一些的网站设计:
当你把上面图片放大后,你都能看到这些双色的分隔线其实都是以一深一浅的两线组成。但要如何设计这些颜色的配合呢?这也是我觉得没办法回答的,毕竟是要靠设计的经验和相关的专业才能做出显著的效果。但象我们一般弄弄主题设计玩一下的是不是也能班门弄斧一下,能速成的找到一些“设计感觉”?我自己想到有一个很“山寨”的办法:
首先以线条的背景色为基础,利用一些网页配色网站提供的建议,比如Color Scheme Designer 3。以上面第一图为例,获取它的背景色为#151D27。然后在上面的网站上分析该颜色,它会提供一个相关颜色建议给我们:
我们能从上图中看到在中间最大块颜色(前面输入的背景色)的左右分别是相对较浅和较深的颜色建议,这两种颜色就是我们能用来构成双色线的接近色了。对比一下原设计放大图中的两种颜色:
是不是有点象?我说的这是建议色或者是接近色的原因是,本来在设计中就没有固定的颜色配搭,一切全凭各人喜好。我们可以根据上面的配色再做适当调整,只是如果采用专业的颜色配搭会让我们这些“外行”显得“专业”一点,当然也省事一点。
说到这里就不能不推荐下一款由国人Alan制作的WordPress主题-DarkLight 2.3,在其上面我们也能看到相同的效果设计。(主题很赞,建议大家看完此文再去围观下)
到此,可能大家都会发现这样一种双色线在深色的网页设计中会更显效果,如果是浅色调的网页配色呢?是否也能弄出如斯效果?现在我们一起再看些例子:
看了例子后,大家应该跟我的想法是一样的:对于绝对的白色背景,这样的效果会很不明显的。因为很多时候我们只能利用灰色的背景色,再搭配一条颜色较深的灰线和一条白线。所以在浅色配色的网页中,配以灰-白结合的双色线是最保险的。当然上面说的只是我的感觉,也不能一概而论,一切以实践为检验标准……(又开始念书了,呵。)
文章最后,我也再推另外一款同样由国人Vichair制作WordPress主题-Lifedit,同样精彩;大家顺带看看他是怎样设计双色线的。(Bye啦,别忘了给我留言,哈哈。)








