起因现场：http://www.flickr.com/photos/fenng/3409309938/
起因:白鸦说fenng找的blog模版土鳖，冯大辉截图反击说UCDchina才土鳖呢，

Fenng的截图：《一个宽屏用户的鼠标长途奔袭..》


白鸦 說︰
哈哈哈。 说你土鳖吧，你还不服。
这个问题是这样的：
1、在1024下，中间没有空档。主要用户群的分辨率是1024，你是非主流用户。
2、左边如果不采用固定宽度，在宽屏下会被严重拉宽。 阅读区域太宽，对阅读者的眼睛是不健康的。
你可以看看google、百度的搜索结果，以及google reader、gmail，内容区域都是固定宽度的。
我们的宽度综合了1024下的效果，和人眼最合适宽度的数据，作了稍微比google宽一点的 调整。
3、左边是主要的内容显示区域，用户要阅读的地方。 右边是辅助内容，不重要。
一个页面能只有一个重要的区域。 所有就让辅助内容在最右边呆着，免得干扰左边内容。
改天，给你上上课。你太土了，以后再提这种问题会被人鄙视的。我都不好意思了
下周让你在咱们的眼动议下看看你的三栏blog，读者是多么的注意力不集中 …
發表於 10小時前。 ( 永久連結 )
一 ，我不喜欢掺和讨论，不过手头有一些客户的数据，就说两句。
1． 1024是主流设计屏宽，但是1024及>1024分辨率的用户并不是主流用户。数据截图如下。

数据日期区段:2009年3月4日~2009年4月3日。

结论: 屏宽分辨率等于或小于1024的用户未超过平均数，已经是非主流啦。

NO 1： NO 2 NO 3 NO 4 NO 5

二 “左边如果不采用固定宽度，在宽屏下会被严重拉宽。 阅读区域太宽，对阅读者的眼睛是不健康的。”

截图是白鸦个人blog：http://uicom.net/blog/ 在1280屏宽分辨率，ff浏览器下的效果。
页面结构为宽度自适应设计，阅读区域宽达850px，每行约70个汉字。

“阅读区域太宽，对阅读者的眼睛是不健康的。”这句话非常正确的。

850px宽的文本阅读区，会让用户变成摇头电扇不说，阅读时注意力难以集中，耐心下降，容易跳行，行首行尾无法正常衔接，阅读连续感被破坏。
屏幕阅读本来就比纸本阅读的速度慢，用户对内容的耐受力也会下降，失败的阅读区设计会赶走很多用户。

到底阅读区域的宽度为多少是合适的?

请看下面这篇翻译的论文《CAI课件里电子文本的设计原则》作者：Liu Zhanrong, CCRTVU
“对于设计电子文本，本文主要提到下列看法和建议：
- 理解电子文本和书面文本没有本质上的区别；
- 屏幕上的阅读速度比在纸张上阅读同样的文字要慢20~30%；
- 文字字体和布局本身诸多因素（如行距、字体、字号大小等）的变化会明显影响用户的阅读速度和对阅读的态度；
- 小号字体比大号字体更容易阅读；
- 文字行应该较短，在8~10个英语单词之间；
- 文字应该采用句法移行方式；
- 文字应该以语意（意群）为单位来显示（如一次一个概念）；
- 文字特征如黑体、斜体、字号等如果适当运用可以起到突出显示、吸引注意力的作用；
- 文字应该与左边距对齐；
- 文字显示应该大小写体综合使用；
- 应该避免使用跳跃式垂直滚动的方式；
- 平稳式垂直滚动可以用来浏览或查阅窗口里的内容，而不宜用作主要显示方式；
- 使用垂直滚动方式时，应该采用高于用户喜欢的20%的滚动速度，否则静态显示更有助于用户理解所显示的内容；
- 水平滚动应该采用20个字符的窗口，每次向前滚动5个字符，应该由用户来控制滚动速度；
- 教学辅导性文字材料里的交叉参考有助于用户浏览获得除主材料之外的更多辅助材料；
- 用户在前三次接触交叉参考资料时的作用不很明显；
- 计算机屏幕上显示文字材料时的位置是很有讲究的。”

