采葛
想写就写，写得舒畅，写得舒心……
2007年12月20日 星期四
2007年12月18日 星期二
2007年8月15日 星期三
开始梳理一大把网站的结构
这件事放在心里已经一年多的时间了,一直都没有人来处理.现在自己负责UE.得把这个事担当起来.
虽然工作困难很多,而且有很多陌生的地方,但我一直认为做这个的必要性,而且这对于产品的扩展,延伸都是非常有用的.
2007年4月12日 星期四
在可视界面中使用文本和颜色
文本和颜色是用户界面视觉语言不可或缺的两大元素。
人处理可视化信息时比文本信息更容易。
识别文字和阅读不同，阅读时我们是扫描。
公理：可视化地显示大致内容，文本化地显示具体对象
文本的指导原则：
- 确保文本与背景对比明显，不要使用冲突的颜色，以免影响可读性
- 选择合适的字形和字号，英文字最好是用serif字体小于10磅的字很难读，中文用宋体，不小于12PT
- 文本组成段落后便于理解，用最少量的文字清楚地表达意思。
恰当的使用颜色，能为可视界面设计的以下目标服务：
- 颜色吸引注意力
- 颜色提升导航和浏览速度
- 颜色显示关系
- 颜色太多
- 互补色的应用，会造成假象，难于聚焦和辨認。这是颜色立体影像的效果，频谱两端的颜色靠近时，会“振荡”蓝色背景下的红色文本，或者反过来，都会给阅读造成麻烦
- 过分饱和
- 对比度不够
- 对色彩缺陷注意不够。大约10%的男性患某种程度的色盲。因此，用红色和绿色表达重要信息时要特别小心。所用的颜色应该在饱和度和亮度上有所变化以彼此区分。
2007年3月26日 星期一
什么样的界面算是好界面－7个案例
案例1：Feedburner的注册页面
你看出哪一点好来了么？－－按钮。是的。两个按钮，一大一小。很容易注意到大的这个，略过小的那个，快速完成点击注册。理论上，我可以用Whitney的可用性(usability)的5e模型来解释它的优点就是：高的效率（efficient）。
很少看到把同级别的两个按钮做成高度不一样的，一般都是一个css样式控制所有按钮的高度。于是我暗自猜度了一下这位UI设计师这样做的意图。我想 他/她不会是因为懂得了可用性的理论，知道追求用户操作的效率，于是就理所当然的在这个细节上动了下手脚。可能原因是这样：他/她发现那个取消注册的按钮 （五个单词）按正常的css样式，比激活注册的按钮（两个单词）还要宽，更抢眼。而这里UI的目标是鼓励用户完成注册，所以要尽量的排除正常注册流程的干 扰。于是，他/她有了这个主意。。
案例2：Belinker的注册页面
优点是什么？－－处于哪个步骤交代很清晰。Belinker的设计者当然知道交代当前位置是注册页面。只是，她更清晰的交代了注册有几个步骤，而当前正处于哪一步。理论上，我解释它符合可用性5e当中的容易学习性(Easy to learn)。
为了鼓励用户完成注册，设计师用这个细节的设计来解除用户的一个担忧－－无数个麻烦的步骤，漫长的注册过程。Belinker在暗示，看，很容易的，注册一下只需要两步！
案例3：维基百科的外部链接
你能看出这些蓝色的链接里面哪个是网站内部链接，而哪个是外部链接么？是的，那个尾巴上有个小箭头图标（Icon）的那个！你一下子就找到了：） 这就是图标的作用之一－－视觉锚。
那么，为什么要用这个图标了？你的点击链接的经验应该可以回答这个问题。这个网站还有很多内容你想阅读，不想在本页跳转到其他网站去。小图标告诉你，这是外部的链接， 你还想看的话，就很清楚的知道自己要选择打开新窗口的方式了。
如果没有这个图标了？那你可以点了之后页面一下变白了，然后很紧急的赶紧去点停止按钮或者后退按钮。这个设计细节的理论依据是什么？：）－－预防错误。
案例4：还是关于图标的
这个有点重复上面的那个，但是因为很多人都会碰到这个问题，我觉得有必要提出来。为什么要在pdf文档，Excel文档前加上图标呢？如果用户没有 注意到这个是个文档下载链接，直接就点击了，那么我们的浏览器可能要经历一次磨难，半天没有响应，后来你终于发现，原来它在打开一个很大的pdf文档。你 心里有些懊恼，早知道是pdf，你就点右键另存为了。。
这不是你的错，是网页的问题，它应该更明确清晰的告诉你的。是的，我知道状态栏上会显示链接的地址，你可以从那知道它是*.pdf,但是每天网页上 都有那么多链接，每次都为了避免点了pdf或office的文档而需要你把光标拖到链接上，检查一下状态栏？这些pdf和office文档就不能主动一点 站出来么？
案例5：必要的文字注释
有时候我们为了追求界面的一致性，而愚蠢的执行一致性。于是按钮都一个高度，于是工具栏的图标都清一色的是光溜溜的图标。但是你的用户能清晰的一眼 识别出每个图标的意思么？是的，像主页，停止，刷新，还有邮件，用户资料之类的获得通用的图形，不必要加文字说明了。但是你画了个五角星扔在上面，天晓得 代表什么？我想起了我们的国旗，你想起了海边的贝壳。。你这么独特的图形，那就给出文字解释，不要增加用户的操作负荷，总指望他们去拖动鼠标，然后看慢慢 浮出来的提示文字。还有哦，那个放大镜是什么意思？放大观看？还是搜索？不加文字你能肯定么？
案例6：SongTaste的注册页面
又是注册：） 各有优点。看看SongTaste的优点是什么？－－左边。那一句话：我们也觉得注册、登录麻烦透了。嘿～现在你有什么感觉？多亲切的一句话，一下子就把你跟网站后面的那群人距离拉近了，你对注册的愤慨消失了，你甚至开始同情他们了：那我就给你们点面子吧。
文字语言的风格，对用户的影响有多大？界面友好，品牌塑造等等，略去一万字。
这里要说这个界面的另一个优点－－还是左边。图片。这个图片放了干吗？会增加页面下载速度的！效率，你不是说效率么？：）注意，所有的因素都是互相 影响的，要求得平衡。图片几百K放这里当然不合适，但是十几K还是可以接受的。那么为什么一定要放？看看图片里面两个非常有性格的头像，一个可爱，一个 酷。女孩男孩们会立刻有一种表现欲望，等我注册了，要弄一张比他们更可爱更酷的帅帅小头像，哼哼～ 现在，你开始充满兴趣的进行注册啦～
案例7：最常见的windows视窗
使用过很多浏览器，在展示页面正在下载时，Firefox上有一个小点画圈的动画，腾讯TT好像用了一个进度条，Mozilla也有一个小动画。但 是印象最深的还是IE的视窗。状态栏上的确有显示，但是，我盯着白屏幕很无聊啊。Firefox的小圈也好，还是进度条也好，不好，只会让我想起机械科学 的算法语言。还是IE这个颜色丰富的小视窗动画最好。为什么呢？看到它，像风中摆动的旗帜，像湖水一波一波，刹那间，有许多美好的印象被或深或浅的活跃起 来。你在用一个产品的时候，它能让你想起美好的东西，是不是一种幸福呢？
当然，我们可以说这个动画的应用在可用性的理论上，叫做有效(Effective)。:P
现在总结一下，什么样的界面是好的界面？当然，可用性的5e要去遵循：）。但是设计的优点往往就体现在那些细节里面。只要设计师懂得两点：
- 第一，记得设计的初衷是为了解决问题。不要理所当然的觉得别人的网站都是这么设计的，我就照搬过来就行。每个细节都可能存在问题，去发现它们吧，那些用户觉得困难的，不理解的，不必要的或者是有所忧虑和顾忌的，想办法化解他们。
- 第二，平衡。这里说的是两种平衡：
- 仅仅站在用户的角度是不够的。你是用户和公司中间的桥梁。一个例子：公司说要赚钱，多多上广告！用户说广告烦，我不要看！那你要做的是什么？当然是平衡。广告要上，而你的工作是去了解和研究用户如何才能忍受广告，接受广告，可以忍受多少：）
- 关 于用户体验，可用性的理论，不要断章取义。简洁是好，于是所有的网站都要千篇一律么？你要展示什么不同于竞争对手的品牌，决定了你的界面是时尚的，前卫 的，严谨的或者可爱的。Easy to learn是好，于是，到处都是注释和提示帮助信息么？高级用户会无法忍受的。注意各个因素之间的平衡，不要走极端。
昨天uxstudy做了一些用户调查，感谢大郎，石涛，斗猪，王川林等好同志的建议，今天编写了一些简单的案例给大家：）
2007年3月15日 星期四
如何获取用户的需求？
土豆泥炖土豆在上一篇的留言中提到：“永远不要以为，自己的需求，就是用户的需求。”
对此结论深表同意。因此，想接着这个结论继续讨论下去，如何获取用户的需求？
这个问题首先必须先明确对象：使用某个产品的普通用户。
因此，某些知名的blog评论家不在此范围内；喜欢吃螃蟹的新产品试用者不在此范围内；以研究课题的心态来使用产品的人不在此范围内……
● 数据分析
- 通过一些客观数据，例如，流量、检索量等，能很好的说明问题；
- 数据分析依赖人员，同样的数据被不同的人解读结果完全不同；
- 以数据说话，是产品管理人员的基本素质之一；
- 数据分析的结论，往往是最可信、最可靠的结论。
● 邀请用户进行访谈，观察或者让用户说出自己的需求与偏好。
- 这样的方法能够与用户面对面的交流，也能够在旁边静静地观察用户的使用习惯；
- 但是，由于用户是明确知道了此次访谈的目的，因此，用户在思考问题和使用方面会受到心里影响的偏差，导致结果的不可信；
- 其次，有很多产品，无法准确的获取用户的信息，导致，被邀请的用户，往往不是产品的核心用户，或者说，用户并不是经常使用这个产品；
- 不经意之间与朋友之间的聊天会比邀请用户来访谈效果好很多。
● 用户反馈
- 在网站上提供让明显的让用户给网站提意见的链接或者邮箱地址；
- 认真对待每一个用户的反馈，因为大部分情况来说，有时间填写用户反馈的用户（也就是会抱怨的用户），今后往往可能成为忠诚的用户；
- 从用户反馈中发现产品的不足、发现用户的需求；
- 不是每一个用户反馈的需求都需要满足，根据反馈的程度制定优先级。
● 搜索
- 这是产品管理人员一种主动收集信息的方式，通过各种搜索引擎，如博客搜索 、网页搜索 、博客空间 等渠道获得用户的评论；
- 要能够自主的区分何为“普通用户”的反馈、何为“评测人员”的试用报告；
- 搜索出来的原始内容相对于数据分析来说，更加依赖于人的分析与理解；
- 这种方法依赖于长期的观察与收集，短期的内容没有足够的说服力。
2007年3月13日 星期二
如何让网民爱上你的网站
设计师不等于美工
设计无所不在，但大多数企业不知道如何使用它。现代设计进入中国大概是二十多年的时间，而在国外，尤其在美国在欧洲，大概有一百年的历史。 二十多年前中国是没有人讲用户体验这个词的。那个时代讲究技术和美术的结合，叫技术美学。一个产品，只要功能好，样式好看，就OK。二十多年后，这个概念 在大多数企业还没有发生改变，大多企业的高层也不理解什么叫设计，认为设计师就是一个美工。设计师本身也没有去提标准，自身的思维也只是停留在美工这个角 度上。设计的潜力，远远没有发挥出来。
设计师的本质并不光是把PPT做得很漂亮。在企业中，设计师应该拥有独特解决问题的能力，可以去模拟未来发展的事情。
比如，在50年代的时候，在美国问任何一个人，家电设计应是什么样子？所有人都会说，家电必须放在一个柜子里面，必须跟家具是一样的。而日 本人却发现，其实家电应该有它自己独特的一个东西，它有金属的外观，很轻巧，很好用。日本人的设计理念，使他们一举占领了市场。这说明，设计师要做一些创 新的东西，用户的一些潜在的思维慢慢会被引导。
设计师比较特别并经常使用的三种作法：观察、模拟和讲故事。
通过观察用户的行为，发现用户有一些什么困难，有什么潜在的机会，去发生改变，发现灵感，灵感变成产品，最终给用户去用。而不是传统的市场调研的方法，去问卷调查，把猜想可能是A和B的做法，只是让用户选择，然后确认一下。
模拟就是把潜在的、新的产品模拟出来，用户在使用过程中，设计师进一步观察，发现问题，触发灵感，去改造概念。这样做出来的产品上线之后，会更好、更接近于用户的需求。
设计师还可以讲很好的故事，去说服公司高层去做一些新的产品。
设计思维是一种以人为本的创新。从人的体验的角度去考虑，怎么去创造人的价值。设计本应首先考虑用户，其次是商业，而大多数企业恰恰相反。先考虑怎么赚钱，怎么去增加流量，而真正没有从用户的角度去思考。
用户体验——创新三动力之一
商业创新通常有三大动力：商业模式、技术、用户体验。
戴尔实现一种商业模式的创新。他把电脑完全用直销的模式去卖，所以价格可以做得很低，成为世界上第一大电脑销售商。
Intel完成了技术的创新，每8个月可以让CPU速度增加一倍，价格减一半，所以他统治着电脑领域几十年。
用户体验则是第三种创新，这种创新可以给企业带来巨大的发展。苹果五年前推出IPOD时，市场上已经有很多MP3播放器产品。IPOD本身 没有什么特殊的功能，也就是播放，倒歌，但是苹果在用户体验方面做了很好的创新，东西非常好用，很简单。IPOD要加功能，可以加得很多比如说要删除一个 歌，比如可以买歌买电影。但当时苹果要节约成本，用户也不需要。IPOD满足了用户简易、简单的体验。视觉上，IP0D白色的透明材料，在那个年代已经把 用户体验做到了极致，也因此吸引了大批顾客。
用户体验设计管理金字塔：
用户体验设计目标是什么？最重要的是要让产品有用，这个有用是指用户的需求。苹果90年代出来第一款PDA手机，叫牛顿，是非常失败的一个案例。在那个年代，其实很多人并没有PDA的需求，苹果把90％以上的投资放到他1％的市场份额上，所以失败势在必然。
其次是易用，这非常关键。不容易使用的产品，也是没用的。市场上手机有一百五十多种品牌，每一个手机有一两百种功能，当用户买到这个手机的 时候，他不知道怎么去用，一百多个功能他真的可能用的就五、六个功能。当他不理解这个产品对他有什么用，他可能就不会花钱去买这个手机。产品要让用户一看 就知道怎么去用，而不要去读说明书。这也是设计的一个方向。
设计的下一个方向就是友好。最早的时候，加入百度联盟，百度批准后，发这样一个邮件：百度已经批准你加入百度的联盟。批准，这个语调让人非常非常难受。所以现在说：祝贺你成为百度联盟的会员。文字上的这种感觉也是用户体验的一个细节。
视觉设计的目的其实是要传递一种信息，是让产品产生一种吸引力。是这种吸引力让用户觉得这个产品可爱。“苹果”这个产品其实就有这样一个概念，就是能够让用户在视觉上受到吸引，爱上这个产品。视觉能创造出用户黏度。
前四者做好，就融会贯通上升到品牌。这个时候去做市场推广，可以做很好的事情。前四个基础没做好，推广越多，用户用得不好，他会马上走，而且永远不会再来。他还会告诉另外一个人说这个东西很难用。
用户体验设计经常犯的错误是，直接开发直接上线。很多人说，互联网作为一个实验室，我一上线就可以知道结果了。这当然也是一个正确的理念。 但是在上线之前有太多的错误，那么就会大大地影响事态结局。一开始的时候就能很准确地作出一些判断，作出一些取舍，在互联网这个实验室里，才能够做得更 好。
用户需求是根本，但用户需求不一定是功能
百度在半年前推出空间，从功能上来说它比较其他同类产品没有什么特别大的变化，就是三个最基本的功能：上传文章，上传图片，交友。这三个功 能，所有博客都有做，而且有更多的功能。但是那个时候，大部分的博客，不管是CSP还是门户网站，都不能解决一个问题：速度。性能很不稳定，文章上传了， 可能登录就进不去了，可能上传的东西没了。其实用户最基本的需求，就是速度和稳定性。百度虽然才做博客，但百度有很大的平台，有很多的服务器，有很大的流 量，完全可以从稳定性和速度上把这两个用户体验做好，其次再做一些功能。很难用的产品注定会失败的，这个是非常关键的。
百度的搜索，可以用五个字归纳：快准全新稳。每一个字可以分解成很多小项，跟所有的搜索引擎PK，每一个字后面都代表着一种用户体验。一 个博客一推出来就有几百个链接，几十种功能，很多网站说我可以这样做，国外都是这样做的，像MYSPACE做得很成功，我就把它照搬过来。但是很多中国用 户其实跟美国用户是不一样的，中国70％的人是30岁以下的，以娱乐为主，而不是信息搜索为主。而美国是70％是30岁以上的，非常成熟和理性的这一类。 很多功能拿到中国，中国人是不会用的。这就是你增加越多的功能，你就越增加产品的复杂性。
怎么完成易用性这个任务
百度就有一个专门做易用性这样的团队，每天请各种用户来做各种各样的调研。
特别提出，不要忽视文字的力量。当年的EBAY，注册一个EBAY的帐户，第一步第二步第三步。第三步，原来是这样说的：“你只要在你的邮 件确认一下你就成功了”。这样一句话，很长。但是用户不是一个一个字去读，他是扫描，他一眼扫过去，他的意向可能就是成功了。把成功两个字记住他就走掉 了，不会再去确认这个邮件了。EBAY后来改成五个大字，叫“快要成功了”。五个大字，非常大。有户一看，我没有成功，我要做什么事，下面写邮件。所以几 个字就让EBAY提升了10％到20％的注册率，相当于每天给他带来一百万的最终价值。
怎么能让用户爱上你的产品
可以通过视觉去改善，去提供一种感觉。这就是为什么百度和Google要做节日LOGO的原因，因为搜索这个产品也是太普通了。节日的时候做做LOGO，用户产生一种感觉、情感，黏度会更好。这一类的东西我们都可以从视觉上去提高。
百度节日LOGO：
用户体验是一个多背景的梯形团队
为什么多背景呢？首先你要了解用户的需求，这不是很容易的事情。先要从社会学，人类学，心理学角度大量研究。然后需要技术人员去模拟UI的 技术或者是后台的技术。视觉体验，又要从工业设计这个角度去看。这些事都要不同背景不同类型的人去做。同时还要分工程师，产品经理。甚至一些公司高层、市 场部的人都要在一起工作。为什么说是梯型呢？因为第一要了解各个专业的人，他们知道些什么东西，你怎么跟他们合作；第二就是更专业。两方面都要去共同发 展。这样整个联系在一起，就变成一个完整团队。
另外一点很重要，UE设计并非由用户体验部来设计。百度成立用户体验部，是因为用户体验部可以协助其他部门更专业、更系统地去做用户体验这件事。
百度每天几亿的流量，稍微做一点改变，就可以得到很大的提升。比如说百度搜索结果的摘要，你加两个字或者是减两个字可能就影响到一百万的收 入。百度首页上之前的一句话叫“把百度设为首页”，最早是“设百度为首页”，就改一个字，每天会增加几千个以上的点击量。用户体验部要做的是指挥，而不是 独自做专业的事，要让所有的人一起来思考问题，是跟其他部门在一起工作，提供给其他部门更专业更系统的用户体验信息，协助所有的人员来做这个事情。
关注用户体验的细节
用户体验调研远不应只是简单的你问我答。细节往往藏于用户说、做、想、感觉等各个具体行为之中——
说：传统的市场调研方式，设计一个问卷，问用户喜不喜欢这个产品，或者给用户几种案，问用户喜欢哪一种，这就是说。
做：这是比说更好的数据。看用户做什么。甚至不要说，从他的行为已经发现了很多问题。人类学，设计学，心理学都是做这件事。人类学家费晓 东，专门在中国的一个农村观察了60年。60年的变化，解放前，解放后，观察某个人的行为过程，他就得到这个人行为演变的规律。这种调研方式最近十年来已 经被引进到设计里面去——设计一些场景，让用户去用，然后去看他做些什么。
想：用户到底在想什么？他看到一个产品，上面可能功能很多，他可能脑瓜去想我不会用，我不知道怎么用，但是这只是他的想法，没有表达出 来。怎么能够了解这种想法呢？让他一边想一边去说。激发他去说。比如为一个网页做调研的时候，就让用户想这个链接认为会到什么地方去。用户认为的地方可能 跟网页点过去的初级设计页面是不一样的，这就形成一个用户的数据。
感觉：一个网站是很土还是很酷还是很贴心？这种感觉有一百种形容词，怎么能够把它真正发掘出来？这是细分人视觉的很重要的一个调研方式。
脚：用户是用他的脚来投票的，非常简单的道理，你的产品不好，他就走掉了。
从细节中洞察
很多人做了很多调研，形成很多数据。但是问题在于没有形成洞察。就是你不知道从这个数据里面去挖出一些信息形成设计标准。
怎么从数据中得到一种洞察？这也不是一件很容易的事情。比如说在厨房里做调研，可能有两种，一种是看主人怎么去用电饭煲，这个过程，可能得 到的结果是一个更好的电饭煲。这是针对产品的调研。另外一种是花两个小时，观察主人从切菜到洗菜，到煮菜，到吃完饭，怎么去洗这些碗，这整个过程，发现各 种各样存在的问题，也得到一个结论，这个结果是一个更好的，新一代的厨房用品，而这个跟电饭煲可能没有关系。
跨国公司为什么在中国容易做不好
很多大型跨国公司在海外市场都会遇上挫折，也是细节所决定。
NBA非常重视中国市场。他们把所有NBA的页面、新闻、各种各样的数据全部翻译成中文给中国用户去用，他们也请一些球星来，在中国办各种活动。
但是他们忽略了什么？比如说用户要看一场球赛，自然需要一个赛程表，NBA给的是：第一，美国的电视台，对中国的有户，美国电视台没有任何 意义；第二，美国的时间，中国时间是半夜。所以仅仅把所有东西翻译过来是不够的，要针对中国需求，很实在的去发现一些他们需要的东西，让他真正去用。 NBA可用性上面有问题，更不要说易用性的问题。很多跨国公司，只是把外面产品汉化过来，而没有去考虑细节问题。这跟技术没有关系，跟很有钱也没有关系。 就是这些细节做不好，用户用脚投票，走掉了，不会再来了。
前馈与反馈
上线之前百度要做调研，去发现用户自己没有说出来的一种需求，这就叫前馈。有一家公司叫OXO，他们发现当时所有的人家，厨房用具的把手抓 起来都很不舒服，不是很圆滑，是金属的，抓起来手感不好，于是OXO把所有的厨房用具的手柄都做得很大，塑胶的，螺纹的，抓着很舒服。OXO的这种“把 手”申请了专利，别人卖20美分刮苹果刀这类的小东西，他们就可以卖五美金。
出一个产品给用户用，用户发邮件给你，或者他点击，或者他告诉你这个产品好不好用。这是反馈。有一个酒店，他们发现很多商务人员去酒店的 时候，经常要在大堂里开一个小会议，因为房间里不够大。大堂并不是给他们开这种小会用的，酒店就去专门调查这些人的需求，做一些模拟的环境，让大堂迅速可 以变成几个小会议中心，所有的商务人士，都往里面挤，这家酒店就把这个市场抓住了。
先做减法再做加法
国外的东西百度不会照搬过来，百度空间就三个基本需求，写文章，放照片，交友。其他的功能如留言版、视频什么的以后慢慢加上去，加一个看一个的效果，看点击量，看用户反馈，喜欢就再往上加。稳定性，速度，是非常最关键的。别的根据用户需求加减。
结构化地整合信息
为什么做MP3搜索？因为百度发现搜索TOP，前十位，永远都有MP3。做这样一个搜索很自然。就像EBAY当年卖汽车一样，发现很多人已 经在其他网站里面卖汽车的，我做肯定会成功的，因为已有庞大的用户基础。互联网其实是信息的整合，我们就是在把不同类别的信息整合起来，这也就是一种垂直 搜索的模式。
维护用户真实选择的结果
MP3 页面中“MP3榜单家庭”榜单不放在首页。如果把榜单放在首页，用户自然去点击，点击越多越不真实。百度把它隐藏起来，完全是真实数据做出来的。所以很多唱片公司以百度的榜单来作为他们专辑或者选歌手的一个量化标准，这成了他们市场的一个标杆。
弥补缺省，创造资源
“百度知道”推出来一年多时间，已经解决了一千多万个问题。为什么做“知道”呢？第一，很多信息在网络中是没有的。第二，很多人喜欢用智能 语言来提问，比如说鸡蛋不应该跟什么放在一起。用户想用关键词搜索的时候，往往并不知道用什么关键词来查找想要的信息。第三，很多关键词搜索结果往往大相 径庭，比如说搜索“苹果”，出来的结果可能是水果也可能是电脑。搜索引擎没法判断用户的真实意图是什么，所以正确答案埋没在几千万个答案里面，用户不知道 真正的答案。
“百度知道”推出后，一切变得非常简单。只要提出任何一个问题，五分钟之内，一定会有人给你回答。每天知道可以解决将近五万个问题，可以 想像，两天就可以看到一本《十万个为什么》。而每一个答案，通过投票，最佳答案就沉淀在里面，成为网络上搜索的结果。所以百度知道是搜索的一个非常好的补 充。
创造工具，更要创造规则
如果要建立一个搜索社区，不仅仅是设计工具，还要设计规则。
比如积分制度、专家团。如百度知道，有人会问，用户为什么要给你回答问题，能得到什么好处呢？而社区的用户讲究的不是达到多少现实利益，更 多的是成就感。给用户奖励积分，评选最佳答案，用户回答问题分数提高，成就感很好，晚上不睡觉也必须要回答几十个问题。这种感觉就是一种规则，就是我们创 造一种社区的规则。所以规则和工具很重要，能够让社区有良性的发展。
不去干扰、阻挡交流
百度贴吧之所以能够发展壮大，关键是不用注册，不用找分类。你只要输入任何一个词，一点搜索，你就可以到目标区里面讨论，没有门槛的设计非常重要。贴吧的目的是让用户去交流，注册用户不重要，分类也不重要，不要去干扰，去阻挡他们进入这个讨论区。
关注用户需求，量多成产品
为什么要做音乐掌门人？因为很多人已经在贴吧都讨论，不管是摇滚歌曲还是歌手都有。这些信息跟用户的行为有关，积到一定的量，用户需求明 显，产品自然诞生。百度百科也是一样，很多人在知道里面去讨论，说某个词不懂，类似情况达到一定量，百度就关注到了用户这个需求，百科诞生。“某个词”发 展到现在，估计已经有六七十万词条，不断地积累。这是开放的辞典，就是任何字，任何词条都可以不断去改，总是有几十个人在一起去编同一类词，所以用户可以 更方便的找到准确的信息。
适应用户，而不是去改变用户
“百度空间，稳定快速，先减后加。这是去适应用户的过程，而不是说要去改变用户，用户的习惯是没有办法改变的。
2006年百度交给华尔街的年报上，封面是一针一线，封底是《清明上河图》。专注一针一线的细节，就是一副宏伟的《清明上河图》——这就是提升用户体验设计的真正力量。
本文转载自：百度联盟志 资料来源：第三届百度先锋论坛
设计师不等于美工-的感想
设计无所不在，但大多数企业不知道如何使用它。现代设计进入中国大概是二十多年的时间，而在国外，尤其在美国在欧洲，大概有一百年的历史。二十多年前中国是没有人讲用户体验这个词的。那个时代讲究技术和美术的结合，叫技术美学。一个产品，只要功能好，样式好看，就OK。二十多年后，这个概念在大多数企业还没有发生改变，大多企业的高层也不理解什么叫设计，认为设计师就是一个美工。设计师本身也没有去提标准，自身的思维也只是停留在美工这个角度上。设计的潜力，远远没有发挥出来。
设计师的本质并不光是把PPT做得很漂亮。在企业中，设计师应该拥有独特解决问题的能力，可以去模拟未来发展的事情。
比如，在50年代的时候，在美国问任何一个人，家电设计应是什么样子？所有人都会说，家电必须放在一个柜子里面，必须跟家具是一样的。而日本人却发现，其实家电应该有它自己独特的一个东西，它有金属的外观，很轻巧，很好用。日本人的设计理念，使他们一举占领了市场。这说明，设计师要做一些创新的东西，用户的一些潜在的思维慢慢会被引导。
设计师比较特别并经常使用的三种作法：观察、模拟和讲故事。
通过观察用户的行为，发现用户有一些什么困难，有什么潜在的机会，去发生改变，发现灵感，灵感变成产品，最终给用户去用。而不是传统的市场调研的方法，去问卷调查，把猜想可能是A和B的做法，只是让用户选择，然后确认一下。
模拟就是把潜在的、新的产品模拟出来，用户在使用过程中，设计师进一步观察，发现问题，触发灵感，去改造概念。这样做出来的产品上线之后，会更好、更接近于用户的需求。
设计师还可以讲很好的故事，去说服公司高层去做一些新的产品。
设计思维是一种以人为本的创新。从人的体验的角度去考虑，怎么去创造人的价值。设计本应首先考虑用户，其次是商业，而大多数企业恰恰相反。先考虑怎么赚钱，怎么去增加流量，而真正没有从用户的角度去思考。
所以设计师要注意观察，提高自己的观察力。同时企业也要为设计师提供环境。只有观察多数人的形为，才能做出为大多数人所好用的产品。
这个环境要怎么搭建呢？需要什么成本？怎么样做呢？
2007年3月9日 星期五
资讯网站的”新”模式
连同刚改版的 usatoday.com 和之前改版了的Time.com, cnn.com yahoo.com 或者 NYT. 不能牵强的引用web2.0这样好像大家很敏感的词语来定义这些新的页面模式,不过我们可以从中看到很多共有的新特性:
- Ajax的运用,页面内容更清晰,布局更简洁,更具交互性
- 新闻feeds订阅,甚至搜索结果的订阅,都使习惯自定制信息的用户更方便的查阅新闻
- 用户参与的鼓励,比如推荐好的用户评论, 尊重用户的言论和自由
- 用户交互扩展功能, 比如用户评分,用户投票,用户推荐, 用户”挖掘”等
- 用户自定义信息页面,以及用户帐号管理, 比如用户阅读收藏, 推荐, 好友圈子, 个人blog, 图片上传等
- Blog聚合, 聚合用户发表的最新文章
- 用户社交网络的管理和建立, 比如圈子, 论坛, 群体等;
可 能还有更多没有列出的,或者一些未被实施的新功能, 但通过这些新页面的改变, 我们可以感受未来的资讯网站会更注重或尊重用户的参与和交互, 并不断扩展信息分享和发布的空间, 增强资讯的快速传播, 所以,回过头来看一下现在国内的有些资讯网站满页面文字链接排版模式, 是不是也应该考虑做一些新的尝试了呢? (只有网易是做的比较好的,个人观点)
2007年3月2日 星期五
最近阅读
- 易学习和易使用
可用性是受各种条件和场景影响的，抛开了具体环境、条件、和使用场景就无法谈及可用性。就网站的可用性来讲，他受限于使用的环境，使用者，使用者的条件也是不同的。
一切是围绕使用者而言，所以用户的成长，与其对应的学习提高，或者可以叫用得熟练。
所以我们的用户是谁，他在哪一层是关键的。我们是带着客户一起前进的哟，我们只需比他先行三步内，让用户看得到我们。
用户体验设计目标是什么？最重要的是要让产品有用，这个有用是指用户的需求。苹果90年代出来第一款PDA手机，叫牛顿，是非常失败的一个案例。在那个年代，其实很多人并没有PDA的需求，苹果把90％以上的投资放到他1％的市场份额上，所以失败势在必然。
其次是易用，这非常关键。不容易使用的产品，也是没用的。市场上手机有一百五十多种品牌，每一个手 机有一两百种功能，当用户买到这个手机的时候，他不知道怎么去用，一百多个功能他真的可能用的就五、六个功能。当他不理解这个产品对他有什么用，他可能就 不会花钱去买这个手机。产品要让用户一看就知道怎么去用，而不要去读说明书。这也是设计的一个方向。
设计的下一个方向就是友好。最早的时候，加入百度联盟，百度批准后，发这样一个邮件：百度已经批准你加入百度的联盟。批准，这个语调让人非常非常难受。所以现在说：祝贺你成为百度联盟的会员。文字上的这种感觉也是用户体验的一个细节。
视觉设计的目的其实是要传递一种信息，是让产品产生一种吸引力。是这种吸引力让用户觉得这个产品可爱。“苹果”这个产品其实就有这样一个概念，就是能够让用户在视觉上受到吸引，爱上这个产品。视觉能创造出用户黏度。
前四者做好，就融会贯通上升到品牌。这个时候去做市场推广，可以做很好的事情。前四个基础没做好，推广越多，用户用得不好，他会马上走，而且永远不会再来。他还会告诉另外一个人说这个东西很难用。
用户体验设计经常犯的错误是，直接开发直接上线。很多人说，互联网作为一个实验室，我一上线就可以 知道结果了。这当然也是一个正确的理念。但是在上线之前有太多的错误，那么就会大大地影响事态结局。一开始的时候就能很准确地作出一些判断，作出一些取 舍，在互联网这个实验室里，才能够做得更好。
2007年3月1日 星期四
不要吝啬你的标题
今天提报会员管理中心时，因没时间，未认真查看页面就发给BOSS了。结果招来一堆狠批呀。
问题在于平时设计师看是很难发现的问题，那就是少了引导的说明，我们在做的时候都习以为常，这个用户肯定会知道呀。其实很多时候，我们清楚的用户却都糊涂着，我这里是什么东西呀？
其实我们只要加上一个标题就能解决很多的问题。
标题是相当重要的，能很清楚的告诉用户你看的是什么东西。
2007年2月25日 星期日
表格再设计，简单
从 So the Necessary May Speak 一文延伸阅读，找到了包括 Luke W、Andrey Smagin、Deva Prasad 多人的再设计，转贴图如下：
设计小结：
- 如果用户是想一览所有的数据，那么 Luke 的设计较好，视线垂直移动且范围集中；
- 如果用户是想查看某个确定的值，那么 Deva Prasad 的设计较好，突出重点；发布
- 如果所有数据没有权重，那么增大字号或者改变颜色会增加干扰；
原则：根据具体情况，通过降低干扰和视线移动的距离来减少用户的视觉疲劳。
来自：http://www.junchenwu.com/2007/02/redesign_a_simple_table.html
2007年2月15日 星期四
我们为什么要舍近求远，竭泽而渔（关于Web文字广告）
打开一个文章页面，几秒钟之后发现前面几段和标题完全对不上号，哦，原来是假装成正文的文字广告。
编辑的初衷是好的，和广告商签了合同，当然要保证广告的投放和阅读，怎么保证呢？让每个读者在读文章之前先读广告，而且广告文字格式和正文完全一样，就这样，一个都逃不掉，阅读率百分之百！构思绝妙啊。
插一个问题：Google为什么不把文字广告插在搜索结果之前？要看搜索结果，必须先读广告。难道他们连这个都想不到么？美国人还真是笨。
而 实际上，Google已经有了最好的文字广告模式，内容通过关键字相关，明确标识广告区域，位置分布在页面的右边或底下，这样既不会阻断访问者的“即时目 标”，又可以让访问者在适当的情境下得到可能有帮助的广告信息，而且不会让广告给访问者留下对广告商还有对网站的负面印象。
如果采用上面那 个网站的方式，广告商的钱是这样花掉的：1）访问者选择性地跳过广告，2）减少来这个网站的频率（这都还是好的），3）或者在心底暗骂：“讨厌，又是这个 XXX的广告”（他们首先责怪的，是广告本身）。亲爱的广告商，这是你希望的广告投放效果吗？一旦广告商发现这个，亲爱的网站，你要怎么跟广告商解释呢？
…………………………………………………………
在 对网站首页进行研究之后，有一些外国朋友得出一个结论说，中国人的审美特点和其他地方的人不一样：喜欢长闪乱花的风格，一个网页七八个动画在闪，还有小图 标飘来飘去。如果这些朋友看到上面那个网站的广告，一定会想：中国人的阅读习惯和其他地方的人不一样，喜欢在正文之前先读几段文字广告调节一下心情：）
其实我们是和老外很多的习惯是不同的，这个还只是感觉，还没收清楚。
但很赞同作者的看法。
交互设计之用户成长
我们经常遇到这样的情况，隔了一段时间之后再看到朋友家的小宝宝，经常会说：“哇！小宝宝长这么大了！”这个，大概是最直接的成长现象了。我们小时 候也是这么长大的，后来就慢慢地习惯了，忘掉了，其实，就算在成年之后，人的心智还是会成长的，如果你感觉不到的话，不妨静下心来，看看自己近来在哪些方 面有进步？
成长是一件让人高兴的事，个子变高了，更有能力了，原来不能做的事现在能做了……另一个方面，对于那些沉迷游戏的人，有一部分原 因是因为在游戏里可以看到自己的角色不停地成长，级数更高，装备更高级，可以完成的任务更多，这是一种虚拟的“快速自我成长”带来的成就感，从而加强自我 肯定（也许是替代某种肯定缺失或逃避现实生活中的成长困难？这个太难，可以跳过）
作为Flickr用户，最近我发现自己也在成长，原来是想找个地方放照片，后来发现通过它可以分享给现在的朋友，可以看到别人更多漂亮的照片，可以认识更多的朋友，还有，慢慢的，我的拍照技术也长进了（blush，这个嘛，还有很大的成长空间）。
因此，如果你是在为一个持续运营的网站或服务进行设计（或者改版），不妨把用户的成长性考虑进去，为使用者提供成长空间。同时，用户对一个伴随自己成长的网站（服务）也会更有感情。还有，这是一个过程，要有耐心。
来自：http://dedream.blogbus.com/logs/3797966.html
用户的成长是肯定的，而我们经常在讨论应该为哪类用户设计时，很多人说是从中间用户，这个不认为有多大的问题，但前提是我们需要先有用户数据的基础才好进行。如果没有，请那我们从大众水平开始，或者请与低手开始，更多的是我们要把用户的成长性加进来，就像文章所说的一样。
2007年2月12日 星期一
新手、专家和中间用户
注：本文摘录《交互设计精髓》，对用户定位有指导意义。
大 部分计算机用户都很清楚：打开新软件产品的塑料包装，意味着在学习新界面的那几天会受到挫折和失望；另一方面，很多有经验的用户也可能发现自己会长时间地 感到沮丧，因为程序始终把他当成新手（beginner）。看起来很难找到一个合适的平衡点，能够同时满足新手和专家（expert）的要求。
在 交互和界面设计中，如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。一些程序员和设计师完全放弃这个想法，而选择分别提供新手模 式和专家模式，新手模式通常是专家模式过分简化、功能减弱的子集。当然，没有人想长期在新手模式下使用软件，但从新手模式跳跃到专家模式的难度就像从陡峭 的悬崖跳到大量鲨鱼出没的壕沟里一样，这个壕沟就是设计的实现模型。那么，解决方案是什么呢？解决这个困难的方法在于对用户掌握新概念和任务方式的不同理 解。
永久的中间用户
大多数用户既不是新手，也不是专家，相反，他们是中间用户（Intermediate）。
进 行某种活动的不同经验层次人数分布，就像大多数人口分布一样，遵循着经典的统计正态分布曲线。对于几乎所有需要知识和技巧的活动来说，如果我们针对不同的 熟练程度画出人数曲线，位于曲线左边的新手和位于曲线右边的专家人数都是相对而言较少的，大多数都是位于曲线中间的中间用户。
然而，统计数据并不能说明所有问题。正态分布曲线只不过是瞬间快照，虽然大多数中间用户倾向于保留在这一类型中，而新手不会永远是新手。要维持高水平的技术程度很困难，因此专家们也在快速变化。新手和专家随着时间变化都会倾向于变成中间用户。
虽 然每个人都会在一段时间内以新手的形式存在，但没有人会长期停留在这个状态。人们不喜欢显得不称职。而就定义来说，新手意味着不称职。相反，学习和提高是 令人高兴的，所以新手努力尽快成为中间用户——或者，他们干脆放弃。例如，所有滑雪的人，都会在新手层次停留一段时间，但那些不能很快取得进步，也就是摔 跤过多的人会很快放弃这种运动。剩下的人则会从初学者变为普通的运动者。只有少数人会成为滑双黑钻雪道的高手。
公理：没有人愿意停留在新手级别。
位 于曲线左端的新手或者会迁移到中间用户的突出部分，或者会在曲线上消失，去发现一些新的产品或者活动——在其中，他们能够成为中间用户。大多数用户为熟练 使用软件而努力。而他们的熟练程度取决于使用软件的频繁程度，像潮水一样有涨有落。Larry Constantine最早揭示了为中间用户设计的重要性，在他的书“Software for Use”（1999）中，他将那些用户称为不断提高的中间用户（improving intermediates）。作者更愿意使用永久的中间用户（perpetual intermediates）这个术语，因为新手虽然能很快进步成为中间用户，但他们很少能够继续成为专家。
好的滑雪胜地都有适合学习的 平缓坡道，以及能够对真正的滑雪者构成挑战的专家级滑道。但如果滑雪胜地要想在商业上保持成功，它需要迎合永久的中间层滑雪者，并且不吓跑新手，或者无视 专家的存在。新手必须发现自己很容易进入中间用户，而那些为不知所措的永久中间层所提供的帮助，则不应该成为专家级滑雪者垂直滑道上的障碍。
可以采用相同的方法平衡用户界面。它既不迎合新手，也不迎合专家，相反，界面的大多数努力用于满足永久的中间用户。与此同时，避免冒犯新手或者专家，因为我们承认他们同样很重要。
处于中间状态的大多数用户都很愿意进一步学习，但通常没有时间。偶尔，也会出现一些机会。有时候，那些中间用户为了完成一个大的项目，持续几个星期大量使用产品。在这段时间内，他们学到一些新的东西，知识也增长了。
然而，有时候，他们又会几个月都不使用该软件，忘掉了大量重要内容。当他们重新使用软件时，他们不是新手，但需要一些提示，回到以前的状态。
如果一个用户发现自己几个小时之后仍然不能取得进步，超越新手阶段，他们会完全放弃，然后换另外一个。没有人愿意时间长了还对某个任务不称职。
为中间用户优化
现 在，让我们对比一下中间用户在正态分布曲线上的位置，以及为他们开发软件的方式。对于程序员来说，他们完全有资格成为所编软件的专家，因为他们必须考虑每 一种可能的使用情况，无论这些情况多么模糊和不可能，他们都需要创建程序代码来处理。他们自然的倾向是设计实现模型方式的软件，并且在交互中对每一种可能 的情况都给予同等重视，因为作为专家他们不存在理解的问题。
与此同时，销售人员、市场人员和管理人员——他们没有一个可能是专家用户，甚 至是中间用户——由于经常要向对软件不熟悉的顾客、记者、合作伙伴及投资商演示产品。因为经常和新手打交道，这些以业人员通常对用户群有一种强烈的偏见。 因此，销售和市场人员经常劝说让界面为新手服务就不足为奇。他们要求培训与产品捆绑在一起以帮助苦苦奋斗的新手用户。
程序员只创造适合专家的界面，而市场人员要求只适合新手的交互，但正如我们已经看到的——数目最多、最稳定和最重要的用户群是中间用户。
想 到大多数实际用户通常被忽略是令人吃惊的，但情况经常就是这样。你可以在很多企业和基于软件的商业产品中看到这种情况。整体设计偏向于专家用户，而与此同 时，一些令人厌烦的工具，如向导（wizard）和Clippy1捆绑在一起来满足市场部门对新用户的理解。专家级用户很少使用它们，而新手则希望尽快摆 脱这些令人不安的有关他们无知的提示。但是，永久的中间用户，则需要永久地面对它们。
公理：为中间用户优化。
我们的目标既不是吸引新手，也不是将中间用户推向专家层。我们的目标有三个方面：首先让新手快速和无痛苦地成为中间用户；其次避免在那些想成为专家的人面前设置障碍；最后，最为重要的是，让永久的中间用户感到愉快，因为在技术层次上他们稳定地待在中间层。
我们需要多花一些时间，让程序对永久的中间用户来说功能强大而容易使用。同样，我们也必须包容新手和专家，但不能让所占比例最大的一部分用户感到不舒服。本章接下来描述实现这个目标的一些基本策略。
新手需要什么
不可否认，新手是敏感的，而且很容易在开始有挫折感，但我们必须记住，不可将新手状态视为目标。没有人希望永远是新手。它只不过是每个人必须经历的一段过程。好的软件缩短这一过程，并且不将注意力集中在这一过程上。
作 为一个交互设计师，最好能想像一下用户——尤其是新手——非常聪明并且非常忙。他们需要一些指示，但不是很多，学习过程应该快速而且富有针对性。如果一个 滑雪教练一开始就讲授高山生态学和气象学，他会失去学生，不管他们滑雪的天分如何。用户想要学习如何操作程序，并不意味着他需要或者想要学习里面的工作机 制。
公理：将用户想像成非常聪明但非常忙的人。
另外一方面，聪明的人在理解原因和效果后，会学得更好，所以你必须让他们理解为什么软件会像那样工作。我们使用心智模型来弥合这种矛盾。如果界面的表现模型紧密地符合用户的心智模型（正如第2章讨论的），它可以在不强迫用户了解实现模型的情况下，为用户提供所需要的理解。
让新手开始
一 个新手必须迅速掌握程序的概念和范围，不然他会彻底放弃。所以设计师第一等的大事就是确保程序充分反映了用户关于任务的心智模型。他可能想不起到底是使用 哪个命令来执行特定对象，但是会确切地想起对象和动作之间的关系——一些重要的概念——如果界面的概念结构与他的心智模型一致。
让新手转变为中间用户需要程序提供特别的帮助，而一旦他成为中间用户后，这种帮助反过来会妨碍用户。这意味着无论你提供什么样的帮助，它都不应该在界面里固定下来。当不再需要这种服务时，这种帮助应该消失。
在向新手提供这样的帮助时，标准的在线帮助是一个很糟糕的工具。我们在第35章会谈到更多的帮助问题，帮助的主要功能是为用户提供参考。新手不需要参考信息，他们需要概括性的信息，比如说一份操作指南。
单 独的指南工具——显示在对话框里——是交流大体情况、范围和目标的好工具。当用户开始使用这些工具时，对话框显示程序的基本目标和工具，告诉用户基本的功 能。只要这种引导持续集中在新手所关注的问题，诸如范围和目标，而避免那些只有中间用户和专家才关心的问题（我们将在下面讨论），对于帮助新手来说，它应 该就足够了。
新手也依赖于一些菜单学习和执行命令（详细的有关讨论见第27章）。菜单可能执行起来很慢而且沉闷，但它们彻底而详细，让人放心。菜单项发起的对话框（如果它们那么做）应该是解释性的（简捷和精炼），并且有方便的“取消”按钮。
专家需要什么
专 家也是非常重要的人群，因为他们对缺少经验的用户来说有着异乎寻常的影响。当一个新用户考虑产品时，他会更加信赖专家而不是中间用户的看法。如果专家说： “这个产品不好”，可能意指“这个产品对于专家来说不好”。但是，新手不知道这些，他会考虑专家的建议，即使这些建议并不适用。
专家可能会不时寻找深奥的功能，并且会经常使用其中一些。可以肯定的是，对经常使用的工具集，他们要求能快速访问，这个工具集可能非常大。换句话说，专家需要所有的快捷方式。
任何一天花几个小时使用某个数字产品的人都会快速记住界面的细微差别。他们也不想将所有经常使用的命令记在脑子里，尽管这经常不可避免。频繁的使用要求记忆，并且记忆也是合理的。
专家用户将持续而积极地学习更多的内容，并且将了解到更多他们自身行动和程序的行为，以及表达之间的关系。专家欣赏更新的、更强大功能。对程序的精通使他们不会受到复杂性增加的干扰。
永久的中间用户需要什么
永 久的中间用户需要能够访问工具。因为他们已经掌握了这些程序的意图和范围，不再需要解释，对于中间用户来说，工具提示（Tooltip）（参见第29章） 是最好的中间用户习语。工具提示没有谈到范围、意图和内容，它只是用最简单的常用用户语言来告诉你程序的功能，而且它使用的视觉空间也最少。
永久的中间用户知道如何使用参考资料，只要不是必须一次解决所有问题，他们就有深入学习和研究的动机。这意味着在线帮助是永久中间用户的极佳工具。他们通过索引使用帮助，因此索引部分必须非常全面。
永久的中间用户会确定他们经常使用和很少使用的功能。用户可能会遇到一些模糊的特性，但他会很快地识别出自己经常使用的功能（可能是下意识地）。中间用户通常要求这些常用功能里面的工具放在用户界面的前端和中心位置，容易寻找和记忆。
永 久的中间用户通常知道高级功能的存在，即使他们可能不需要也不知道如何使用那些功能。但是软件具有这些高级特性的事实让永久的中间用户放心，让他们确信， 投资购买这个程序是正确的选择。如果普通的滑雪者知道在那片树林之后有一个真正高难度的黑钻石专家滑道，他们会感到很放心，即使从来不曾想过使用那个跑 道，这也会让她感到充满了梦想和向往。如图3-1所示。
你的程序代码必须同时解决业余爱好者和专家可能会遇到的各种情况。但不要让这样的 技术需求影响你的设计理念。是的，你必须为专家用户提供那些功能，你也必须为新手提供支持。但更重要的是，必须将你大部分的才智、时间和资源为大部分代表 用户——永久的中间用户而设计，为他们提供最好的交互。
图3-1 用户对软件的需求随经验而明显不同，因此呈现给用户的工具应该反映这种不同。如果程序的最佳品质在于让第一次使用的用户觉得非常容易，那么它并不会被大家 所欣赏，因为大多数用户很快就会成为永久的中间用户。相似地，如果是职业人员和全职专家才会使用的产品，界面则需要迎合他们独特的需要。
来自：http://www.ui123.com/blog/article.asp?id=41
什么是 Cut-off 式设计
上次在 ClickTale 的报告里面，谈到了两个概念：Above the fold 和 Cut-off。两者其实表达的基本是同一个意思。要理解本文的主题 Cut-off，必须先了解什么是 Above the fold。（找不到合适的中文翻译，这里英文还是比较容易理解的）
之前也说到了，Above the fold，应该起源于报纸的排版。Fold，即被折叠起来的部分，上次看到一份《南方周末》，报纸很大，折叠起来的。折叠起来的上面是文章，折叠起来的下 面是一个大幅的广告，可惜文章的最后几行也被折叠到下面了，导致阅读起来很不便。对于 Web 来说，Fold 取决于用户分辨率的大小，特别是 Y 方向的高度。（白鸦有篇文章谈到，“现在已经是宽屏的时代，对于用户来说相比而言上下的空间比左右的空间更值得珍惜！”）
那么 Above the fold 就很好理解了。重要的内容应该位于折叠之上。但这要相对于用户来说的，翻阅报纸比用户滚动鼠标来说要麻烦得多。并且从 ClickTale 的数据上也可以看出来，网页的 Fold 存在的比例很小。
再举个例子。那次到北京去，白鸦给我发了条短信。短信不长，可是中间有个空行。为什么我这么介意空行？因为我的手机屏幕一次只能显示三行汉字，如果中间有个空行的话，我会以为短信已经结束了。
现在 Cut-off 式的设计应该就很容易理解了，即让网页设计成为被屏幕切断了，暗示用户往下滚动可以看到更多内容。不要在网页上空出大片的 100% 宽度的空白区域，这样用户可能以为内容已经结束。在页面上放置大的 banner 时要特别小心，不要让 banner 底部距离下面的内容太远。UIE 上给出了一些例子。
另外我们经常可以看到很多网页的顶部有 100% 宽度的色条，也是在暗示用户，页面已经到顶了，不仅仅是为了好看而以。
所以如果通过数据反映出你的用户不经常往下翻阅的话，可以从这个角度去思考：是否设计上的失误？
我做了一个小测试，统计了一下鼠标滚动以及滚动条滚动的长度，供参考。如下：
测试环境：WinXP, Firefox 2.0, IE 6
| IE 6 | Firefox 2.0 | ||
|---|---|---|---|
| 鼠标滚轮 | 127px | 51px | 一般系统硬件中设定滚轮滚动一次为3行，可惜这里的3行和网页文字大小、行高没有任何关系（和FF设定的文字大小相关，IE始终为固定） |
| 滚动条 - 三角箭头 | 105px | 17px | 17px 正好是 51px 的三分之一，这意味着在FF下默认一行高 17px |
| 滚动条 - 滚动块 | 4px | 4px | 这只是最小移动值 |
| 滚动条 - 滚动块以外的部分 | 741px | 828px | 这与页面长度无关 |
以上数据都是严格的滚动一次或者点击一次测得。实际上系统会有滚动的惯性加速度。另外，根据习惯，很少有只滚动一次（滚轮一格）的，一般一次滚动实际为 5-6 倍以上数据。测试页面在这里，大家可以实际体验一下。
2007年2月8日 星期四
下拉箭头在web上的应用
接上篇（下拉箭头怎么拉?），现在聊聊下拉箭头在web上的一些应用。
先给个标准的例子，来自Gmail，在打开一封邮件后，右上角的回复快捷操作和更多的操作。
很明显，间隔线前的操作是回复此邮件，后的下拉箭头表示更多针对此邮件的操作。
这里还有一个例子，来自著名的Discuz论坛，在任何一个版面都可以见到的右上角的“发新帖”的按钮。
直接看这种样式的设计，应该是鼠标点击“新帖”为发表一个新的帖子的意思，而点击后面的下拉箭头，就是（发表的）更多操作。
但实际上–
当你把鼠标移动到这个按钮的任何一处，就弹出了这么一个层。当然，这个是运用的高超的ajax技术，给你带来了不需要多点击一次鼠标的便利，但他同时也给我带来了很大的困惑。
- 鼠标一移动到“新帖”的按钮，就弹出四个选择，那么是不是，我发帖一定要选择以下四种之一呢？就是说，本站只能发以下四种帖子。（我想，Discuz的意思应该是论坛可以发以下五种帖子。但是，我一移动到新帖上，就弹出四种选项，这么强烈的吸引走了我的注意力。很容易让人觉得这个是发帖的必须选择。）
- 鼠标移动到下拉箭头上，出来的是同样的东西。那么干嘛把“新帖”和下拉箭头分开？
根据这个设计所表达的意思，我想，只需要简单的这么处理以下，应该就能解决问题了：
鼠标移动到新帖上，点击，表示发表一个新的帖子。鼠标移动到后面的下拉箭头，自动弹出选项框，表示还可以发表更多类型的帖子。这个逻辑和Gmail的回复是一致的。
PS：这种设计形式下的交互方式是符合逻辑的，但是，跟Gmail的回复操作一样，他也不免有一些小小的弊端：后面的下拉箭头表示是跟发新帖一类的操作，但是交代的不是很清楚。
最清晰直观的解决方法就是，把这5种发表帖子一一摆开（当然可以在样式上突出第一个），类似的效果在早期的Discuz可以看到。
但是以上只有2种类型的帖子，一一摆出来还是可以的。后面发展到了5种（说不定以后还有更多类型的帖子），一一摆开显然是不明智的做法，一是设计上不好看，二是后面四种属于不常有的操作。所以采取了放出一种常用操作（发表普通帖子）而把不常用的藏起来的做法，这时，自然而然的就想到了用下拉菜单来解决。
Discuz的想法是好的，只是在结合ajax技术运用时，一些交互的细节没有把握好。
来自http://hiseven.net/archives/pull-down-arrow-in-web/
下拉箭头怎么拉？(一）
现在的软件越做越大，功能也越来越复杂，然而展示给用户操作的界面却有限，聪明的交互设计师们想出了很多方法来解决这类问题，比如放出常用操作，而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。
看两个标准的windows下拉箭头的例子：
上面两个都是标准的图标+文字+箭头的形式，但是这两种种下拉箭头有什么不同么？我们把鼠标移上去，他们变成了这个样子：
第一种触发后在图标文字和下拉箭头之间有一条分割线，而后面的只是一个有触发的效果；前一种分割线前面的图标文字表示一种操作，而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。
所以，目前我们分辨以上两种样式相同的下拉箭头的方法只是：移动鼠标看触发效果，有间隔线的前面是操作，后面是更多选项。而没有间隔线的就是一个下拉选项而已。
当然，这种方法不直观，你必须鼠标触发后，才知道这个下拉箭头倒是是一个什么操作。
但这种操作在Win系统的软件里面，已经很标准了。以下都是运用这个标准的一些例子。
Google toolbar 
QQ聊天窗口 
但同时，在QQ的聊天街面上，发下了一些似乎并不那么符合这个标准的按钮，比如以下这个
按照以上的标准来看，第2、3、6、7的图标旁边应该加个小小的下拉箭头，鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理，似乎就比QQ处理的好（嘿嘿，这样似乎可以证明QQ不是简单的抄袭MSN呢）。
以上聊天窗口操作栏，QQ的传图片的图标（第4个）和MSN的更改字体的图标（第5个）点击后都是弹出windows标准窗体，而其他的图标，比如选择表情，都是拉出一个类似层的界面，本质上属于更多操作。处理方法应该需要下拉箭头，鼠标触发后的效果也是图标可以箭头之间没有间隔线的。
PS：看到了更高级的应用，以下截图是是QQ的群聊天窗口。
发现不同了么？
一个下拉箭头是在图标和字的中间，一个下拉箭头是在图标和字的右侧（和一般的一样）。据说，在箭头在中间的就是表示此操作为打开更多选项，也就是没有间隔线的；箭头在右侧的和一般的逻辑一致（一种理论：根据下拉箭头的位置判断可能的操作，直观）。
这里貌似是个不错的解决办法，但是他的问题是：
- 要是我缩小了窗口，提示文字隐藏了，我该怎么去判断呢？（这个时候还是要用原始的鼠标触发方法吧。）
- 这里的图标+下拉箭头+提示文字的组合根本不符合标准（这里文字出现的意义就是为了解释图标的，但是却被操作性的下拉箭头隔离了，那么他去解释~~~下拉菜单？）。所以根据下拉箭头判断也就无从说起了。
Update：上一个标准的例子，来自yahoo mail。直接做成按钮状的带间隔线的效果，直观，易懂。
下拉箭头怎么拉？(一）
现在的软件越做越大，功能也越来越复杂，然而展示给用户操作的界面却有限，聪明的交互设计师们想出了很多方法来解决这类问题，比如放出常用操作，而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。
看两个标准的windows下拉箭头的例子：
上面两个都是标准的图标+文字+箭头的形式，但是这两种种下拉箭头有什么不同么？我们把鼠标移上去，他们变成了这个样子：
第一种触发后在图标文字和下拉箭头之间有一条分割线，而后面的只是一个有触发的效果；前一种分割线前面的图标文字表示一种操作，而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。
所以，目前我们分辨以上两种样式相同的下拉箭头的方法只是：移动鼠标看触发效果，有间隔线的前面是操作，后面是更多选项。而没有间隔线的就是一个下拉选项而已。
当然，这种方法不直观，你必须鼠标触发后，才知道这个下拉箭头倒是是一个什么操作。
但这种操作在Win系统的软件里面，已经很标准了。以下都是运用这个标准的一些例子。
Google toolbar
QQ聊天窗口
但同时，在QQ的聊天街面上，发下了一些似乎并不那么符合这个标准的按钮，比如以下这个
按照以上的标准来看，第2、3、6、7的图标旁边应该加个小小的下拉箭头，鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理，似乎就比QQ处理的好（嘿嘿，这样似乎可以证明QQ不是简单的抄袭MSN呢）。
以上聊天窗口操作栏，QQ的传图片的图标（第4个）和MSN的更改字体的图标（第5个）点击后都是弹出windows标准窗体，而其他的图标，比如选择表情，都是拉出一个类似层的界面，本质上属于更多操作。处理方法应该需要下拉箭头，鼠标触发后的效果也是图标可以箭头之间没有间隔线的。
PS：看到了更高级的应用，以下截图是是QQ的群聊天窗口。
发现不同了么？
一个下拉箭头是在图标和字的中间，一个下拉箭头是在图标和字的右侧（和一般的一样）。据说，在箭头在中间的就是表示此操作为打开更多选项，也就是没有间隔线的；箭头在右侧的和一般的逻辑一致（一种理论：根据下拉箭头的位置判断可能的操作，直观）。
这里貌似是个不错的解决办法，但是他的问题是：
- 要是我缩小了窗口，提示文字隐藏了，我该怎么去判断呢？（这个时候还是要用原始的鼠标触发方法吧。）
- 这里的图标+下拉箭头+提示文字的组合根本不符合标准（这里文字出现的意义就是为了解释图标的，但是却被操作性的下拉箭头隔离了，那么他去解释~~~下拉菜单？）。所以根据下拉箭头判断也就无从说起了。
Update：上一个标准的例子，来自yahoo mail。直接做成按钮状的带间隔线的效果，直观，易懂。