什么样的界面算是好界面－7个案例October 12th 杨掌柜
案例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做了一些用户调查，感谢大郎，石涛，斗猪，王川林等好同志的建议，今天编写了一些简单的案例给大家：）
相关链接：Feedburner,Belinker,SongTaste,维基百科，Whiteney的5e理论，
平衡5E:可用性
幻大灰
2006-10-12 16:01
好文章！
chy
2006-10-12 16:05
精辟,值得学习呀!
大郎
2006-10-12 16:33
好文章！
我觉得杨梅写的好的地方，那就是说明了为什么是这样设计的？这样设计流程与表现的好处是什么？可用性理论用在实际当中还需要实例指导的，这样的实例分析受用很大！
谢谢之外，赞一个！
飞
2006-10-12 17:30
老朋友的文章真是精辟啊：）多多向你学习：）
Shirley
2006-10-12 18:00
“他/她发现那个取消注册的按钮（五个单词）按正常的css样式，比激活注册的按钮（两个单词）还要宽，更抢眼。”
经常遇到这样的麻烦。。。。我会想办法把文字压缩或者做成普通链结，hoho，这里给了一个新思路。
幻大灰同学有灌水嫌疑^^
Mars
2006-10-13 13:09
很有启发，学习ing
“我们也觉得注册登陆麻烦透了”这句话豆瓣也在用，而且后面加了一句“所以您只需要登陆一次，以后就不会叫您输入这些信息了”（大意）
moond
2006-10-14 3:29
首先，这的确是一篇很好的文章，看得出用了很多心细。
只是有几点想补充一下：
案例1,如Shirley 说的，其实次要链接改为文字链接，或者两个按钮用不同颜色平衡区分，也会是很好的解决办法
案例2 不能看到全局页面，还不好说出整体感觉， 但是那个标志当前位置的方式也存在迷惑性，颜色，大小，以及与周围环境的影响，如果简单加一个箭头提示，也许会达到更好的效果。
还有总结里提到的也想补充两点：
1。设计的为了让技术或服务更好的被使用；
2。好的界面设计还应该让用户容易的知道下一步是什么；
先想到这些，以后想到又来补充
油茶研究会 » Blog Archive » 链接的体验设计(1)－－黑色的链接
2006-10-14 14:05
[...] 前两天发了关于什么界面才是好的界面的7个例子，有一个是关于Feedburner的两个按钮的，设计师用减小次重要按钮的高度来弱化对目标用户操作的视觉干扰。Lu heli在MSN里说，其实还有一种方法，就是把那个次重要按钮变成一个链接的样子。嘿，好主意啊。（很多产品的登录界面，都把忘记密码按钮变成一个链接:) 聪明。）他画了一个图出来： [...]
sume
2006-10-14 15:32
我也最喜欢MS的那个 旗帜~
allwiki
2006-10-16 14:54
对于案例一、二、四、五，我非常赞同
对于案例三，我有疑问——这个小图标极大的破坏了页面视觉效果。如果在正文的文字里面大量夹杂这个东西，你会不会感到干扰？我的做法（http://www.allwiki.com）是把外部链接做成了另外颜色，用户也许可能会点进去感到缓慢，但这个学习代价不高。
对于案例六、七，可以说仁者见仁了，应该重点考察该应用所面向用户群的喜好特征，对于少儿、青年或者男女来说，都存在明显的喜好差别
Calon
2006-10-18 8:56
那个 song taste 的界面和图标都是用的 last.fm 改版之前的，第一印象就不好了。
另外推荐 listible 的登录/注册页面
http://www.listible.com/login
vsam
2006-10-19 0:37
找了好久这样的文章，找到了，不错，只是内容少了点，如果再多点就好了，最好整个界面TOP100这样的文章出来。
幻大灰
2006-10-19 13:48
to Shirley：有时候，哪怕是最诚执的直接赞叹，也被误认为是无由来的插脚印。下次我是不是该说“up!“呀 ^-^
Anonymous
2006-10-31 11:53
什么样的界面算是好界面－7个案例
案例1：Feedburner的注册页面
你看出哪一点好来了么？－－按钮。是的。两个按钮，一大一小。很容易注意到大的这个，略过小的那个，快速完成点击注册。理论上，我可以用Whitney的可用…
wangyaya
2007-09-21 0:11
hehe,长见识哩！
Phantom of Ash » 什么样的界面算是好界面－7个案例
2007-10-22 20:22
[...] Link to 油茶研究会 » Blog Archive » 什么样的界面算是好界面－7个案例 [...]
大漠沙尘 » links for 2006-10-22
2007-12-17 15:27
[...] 油茶研究会 » Blog Archive » 什么样的界面算是好界面－7个案例 [...]