• 英文单词的平均宽度为6~8，8~10个英文单词的字符数为60~80，加上空格，折算为汉字，文字行宽度在30~40个汉字为合适。
• 传统纸本阅读，（请随便拿起几本本最常见的32开的中文书，数一下每行的汉字数，）在30~35之间。
• 30~40个字符，以字号为较便于阅读的14px来计算，加上浏览器默认字间距，宽度为450px~630px之间最为合适。
• 结论：阅读区域的宽度为450~630px，每行30~40个汉字是比较合适的。其它相关（如行距，屏高，提升阅读速度，文字阅读的水平与垂直滚动 方式，有兴趣的同学可以在上面的论文中找到一些参考理论。）

三
你可以看看google、百度的搜索结果，以及google reader、gmail，内容区域都是固定宽度的。
我们的宽度综合了1024下的效果，和人眼最合适宽度的数据，作了稍微比google宽一点的 调整。
左边是主要的内容显示区域，用户要阅读的地方。 右边是辅助内容，不重要。
一个页面能只有一个重要的区域。 所有就让辅助内容在最右边呆着，免得干扰左边内容。
先看下表

1 关于google的3个应用，内容区域宽度都是固定的说法是不客观的。

2 不同的产品具有不同的应用类特点。
如何布局取决于每个区块的不同属性、功能性、主次性，产品所有者的资源与优势，以及该应用的战略，时效等要素。
将其它成功的应用随便拿来佐证比较的做法是不科学的。

3 fenng所指出的问题症结所在 是指“页面布局中间的大块留白”。而不是“单个内容/功能区宽度是否固定的问题”。

4 “布局是否居中，整体宽度是否固定” 和 “某栏功能区宽度是否固定” 是两个论题。

5 google的上述应用中，只有google 搜索结果页面存在布局中间留白的问题。

6 从视觉布局特点上：

• Google右栏的信息数量、区域面积 与左栏比较 差异很大，右栏在视觉上的比重很轻。
• UCD china是一个三栏网站，从信息数量和区域面积上（信息价值这个我就不好判定了），左边和右边是份量相当的。 和google 左重右轻的特点 没有可比性。
• 所以UCDchina 这样的留白处理会在视觉上造成不适，而google不会。

7 从功能布局特点上：

• 搜索结果页面要求便于集中快速查询，所有功能和内容都集中在单栏就可以完成。
  右栏的广告 在功能性，使用价值 与左栏都没有可比性。
• 而UCDchina 左侧两栏是主要信息区。右栏是辅助索引和操作区，其中包含了：全站检索，内容发布入口，登录，订阅这4个网站中最重要的操作区域。
• 所以UCDchina 这样的留白处理会严重阻断用户操作的连续和流畅性，而google没有这个问题。

8 体现页面中视觉重心，引导用户视觉轨迹的方法有上百种。
强迫用户去看什么， 把你想给用户展现的和用户需要用到的区域之间划上一条银河显然不是个好主意。

用户体验正成为一块用来随时砸向别人的理论砖头。但同时，大部分人对这个概念摸不着头脑。更多人把用户体验与可用性、UCD混为一谈。用户体验在国外的定义指的是一个用户使用一个产品过程中时的全部体验，包括他们的印象和感觉，能够忍受的问题，疑惑和BUG的程度。用户体验的概念的提出实际是体现在开发观念和设计立场上。可用性只是设计良好用户体验中的一个原则，并且不是绝对优先原则。而UCD（以用户为中心）同样只是立场之一，而且也不是绝对立场。

当可用性与视觉感官、运行效率、实现成本冲突时，怎样选择？
当UCD与商业需求、设计约束、技术约束冲突时、怎样选择？

