非常有道理,转自Solidot。这其中的大部分都是我深信不疑的,总结的很好。

  • 1. 不可滥用 Flash
    Adobe 备受欢迎的 Web 动画技术,Flash,在很多地方显示了它的威力,从 Nike 充满炫耀味道的整体 Flash 网站,到充斥各个网站的 Flash Banner 广告,然而该技术很容易被滥用,大量的,无节制的 Flash 动画不仅带来易用性问题,而且让用户的浏览器不堪重负。
  • 2. 不可搅扰内容
    广告对一个网站的生存也许很重要,但易用性研究者认为,弹窗广告,以及全屏广告会扰乱网站的内容,并挑战用户再次访问的信心。传统的 Banner 广告可能更好一些。
  • 3. 不可失去条理
    Web 是个大宝藏,但失去条理的网站让人无法访问其中的内容。包括 Amazon.com 在内的一些优秀网站向来将对内容的组织视为首要设计任务。
  • 4. 不可滥用玻璃倒影效果
    苹果向以时尚与酷绚的设计著称,但一些专家称,苹果在他们的产品图片中设计的玻璃倒影效果被大量模仿,最终将这种风格演变成恶俗。
  • 5. 不可在网站命名中跟风
    一些聪明的网站主在网站命名中不使用任何元音,或尽可能多用元音,比如,Flickr, Smibs, 以及 Meebo,这些命名方式会随着时间很快过时。(中国网站流行的恶俗命名方式包括使用数字谐音,所以,我们有数以万计的 51 什么什么的网站 – 译者)
  • 6. 应当重视文字版面
    尽管宽带连接无处不在,但纯文字版面的网站仍然拥有一种不可低估的势头。这类网站的典型包括 CraigslistCoudal PartnersDaring Fireball 。(还有译者最推崇的 Alisapart.com
  • 7. 应当有吸引用户的内容和体验
    单单漂亮还不够,Facebook 以及 YouTube 一类的站只所以吸引用户,是因为他们有抓人的内容。
  • 8. 应当走向社会化
    Web2.0 已经无处不在,MySpace 一类的站点引领了用户交流沟通的趋势。
  • 9. 应当大众熟悉的技术
    Wikipedia, YouTube, Facebook 一类的网站已经成为很多人生活的一部分。应当将这些网站中的元素引入你的设计,让你的用户感到亲切,熟悉。
  • 10. 应当坚持内容为王
    内容为王的口号已经不新鲜了,但仍然有用。外观的美丽无法弥补内容的空洞。

本文由以下14位在 Web 设计领域成就卓越的专家编写:

  • Dan Cederholm, SimpleBits 的创办人
  • Chris Conley, IIT 设计学院教授
  • Malcolm Garrett, AIG 创意总监
  • Robert Greenberg, R/GA 主席,CEO
  • Steven Heller, School of Visual Arts 主席
  • John Maeda, Rhode Island School of Design 总裁
  • Don Norman, Nielsen Norman Group 创始人
  • Dave Shea, mezzoblue 创始人《The Zen of CSS Design,CSS禅意花园 》一书的作者
  • Lisa Strausfeld, Pentagram 合作伙伴
  • Jakob Trollbäck, Trollbäck 创始人
  • Khoi Vinh, NYTimes.com 设计主管
  • Simon Waterfall, D&AD 创意主管
  • Martin Wattenberg, IBM 视觉交流实验室经理
  • Jeffrey Zeldman, A List Apart Magazine 杂志出版商

[singlepic=14444]

原来的模板主色调是粉红色、灰色和黑色。也用了很长一段时间了,而且是WordPress Theme Viewer里面比较著名的一个模板。我的模板天天改,小改大改都有,性能的功能的和设计的都有,还有转为W3C xHTML Strict级别dtd做的修改,看过我的博客HTML源码的都应该注意到,我的DOCTYPE可是:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

希望大家都遵循Web标准,当心IE8到来时的措手不及哦。

这次改主题,起因是今天在校内看到高中同学王影分享的一个名叫“藤蔓〆图腾”的相册,其中几个图片挺有感觉,华丽却不妖艳,略显凌乱却风格鲜明,于是就下手改出了现在的风格。
自从四川汶川地震以来,背景改成灰色,感觉其实黑白搭配文字块的感觉也不错,于是这次干脆取消所有的颜色,也算正好符合我的心境,什么都看不见。

VI,即Visual Identification,一般指企业请专业的VI公司设计的一套配色、图标、版面设计等等一套系统,便于客户的识别,以便达到“一眼难忘”的效果。成功的VI比如QQ的企鹅形象,IBM和DELL的蓝色等等。
博客需要VI吗?答案肯定是需要。博客SEO中有这么一条,选定一个主题然后就不再更改。其实这就是一种VI设计。选定的WordPress主题中,基本就规定了配色、图标、版面设计这三个主要要素。

早上做了一个复刻版Gravatar,是这个样子的:

[singlepic=14396]

基本上基于老的Gravatar,那个Gravatar的来历好像是刚转入WordPress时用的一个橙色的主题,那上边的一个Icon。
现在,这个Gravatar俨然被我作为个人的VI,QQ头像,MSN头像,Gtalk头像,站点的favicon等等都用这一个。
什么意思呢?可以理解成一个靶子吧。一旦选定了目标,我可是不会放弃哦。

是的,偶尔我还是能做点设计的… 献丑了。遥想当年,还曾经很喜欢艺术类的专业,一度还想考中央美院呢,呵呵。后来,发现自己实在没有艺术细胞,只好作罢~

灵感来源于同济大学的“同”字以及HPCC中的几个“C”。嗯,感冒了,难受得很,不多写了。

XHTML的最终要求是,使得所有网页和浏览器按照而且只按照XHTML 1.0 Strict这个最高标准来控制内容。
传统的FLASH媒体的插入是使用<embed>标签,可惜的是这个标签是不被W3C XHTML 1.0 Strict所认可的,在W3C的FAQ里有过描述。W3C认为,<embed>标记从来就不曾是标准的一部分,只是浏览器大战留下来的炮灰罢了(好像是Netscape一方的)。同时,这篇FAQ里还提到了关于这个问题的一篇著名文章,称为Flash Satay方法。这个方法由Drew McLellan提出,主要思想是通过一个只有一句AS语句的FLASH桥达到载入参数传进的Flash文件的办法。同时,使用<object>标签替代<embed>标签。

可惜的是,这个方法未免太复杂了一些。此外还有很多人想到使用JavaScript来动态加入<embed>的Flash内容,这无异于饮鸩止渴,将表现层和行为层混为一谈,我认为是绝不可取的办法。

Joen Asmussen的博客Noscope里评价了这两种方法,并且指出仅仅使用<object>标签,不使用桥Flash也可以达到在XHTML 1.0 Strict合法的前提下插入FLASH内容的效果。Hixie具体地描述了这个方法。可惜的是,他的代码在我这里只在IE中有效,而在Firefox里却有些问题。这应该是Wordpress自动完成标记的副作用。

经过我的实验,可以正常使用的代码如下所述:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="400">
<param name="movie" value="movie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<object data="movie.swf" width="480" height="400" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
</object>
</object>

为了在Wordpress里面直接用而避免编辑器进行不必要的转换,建议使用下面这个无换行版。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="400"><param name="movie" value="movie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><object data="movie.swf" width="480" height="400" type="application/x-shockwave-flash"><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /></object></object>

你需要做的,仅仅是替换里面的两个movie.swf成你想要的,然后修改width和heigth成你想要的大小,就可以放心通过XHTML 1.0 Strict验证了。