Page 1

游戏UI体验报告

吴月 2013.12.15


说明

此报告以设计师的⾓角度,就体验过的游戏,思考游戏UI交互的特点,与其他平台 (软件、⼿手机、⺴⽹网站)交互的差异。 游戏的交互基本遵循传统交互规范,⽐比如减少输⼊入、⼀一致性、有效反馈、暗喻符 合⼼心理模型等等

但 是 …


说明

对于传统软件,⽤用户注重的是能否快速完成这个任务,结果导 向,重点在于效率、便捷。

对于游戏来说,是⼀一种娱乐,就像去KTV⼀一样,⽤用户享受的是 这个能让⼈人放松和快乐的过程⽽而不是能否快速做完这件事。所 以…


说明

所以游戏相较于其他软件来说会需要具有以下特性:

沉浸感

沉浸感带来出⾊色的体验过程。

成就感

成就感是快乐的源泉之⼀一。

全⾯面性

下⾯面会就具体特性举例说明。

⾯面对受众群体⼤大,涉及内容多的游戏特 性,有更多的服务需要提供。


沉浸感

沉浸感

游戏与传统应⽤用软件、⺴⽹网⻚页不同,需要在各种细节中将游戏内容传递给 玩家,让玩家沉浸在这个过程之中,常会表现于: 1.  游戏背景与操作界⾯面的融⼊入(安装界⾯面、等待界⾯面等) 2.  消息提⽰示与反馈 3.  操作布局 4.  ⽂文字语⾔言


沉浸感 A. 游戏背景与操作界⾯面的融⼊入 •  安装界⾯面(软件) 传统软件安装界⾯面: 1.  有固定的安装界⾯面布局结构。 2.  将安装进度数据展⽰示的过于详细。 3.  等待过程中不会过多展⽰示该软件。

软件安装界⾯面


沉浸感 A. 游戏背景与操作界⾯面的融⼊入 •  安装界⾯面(游戏) 游戏的安装界⾯面: 从安装开始就将玩家带⼊入游戏的世界,体验从⼀一⽽而终,也是⼀一致性的体现。 它在布局上和信息展⽰示上做出了与传统软件不同的变化。 ⼀一般的做法有: 1.  将⾓角⾊色或新特性等展⽰示出来。 2.  有图⽚片更迭或⿏鼠标交互反馈。

06年 劲舞团——安装等待界⾯面

洛奇——安装等待界⾯面


沉浸感 A. 游戏背景与操作界⾯面的融⼊入 •  安装界⾯面 – 补充 当然,现在也有越来越多的软件在安装时展⽰示新特性和软件预览等,安装界⾯面与软件本⾝身 界⾯面达到连贯与⼀一致性。

YY语⾳音——安装界⾯面

略微提⼀一下,天下3的安装界⾯面有详细的信息提⽰示,但在表现上略微有⼀一些⼼心理 落差^.^

天下3——安装界⾯面


沉浸感 A. 游戏背景与操作界⾯面的融⼊入 •  LOADING界⾯面 ⼀一般游戏相较于软件载⼊入进度界⾯面⽐比普通应⽤用出现的次数更多,时间更⻓长。所以游戏多 有单独的等待界⾯面,并添加⼀一些游戏元素和游戏提⽰示以免玩家过于⽆无聊。⽐比如百万亚瑟 ⺩王可以点击⾓角⾊色回应话语。 ⽽而传统应⽤用⼀一般都将loading过程减弱,不影响⽤用户的其他正常操作,⽐比如instagram 发送照⽚片时的等待,只在标题栏底下展⽰示进度。

instagram——loading界⾯面

点击 百万亚瑟⺩王—— loading界⾯面


沉浸感 B. 消息提⽰示与反馈 游戏的提⽰示与反馈形式⼀一般有多种形式:声⾳音、模态对话框、动效、与场景结合的 提⽰示、加⼊入助⼿手⾓角⾊色给予提⽰示。这些形式穿插在整个游戏体验过程中,⼒力求与游戏背 景相结合⽽而不会干扰游戏的进⾏行。 •  声⾳音 包括⾳音效、语⾳音、背景⾳音乐,⼀一般有: 1.  对于交互动作的反馈,⽐比如点击、摇动等。 2.  对于游戏内容改变的反馈,⽐比如怪物的消灭、升级等 ⽤用声⾳音作为消息提⽰示与反馈可以增加多种感官的参与度从⽽而达到较强的沉浸感。