用户具有个体差异，使用体验又是主观心理过程。每一个产品的目标用户可能多样化、群体界线不明确，其共性难以把握。这一切让用户体验的成为一个没有“绝对”没有所谓对错的世界。

像腾讯的mini新闻推荐弹出框那样，点击推荐位上某个图片，进入的不是新闻的内容页面，而是有着更多花花绿绿图片的二级频道页。这样做好不好，从可用性角度肯定是不好的。简直等同欺骗用户。但从商业利益角度是好的，可以得到赢得更多PV。

这之间怎么平衡？把引导用户进来的目标内容放在频道页的第一屏容易找到的位置，同时使用_blank弹出。这样用户不会浪费更多时间就能很快找到目标内容，也愿意回头顺便看看其它内容。

用户体验的真正价值所在不光是让用户用的舒服，更重要的是一种引导。当用户在浏览某一篇内容，还有其它哪些内容值得向用户推荐；当用户使用某一功能时，还会有兴趣使用其它哪些功能。在有社区性质的网站中，如何让用户在使用过程中结识到更多他可能希望认识的人。

引导的用途除了让用户在网站多点击多停留，还有让陌生用户快速对网站形成正确认识，帮助用户找到有效的内容和功能，帮助用户顺利完成任务流程，激发用户活跃度等。。。

深度挖掘这些关联元素，引导用户更多得使用你的产品，（在web项目中，用户越多的使用就代表着更多的商业价值）比单纯把产品做得“好看”“好用”要难得多。这种关联性往往在底层逻辑设计和产品结构设计阶段就要考虑到。关联的逻辑和算法如何保证快速、高效和安全，关联的结果是否真正符合用户习惯和期望的内容。关联的表现方式和频率如何在无形中完成引导，而不影响用户的目标与使用，更不能让用户觉得厌烦。

当然不是说推荐像腾讯那么干。腾讯那样并不是一种高明的引导手法，和标题党一样，带有中国资讯站惯用的流氓气味。

实现引导的手法有很多种：
1、 通过关联性或推荐性内容引导
2、 流程引导
3、 用户行为过程或结果中产生引导
4、 提示页面中产生引导
5、 视觉吸引产生引导
6、 细节处理中完成引导
……

______________________________________________

1、通过关联性或推荐性内容引导
这是最传统也最普遍的做法。内容站时期是使用编辑添加的关键字或者系统分词来关联到“相关阅读”

用户贡献内容时期关键字换成了TAG，但很少有站点用好过。TAG作为一种单层的信息分类分类方法，由用户来添加和收藏。对其用户行为的记录是产生推荐性内容的数据分析来源。有效的个性化的推荐，配上
“你有可能会感兴趣的**”（内容）
“和你志趣相投的**”（用户）
“我们认为这个适合你”（商品）
“你可以试试**”（功能）
这l类有诱惑性的语言，用以刺激用户产生连续性点击行为。

TAG的优势在于灵活，弱点也在于灵活。
网状的信息组织结构容易松散(难以查找难以分类难以建立层次)，
用户的添加随意（直接把标题复制进tag，再打两个空格，不少人干过。。。），
难以用规范约束（照片和photo同时存在），
热门tag的关联有效性差（美女、互联网这种标签有什么用）。

另一种定义上的推荐是通过投票或某种排序将有价值信息过滤出来（Digi），这个适用于有针对性内容或用户群的网站/频道。

这种传统的做法虽然普遍，但是要用得好并不容易，需要在全站的信息架构、内容需求关系上有全局把握能力。

2 、流程引导
这种引导方法多出现在功能性网站中。比如在首页或者登录页、欢迎页这种新用户最常进入网站的地方。

常见的手法有用鲜明的图示给出一个流程或任务示意：（如图）

或者 “从这里开始” “新手试用” “随便看看”这类相关按钮或链接

————————————————————————————————————————

