网页设计中的双色分隔线

平常我们在网页中都会看到一些很常见的分隔线,比如在博客主题设计中侧栏列表的分隔横线,或者是文章标题与正文之间的分隔线。我也发现最近在越来越多的网页设计中,设计师会把它们设计成紧靠在一起的两条不同颜色的线,并借此得到比普通只有一种颜色的分隔线更为精致的设计表现和深邃的视觉感觉。

可能题目的意思不好明白,因为我不是做网页设计的,所以我是找不到合适的词语来描述。看看下面的图示会清楚很多:

 网页设计中的双色分隔线

SOHTANAKA 网站上我们能看到正文一栏各文章之间的分隔横线,还有它在侧栏列表中的分隔线,都是由两种颜色并且高度均为1px的两横线组成。效果大家能看到,是不是觉得很不一样,至少会觉得让人喜欢。相同的例子还可以有下面一些的网站设计:

 网页设计中的双色分隔线

 网页设计中的双色分隔线

当你把上面图片放大后,你都能看到这些双色的分隔线其实都是以一深一浅的两线组成。但要如何设计这些颜色的配合呢?这也是我觉得没办法回答的,毕竟是要靠设计的经验和相关的专业才能做出显著的效果。但象我们一般弄弄主题设计玩一下的是不是也能班门弄斧一下,能速成的找到一些“设计感觉”?我自己想到有一个很“山寨”的办法:

首先以线条的背景色为基础,利用一些网页配色网站提供的建议,比如Color Scheme Designer 3。以上面第一图为例,获取它的背景色为#151D27。然后在上面的网站上分析该颜色,它会提供一个相关颜色建议给我们:

 网页设计中的双色分隔线

我们能从上图中看到在中间最大块颜色(前面输入的背景色)的左右分别是相对较浅和较深的颜色建议,这两种颜色就是我们能用来构成双色线的接近色了。对比一下原设计放大图中的两种颜色:

 网页设计中的双色分隔线

是不是有点象?我说的这是建议色或者是接近色的原因是,本来在设计中就没有固定的颜色配搭,一切全凭各人喜好。我们可以根据上面的配色再做适当调整,只是如果采用专业的颜色配搭会让我们这些“外行”显得“专业”一点,当然也省事一点。

说到这里就不能不推荐下一款由国人Alan制作的WordPress主题-DarkLight 2.3,在其上面我们也能看到相同的效果设计。(主题很赞,建议大家看完此文再去围观下)

 网页设计中的双色分隔线

到此,可能大家都会发现这样一种双色线在深色的网页设计中会更显效果,如果是浅色调的网页配色呢?是否也能弄出如斯效果?现在我们一起再看些例子:

 网页设计中的双色分隔线

 网页设计中的双色分隔线

 网页设计中的双色分隔线

看了例子后,大家应该跟我的想法是一样的:对于绝对的白色背景,这样的效果会很不明显的。因为很多时候我们只能利用灰色的背景色,再搭配一条颜色较深的灰线一条白线。所以在浅色配色的网页中,配以灰-白结合的双色线是最保险的。当然上面说的只是我的感觉,也不能一概而论,一切以实践为检验标准……(又开始念书了,呵。)

文章最后,我也再推另外一款同样由国人Vichair制作WordPress主题-Lifedit,同样精彩;大家顺带看看他是怎样设计双色线的。(Bye啦,别忘了给我留言,哈哈。)

 网页设计中的双色分隔线

分类:theme skill, WordPress;标签:, , , ;收藏本文的永久链接

