找回密码
 注册帐号

扫一扫,访问微社区

综合新闻 窗口界面设计规范:界面关闭方式及界面叠加

9
回复
886
查看
[ 复制链接 ]
排名
1
昨日变化

8153

主题

8711

帖子

3万

积分

Rank: 16

UID
1231
好友
186
蛮牛币
12771
威望
30
注册时间
2013-7-29
在线时间
4177 小时
最后登录
2019-9-20

活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

2019-6-6 10:14:17 显示全部楼层 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
在游戏中,无论是手游/端游/主机游,窗口界面的数量都十分巨大,上一期,网易游戏学院推送了窗口界面的类型以及交互设计的规范:《如何做好窗口界面的交互设计?你需要了解这些规范
本次,网易游戏用户研究中心将继续和大家一起探讨窗口界面关闭方式,以及如何处理界面叠加。
本文选自网易游戏研发系列丛书——《大巧不工:用户体验设计法则》
一、窗口界面关闭方式
每打开一个新界面,都意味着需要有关闭方式来将其关闭,保证玩家在不同的界面之间进行自由地切换。一般情况下,全系统要对关闭方式进行统一规划,这包括:
a)位置统一
按钮的位置统一在界面的某个部位,不可以忽左忽右、忽上忽下;
b)样式统一
通用关闭按钮的尺寸、大小、外观应保持始终一致,除少数需要特殊做表现的界面可以允许稍微不同。同时,按钮的样式要符合玩家的通用认知:如关闭使用叉号,返回使用向左箭头符号;
c)逻辑统一
使用返回或者关闭,应在全系统内进行统一逻辑;除特殊需求外,切忌部分界面使用返回、部分界面使用关闭;
d)特殊关闭方式特殊处理
如果使用手势、3D touch、重力感应、声音输入等特殊关闭方式,必须谨慎使用,并且提供明确新手引导确保玩家学会。
游戏内常用的关闭方式有以下几种:
1)关闭按钮
最常用的关闭方式,除非有明确的设计目的,一般情况下都放置在右上角。设计时要保证比较好点击的相应区域。图标设计一般为叉号,若使用其他符号,需保证玩家易于理解。窗口界面、全屏界面、伪窗口界面中都可以使用。
关闭按钮
2)返回按钮
此为iOS应用自带关闭方式,用在有明显上下层级关系的界面中。使用时一般放置在界面的左上角,少数情况会放在右上角。GUI设计时采用的图标应是向左的按钮。
此种关闭类型通常情况下只适用于全屏或者伪窗口界面,窗口界面因其界面形式灵活,比较少使用到。
通常情况下,在界面数量不多的休闲、MOBA、卡牌等游戏中比较适用,但在比较复杂的大型MMO游戏中,因其界面信息量大、层级深,此种关闭方式会让玩家经过多次点击才能回到主界面,不建议使用。
返回按钮
3)通用按钮
许多反馈界面中,会采用通用按钮作为关闭按钮来关闭界面,但这种方式因为界面布局的原因,比较少会作为通用的方式去使用
通用按钮
4)二次确认窗
通常情况下,二次确认窗因为其本身选项中就带有取消操作,因此允许不显示关闭按钮。但是,如果提供给玩家的选项中并无取消一类的操作的话,则必须要有关闭按钮或者其他系统默认存在的关闭方式。
5)点击界面外空白区域关闭
点击界面外空白区域关闭界面也是一种较为常用的关闭方式,其在游戏中的应用主要有两种方式
a)只用于反馈提示类信息的关闭,例如升级提示、促销活动等;该类提示不仔细阅读也对游戏进程无影响,方便玩家快速跳过;
b)运用于游戏全局的情况,比如《乱斗西游》。如果需要在游戏全局中使用,必须全系统通用,即所有弹出界面都可以通过点击界面外空白区域关闭界面,并且在前期新手中充分做好引导教学,确保玩家能够发现并熟悉这一套操作流程。也可以在界面底部等不重要区域使用文字提示告知玩家,如“点击界面外空白关闭”。
点击界面空白区域
6)其他手势、3Dtouch、重力感应的方式
原则上不建议使用这些方式作为系统主要的关闭返回方式,这类操作具有隐蔽性,玩家比较难意识到。只建议可以作为少量系统的亮点或辅助方式进行。
如果要使用这种特殊的操作关闭返回方式,必须有非常充分的新手指引,保证玩家能够100%学会关闭界面的方式,并且不会与系统其他的手势、3Dtouch、重力感应的交互形式发生冲突;或提供其他明显的返回关闭方式(如关闭按钮),这些特殊操作只作为快捷方式补充。
二、界面叠加
界面与界面之间,往往都会出现重叠的情况。如何处理叠加层级,需要在设计中期就进行精心规划设计。
1)界面归类分层
在设计界面达到一定体量的时候,需要进行大致的归类。
通常情况下,在一般MMORPG游戏中,界面可以归为以下几个大类别:
公告提示:用以显示全服的公告、个人的提示、战斗力变化等信息;
状态提示:用以显示各种反馈类的提示,如任务完成、等级提升等;
基础界面:包含一二三级界面,各种确认弹窗,成就提示反馈等;
场景提示:挂接在场景中的反馈提示,如掉血跳字;经验获取跳字、自动寻路标识等。
界面分类
这四大类型界面,位于顶层的通常是公告提示,次一层的是状态提示,接下来是基础界面,最后是场景提示。
当这些界面元素出现的时候,公告提示始终位于最顶层,会盖住等级提升等状态反馈,而等级提升又会覆盖基础界面,基础界面又会覆盖场景提示。(注:本文以常见的MMORPG类型游戏为例进行讨论。其他类型游戏信息量没有这么大的情况下,可自行进行调整设计)
2)每一层的信息处理
根据上文的思路,我们已经对界面进行了4类分层,接下来我们就需要处理每一层内的信息。
首先,我们应当尽量保证,单层内的信息尽量少出现重叠,如在公告提示层,应尽量避免个人信息、全服公告、走马灯公告弹出的时候相互重叠。
如果单层内会有界面重叠的情况,需要有覆盖规则。比如在基础界面层中,三级弹窗应该覆盖在二级面板上,二级面板应该覆盖在一级界面上;并且处理好每一层与下层的关系,如是否叠加黑色半透明底,多层半透明底出现的时候是否只显示最上层一个。
1.jpg
3)跨层信息处理
将所有层级的信息叠加在一起,查看是否会出现重叠的状况,尤其是频繁弹出或长时间持续出现的信息:比如走马灯公告的弹出位置是否会干扰到通用界面上的信息显示;个人信息反馈是否会遮挡自动寻路状态等。
尽量把长时间持续出现的信息(如走马灯、自动寻路等)与其他关键信息错开,放置在界面上比较次要的位置上。尤其要考虑到玩家在进行紧张战斗时的操作体验。
4)结合动态信息进行考虑
部分信息会涉及到动效或动画,比如个人信息弹出的时候有弹出动画,要充分考虑动画弹出的位置、播放次序等问题
a)动画弹出的时候,是否会发生位移,位移后是否会遮挡其他关键信息;
b)同一位置短时间内弹出多个动画时应如何处理?(播放最新的/次序播放/忽略播放n秒以前的;)
c)连续多条动画之间是否有衔接(多条走马灯播放时是否需要重新呼出公告栏等。)
以上,就为我们总结的窗口界面关闭方式及界面层级处理规范,在实际的操作中,不同目的的界面布局以不同的特征为首要目标,不同形式的界面可以用不同的方法来实现。希望能给大家一点启发。

