《人机界面实例》由会员分享,可在线阅读,更多相关《人机界面实例(7页珍藏版)》请在金锄头文库上搜索。
1、人机界面案例分析案例一:美眉梦工场战斗系统全新界面解析梦幻的少女养成系统+可爱的战棋式战斗系统,是美眉梦工场的两大主线,也赋予了萌美又另类的独特气质!据悉,在此次全面翻新的界面改造中,战斗系统的转变尤其令人欣喜!现在,让我们一起进入内部测试服,耳目一新的超战斗系统界面一定会让你分外钟爱!新界面战斗入口进入美眉梦工场主界面,即可点击“战斗”进行相应操作。通过与既有界面战斗入口的对比,新界面除了极大限度的整合以前略显分散的功能按钮和系统入口之外,更添加了极富创意又新颖可爱的超小图标!战斗系统界面在既有界面点击“战斗”后,直接对“战斗任务、学院副本、英雄祭”三项进行选择,便可加入或创建房间开始战斗。
2、界面改革后,点击“战斗”将跳转到全新的战斗系统界面,它有效的将多项与战斗相关的系统、功能的入口集中在一起!战斗操作更直观,一个界面全搞定!美眉梦工场学院战斗全新的美眉梦工场战斗系统界面,各类建筑选型各异且感十足,点击不同的建筑,就能进入相应界面!“战斗大厅”能自由组队并完成战斗任务,“学院副本”以学院为单位来组队开展强力副本的战斗,学院战争同样是以学院为单位来进行的,是学院之间的激情战斗!34-*舸ar战斗用品界面除了任务和学院的战斗之外,只要与战斗系统相关的,都可以从战斗系统界面进入。点击“战斗用品”建筑,即可进入商店购卖魔石、药剂、装备等战斗用品。当“英雄祭”活动开启之时,只需点击相应建筑
3、就能立即参加!总的来说,这个游戏的界面特点是气十足,十分吸引玩家的眼球。案例2:的注册页面GiveyourfeecJadcfressEflliralilliLdTpidfrrfilyyocrfrfwf-sedh仲4CC:hjeM.Ai.kh?ss:加feedtJUrHef.COm/fhc!交UemIswWpec繼Wywnew论iActivateFe&dwCreateanaccounttoclaimyourfe&d(orsigninifyoualreadyhaveone-):CwccimdrwflK4iv1Media848.coa特点:按钮。是的。两个按钮,一大一小。很容易注意到大的这个,略过小
4、的那个,快速完成点击注册。理论上,我可以用的可用性的模型来解释它的优点就是:高的效率()。很少看到把同级别的两个按钮做成高度不一样的,一般都是一个样式控制所有按钮的高度。于是我暗自猜度了一下这位设计师这样做的意图。我想他她不会是因为懂得了可用性的理论,知道追求用户操作的效率,于是就理所当然的在这个细节上动了下手脚。可能原因是这样:他/她发现那个取消注册的按钮(五个单词)按正常的样式,比激活注册的按钮(两个单词)还要宽,更抢眼。而这里的目标是鼓励用户完成注册,所以要尽量的排除正常注册流程的干扰。于是,他她有了这个主意。案例3:的注册页面:会员ID密码B6linker盘蠱见面的新理由会员ID:诸埴
5、写4-1&-r乎符化育燃的用登陆填写注班拮息=1.葩写信息2激活手机服务会员名优点:处于哪个步骤交代很清晰。的设计者当然知道交代当前位置是注册页面。只是,她更清晰的交代了注册有几个步骤,而当前正处于哪一步。理论上,符合可用性当中的容易学习性。为了鼓励用户完成注册,设计师用这个细节的设计来解除用户的一个担忧无数个麻烦的步骤,漫长的注册过程。在暗示,看,很容易的,注册一下只需要两步!案例4:维基百科的外部链接 1990:EnyisiQninginfofiation(pictures,ofnounJ.ISBN0-9613921.:!-8 1997:VisualExplanations(pleture
6、s-ofverbs).ISBN09613921-5-6Chapter-2isalbopublishedVisual&Statisiica!Thinking:Dispiacontains-.e-xtensiyeanalysiofDrJohnSnowsinterventionintothetof1986. 2003:PowerPoint/sevil.Articlein.Wired,2. .2004:Tf-ie-CagnitivePQVjerPoiRt.ISBN0-9613921-5-0Theog 2006:Evidenceevidence).ISBN你能看出这些蓝色的链接里面哪个是网站内部链接,而
7、哪个是外部链接么?是的,那个尾巴上有个小箭头图标()的那个!你一下子就找到了:)这就是图标的作用之一视觉锚。那么,为什么要用这个图标了?你的点击链接的经验应该可以回答这个问题。这个网站还有很多内容你想阅读,不想在本页跳转到其他网站去。小图标告诉你,这是外部的链接,你还想看的话,就很清楚的知道自己要选择打开新窗口的方式了。如果没有这个图标了?那你可以点了之后页面一下变白了,然后很紧急的赶紧去点停止按钮或者后退按钮。这个设计细节的理论依据是预防错误。案例5:必要的文字注释0SearchsoritesToolsHelpmuxstudy-MicrosottInterneixplorerFavorite
8、s竟咸注册Taste(DanigirlQ帆苑込3珂辭不字符我询:秤液孑匸舒八我门也觉稈注册“登录环填透r临的诃亦帼扯.苗录时用无画认憾诵協SGn叮綽期不绪开松的z晶自己设一于密码鉛自己聲Y常号:石时陛临斉要用它莹录,诸便用苑丈宇母、蒂号玆数号有时候为了追求界面的一致性,而愚蠢的执行一致性。于是按钮都一个高度,于是工具栏的图标都清一色的是光溜溜的图标。但是你的用户能清晰的一眼识别出每个图标的意思么?是的,像主页,停止,刷新,还有邮件,用户资料之类的获得通用的图形,不必要加文字说明了。但是你画了个五角星扔在上面,天晓得代表什么?我想起了我们的国旗,你想起了海边的贝壳。你这么独特的图形,那就给出文字
9、解释,不要增加用户的操作负荷,总指望他们去拖动鼠标,然后看慢慢浮出来的提示文字。另外,那个放大镜是什么意思?放大观看?还是搜索?不加文字你能肯定么?案例:的注册页面(D詐会贾ifeS養计萍明又是注册,但各有优点。看看的优点是什么?左边,那一句话:我们也觉得注册、登录麻烦透了。嘿现在你有什么感觉?多亲切的一句话,一下子就把你跟网站后面的那群人距离拉近了,你对注册的愤慨消失了,你甚至开始同情他们了:那我就给你们点面子吧。文字语言的风格,对用户的影响有多大?界面友好,品牌塑造等等,略去一万字。这里要说这个界面的另一个优点还是左边。图片。这个图片放了干吗?会增加页面下载速度的!效率,你不是说效率么?:
10、)注意,所有的因素都是互相影响的,要求得平衡。图片几百放这里当然不合适,但是十几还是可以接受的。那么为什么一定要放?看看图片里面两个非常有性格的头像,一个可爱,一个酷。女孩男孩们会立刻有一种表现欲望,等我注册了,要弄一张比他们更可爱更酷的帅帅小头像,哼哼现在,你开始充满兴趣的进行注册啦案例7最常见的视窗使用过很多浏览器,在展示页面正在下载时,上有一个小点画圈的动画,腾讯好像用了一个进度条,也有一个小动画。但是印象最深的还是的视窗。状态栏上的确有显示,但是,我盯着白屏幕很无聊啊。的小圈也好,还是进度条也好,不好,只会让我想起机械科学的算法语言。还是这个颜色丰富的小视窗动画最好。这个动画的应用在可用性的理论上,叫做有效