我们在浏览网页的时候偶尔会遇到一些陌生的网页交互行为，通常情况下它们并不会影响你的正常使用，之所以出现情况往往是因为，设计师在设计某个交互方式的时候，遇到了常用的交互模式无法解决的问题，因此会采用一种创新的交互模式来解决问题。通常情况下这些创新的交互方式将会是我们学习的绝佳案例。对设计师拓宽思路很有好处，今天我们介绍的是一个来自google的sns社区orkut 的对关闭按钮的创新应用。

应用场景：orkut组件是默认展示在profile页面的，可以通过执行两种操作隐藏和移除来关闭该组件在profile里的显示状态，区别是隐藏后该组件还可以在组建库中找回，移除后组件无法找回只能重新添加。

通常我们会采取的方案：

 

如图，通常遇到这种情况我们会设计两个按钮一个隐藏一个移除。好处：两个任务直接展现，操作也很直接。只需一次点击即可。弊端：用户不理解隐藏和移除代表什么意思，无法预知操作结果，两个动作的操作结果在此页面的表现是一样的，而且操作在当前页面不可逆。

挑战：怎样以一种清晰的方式告诉用户隐藏和移除的区别，两个动作行为结果是一样的，即此组件从当前页面消失，区别是隐藏的组件还可以在组件列表被找到而移除的组件则不能。

解决思路：对动作进行相对详细的文字解释是表现这种区别的最直接的方法，但页面空间非常有限，因此不可能在页面中直接添加动作解释。这时候选择弹出窗成了一个很自然的选择（就是在点关闭按钮后弹出窗口，在弹出窗中我们可以对隐藏和移除两个行为做出更清晰的解释，用户就可一作出更明确的选择）。最终，设计师选择的是，类似于下拉菜单的，小面积的浮出层。

最终方案：把两种操作整合为一个关闭按钮（关闭按钮恰好可以概括两个操作在当前页面的相同结果，是这两个操作的交集，因此语义上非常恰当），在点关闭后用户会看到两个有详细注释的按钮，“hide from my profile（在当前页面隐藏）”和“remove this application（移除此组件）”这时候用户就可以作出相对准确的选择了。

设计师之所以没有选择弹出窗的形式，是因为这样做会增加用户的认知负担，并且从可逆性角度考虑即使用户勿删了组件仍然可以用添加组件的方式找回，所以线上的这种方式是最佳的选择。

2008年的最后一天，办公室里每个人都专心于自己的工作。转眼来到杭州已经快半年了，在UED的集体生活充实又开心，时常回想某个时候UED博客上那段BH的招聘简介，觉得人生的际遇总是很奇妙。   

过去的一年是不断变化的一年，走出校园走进社会，离开北京来到杭州，随遇而安，接受洗礼，告诉自己乐观的抱着变化，享受生活里的不可预知，总体说来这里是让人快乐的。

圣诞刚刚过去，UED圣诞大戏《赐秦》继承了UED的光荣传统蝉联了晚会节目第一。此剧由老UED明城舍身领衔、丁喜（说来要恭贺丁叔今日大喜）友情客串，其余一色er的UED2008新进男U女U出演：在天、小虎、宗羲、修武、健刚、佩瑛、龙客、还有me。年底大家工作都超忙，不过利用业余时间改剧本、加紧排练还是换来了好结果，擅自代表自己感谢剧组成员，也代表剧组感谢UED所有家人的支持。特此发几张演出大片上来。

昨天下班后突发奇想把剧组的主创同学们抠成AI的Q版形象，一方面当作大家辛苦了近一个月终于拔得头筹的纪念，一方面也作为新年的小小礼物送给UED大家庭的每个兄弟姐妹，希望大家2009年都生活得多姿多彩有滋有味er。

无论是公司的同事还是外界的程序员朋友们，大部分人对JavaScript的高级应用不甚了解，已有的知识架构里会认为JavaScript仅仅是一门脚本语言，其作用是给页面做一些锦上添花的效果，比如表单验证等等。潜意识里也就不会用面向对象的思想去编写JavaScript代码，也很少会去深入了解prototype, closures等概念。这导致书写的代码经常很糟糕。