回复

使用道具 举报

5熟悉之中
574/1000
排名
4640
昨日变化

1

主题

64

帖子

574

积分

Rank: 5Rank: 5

UID
259658
好友
0
蛮牛币
1270
威望
0
注册时间
2017-12-14
在线时间
193 小时
最后登录
2019-9-21
2019-6-6 10:36:27 显示全部楼层
不错不错  界面交互很重要
回复 支持 反对

使用道具 举报

4四处流浪
439/500
排名
10344
昨日变化

1

主题

210

帖子

439

积分

Rank: 4

UID
248391
好友
0
蛮牛币
368
威望
0
注册时间
2017-10-12
在线时间
118 小时
最后登录
2019-9-19
2019-6-6 10:42:49 显示全部楼层
希望能给大家一点启发。
回复 支持 反对

使用道具 举报

4四处流浪
403/500
排名
7135
昨日变化

0

主题

94

帖子

403

积分

Rank: 4

UID
2131
好友
1
蛮牛币
11
威望
0
注册时间
2013-8-16
在线时间
127 小时
最后登录
2019-9-20
2019-6-9 10:49:21 显示全部楼层
希望能给大家一点启发。
回复 支持 反对

使用道具 举报

4四处流浪
403/500
排名
7135
昨日变化

0

主题

94

帖子

403

积分

Rank: 4

UID
2131
好友
1
蛮牛币
11
威望
0
注册时间
2013-8-16
在线时间
127 小时
最后登录
2019-9-20
2019-6-9 15:01:48 显示全部楼层
希望能给大家一点启发。..
回复 支持 反对

使用道具 举报

7日久生情
2232/5000
排名
4093
昨日变化

0

主题

1491

帖子

2232

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
254705
好友
1
蛮牛币
2017
威望
0
注册时间
2017-11-16
在线时间
379 小时
最后登录
2019-9-20
2019-6-10 08:24:20 显示全部楼层
66666666666666666666666666
回复 支持 反对

使用道具 举报

4四处流浪
326/500
排名
17817
昨日变化

0

主题

137

帖子

326

积分

Rank: 4

UID
184198
好友
0
蛮牛币
455
威望
0
注册时间
2016-11-16
在线时间
154 小时
最后登录
2019-9-3
2019-6-10 10:23:22 显示全部楼层
感谢分享!
回复

使用道具 举报

7日久生情
2232/5000
排名
4093
昨日变化

0

主题

1491

帖子

2232

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
254705
好友
1
蛮牛币
2017
威望
0
注册时间
2017-11-16
在线时间
379 小时
最后登录
2019-9-20
2019-6-11 08:36:26 显示全部楼层
6666666666666666666666666666666
回复 支持 反对

使用道具 举报

8常驻蛮牛
5730/10000
排名
1669
昨日变化

0

主题

4093

帖子

5730

积分

Rank: 8Rank: 8

UID
185339
好友
1
蛮牛币
3548
威望
0
注册时间
2016-11-20
在线时间
859 小时
最后登录
2019-9-20
2019-6-11 09:25:11 显示全部楼层
{:92:}
回复

使用道具 举报

7日久生情
2703/5000
排名
2252
昨日变化

0

主题

1243

帖子

2703

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
163777
好友
2
蛮牛币
1223
威望
0
注册时间
2017-2-27
在线时间
836 小时
最后登录
2019-9-20
2019-6-11 11:16:26 显示全部楼层
感谢分享!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则