这是一篇翻译的文章。

原文：Why Is Chinese Web Design So Bad?
作者：Nick Johnson

译者按

中国并不乏好的设计师，但是为什么那么多重要的门户网站都是那同一种拥挤得让人窒息的风格？而且广大网民多数还认可了这样的设计，使之不断延续。这背后必然有文化、思维方式在起着作用。本文作者 Nick Johnson 是一个有着 12 年设计经验的设计师，来过中国，让我们看看他是怎么看待这些现象以及背后的更深层次的因素的。有许多人认为这是一篇批判中国网页设计的文章，但仔细阅读后会发现并非如此。作者只是从文化差异的角度解释了为什么对于西方人来说，中国的网页设计显得如此糟糕，而中国人却觉得可以接受。在原文的评论中有很多急于为中国设计师正名的网友，事实上他们都没有看懂作者的意图。况且作者也声明了自己只是在探讨一种普遍现象，所以不需要拿出一些特定的例子来证明，中国的网页设计“并不烂”。

译文

我想以一个免责声明来开头。我对下面涉及的话题的观点仅仅是个人观点。这些观点来自我在大概两年里居住在中国中部的河南省期间，对中国文化的观察与交流。

在中西文化、社会学或跨文化交流等等类似的学科上我并没有接受过正规的教育或是训练。而且，我将会混合使用"中国的"和“东方的”这样的词汇。我承认，我这样的泛化仅仅是泛化。比如日本，受西方的影响很深 (反之亦然)，所以和我们在很多不论设计还是其他方面的喜好都相同。

这一切如何开始

当我在 2005 年夏天来到中国以后不久，我开始注意到一些中国文化与西方的复杂区别。当然，其中包括一些明显的区别比如语言、人的外貌、政府的执政理念等等。但是真正开始让我注意的是一些微妙的差别，比如幽默感、兴趣爱好以及艺术喜好等等。
我发现我完全没法找到一个在视觉上能够吸引我的中国的网站。出于好奇，我开始在四处打听并收集了一个网站列表，这些网站都是中国人经常访问而且认为设计良好或是很好用的。

如果我向西方的普通网民问这样的问题，我猜他们会告诉我一些并没有得到很好设计的网站 (Facebook、Amazon 之流)。所以我要在这里指出，我的确得到了一些不同的反馈，而且我也询问过中国的设计师。无论用哪种方式，我在中国得到的答案就是类似下面的一些网站：

• 百度 (中国的 Google)
• 阿里巴巴 (中国的 eBay)
• QQ (中国的 AIM 或者 Google Talk)
• 人人网 (中国的 Facebook)
• 新浪 (中国的 Yahoo)

除了 baidu.com (明显抄袭了 Google 的设计) 和 renren.com (显然抄袭了 Facebook 的设计)，中国网站的普遍风格都是数量大到可笑的字符 (比如文本) 以及对图像的误用或是完全没有图像的综合。我大惑不解。这怎么能够被接受？中国人怎么能消化这么大量的信息、并且过滤它们来决定哪些需要而哪些不需要？为何他们甚至都能容忍这是一个标准的实践？

比之更甚的是，在中国的网站中，存在多个同时的动画、弹出窗口、覆盖图层、滑动块等等都是很普遍的。他们周而复始地实践着这些被西方的设计师认为是糟糕的、并且应该不惜代价来避免的设计原则。我实实在在地感觉自己又回到了 1995 年。

我的反应

当然，作为一个高傲的西方人，我最初的反应是“哦，他们是一个发展中国家，他们根本还没赶上我们呢”。好吧，可能的确如此。对设计以及艺术的偏好会随着时间推移以及持续的曝光 ^[1] 而发展进化，我想这样的说法也是有道理的。一个例子是，我个人不会在我的房子里挂一个文艺复兴样式的油画；然而如果在那个年代，我几乎肯定会挂。作为一种文化，我们的喜好也在不断进化。可能这就是中国当前在设计进化历程中所处的位置。