萝⼘卜保卫战——消灭⼀一个怪物后会 有不同的⾳音效

萝⼘卜保卫战——点击⼀一个需要攻击 的物品会有不同⾳音效


沉浸感 B. 消息提⽰示与反馈 •  模态对话框 为了不打断玩家的整体任务流,许多⼆二级操作与提⽰示都会通过模态视图来展⽰示。

植物⼤大战僵⼫尸2——信息介绍⻚页

部落战争——任务指引⻚页


沉浸感 B. 消息提⽰示与反馈 •  动效 游戏界⾯面中也会⽤用动效来给出提⽰示,同样这也是基于现有“剧情”,既不打乱 进程⼜又能给出显眼的提⽰示,⼀一般⽤用于: 1.  可以点击获取的道具。 2.  需要注意(如需要保护,新增的道具或⾓角⾊色,危险的道具)。 3.  储蓄过程,即将出现。

植物⼤大战僵⼫尸2——通过闪光和滚动反 转的⾦金币提⽰示⾦金币与豌⾖豆的获得

保卫萝⼘卜——通过萝⼘卜的跳动展⽰示这是 需要保护的终点物


沉浸感 B. 消息提⽰示与反馈 •  与场景结合的提⽰示 与游戏道具的特性相结合,有⼀一定的规律性与探索性,会增强游戏的真实感。 ⽐比如在洛奇中,将⿏鼠标移到某商店⻔门⼝口的⻔门牌会显⽰示兼职信息内容,⽐比较真实的⼀一点 是,如果玩家离⻔门牌较远时,会⽤用xxx代表⽆无法看清⽂文字的效果。

洛奇——某商店⻔门⼝口牌⼦子


沉浸感 B. 消息提⽰示与反馈 • 加⼊入助⼿手⾓角⾊色给予提⽰示 游戏与其他软件应⽤用不同,⼀一开始就有较多需要解释的东⻄西,在给予提⽰示时会多采⽤用 ⾓角⾊色助⼿手形式作为⼀一个帮助中⼼心,形象⽣生动,有时甚⾄至可以帮助推进游戏进度。 当然这个特点也会和其他⽐比如纯⽂文字提⽰示等相结合。

部落战争——新⼿手指引

植物⼤大战僵⼫尸——主⾓角提⽰示

天下3——天下精灵


沉浸感 C. 界⾯面布局不规则性 •  界⾯面布局 传统软件都有常规的布局⽅方式,使得信息传递整⻬齐与⾼高效率。

⼏几种常⻅见的⼿手机导航界⾯面

微信——⾸首⻚页标签形式


沉浸感 C. 界⾯面布局不规则性 •  界⾯面布局 游戏的标题较为明显,有明确的“进⼊入”按钮以及辅助操作按钮。相关类型操作也相对 集中,信息显⽰示与操作区域不规则但不凌乱。

标题

更新信息 与排⾏行等 操作 开始 连接与分 享

Hardest game ever——⾸首⻚页 布局结构

Room break ⾸首⻚页 布局结构


沉浸感 D. ⽂文字语⾔言 •  提⽰示语⾔言或对话更加活泼,贴近剧情

天天酷跑的加载

⽤用let's roll代替传统的start


成就感

成就感

成就感是⼀一种玩家玩游戏的动⼒力,也是快乐的源泉,游戏通常能通过以下⼏几种 形式来突出这种感觉: 1.  过程的强调 2.  排⾏行榜


成就感 A. 过程的强调 有了过程的展⽰示才有结果的成就感。所以游戏会更多的展⽰示⼀一个过程的状态。

植物⼤大战僵⼫尸-过了⼀一关后开启另 ⼀一关的过程有铺路破盅的⼀一个过程