对于JavaScript的学习，可能最重要的还是要从思想上认识到JavaScript不是玩具语言。JavaScript的作用远不止增加点表单验证，我们可以看看GMail、看看Google Maps，如果开发者们没有对JavaScript足够尊敬，是不大可能写出如此优秀的Web应用的。

JavaScript门槛很低，但门槛低并不意味着容易掌握。一定程度上，JavaScript的入门容易以及其极大的灵活性，使得要掌握 JavaScript变得很难。从纯语言上讲，我个人的经验是，学习 JavaScript比学习Java更具挑战性。我们大多习惯了传统的面向对象表述方式，一定程度上甚至会认为类、封装、继承等概念都得像Java、 C++那样，可能都从来没想过没有class, extend, override等概念也能面向对象。JavaScript的面向对象打破了这种思想上的禁锢：世界是多样性的，条条大路通罗马。夸张一点说，深入学习 JavaScript，更多的是一种思想上的挑战，能活跃思路，扩大视野，甚至改变对世界的看法。

上面所说的这些，无意于夸大JavaScript的作用和难度。每个人都或多或少的会强调自己所学的知识，但在这里，我希望自己能很客观的传递一个观点：无论什么语言，想要精通，都很不容易；如果想学习某门语言，就得从思想上尊敬这门语言，在尊敬的基础上去学习，才有可能掌握这门语言的精髓。除了JavaScript，再举个HTML的例子：

经常能听到这样的话：HTML多容易，花个一两天也就会了。我自己也曾这么认为。但随着使用HTML经验的增长，慢慢感觉到， 对于Web前端开发来说，HTML可以说是最难的。HTML4.01规范中的91个元素就如汉字里的2500个常用字一样，我们读完小学后对常用字应该就都认识了，但要用汉字写篇优秀的文章，却并不容易。HTML也是这样，大部分宣称HTML很容易的开发者，往往只停留在认识body, p, form, table, div, ul等标签上，对于dl, legend, sub, caption等并非生僻的标签甚至都不认识。在常用字还认不全的情况下，宣称HTML很容易，真的很狂妄。（HTML的难度在于如何利用标签构建出结构 良好且富含语义的代码，就如写作文一样，不能认为认识几个字就自信能妙笔生花。）

总之，语言无贵贱难易，要从思想上尊敬重视一门语言，才有可能驾驭它，否则，将永远游离在专业程序员的宝殿之外。

（注：本文已发表在程序员杂志第11期）

一年一度的西方传统节日圣诞节到来了，今天晚上平安夜，首先，代表全体UED祝大家圣诞快乐，大家要记得把袜子放在可爱的床头上，让圣诞老人把礼物放进去哦！^_^! 我们UED是一个活泼的大家庭，每个人都很有自己独特的个性与魅力，跟这个大家庭相处在一起也非常的有活力，非常的开心，为了迎接我们UED新的一年，我给出了个小创意，为UED每个人花名像动物的译音画了一个有趣的动物形象！（比喻我叫大雄 叫成了大熊 注：没有译音相似的同学们，下期将补上）因为都是用业余时间画的，时间限制所以不能将我们UED每个人都画上，其中有一半可爱的动物是我们人见人爱。车见车载的相宜MM比较形象的作品。还有谢谢我的组长青云、视觉侠三通、二当家等其它同事们只的支持…..这样就成了我们UED这个大森林了，如果你想知道UED大森林里住了那些动物，请往下文关注：

《UED主题森林》（1280×1204）桌面下载

出品：大雄 沈相宜

希望大家喜欢，欢迎大家单击右健另存为…

《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我们总是会感慨：“为什么有些细节设计看似已经很显眼了，用户就是没有注意到？”、“为什么用户偏偏要那样去理解？”、“用户在那个流程中为什么陷入困惑，甚至不能完成任务了？”，然后，我们会思考这界面背后的原因，分析用户当时具体说了什么，是什么原因导致用户那样理解……这个过程需要非常严谨的思考，因为向设计师反馈的任何一个词语都会导致不同的设计。同时，这个过程也令我们非常享受，如果说设计就是解决问题，在可用性测试之后的分析时间就是分析师的“设计”时光。