3、用户行为过程或结果中产生引导
在用户使用网站的行为过程中给予相关流程的提示或相关操作的链接。当用户的行为产生结果时，根据结果给予用户相关的建议或判断。

比如右图当用户注册登录完毕，在应该显示好友列表的地方，新用户的好友数量是0。如果就显示空白列表，或者一个无关痛痒的默认好友，（有多少人喜欢那个默认好友呢）岂不是大大的浪费浪费。引导新用户交朋友或者进行邀请：（如图）
当用户没有完善个人资料，未填写居住地时，在显示页面中不要出现空白或者无，刺激用户去完善填写吧：（如图）
在用户列表页、检索结果页这类有可能得不到有效结果的地方引导到相关功能，也是对新功能进行推广好办法：（如图）
在需要用户贡献内容的地方，如果并无内容，也不要省懒显示空白，多加一个判断，可以引导用户进行内容补充。这类的应用完全可以举一反三：（如图）

————————————————————————————————————————

4、 提示页面中产生引导

不少产品设计人员总是在首页频道页等重要一级页面寸土必争，精打细算，却在许多看起来不太重要的流程页面大肆浪费。

这些页面包括登录页、退出页、提交返回页、提示错误页、帮助页、检索无结果页。。。等等等等。

想想你们是不是草草就把这些页面丢给技术人员去处理，“随便打几个字就行了”“按常规做法做吧”！ 别忘了，这些在用户最容易觉得沮丧、无助、迷惑的时候，给予正确的引导、帮助和建议。一个精心规划的提示页面往往可以影响用户选择关闭窗口还是发生一串连续点击。

“按照你设置的检索条件在**网站没有查找到任何结果，何不调整搜索条件试试我们的高级检索！ 在页面下方再次检索”

“你的上传成功了，点击此处去我的相册。或者看看别人的最新更新的相册?”

“你的在线聊天请求被驳回了，没关系，点击此处来看看其它在线MM。现在有12045个有缘人正在等候你的邀请。”

————————————————————————————————————————

5、 视觉吸引产生引导
视觉吸引产生的引导有三种做法，一种是根据页面布局在用户的视觉轨迹中发生引导作用，一种是通过页面结构影响用户的视觉重心完成引导行为；一种是通过鲜明的颜色、漂亮的样式、动画等吸引用户的注意力。

在导航中想着重推出的频道：（如图）
出现在vip用户展示列表中的大按钮，点下去进入付费业务的介绍：（如图）

_____________________________________________

6、 细节处理中完成引导

细节的引导处理就要看项目的具体需求了，精心设计产品中的各个角落，每一个细节的布局都会在无形中完善用户的任务心理模型，处处埋下“商机”，并为网站增加有价值的点击。

引导用户使用诚信级别验证的功能：（如图）
老奸巨滑的阿里巴巴永远为竞价排名商户留出的“第一页：

好了，举了那么多例子，相信大家可以在实际开发工作中举一反三。但引导用户这件事不光是停留在几个链接几个按钮的处理上的，最重要的引导还是体现在产品结构的设计中。没有对产品和商业需求的良好把握，没有整站结构打好基础，几个链接是解决不了问题的。

而这就需要产品设计师们去真正用心思考产品，理解你的产品的优势、资源、竞争环境。和战略部门多沟通吧。

————————————————————————————————————————

最后回到开题的UCD立场：

UCD并不等同于讨好用户。用户体验不能做得被动。产品诞生的目的永远为了满足是商业需求。用户是服务对象，值得尊重但不是被牵着鼻子走。看见过哪个服务业公司是被客服部门牵着走么？

遇到类似UCD和商业需求有冲突的时候，解决方法是要视项目和产品具体情况的不同而定的，可以取舍，可以曲线救国。综合考虑，在产品、内容、商业利益和开发成本之间把握平衡。但更多的时候我们可以在最初的产品设计中考虑避免冲突，而对用户的引导就是一直比较艺术和隐含的兼顾之策。