成就感 B. 排⾏行榜 排⾏行榜是游戏特有的⼀一个界⾯面。需要注意的是: 1.  玩家关⼼心的:⾃自⼰己的排名、冠军、和⾃自⼰己关系较好的朋友的成绩。 2.  量化数据原因,可以图形化显⽰示。

Candy crush—— 1.  结合游戏地图显⽰示玩家的过关排⾏行,同时也能 突出玩家之间的差距 2. 在每局结合的战⽃斗结算界⾯面附加⼀一个⼩小框展⽰示排⾏行,显⽰示前3名(每个玩家都可以看到, 有成就感)和⾃自⼰己所在的位置

节奏⼤大师——这是个社交关联度很强的游戏,所以在⾸首⻚页即展⽰示好友排⾏行,采⽤用tab的形 式。但是形式过于单⼀一、数据形式过于呆板,⽆无法突出差距,也没有将前3名突出出来 没有强烈的成就感。 当玩了⼀一局后显⽰示超越某⼈人的形式,经常会因为所超越的⼈人不熟悉或者本⾝身排名就过低, 超越也没有成就的感觉发⽣生,从⽽而减少分享率。


全⾯面性

全⾯面性

游戏涉及的内容、信息、⾯面向群体与操作⽅方式都⽐比传统软件⼤大且多,所以通常 需要展⽰示较为全⾯面的交互: A.  颜⾊色的运⽤用 B.  多操作⽅方式的考虑 C.  板块的联动


全⾯面性 A. 颜⾊色的运⽤用 游戏中,同⼀一个种类的信息或NPC下也有很多不同的属性,需要区分的东⻄西很多,相 ⽐比传统应⽤用只有亮⾊色或灰⾊色表⽰示可否点选与是否选中,在游戏中,经常⽤用不同的颜⾊色 来表⽰示不⼀一样的属性,如怪物是否是主动攻击等等。

PPT——亮⾊色表⽰示可点选,灰⾊色表⽰示不可点 选

微信——⽆无论是新闻还有邮件或者私⼈人聊天所有的信息都 是统⼀一显⽰示,⽤用头像来区分

天下3——信息系统、NPC任务、怪物都 会运⽤用不同的颜⾊色来区分各⾃自的属性


全⾯面性 B. 多操作⽅方式的考虑 因为玩家的操作习惯与经验不同,游戏经常会提供多种操作模式,⽐比如键盘、⿏鼠标、⼿手 柄甚⾄至遥感等。不同的游戏需要根据游戏类别选择⼀一种最适合的游戏操作⽅方式,但也需 要考虑其他次需要的⽅方式。所以交互经常需要设计多种操作达成同⼀一种结果。

洛奇英雄传——作为动作类 MMORPG,⼀一上来就让玩 家选择⽤用三种⽅方式的哪⼀一种 进⾏行游戏

天下3——提供⿏鼠标模式和键盘 模式,并详细说明了适⽤用对象


全⾯面性 C. 板块的联动 游戏中许多操作都会有不同板块的联动,所以在设计⼀一个窗⼝口时要根据任务考虑到其他 窗⼝口的摆布与⼤大⼩小。 实时反馈。

喂⾷食后

天下3——喂养灵兽的任务可能会涉及到⼀一个灵兽板块 和⼀一个物品板块,尽量考虑到两个板块之间在此操作 时信息不会互相叠盖。并且能看到实时反馈。


总结 以上都是⼀一些细节例⼦子对这三个部分的阐述,总结来说,在做游戏交互 时可多考虑: •  适当打破常规,营造惊喜   •  多结合游戏背景   •  将庞⼤大的信息展⽰示准确与合理                        

谢谢 ^.^

备注: 鸣谢参考游戏: 《百万亚瑟⺩王》、《洛奇》、《洛奇英雄传》、《保卫萝⼘卜2》、《天下3》、 《植物⼤大战僵⼫尸2》、《room break》、《Hardest Game Ever》、《天天跑酷》

游戏ui体验报告  
Read more
Read more
Similar to
Popular now
Just for you