手游操作按钮交互设计(二)

1465天前
转载文章 / UI / 交互/UE (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
13325
0
1
 | 
作者:Lwanna7

“ 如何去做操作按钮交互设计?将从以下三个方面进行说明:

1、页面布局

2、交互细化

3、中级、高级用户优化 ”



01

页面布局


1. 搞清楚需求!需求!需求!

    一切抛开需求的设计都是耍流氓,首先根据需求,把操作按钮种类进行分类。理清楚需求中的按钮模块大致分清按钮要分为几个区域,预留出对应的信息区域。

    下图是以吃鸡游戏的布局图,吃鸡算是游戏中较为复杂的一类了,不仅有常规的移动菜单,还额外分为信息区1、2、3、4等等


1666504767682763_1.png


    假如现在需要做一款游戏,操作区的需求简单整理了一下,如下:需要菜单区、信息区、伙伴区、移动、玩家状态、操作区;


操作区又包含:普通攻击(1)、主动技能(1-3)、大招(1)、道具(0-1),大致分为以下几个区域:


1666504767964687_0.png


    以操作区为例,需要设计当前区域的操作按钮,根据评估的按钮权重设计对应的位置,按钮评估大致分为三个维度:出现频率、按键频率、错误成本


1666504767427550_3.png


·出现频率:指在不同情况下,是否会显示,拿【攻击】举例,无论何种情况下,攻击一定会出现,因此为5;而道具玩家未拥有时就不显示,玩家购买道具的场景也不常见,因此为2;

·按键频率:指在游戏过程中此按钮在同一时间段的按键频次,【攻击】为各种场景均会使用的按键,因此也为5;大招前期无法解锁,且CD较长,因此为3;

·关键性:指此按钮在游戏中的重要性,与不小心按错时需要付出的成本,数值越大,越应该放在舒适且不易误触的位置;例如大招只会在关键时刻使用,CD一般比较长,因此各种频率会稍低,但考虑到大招的关键属性,若释放失败会带给玩家更大的挫败感,因此仍旧是放在高效区;


    根据游戏情况,大致把使用权重更高的按钮放在高效区,中等的放在中效区,较低的按钮放在低效区;


2. 使用习惯用法范式界面

    习惯用法即不关注技术或直觉,而是通过学习简单、非隐喻的视角或者行为习惯用法来完成目标和任务,例如windows中,窗口的右上角就都是【X】,不论我们使用什么软件,都可以不用看屏幕完成上述操作,游戏也一样,明确当前做的游戏类型后,在没有完全跳脱出游戏模式框架前,采用玩家已经默认的操作模式。


1666504767761603_4.png


   假设要做一款moba,包含攻击按钮与技能按钮,这和王者荣耀的操作有一定的相似,由于目前的市场几乎是王者荣耀垄断的市场,巨量的玩家已经在王者荣耀中养成了习惯,王者的布局几乎已经成为了moba的默认标准,符合游戏模式框架的东西首先要进行套用,例如攻击在右下角,其他技能以环装围绕攻击,若彻底反过来,玩家需要更高的学习成本,直接去冲击玩家的操作习惯,很容易迎来玩家的一句“XX游戏”。

设计时的重要程度:习惯 > 按键权重


1666504768457182_5.png


    再举个例子,游戏中一般会把自己的生命值放在左上角,玩家已经有相关的意识了,如果把BOSS的血放在此位置,会很容易让玩家第一意识反应错误导致失误引起的挫败感。


1666504768179817_6.png


3. 按钮的人机布局

    通过第一步得到按钮的分类与权重,第二步得到的大致布局,即可根据人机图优化按钮的位置,大概的舒适区如下图,即为146px-585px之间,所有操作按钮尽量满足在此操作区内。


1666499141359867_3.png


    权重相近的按钮,使用频率更低的放在更上方,可相对减少误触的概率。例如,大招位置在小技能的上方,但均在高效区中


1666504768762915_8.png



02

按钮交互


1. 交互基础逻辑

    首先要弄清楚按钮的功能、使用场景、使用状态等


1666504769265478_9.png


    以范围型技能为例设计:


16665047698000_10.png


1.拖动

拖动按钮处出现摇杆圆盘、人物周围出现技能范围圆圈、人物脚底出现道具范围法阵

·摇杆中心为按钮偏上,防止无法拖动至下方施法,摇杆默认出现在圆盘中心,玩家拖动按钮处摇杆,可控制技能方向


2.点击

手指按下,显示UI,若不移动摇杆,则不施法

·若附近有可以适用目标,如敌人,点击后自动选中目标,并对目标范围使用当前点击道具


3.长按

·长按技能图标展示技能tips,tips右下角自动跟随技能按钮左上角位置,松开手后不触发技能


4.取消

·手指拖动至【x】,范围变为取消状态,松开手指触发取消


5.特殊状态

·state1:普通状态,点击/拖动技能时,会进入如上攻击状态

·state2:未装备技能,不展示

·state3:失效态,无MP或角色死亡,置灰,点击提示toast,“XXXXXX不足”“角色已死亡”

·state4:冷却中,点击提示toast:“技能名字冷却中”

·state5:硬直中,点击无反应(若在硬直结束前的0.2s前按了按键,硬直结束后自动释放最后一次按下的技能)


166650476981513_11.png


以上为按钮的基础交互,手游与主机或pc游戏不同,手游的精细操作难度更高,按钮的场景判断等预测行为可有效优化玩家的体验;


【若附近有可以适用目标,如敌人,点击后自动选中目标,并对目标范围使用当前点击道具】

【可适用目标】种类多的情况如何判断?是先攻击小兵还是先攻击boss?若有多个小兵,优先攻击血多的还是血少的?若小兵都满血,先攻击近的还是远的?若有精细操作需求,是否应该继续添加切换目标操作?因此需要针对大多数正收益的情况对按钮状态做出判断。


1666504769254347_12.png


2. 交互反馈

    丰富的视觉反馈是操作成功的关键回应,主要的视角反馈为两种:

    1.按下成功后的反馈

    2.按钮状态变化时的反馈,例如技能CD转好


    如下,攻击按下后的漾开的波纹,技能释放成功后的特效,技能CD转好之后的特效,由于手机屏幕的物理特性,没有手柄的物理强反馈,因此需要在视觉上再次加强表现,以强化玩家成功按下按钮后的感觉。


1666504770601406_13.gif



03

为中高级用户设计


1. 中级用户


    大多数用户即非新手又非专家,而是中级用户,新手玩家在游戏初期,有相对大量的新游戏内容,在学习新内容和提高的过程是一种愉悦状态,在不久后,大部分玩家就进入了中级用户的状态。


1666504770356149_14.png


    假如玩家在游戏的过程中无法通关,原因是小怪攻击力太高了,我需要优先攻击小怪,再消灭boss,那么针对这些中级用户,就需要设计一个优先攻击小怪的按钮。


1666504770679374_15.png


    继续以王者荣耀为例 ,此处添加了两个按钮(补刀、推塔),这两处按钮解决了用户无法像pc用户一样使用鼠标进行精准操作,在一定程度上满足了用户的特殊需求。


1666504770842283_16.png


2. 高级用户、特殊用户


    玩家都是聪明且忙碌的人,部分玩家可以使用更加复杂的设置来让自己达到更高的操作效率,此处的设计一般无法在设计初期完成,就如吃鸡,也是在版本一代代更迭中逐渐优化,设计师可能在最开始也无法想象用六个手指去玩吃鸡。


1666504771222032_17.png


那么怎么针对中高级玩家做设计呢?

    先说结论:不存在通用的按钮布局方案;可以从以下几个方面去做针对性设计。

1、不同尺寸的最佳适配方案有所不同

2、以推荐形式为玩家提供方案,在默认方案的基础增加其他方案

3、收集各路大神的方案,让玩家在大神方案的基础微调适合自己的手机和手指

4、若为跨区域游戏,需要针对不同地域做出微调方案


1666504771556761_18.png


结语:操作按钮作为一款手游的核心,需要不断收集用户信息来逐渐优化,随着设备与玩家的变迁,按钮布局也会有着对应的变化。

一只交互设计师,欢迎交流。

声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-交互/UE
13325
0
1
标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消