我们冀望通过用户研究角度的思考，带给设计师一点点启发，并且将我们在研究中发现的问题，固化在设计模式库中，以便今后不再出现同样的问题。当然，作为体验分析师，我们对交互设计和视觉设计了解得不够精深，还不能像设计师一样把握项目中的种种约束，所以，这个系列的内容可能还比较粗浅，更偏重于“商业-技术-用户”三者中“用户”这个角色的直接想法。

另外，我们的思考来源于淘宝或其他网站各位设计师的设计，所以，有时可能会拿来作为反例，还请各位设计师见谅。我们尽可能拿自己网站的例子作为反面教材，如果在反例中涉及了您的网站，还请多多包涵。

让我们开始第一个故事吧——

有一个网页上典型的细节，它如此细微以至有时设计师在项目的最后时刻才记得挤一个位置给它，但它又如此常见，在不少网站的详情页面不经意就出现了；我们在软件中不常见到它，但在超文本世界里，在互联了朋友的世界里，它却时而闪现——它就是“复制链接”，英文别名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如图1）。作为设计师，你曾经注意过它吗？

（图1：youtube ）

它什么时候出现更合适？

当你想将一个网页（或网页中的主体内容)分享给别人的时候，这时它的出现可以节约用户的时间。

通常，它出现在一个网站的内容详情页面，比如视频网站的播放视频页面、博客网站的博客文章页面、照片网站的照片详情页面、购物网站的商品页面等等。就拿博客网站为例，它的出现似乎在说，“也许你的朋友会对这篇文章感兴趣哦，点击我，然后分享给朋友看看吧！”

使用它时注意什么

1.不必在一个页面多次出现

设计师既要在设计过程记着它，但也别太惦念它了。只在需要的时候提供它，即使页面很长，也没有必要像“立刻购买”按钮那样在页面的第一屏和最后一屏出现两次，因为“立刻购买”可以让用户进入到下一个步骤完成购买，而“复制链接”只是一个次要的任务，大部分为对它感兴趣的人使用。

2.相类似的功能具有相同的视觉权重

翻翻看你的网站人物角色（或是网站的点击日志），他们常用什么分享给朋友——是通过IM、Email还是其它，那么请突出最主要的那一个，如果将多个相似的功能平铺在一起，恐怕会违背“别让我思考”的原则。看图2中播放器下面第二排前几个链接：“站外引用”、“发送聊友”、“转发”，三个功能都具有分享的含义，并混杂在9个链接中，我不得不停下来想想，“我要点击哪一个呢？”

（图2：某视频网站 ）

3.不要让它本身显得太喧嚣

设计它的过程，要记得让用户注意得到，或者是在用户想寻找的时候知道在哪里寻找，这一点很重要。举个例子，假如是一篇blog页面，不要让“复制链接”的 文字大小超过blog正文内容，也不要让复制链接区域太明显，以至于干扰了最核心的文章内容。

图3是淘宝社区的一个反例，输入框和按钮多在表单中出现，这个组件总是比普通文字要明显的，它出现在社区内容的底部，可能会干扰用户对后几段文字的阅读。

（图3：淘宝社区）

另外，在使用输入框复制的设计中，是不是可以考虑当用户点击了输入框，用脚本自动全选了整个输入框的内容（例1），而不是让用户从左至右按住左键拖动鼠标，进行全选。

<input type=”text” id=”foo” />

<script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>

（例1）

它出现在页面的哪个位置？

在可用性测试的准备阶段，我们这么带着这样的问题去观察：“用户对某个东西感兴趣的时候，他知道去哪里找它吗？”和“用户点击了它之后，他清楚在做（复制或分享）什么吗？”，前一个问题意味着它的可寻性（findability）是否足够好，后一个问题意味着这个位置能不能与他想做的事情联系起来。