做产品设计时产生的个人思考：两个层面的用户体验。
—————————————————————————————————————

第一个层面是给用户喂食好消化的东西。把信息组织好，让用户能清楚在这个产品平台上能得到什么，然后能快速取得有效信息。

*庞杂的内容，做好分类做好层次做好关联，

*复杂的功能，逐步消解在步骤中：任务入口有引导，过程中有指向和步骤分解，出口得到明确的结果反馈。用户在使用中清楚将来的完成量和所在点，能随时顺利返回和退出。

这个层面怎样做好，各种细节怎样处理，网上已经探讨得够多了。做到个层面，可以说用户体验是及格的。你的产品设计没有浪费你的内容价值。

————————————————————————————————————

第二个层面是让用户体会到进食乐趣。给用户主动的甚至是挑战性的体验。让用户能快速习惯而又不会觉得索然无味，容易学习而保留新奇和乐趣。

1、让某些普通功能使用个性而另类的形式表现：

当初豆瓣刚推出的时候，大家为什么会说“啊！”。

因为之前没有人会用 “有49人想读,手里有一本闲着? 点这儿转让”这种亲切的语调对用户说话。
之前网站都会这么说： “ 转让 需要的用户（49）” 。
换一种表现形式，也改变了产品的形象和姿态，用户开始认为豆瓣是属于“我们的”，在用户心里，豆瓣的产品个性正在形成，而这正是形成品牌的第一步。

当然这种即有个性又合理的表现形式并不容易拿捏，有许多过犹不及的失败之作，比如给某个频道或功能起一些表意性差莫名其妙的名称。

除了语言风格外，功能中的按钮、LOGO、表情、装饰ICON、小动画，这些都是赋予产品以个性的方法。

（豆瓣的这一变化给国内交互性网站带来两个各走极端的后果：1，网站开发中开始重视产品文案，越来越多的网站产品部开始配备专业的用户体验文案，撰写相关提示、帮助、协议等。而不再把这个重要的部分交给编辑或者技术人员去凑合。2 出来了越来越多叨叨絮絮的网站，其啰哩叭嗦的程度令人发指，自己看把。 ）

2、将部分的功能使用过程中“曲径通幽”地展示给用户；

这个最好举的例子就是google。更多可以看看白鸦的这篇文章，《只把20%拿出来》：如果一个产品有10个功能，那么只需要默认展现给用户2个。另外的8个，是用户需要的时候自己发现“我能不能这么做呢？”…… “咦！ 还真有这个功能！”?

的确google是低调强大的最好例子。用户能看见的只是简洁到不能再简洁的产品，背后隐藏的是雄厚的技术开发力量。这样的倒漏斗形引导流程，大大拓展了用户的适应性，无论是傻瓜用户还是专家用户都能在使用过程中得到需求的满足。所谓天衣无缝，最好的设计是让你意识不到设计的存在。

当然你不会像google那么强大，所有功能在首页上都放不下。但也不要把你拥有的所有东西都摊在第一眼能让用户看见的地方。多信息等于无信息，一个臃肿庞大的首页等于无首页。成功的引导是什么样的？是比基尼那样的：展现诱惑，隐藏重点。

3、使用有探索快感的交互；

苹果ipod推出的时候，它的触摸控制面板给所有人带来了不同于传统随身试听产品的新奇体验，划圈调节音量带来DJ打碟的控制快感。后来模仿风潮不断。

RIA（Rich Internet Applications）：AJAX和Flex的风行事实上给优秀户交互过程的设计带来了很好的条件。比较老的例子有，可由用户自由拖动组合的blog版块，多图幻灯片播放器等……

还有这个网站：http://www.bestuff.com，

这个网站首页的一堆格子，分别是随机生产的产品推荐。说实话，从可用性角度考虑，这一堆格子的表意性并不好，咋一看用户根本不知道哪些对自己是有用的有价值的。但鼠标在格子上划过时，不断变换的漂亮弹出提示框；每次刷新，格子的组合都会随机变化。这些让用户有了探险般的心态。当然，这也和这个网站年轻、爱玩的受众群有关。

