人机界面案例分析
案例一：《美眉梦工场》战斗系统全新界面解析
梦幻的少女养成系统+可爱的战棋式战斗系统，是《美眉梦工场》的两大主线，也赋予了MM 萌美又另类的独特气质！据悉，在此次全面翻新的界面改造中，战斗系统的转变尤其令人欣喜！现在，让我们一起进入内部测试服，耳目一新的超Q 战斗系统界面一定会让你分外钟爱！
新界面战斗入口
既有界面战斗入口
进入《美眉梦工场》主界面，即可点击“战斗”进行相应操作。通过与既有界面战斗入口的对比，新界面除了极大限度的整合以前略显分散的功能按钮和系统入口之外，更添加了极富创意又新颖可爱的超Q 小图标！
战斗系统界面
在既有界面点击“战斗”后，直接对“战斗任务、学院副本、英雄祭”三项进行选择，便可加入或创建房间开始战斗。界面改革后，点击“战斗”将跳转到全新的战斗系统界面，它有效的将多项与战斗相关的系统、功能的入口集中在一起！战斗操作更直观，一个界面全搞定！
《美眉梦工场》学院战斗
全新的《美眉梦工场》战斗系统界面，各类建筑选型各异且Q 感十足，点击不同的建筑，就能进入相应界面！“战斗大厅”能自由组队并完成战斗任务，“学院副本”以学院为单位来组队开展强力副本BOSS 的PVE 战斗，学院战争同样是以学院为单位来进行的，是学院之间的激情PVP 战斗！
战斗用品界面
除了任务和学院的战斗之外，只要与战斗系统相关的，都可以从战斗系统界面进入。点击“战斗用品”建筑，即可进入商店购卖魔石、药剂、装备等战斗用品。当“英雄祭”活动开启之时，只需点击相应建筑就能立即参加！
总的来说，这个游戏的界面特点是Q 气十足，十分吸引玩家的眼球。
案例2：Feedburner 的注册页面
特点：按钮。是的。两个按钮，一大一小。很容易注意到大的这个，略过小的那个，快速完成点击注册。理论上，我可以用Whitney 的可用性(usability)的5e 模型来解释它的优点就是：高的效率（efficient ）。
很少看到把同级别的两个按钮做成高度不一样的，一般都是一个css 样式控制所有按钮的高度。于是我暗自猜度了一下这位UI 设计师这样做的意图。我想他/她不会是因为懂得了可用性的理论，知道追求用户操作的效率，于是就理所当然的在这个细节上动了下手脚。可能原因是这样：他/她发现那个取消注册的按钮（五个单词）按正常的css 样式，比激活注册的按钮（两个单词）还要宽，更抢眼。而这里UI 的目标是鼓励用户完成注册，所以要尽量的排除正常注册流程的干扰。于是，他/她有了这个主意。。
案例3：Belinker 的注册页面
优点：处于哪个步骤交代很清晰。Belinker 的设计者当然知道交代当前位置是注册页面。只是，她更清晰的交代了注册有几个步骤，而当前正处于哪一步。理论上，符合可用性5e 当中的容易学习性(Easy to learn)。
为了鼓励用户完成注册，设计师用这个细节的设计来解除用户的一个担忧－－无数个麻烦的步骤，漫长的注册过程。Belinker 在暗示，看，很容易的，注册一下只需要两步！
案例4：维基百科的外部链接
你能看出这些蓝色的链接里面哪个是网站内部链接，而哪个是外部链接么？是的，那个尾巴上有个小箭头图标（Icon ）的那个！你一下子就找到了：） 这就是图标的作用之一－－视觉锚。
那么，为什么要用这个图标了？你的点击链接的经验应该可以回答这个问题。这个网站还有很多内容你想阅读，不想在本页跳转到其他网站去。小图标告诉你，这是外部的链接， 你还想看的话，就很清楚的知道自己要选择打开新窗口的方式了。
如果没有这个图标了？那你可以点了之后页面一下变白了，然后很紧急的赶紧去点停止按钮或者后退按钮。这个设计细节的理论依据是预防错误。
案例5：必要的文字注释
有时候为了追求界面的一致性，而愚蠢的执行一致性。于是按钮都一个高度，于是工具栏的图标都清一色的是光溜溜的图标。但是你的用户能清晰的一眼识别出每个图标的意思么？是的，像主页，停止，刷新，还有邮件，用户资料之类的获得通用的图形，不必要加文字说明了。但是你画了个五角星扔在上面，天晓得代表什么？我想起了我们的国旗，你想起了海边的贝壳。。你这么独特的图形，那就给出文字解释，不要增加用户的操作负荷，总指望他们去拖动鼠标，然后看慢慢浮出来的提示文字。另外，那个放大镜是什么意思？放大观看？还是搜索？不加文字你能肯定么？
案例6：SongTaste 的注册页面
又是注册，但各有优点。看看SongTaste 的优点是什么？左边，那一句话：我们也觉得注册、登录麻烦透了。嘿～现在你有什么感觉？多亲切的一句话，一下子就把你跟网站后面的那群人距离拉近了，你对注册的愤慨消失了，你甚至开始同
情他们了：那我就给你们点面子吧。
文字语言的风格，对用户的影响有多大？界面友好，品牌塑造等等，略去一万字。 这里要说这个界面的另一个优点－－还是左边。图片。这个图片放了干吗？会增加页面下载速度的！效率，你不是说效率么？：）注意，所有的因素都是互相影响的，要求得平衡。图片几百K 放这里当然不合适，但是十几K 还是可以接受的。那么为什么一定要放？看看图片里面两个非常有性格的头像，一个可爱，一个酷。女孩男孩们会立刻有一种表现欲望，等我注册了，要弄一张比他们更可爱更酷的帅帅小头像，哼哼～ 现在，你开始充满兴趣的进行注册啦～
案例7：最常见的windows 视窗
使用过很多浏览器，在展示页面正在下载时，Firefox 上有一个小点画圈的动画，腾讯TT 好像用了一个进度条，Mozilla 也有一个小动画。但是印象最深的还是IE 的视窗。状态栏上的确有显示，但是，我盯着白屏幕很无聊啊。Firefox 的小圈也好，还是进度条也好，不好，只会让我想起机械科学的算法语言。还是IE 这个颜色丰富的小视窗动画最好。这个动画的应用在可用性的理论上，叫做有效(Effective)。
人机界面案例分析
案例一：《美眉梦工场》战斗系统全新界面解析
梦幻的少女养成系统+可爱的战棋式战斗系统，是《美眉梦工场》的两大主线，也赋予了MM 萌美又另类的独特气质！据悉，在此次全面翻新的界面改造中，战斗系统的转变尤其令人欣喜！现在，让我们一起进入内部测试服，耳目一新的超Q 战斗系统界面一定会让你分外钟爱！
新界面战斗入口
既有界面战斗入口
进入《美眉梦工场》主界面，即可点击“战斗”进行相应操作。通过与既有界面战斗入口的对比，新界面除了极大限度的整合以前略显分散的功能按钮和系统入口之外，更添加了极富创意又新颖可爱的超Q 小图标！
战斗系统界面
在既有界面点击“战斗”后，直接对“战斗任务、学院副本、英雄祭”三项进行选择，便可加入或创建房间开始战斗。界面改革后，点击“战斗”将跳转到全新的战斗系统界面，它有效的将多项与战斗相关的系统、功能的入口集中在一起！战斗操作更直观，一个界面全搞定！
《美眉梦工场》学院战斗
全新的《美眉梦工场》战斗系统界面，各类建筑选型各异且Q 感十足，点击不同的建筑，就能进入相应界面！“战斗大厅”能自由组队并完成战斗任务，“学院副本”以学院为单位来组队开展强力副本BOSS 的PVE 战斗，学院战争同样是以学院为单位来进行的，是学院之间的激情PVP 战斗！
战斗用品界面
除了任务和学院的战斗之外，只要与战斗系统相关的，都可以从战斗系统界面进入。点击“战斗用品”建筑，即可进入商店购卖魔石、药剂、装备等战斗用品。当“英雄祭”活动开启之时，只需点击相应建筑就能立即参加！
总的来说，这个游戏的界面特点是Q 气十足，十分吸引玩家的眼球。
案例2：Feedburner 的注册页面
特点：按钮。是的。两个按钮，一大一小。很容易注意到大的这个，略过小的那个，快速完成点击注册。理论上，我可以用Whitney 的可用性(usability)的5e 模型来解释它的优点就是：高的效率（efficient ）。
很少看到把同级别的两个按钮做成高度不一样的，一般都是一个css 样式控制所有按钮的高度。于是我暗自猜度了一下这位UI 设计师这样做的意图。我想他/她不会是因为懂得了可用性的理论，知道追求用户操作的效率，于是就理所当然的在这个细节上动了下手脚。可能原因是这样：他/她发现那个取消注册的按钮（五个单词）按正常的css 样式，比激活注册的按钮（两个单词）还要宽，更抢眼。而这里UI 的目标是鼓励用户完成注册，所以要尽量的排除正常注册流程的干扰。于是，他/她有了这个主意。。
案例3：Belinker 的注册页面
优点：处于哪个步骤交代很清晰。Belinker 的设计者当然知道交代当前位置是注册页面。只是，她更清晰的交代了注册有几个步骤，而当前正处于哪一步。理论上，符合可用性5e 当中的容易学习性(Easy to learn)。
为了鼓励用户完成注册，设计师用这个细节的设计来解除用户的一个担忧－－无数个麻烦的步骤，漫长的注册过程。Belinker 在暗示，看，很容易的，注册一下只需要两步！
案例4：维基百科的外部链接
你能看出这些蓝色的链接里面哪个是网站内部链接，而哪个是外部链接么？是的，那个尾巴上有个小箭头图标（Icon ）的那个！你一下子就找到了：） 这就是图标的作用之一－－视觉锚。
那么，为什么要用这个图标了？你的点击链接的经验应该可以回答这个问题。这个网站还有很多内容你想阅读，不想在本页跳转到其他网站去。小图标告诉你，这是外部的链接， 你还想看的话，就很清楚的知道自己要选择打开新窗口的方式了。
如果没有这个图标了？那你可以点了之后页面一下变白了，然后很紧急的赶紧去点停止按钮或者后退按钮。这个设计细节的理论依据是预防错误。
案例5：必要的文字注释
有时候为了追求界面的一致性，而愚蠢的执行一致性。于是按钮都一个高度，于是工具栏的图标都清一色的是光溜溜的图标。但是你的用户能清晰的一眼识别出每个图标的意思么？是的，像主页，停止，刷新，还有邮件，用户资料之类的获得通用的图形，不必要加文字说明了。但是你画了个五角星扔在上面，天晓得代表什么？我想起了我们的国旗，你想起了海边的贝壳。。你这么独特的图形，那就给出文字解释，不要增加用户的操作负荷，总指望他们去拖动鼠标，然后看慢慢浮出来的提示文字。另外，那个放大镜是什么意思？放大观看？还是搜索？不加文字你能肯定么？
案例6：SongTaste 的注册页面
又是注册，但各有优点。看看SongTaste 的优点是什么？左边，那一句话：我们也觉得注册、登录麻烦透了。嘿～现在你有什么感觉？多亲切的一句话，一下子就把你跟网站后面的那群人距离拉近了，你对注册的愤慨消失了，你甚至开始同
情他们了：那我就给你们点面子吧。
文字语言的风格，对用户的影响有多大？界面友好，品牌塑造等等，略去一万字。 这里要说这个界面的另一个优点－－还是左边。图片。这个图片放了干吗？会增加页面下载速度的！效率，你不是说效率么？：）注意，所有的因素都是互相影响的，要求得平衡。图片几百K 放这里当然不合适，但是十几K 还是可以接受的。那么为什么一定要放？看看图片里面两个非常有性格的头像，一个可爱，一个酷。女孩男孩们会立刻有一种表现欲望，等我注册了，要弄一张比他们更可爱更酷的帅帅小头像，哼哼～ 现在，你开始充满兴趣的进行注册啦～
案例7：最常见的windows 视窗
使用过很多浏览器，在展示页面正在下载时，Firefox 上有一个小点画圈的动画，腾讯TT 好像用了一个进度条，Mozilla 也有一个小动画。但是印象最深的还是IE 的视窗。状态栏上的确有显示，但是，我盯着白屏幕很无聊啊。Firefox 的小圈也好，还是进度条也好，不好，只会让我想起机械科学的算法语言。还是IE 这个颜色丰富的小视窗动画最好。这个动画的应用在可用性的理论上，叫做有效(Effective)。