然而另一种可能是 (依我个人的理论)，环境大过天性，中国的网页设计是由培养方式以及文化所影响，而非自然的艺术上的进化 ^[2]。当然，艺术的进化扎根于文化培养，但我的观点是，中国的网页设计偏好尽管在进化发展，但并不是在追赶西方的网页设计。事实上，它正在沿着自己的道路前进，主要由东方文化所引导，西方那些基本的信息结构概念在其中只是有着轻微的影响。

我为何提出这样的理论

在中国的时候，我的大多数时间花在了我教书的大学里。期间我注意到中国学生普遍的经验法则是记忆得到的信息，而不需要真正地理解它们。他们认为他们可以在剩下的人生中认真思考、掌握那些他们在学校里学到的东西，而当下却不需要进行分析。和我们西方对于大学经验的看法相当不同，不是么？

我认为，这种多数中国人的学习方式可能是影响他们如何浏览网站并与之交互来说是一个关键的因素。在西方，我们都期望一种启迪，一个让人“啊哈”的时刻，一种理解，甚至一种娱乐 (不论这是不是网站本身的意图)。东方人就不会那么做。他们先获得信息，之后才沉浸其中。我的理论的前提是，当中国人访问一个网站时，他们会进入一种获取信息的状态。这仅仅是把网站上的信息灌输到大脑中，而几乎没有什么互动、反馈或是理解了。

中国文化的另一方面随着时间变得明显但令人难受，就是他们极端地委婉。与西方人不同，中国人在别人开门见山的时候会很不舒服。中国人相互谈话的时候有点像在跳舞。对于西方人来说，这是很令人失望和困惑的，但对中国人来说这就是最可以接受的沟通方式。我认为这种行为很容易就能和他们的网站交互方式联系在一起。就这一点简单来说就是，所谓“行动召唤” ^[3] 根本无法和中国文化产生共鸣。

保持本色

现在，本着一个透明现实主义者 ^[4] 的想法，这里有几点概括了我的感受与理解：

• 这不意味着我发现了中国网页设计之美所在。对我来说，这仍然带有 1995 年西方设计的那种腐臭味。1995 年的设计实践在当时还是可以容忍的，而今却可以客观地说很糟，需要重新考虑。
• 我认为中国的网页设计不应该也不能赶上我们现在在西方看到的这些趋势。
• 我认为艺术喜好对于时间和文化来说并不是一种线性的发展过程，不同的文化也不必经过同样的发展阶段。中国在自己的进化道路上，西方也是。
• 我们能够并且应该体会到我们的文化是不同的，但我们不会也不该 (至少目前不) 认同网页设计的那些最佳实践。

跨文化的网页设计如果并非不可能，那也必然是极其困难的。除了语言的障碍，还存在着无法逾越的艺术喜好上的障碍。这并不是一件坏事。每个人都是不同的，对于文化也是如此。虽然我的确相信有跨文化的交互与沟通方式，但是事实上些东西只有在某一种文化中我们才会接触到。网页设计就是其中之一。

译者注

[1] 原文是 “prolonged exposure”，实在不知道如何翻译，求高人指点。
[2] 原文同样有 “prolonged exposure”。
[3] Call to Action Button，即“行动召唤按钮”，指的是界面上那些吸引用户点击的按钮，往往代表了这个页面的核心任务，比如 Firefox 主页 上的“免费下载”按钮。这种按钮在国外的网站中很常见。而对于中文网页，字体单调、信息密度大、页面拥挤、充斥各种广告动画，这些对于设计好的 Call to Action Button 来说都是很不利的。作者在这里应该就是表达这种按钮无法很好地在很多中国网站上体现价值。
[4] 原文是 “transparent realist”，仅直译的话含义不是很明白，在此求教。

首先说明一下，在这里讨论的均是 Windows XP 操作系统下的情况，其他操作系统下我还没有机会进行测试。