这些陌生、新奇需要探索精神的交互行为，用好了能带给用户良性的印象深刻的刺激。

4、使用触发多媒体；

Yahoo的LOGO触发音效，给人留下大气的品牌印象。（好像淘宝也做了一个，不过我没触发出来。。。。）

还有一个我印象很深，不记得是什么视频网站了，一段视频播放到最后，不是会出现几个推荐视频链接么。那个视频网站的视频播放到最后，出现9个按9宫格排列的推荐链接，当我把鼠标移上去的时候，出现了一个音阶，移到另一个的时候，出现了另一个音阶，然后我就开始白痴得玩起来。。。。用触发链接演奏了一首音乐。。。。

我只是举一些例子，可以触发的除了音效，比较容易实现的形式还有动画。载入动画这种还是可以做做文章的。

这个也可以看看http://miaotiao.familk.com/ 不断向你涌来是这个小组中的成员昵称。

这种用户体验的挖掘同样也是要注意拿捏，类似触发完全要保持在不影响用户使用效率的前提下，而且记住，用户是很容易玩腻的。所以不要放到太容易触发到的地方，让他们慢慢耍去吧。

5、留给用户想象和学习的空间；

Wii的玩法有千万种。用户可以不断学习。当用户发现新的玩法，商家发展为新的游戏。这个产品是在真正做到和用户一起设计。

国内设计师普通有些低估用户的智商，其实看看用户们对SinaBlog模版杀气腾腾的改造就知道了，我妈妈都知道给blog装播放器插件加flash钟表，不要害怕让用户学习。像在论坛那种地方，UBB CODE都能给搞出无数花样。提供自定义空间给用户去学习和再创造，你会发现他们比你更有想象力。

做到第二个层面，可以说用户体验是优秀的。你的产品设计在提升你的品牌价值。

当然在给于用户各种挑战性体验的时候，要随时注意尺度和合理性。你的产品不是竞技游戏，复杂的布局、花哨的动作、随意的操作会把对用户的刺激都会变成对用户的折磨。

形成用户粘度的还是要靠有价值的内容和有效的功能。刺激是给于年轻的有冒险精神的用户。对于不适用户，还是要尽快让他们建立习惯的模式，高效地使用产品。

下面全文拷贝自我的一则回帖，没冲着谁，表现一下对不懂装懂老拿概念当粉擦者的BS.

一UE遮百丑啦  现在大家动辄都说用户体验、可用性啦，每个人都显得求UE若渴，

可是上千个站里有几个做过焦点小组访问，做过可用性测试，有几个在改版前做过任务模型验证。

一个在改版完成前从未向用户提供过初步分析和结论以征求用户反应的网站就别好意思叫嚷重视用户体验。

  用户体验是贯彻在流程之间，内容之下，细节之中的。

最简单的事情1：请专业人士设计用户需求问卷并科学分发再统计

最简单的事情2：付费请几个分层次的用户来试用你的改版草图，由产品经理、UE顾问、界面和功能开发人员观察用户是否能顺利完成任务，达到需求。。。。

用户体验很重要，可是实际上为UE做出的行动太少了，就像当初2.0一样，大家纷纷当一个光鲜的概念往脸上贴，2.0臭了，大家又都一把揭下来，贴上别的。

更何况UE只是重视用户的一部分而已。用户也不是实验品，理解用户的最好方法是把他们当成合作对象一样对待，尽管他们是和开发运营团队不同的一种专家，用户了解他们的任务角色、经验、管理结构、喜好憎恶和动机。可能他们不懂得程序和UI，甚至从未听说过UE，那正好，那是其它团队成员的任务。

套用GUI中的一句名言：软件既不要为用户设计，也不要让他们设计，而应当与他们一起设计。