share

mailer / 2009.04.07 / 1:45 pm

网页背景设计最佳做法 28+

这是AKFish童鞋翻译来自SmashingMagazine 的文章,原文详见SM,AKFish的译文见他的博客(上) (下) 。以下为大体内容,有所删减:

一.基本背景结构

名词:主背景
主背景是最为底层的背景,经常是图片、图案、材质或者其他图形元素。

名词:内容背景
结构中的另一层是内容背景。这是文本、图案以及其它基本数据或信息的背景。

方案1:内容与主背景分层;方案2:内容与主背景的图案或纹理直接结合
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net
方案3:内容与主体共用背景
网页背景设计最佳做法 | Jandan.net
---------------------------
二.包装/头部背景

1.提供流畅的分割;2.允许一些图案融入内容区域
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net

3.将图案拓展到整个布局中
网页背景设计最佳做法 | Jandan.net
---------------------------
三.整体背景

1.使用高亮或斜角来分割颜色;2.固定与浮动图形的混合
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net

3.使用低对比度的花样或材质;4.结合材质与图案
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net

5.增加维度;6.使用固定的图片与内容背景
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net
---------------------------
四.内容/包装背景技巧

1.简单的渐变;2.细微的材质
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net

3.包装与背景融合;4.风格化包装/模块的边框
网页背景设计最佳做法 | Jandan.net网页背景设计最佳做法 | Jandan.net

5.在层状设计中使用半透明内容背景
网页背景设计最佳做法 | Jandan.net

本文有 28 篇评论

  1. 1 li9900 li9900 说 :
    2009.04.07 1:49 pm
    avatar

    杀...

  2. 2 Aiger Aiger 说 :
    2009.04.07 1:49 pm
    avatar

    最佳做法就是不做

  3. 3 Ami Ami 说 :
    2009.04.07 1:50 pm
    avatar

    太技术了,不看。

  4. 4 幻觉 幻觉 说 :
    2009.04.07 1:51 pm
    avatar

    sf

  5. 5 tb月球人 tb月球人 说 :
    2009.04.07 1:51 pm
    avatar

    哈哈哈.学习

  6. 6 li9900 li9900 说 :
    2009.04.07 1:52 pm
    avatar

    砖页,砖页
    完毕.

  7. 7 半afk不抢沙发了 半afk不抢沙发了 说 :
    2009.04.07 1:52 pm
    avatar

    最大的动作不过是给博客换个系统自带模板的懒人路过……

  8. 8 第一次 第一次 说 :
    2009.04.07 1:52 pm
    avatar

    哇赛,第一次发言

  9. 9 AKFish AKFish 说 :
    2009.04.07 1:56 pm
    avatar

    第一次投稿
    ^o^

  10. 10 leng leng 说 :
    2009.04.07 1:57 pm
    avatar

    mark

  11. 11 JXUFELWQ JXUFELWQ 说 :
    2009.04.07 2:16 pm
    avatar

    砖页砖页

    哈哈~~~鉴定完毕~~

  12. 12 Fanze Fanze 说 :
    2009.04.07 2:25 pm
    avatar

    啊~~~~刚发的内容竟然没有发上去,是一张小鸡出壳的图片,然后告诉我jandan超载了

  13. 13 onex onex 说 :
    2009.04.07 2:26 pm
    avatar

    学习了,顺便问下谁知道iweb做的bolg怎么添加评论

  14. 14 树 说 :
    2009.04.07 2:51 pm
    avatar

    第一次看网页背景设计最佳做法 12

  15. 15 苏姐姐 苏姐姐 说 :
    2009.04.07 2:59 pm
    avatar

    技术帖俺就不回了。

  16. 16 cdds cdds 说 :
    2009.04.07 3:07 pm
    avatar

    @苏姐姐: 可是你还是回了。

  17. 17 八百步 八百步 说 :
    2009.04.07 3:30 pm
    avatar

    大家可以学习一下然后去折腾Twitter背景么!

  18. 18 慢 说 :
    2009.04.07 6:25 pm
    avatar

    还不错

  19. 19 &iF F &iF F 说 :
    2009.04.07 9:24 pm
    avatar

    怎么做?

  20. 20 時をかける述 時をかける述 说 :
    2009.04.07 10:20 pm
    avatar

    好复杂...不过对我来说学这个也比学PASCAL好很多...

    因为我讨厌函数...

  21. 21 Conan06 Conan06 说 :
    2009.04.07 10:30 pm
    avatar

    -V-不错

  22. 22 君度 君度 说 :
    2009.04.07 11:15 pm
    avatar

    啥时需要啥时看~~

  23. 23 Valan Valan 说 :
    2009.04.08 12:06 am
    avatar

    半透明一向是web2.0的宠儿

  24. 24 Jessica Jessica 说 :
    2009.04.08 3:34 am
    avatar

    挺好看的。其实我觉得关键要图片好看,配色到位。

  25. 25 lullaby lullaby 说 :
    2009.04.08 12:53 pm
    avatar

    gao~

  26. 26 Valan Valan 说 :
    2009.04.19 11:30 pm
    avatar

    煎蛋的页面设计就相当好~

  27. 27 zhanxing zhanxing 说 :
    2009.04.23 10:25 pm
    avatar

    研究研究,其实正打算在网站上放个流媒体播放器。

  28. 28 特殊弹 特殊弹 说 :
    2009.05.22 6:41 pm
    avatar

    好学习

发表你的意见