首先让我们来看看什么是 OpenType 字体：（via Wikipedia）

OpenType，是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为 .otf，类型代码是OTTO，现行标准为 OpenType 1.4。

下面是一些 OpenType 字体的例子：

• Myriad Pro

  

• Trajan Pro

  

• Adobe Garamond Pro

  

上面给出的截图都是在我 Windows 下的 Firefox 3.5.5 中渲染出的字型截图。下面给出一张同样环境下 TrueType 类型字体 Garamond 的渲染效果截图：

• Garamond

  

经过与 TrueType 字体进行比较后我们可以明显地发现 OpenType 字体在 Windows 下的渲染效果更加平滑美观：

事实上多数用户的系统中是不会安装"Myriad Pro"、"Trajan Pro"这种 OpenType 字体的，所以说在网页中使用这类字体只能算是一种“锦上添花”。可是，利用 CSS 中的 font-family 属性，我们是可以对网页中的字体进行优雅降级(Graceful Degradation)的，即使是少数用户可能享受到的效果，也值得去进行进一步设计。

但是在实际应用的时候，却不得不面对现实：应用 OpenType 字体的网页在各个浏览器下的表现并不一样，在中英文混排的时候甚至会让 Google Chrome 无法正常显示中文。我对 6 种字体在各个浏览器下进行了测试，让我们来看看测试的结果（在这些字体都已安装的情况下）：

Firefox 3.5

这个结果和我们预期的完全一致。在设为不包含中文字符的字体时，中文字体为系统默认的宋体。

IE 6 ~ IE 8

IE 6 ~ IE8 下的显示效果如出一辙，但是和我们预期的有一处不同：在将字体设定为包含中文字符的 OpenType 字体（如"Adobe 黑体"）时，在 IE 下中文字体仍然显示为宋体。而对于 TrueType 字体（如"微软雅黑"）则没有这种情况。

Google Chrome 4

在 Chrome 下，悲剧出现了，在不包含中文字符的 OpenType 字体下（如"Myriad Pro"、"Trajan Pro"），浏览器没有选择系统默认的中文字体，而是将所有中文字符显示为一个带叉的方框。而包含中文字符的情况下（如"Adobe 黑体"）则表现良好。同时，不包含中文字符的 TrueType 字体下（如 Garamond）则能正常地回退到系统默认的宋体。

Opera 10

Opera 10 下，效果和 Firefox 3.5 下一样，未发现问题。

Safari 4

Windows 下的 Safari 是不支持 OpenType 字体的，从结果来看，所有情况下都能回退到正确的字体（TrueType 字体如 Georgia、Arial）。

总结

看了上面在不同浏览器下的不同效果，我们可以得到如下结论：

1. 由于 Chrome 下设定不带中文字符的 OpenType 字体后无法正常显示中文（即使 font-family 中后续带有中文 TrueType 字体也不能解决问题），所以在中英文混排的情况下使用非中文的 OpenType 字体意味着放弃 Chrome 用户。
2. 在使用中文 OpenType 字体时，在 IE 下中文字体总是显示系统默认字体，而英文字体则采用该预设字体中的英文字型。同时 IE 一旦在 font-family 中匹配了一个字体就不会继续搜索下面的字体，所以就算后续字体设为中文 TrueType 字体也无济于事。也就是说，设置中文 OpenType 字体，在 IE 下起不到多大作用（除非你特别喜欢该中文字体的英文字型），而在非 IE 的浏览器内都能正常显示。
3. 在纯英文的情况下，可以自由使用 OpenType 字体，在各浏览器下都有不错的显示效果。

我个人很喜欢 "Myriad Pro" 这款字体，而且也看见过不少将其设为首选字体的网站，偶然发现 Chrome 下的严重问题，于是便在各个浏览器下进行了测试，希望能让大家知道什么时候能在网页中应用 OpenType 字体，以及用的时候应该注意些什么。毕竟，想锦上添花但最后弄巧成拙的话也是很令人郁闷的。

