UX交互设计(五)信息的关联和整合

  游戏策划中,UX交互设计是非常重要的基础内容,是后续深入策划涉及的基石。所以学好UX交互是游戏策划的一项基本功,那么有哪些需要注意的地方?资深游戏策划云飞向我们分享了他对于UX交互的一些独到理解,让我们一起来学习一下吧。

  交互其实是专业性很强的职业,对策划和视觉美术都要有一定的了解,且最好有一方的专长,所以我只是班门弄斧,十分浅的来聊聊交互。

  信息的关联和整合,信息的整合方式

  这里用式神界面的信息作为实例。

博思游戏策划

  这个界面是选择任意式神之后点击详情可以看到的信息,还有一些第一个界面没有展示的信息(比如觉醒和御魂)。

  这些信息是基于什么考量怎样排布的呢?首先我们看到的是大体的信息布局:左边为式神模型展示,右边为功能性信息展示,最右侧边栏。

  然后反推:一个式神需要哪些信息?

  玩家最关心的:形象,稀有度,星级,名字、养成。

  属性相关最主要的内容:星级,等级,各种总属性,技能。

  次要属性:御魂属性、御魂套装效果、觉醒与否

  人物IP相关:CV、传记、皮肤、常用与否、手账

  在大区域定下来的前提下,哪些信息是和展示相关的?哪些信息是和属性相关的?很明显就可以想到现在在这种布局。

  但是也有边缘徘徊的属性,比如星级、稀有度和名字、养成按钮,同样的,这一个界面不可能将所有信息都塞在里面(特别是将较大空间留给了展示区域),比如技能的具体说明,具体的御魂。

  那么,这个界面最重要,或者说要占到最大区域的区块是什么?是展示区域,那么可以归为属性和展示的重要信息则统一放到展示区域:稀有度、名字、养成、星级。其余非可展示属性则置于属性区域。

  然后还有一些信息塞不下怎么办?或者说不希望影响界面效果怎么办?整合,和其他的信息整合到一起:觉醒与否通过星级勾玉的颜色表示,御魂的属性加成通过X+X的形式表示,技能等级通过icon+角标表示。

  而再多的信息,真放不下了,通过弹窗提示和切换页签表示。

  而因为左边的展示区域是最重要的,所以左边保持不变,切换右边的信息。

  而相关联的信息,尽量放在一起,比如养成和星级(当然手账和CV跟星级没什么关系,稀有度和名字,常用与否和是否上锁,可以看到阴阳师也并没有将整个左边的页面信息关联的特别紧密,这也是阴阳师可以改进的地方。

  最后,既然刚刚都说到了,期望在有限的信息区域内展现更多的信息,同时又不至于破坏整体的视觉效果,怎么去把这样的信息整合到一起呢?

  再看两个东西。

博思游戏策划

  先看头像框:并不大的范围其实塞了相当多的信息:等级、星级、稀有度、觉醒与否、是否常用、是否上锁、乃至皮肤、以及头像。

  怎么做到的呢?先看明显的:大的两个角标、底部的星级、以及左边的皮肤名。

  等级和是否上锁使用呢两个角标,而星级使用了底部信息栏。

  然后,底框颜色展示稀有度,星级勾玉颜色展示是否觉醒,等级角标的底框展示是否常用,头像的变化及左边名字展示皮肤。

  因为阴阳师是将右边放了较大的空间给模型,所以名字放在了右边,这样头像格子里可以省一点空间出来。

  就这样,通过各种结合及一个原件反复利用的方式,用一个头像icon表示了相当多的信息,这一点不得不说是十分牛逼的。

  最后看一下这个界面的1御魂快捷入口。

  因为后期玩家们的培养重点转变成了御魂而非式神本身,所以阴阳师在列表界面加入了一个御魂快捷入口,同时这个入口还通过形状及图形的方式告诉你一些基本信息:御魂是否都带了,有无四件套属性,对御魂这样一个复杂的功能来说,这也是一个很好的精简整合方式了。

  下期,云飞将向我们继续分享关于UX交互设计中的操作步骤次数及单次操作复杂程度,博思将与你一起学习,一起成长。

报名试听

咨询热线

400-720-6969

咨询时间

10:00-23:00

上海博思堂职业技能培训学校  版权所有 沪ICP备11046010号-3  咨询热线:400-720-6969  上海地址:上海市宝山区沪太路2695号A29栋
上海游戏培训 | 游戏美术 | 游戏学校 | 手机游戏开发 | unity3d培训学校 | 游戏原画 | 3d美术 | 3dmax | 动漫绘画 | 游戏策划 | 网站地图

免费领取课程资料