举个例子，如果用户想把文章分享给朋友看，那么将这个功能放置在文章的附近而不是评论的附近更合适。可能这么说，有些人会想“那当然是文章附近更好了，谁会把它设计到评论附近呢”，但有时在文章下面加入了一个横幅广告之后，它就与评论而不是文章更相近了。

用什么中文词语来描述它？

我个人认为在不同的情景中应该用不同的中文词语，但是界面上不要有其它词语干扰了用户的理解，图4是某博客一篇文章的部分截图，你能立刻说出来，上下两个“分享”有什么区别吗？

（图4：某门户博客）

我想你已经猜出来了，上面的“分享”是名词，下面的“分享”是动词，所以在使用一个既可以是动词也可以是名词的词语时候，要谨慎一些。另外，我建议设计师时刻考虑到“此时此刻”那个时点， 想象用户是从搜索引擎过来的，他不清楚你的网站的结构、功能，他一下子来到了你设计的某个页面，他来了、他时间有限、他可不愿意思考太多，你的网站能通过那一刻就让他一目了然吗？

不要使用什么词语

1.“共享”：

共享含有共享编辑的含义，常在wiki中使用。所以使用它可能会产生歧义。

（图5：google文档）

2.某些情况下，缺乏明确含义的词语：

我个人认为“复制链接”属于情境式链接，Peter Morville在《web信息架构》中提到“情境式链接必须非常直接而有意义……如果你点选下去，就知道会看到什么东西。这样高度有代表性的标签，会通过它们的情景而更加清晰：具有说明性的文字、明确的标题，以及网站本身就有的直接明了的用法。”

“复制链接”只是这篇文章中我对这类链接的称谓，而不建议直接采用这个名称，仅仅用4个汉字很难表达出来复制之后要做什么，用户会想“我为什么不能直接复制地址栏或是点击鼠标右键复制呢？”，“我点击它可以为我带来什么？”。在某些情境下，“复制图片链接发送给好友”也许是更直接、清晰。更进一步，如果你通过调查，发现很多用户是通过淘宝旺旺传送图片地址的，那么，更好的表达方式可能是“复制图片地址发给旺旺好友”。

我想，没有最佳答案，文字和你的网站气质以及用户使用场景息息相关，文字亦是设计师的利器之一。

点击它之后，会出现什么？

1.要考虑“复制链接”的内容

当你仔细考虑过用户的使用场景，你应该就很清楚怎么设计复制链接了。像图6一样将内容主题包含在分享信息里对那些通过IM来分享的用户确实不错。

（图6：新浪博客 ）

2.让分享中的内容满足用户的需要：

如果用户对复制链接有多种需要，那么不妨设计多种复制途径。学习一下flickr的设计（图7、图8），它如何在多种复制链接中，保持了清晰的逻辑关系。（当然，其中默认第一项通过邮件分享可能对美国人更常用，对中国用户就另当别论了 ）

（图7：flickr网站 ，用户点击分享之前）

（图8：用户点击分享之后）

3.帮用户想的更多：

分享一个photobucket的例子（图9），当鼠标上移到图片时，就会出现灰色的浮动层（这是改良过的设计，原本是灰色层始终存在），让用户复制。鼠标点击到包含地址的输入框里，系统会自动复制好其中的链接，并在输入框前出现几秒钟的“copied”提示。这种方式既能做到提供反馈，又不会有alertbox的生硬感。

（图9：photobucket.com ）

总结

设计“复制链接”功能时候，首先思考用户的使用场景以及用户可能会用它做什么，其次一定要让用户理解这个功能可以用来做什么的。最后，优秀的设计还应该给用户一个惊喜。在我收集例子的过程中，photobucket的“复制地址”设计确实给了我不小的惊喜。

你还发现了哪些更好的例子呢，欢迎告诉我！

延伸阅读：

• http://ui-patterns.com/pattern/TipAFriend
• http://www.welie.com/patterns/showPattern.php?patternID=send-to-friend

更多例子：

• http://picasaweb.google.com/mimiqiao/TipAFriend