刚才在 twitter 上 @typekit 发布消息宣布 Typekit 开放注册，于是本来打算睡觉的我便决定速度一探究竟。

Typekit 公布也有一段时间了，但是看到网上被邀请测试的也都是老外，等到今日终于有机会亲自体验一番了。

传统的 Web 设计指定字体的方法都是在 CSS 中指定 font 或者 font-family 元素，客户端浏览器在本机上按 font-family 指定的字体列表依次检索，如果用户操作系统安装了其中某些字体，就采用定义在最左边的字体。这样带来的问题是，Web 设计师不能充分发挥自己的创意，展现自己的灵感，因为你需要的字体很有可能是用户操作系统中尚未安装的。他们只能使用被人们称为 Web 安全字体的各个操作系统中自带的一些字体。所以人们开始考虑，能不能把字体放在网上 (英文字体文件一般很小，不像中文字体动辄十几M，所以这里讨论的都不包括中文字体)，像在网页中引用图片一样引用它们，让客户浏览器访问网页的时候自动下载字体？

有兴趣的同学们也可以先看一下这篇文章：
Web fonts — where are we? via i love typography ( 中文版： 关于 Web 字体：现状与未来 )

是的，我们已经有了 sIFR 和 Cufón 这样的解决方案，但它们终究只是一种暂时的替代方案。而使用从 CSS2 时代就开始考虑的、并很有可能写进 CSS3 正式标准的 @font-face 来解决这一问题似乎是大势所趋。Typekit 可以工作在所有支持 @font-face 的浏览器上 ( Typekit 官方宣布的包括 Firefox 3.5+、Safari 3.4+ 以及 IE5+ )，以一种字体服务的方式引起了人们的关注。那就让我们来看一下，Typekit 究竟能做些什么吧！

在 http://typekit.com/ 上进行简单的免费版注册以后，Typekit 提示我们需要建立一个 Kit  。我们可以在每个 Kit 中定义一系列字体相关的信息，并在和每个 Kit 相绑定的若干个网站域名下使用 Typekit 的服务。

首先建立一个 Kit

Continue 以后，Typekit 会给出一段 JS 代码，我们需要把它们放在网站页面的<head>标签内。Continue 之后 Typekit 提示我们搞定了，可以开始挑选字体了。

挑选字体

我们可以看到，左边部分是一个字体列表，右边可以选择字体的分类、标签。我选择了添加了两种字体，分别是 Legitima 和 Report 。点击 Add 以后会出现一个 typekitEditor ，如下图。

typekitEditor

编辑器左侧可设置应用特定字体的 CSS 选择器，我将<h1>字体设为 Legitima ，把<p>字体设为了 Report 。下方还可以选择字体的多种粗细以及斜体的字体，并且可以为不支持 @font-face 的浏览器提供 fallbacks 。当然，以上设定的内容越多、选择的字体越多，最后生成的需要加载的 Kit 也越大，Typekit 会算出最终大小显示在页面底部。一切就绪后，按下 Publish ，Typekit 会提示需要等待一段时间进行部署。

让我们来看看最终结果吧：Demo
发现一个悲剧...在我的 Safari 4 下访问 Demo 页面会蓝屏...目前原因不明。敢于尝试的同学们请做好心理准备，保存好其它程序中尚未保存的内容。

Demo

Wow，在我使用的Firefox 3.5下效果非常棒，字体显示很完美。可访问性没有丝毫下降，所有文字都可以和普通文字一样进行选择、查找。

相比 sIFR 和 Cufón ，Typekit 的易用性显然要远远胜出，而且适用范围也比较大，也许它真的能带给 Web 设计一个新的 Font-as-a-Service 的时代。由于时间关系，Typekit 对 CSS 的支持、浏览器 fallbacks 之类的内容留待以后继续研究了。

今天无意中发现了一套很棒的图标，图标相当齐全不说，还附赠PSD源文件。共有2233个PNG格式的16x16图标。