29 Responses to “网页设计中的双色分隔线”

  1. Never summer 回复此留言 2009/11/20 01:55 #comment-10924

    我來留言
    有時候幾條分割線能把整個網頁顯得更分明 :smile:

  2. www.2gaoav.com 回复此留言 2009/11/20 02:00 #comment-10925

    路过~~留痕

  3. Zoll 回复此留言 2009/11/19 19:20 #comment-10918

    深夜杀花党~

    • welee 回复此留言 2009/11/20 07:06 #comment-10932

      据专家诊断,你得了沙发过瘾症,来人啊~拉去电疗 :grin:

  4. welee 回复此留言 2009/11/19 19:23 #comment-10919

    我坐板凳好了~

  5. gil 回复此留言 2009/11/20 04:38 #comment-10930

    这种设计很有质感,主意很久了,就是没有认真去研究过 :sad:

  6. eking 回复此留言 2009/11/20 07:18 #comment-10933

    哈哈,第一次来,留个脚印~顺便说下,你的博客挺不错的!

  7. trylife 回复此留言 2009/11/20 01:33 #comment-10923

    地板空间大

  8. 久酷 回复此留言 2009/11/20 02:16 #comment-10926

    这个配色需要一定的美工基础呀,呵呵……咱美工有点白痴

  9. chisdy 回复此留言 2009/11/20 02:37 #comment-10927

    不錯,不錯,得好好注意下。

  10. ZH CEXO 回复此留言 2009/11/20 02:59 #comment-10928

    这种效果在Tutorial9上面有详解,有加强立体感的效果

    • Jinwen 回复此留言 2009/11/20 08:27 #comment-10935

      你一说我就去找了,之前一直没用对关键字 :roll: 但它那边也没详细说配色,我这里说了一个简单双山寨的方法, :eek:

  11. underone 回复此留言 2009/11/20 10:07 #comment-10937

    提醒我了...鸸鹋新版上我用的还是虚线...去试试双线阴影的效果如何

  12. Alan 回复此留言 2009/11/20 17:04 #comment-10940

    谢谢你的推荐 :smile:
    你的嵌套回复样式其实我一直觊觎很久 :mrgreen:
    下次新主题可以偷一下,嘻嘻

    • Jinwen 回复此留言 2009/11/20 17:07 #comment-10943

      不客气啦;其实回复的样式我还想再改一下,就是不肯动手, :grin:

  13. MrW3C 回复此留言 2009/11/20 17:04 #comment-10941

    你的博客主题很漂亮啊

    • Jinwen 回复此留言 2009/11/20 17:07 #comment-10942

      谢谢呢,你现在看到的是黑色的;白天的话就看到白色版本的了 :smile:

  14. Zoll 回复此留言 2009/11/20 21:13 #comment-10948

    呵呵,我也发现主题的颜色是根据黑夜和白天在自动变化的。不过是用的哪一区的时间呢?

  15. 左岸读书 回复此留言 2009/11/22 07:25 #comment-10995

    是一种很深邃的感觉,一下都很喜欢~

  16. mybg 回复此留言 2009/11/23 10:34 #comment-11015

    @Jinwen:我又看到一个不错的存档页,在wp中文论坛问了,都说好弄(全是牛人),但就是没给方法,还说怎么啥都要问 :neutral: 。哎,要是懂的话,我何必多问呢,所以,来打搅你一下了 :smile: 。我记得以前你介绍过一种类似的存档页,我也用上了。但http://www.forevergeek.com/archive/
    这个效果似乎更好,能请你帮忙分析下,如何实现吗?

  17. zwwooooo 回复此留言 2009/11/23 17:32 #comment-11030

    的确很赞的说,自己设计不了 = =

    • Jinwen 回复此留言 2009/11/23 17:40 #comment-11032

      应该我试下配色就好了,要不就“参考”一下别人的啦~

  18. Zenoven自由人 回复此留言 2009/12/18 05:00 #comment-11736

    不错不错。。。都是牛人

  19. biao166 回复此留言 2010/01/05 12:03 #comment-12074

    嗯,学习!!!

  20. fin 回复此留言 2010/06/19 08:04 #comment-14811

    :razz: 加油顶起

  21. 回复此留言 2011/04/30 16:20 #comment-18785

    :sad: 看不懂...