• 预览所有图标
• 下载Fugue Icons

这个图标集基于Creative Commons Attribution 3.0许可证。使用的时候请加上版权信息与作者网站的链接。

李开复博士突然从谷歌离职，无疑是近期IT业界的一条重磅消息。他自己办的新公司的网站已经上线了，大家可以到此围观：Innovation Works。下面是网站首页截图。

当网站还未正式上线，我已经从cnBeta过去观摩过了，第一感觉一般，相当一般，不够大气。但是更令人感到遗憾的是，当时就有人在评论中一语道破：这不和Sony网站一样么。于是马上来到Sony USA，打开一看，是个Flash站，仔细一看，果然证实了那条评论。先看看下面这张Sony USA网站的截图。

由于Flash的动态效果，两个站的初步印象不太一样，Sony的感觉大气不少（这也可能是因为中英文的差异）。但仔细看了，就能发现，两个网站惊人地相似。把它们叠在一起，你一定能发现很多相同之处。

如果说这只是巧合的话，那猴子敲出莎士比亚全集也不远了。我不想用“抄袭”这种劲爆的标题，但事实已经摆在眼前了。今天又在cnBeta上看到一条消息“李开复创业为投资者省钱 网站招兼职开发仅花费7500元”，文中贴出了水木上的招聘贴：

朋友准备建设一个半公益半公司的网站，诚征一位同学帮忙开发。

网站要求：
1.主要都是静态页面，公司类的网站结构(主页/产品/新闻/理念…)
2.需要设计一个logo，并对美工的要求较高
3.只有一个动态页面：简历提交页面

联系方式：
请将过去曾经做过的网站的案例和本人的联系方式邮件至：wangye216@gmail.com

报酬支付：
我们会根据以前做的案例来选择，然后希望可以面谈具体的价格和要求，不压榨也不当冤大头:)

据说网站开发+1年维护费用一共7500，不算多，也不算少的了。从要求来看，主要需求是页面美观。

结果花了7500，得了个Sony的设计，大家说，这是赚了，还是赔了？

这里现在用的这个主题，是我在这个站点还没建起来的时候做的。当时还不知道起什么名字好，后来想到因为我们的Blog还未诞生，干脆就叫Unborn吧。以前从来没尝试过黑色，这次就来个酷酷的黑色吧。

这个主题为可变宽度，我没什么经验，也就没有做widget支持，以后可能会加上。我个人很喜欢mg12的iNove这个主题的评论样式，于是这个主题也就借鉴了这个模式，也使用了其中@reply的代码。

这里还有一个很重要问题，关于是否兼容IE6。人们最近一直提到一个问题：到底是支持IE6比较牛呢，还是敢于无视IE6比较牛呢？事实上，不是没能力兼容IE6，而是一再地向IE6妥协只能让IE6存活更长的时间。只有让IE6用户认为，继续使用IE6将影响他们的上网体验，他们才会战胜自己的惰性以及习惯去体验事实上更棒的浏览器。所以我设计的时候我是想完全不考虑IE6兼容的，于是就给IE6用户显示了一个提示升级的窗口，Blog内容则对IE6用户完全屏蔽。但是IE6用户实在是太多，朋友中大半还是IE6的用户，无奈在IE6提示窗口给出了一个链接供其查看Blog内容。

目前只是对IE6用户隐藏了样式表而已，所以显示效果应该是不太理想的，等过几天再给IE6用户写个简单的样式表吧。现在已经对IE6样式已经完成，去掉了背景去掉了圆角，固定了宽度。用户是懒惰的，习惯的力量是巨大的，仅此而已。在这里写这些，无非也就是为了表明，并不是没能力兼容IE6，而是希望IE6尽快被淘汰。并不是说IE6是垃圾，它曾经是一款出色的浏览器，但这已经是多年前的事了。

另外，这个主题使用了jQuery——一个快速、简洁的JavaScript库，在这里也对jQuery Team表示感谢。