手游UI交互动作设计研究:缩放、书写、旋转

2020-01-09

上文说到手游中点击、滑动与拖拽等交互功能的设计,接下来继续讨论缩放、书写、旋转等交互动作设计方案。

缩放

缩放动作

数到这里开始逐渐出现物理世界中不常见的动作了。狸花犹豫了一下写『缩放』和『书写』的先后顺序,后来因为书写更少见于功能动作,但是很多见于花式,决定还是先喵缩放。

我们其实很少可以通过缩放的形式改变实物的大小,但这并未影响缩放动作被触摸屏用户广泛接受。缩放的实物模型可以理解为『比划』——物体『变小一点』、『变大一点』。把真实世界里对着空气比划的这个动作,落在触摸屏上,我们就得到了来自现实直觉的交互动作。

所以狸花认为如果没有特殊的必要,最好不将多指缩放、手掌缩放用于实现『使物体放大缩小』以外的交互功能。因为缩放的动作是直觉的,但到底要用几个手指,很少有用户会在物理世界里认为它们不同。

缩放是直觉的,但这些都相当不日常……

让物体『变大/变小』,可以引出它在交互中最常用的意义——展现/隐藏更多细节。狸花曾经需要解决一个『从世界地图到区域地图无缝转换』的问题,用传统的点击地图标记点切换城市的方式不够无缝转换,也不能实现地图上处处可交互。于是就做了缩放切换。这里被放大后用户视角下的『区域地图』,实际上是一张更大、更多细节的世界地图,显示在被裁切区域的一部分。

还有一种常见的用途是拉近/拉远场景,一般相机软件都会这么做。手机游戏里,如果镜头距离不是固定的,场景支持变焦或者有这个需要,比如解谜游戏观察细节,使用缩放动作可以实现比较自然的效果。


着名的the room系列,它是用点击进入更细微的场景,用『缩』的手势返回大环境

游戏里只教学过一次,但在狸花的体验来看,这组进退动作并不容易被忘记。从这个作品可以发现,缩放并不一定要成对使用。

书写

相信你的幻觉,这里没有图。

书写在移动端使用的相当少,但它是一个自然的、符合直觉的动作。只要加以提示,告诉用户『在这里可以写写画画』,它就可以成为交互动作。

一般作为交互动作,输入法不算……,的书写简化了部分功能,比如它很少识别用户写的是什么,只判断是否有书写发生在屏幕上。或是判断用户书写的轨迹与系统要求的是否一致/*狸花见过某个网站用画出指定轨迹做验证码。

进阶一点的版本是,记录用户书写的轨迹,原样生成图案。此时还是并不识别。再进阶的就是类似Google的猜画小歌这样的,以识别用户输入内容作为主要玩法,体验更接近手写输入法。

对于不识别内容的书写,通常我们会限定用户只能一笔画——因为我们需要判断书写几时结束,同时并不能判断图案几时完成。

相比于工具软件,游戏交互在设置好用、常用的简单动作之外,有机会也有必要加入一些花式的不常用动作——简单动作对应易用性,花式对应沉浸感。书写就是近年来热度颇高的花式动作。


狸花不能确定每个游戏设计书写抽卡的动机,但『阴阳师』召唤花式的热度至少对此有影响

书写的流行一部分是来源于阴阳师『画符抽卡』的现象级热潮。此外,书写作为花式动作有它显着的优势:首先,它有物理世界的直觉,当我们在游戏里创造的新世界也适用真实生活的动作,它就更容易产生沉浸感。此外它自由度高,用户行为个体差异极大,也更方便用户加入自己的独有感情。

目前来说,触摸屏手指描绘的线条通常没有压感,有些时候还会抖动和折断。而前端的花式表现,自然是越美观越好,期待有一天可以优化。

旋转

旋转动作

这个奇妙的动作在很多图上都没有,好在狸花选的题图是bing搜索结果里最长的一张,在里面竟然找到了……

旋转,对应物理世界拧旋钮的动作。

就是这个

旋钮是个很常见的东西,在机械产品上,凸起的把手和它下面的圆盘,是最明显不过的旋转暗示。物理旋钮有尺寸,有方向、有角度,有连续或刻度的手感区别。这一切细节都在狸花爪捏住旋钮的极短时间,就可以取得清晰的了解。

但是我们在触摸屏是非常少见旋转动作的,因为完成旋转的前提是抓住旋钮实物的感受,如果没有真实抓握的手感,只靠手指比划很难转出特定角度、位置的圆,更难有旋钮的代入感。因此通常旋转动作是由沿弧线拖拽代替的。

最后我们来看一些没有实物模型的动作。它们的用户习惯来源于PC和手机系统的长期教育,现在来说,这里有些动作也是相当常用的,并不会因为脱离物理世界就失去用户基础。尤其是对于接触PC、手机很早,有足够使用习惯的游戏用户,它们和之前写过的有实物模型的动作之间,并不存在难以跨越的界限。

长按

首先,有个灵魂问题:到底多长算一个长按?

狸花查文档的结果是百花齐放……安卓开发文档给定的官方事件是1s,iOS长按事件默认值0.5s,微信小程式的官方预置长按是350ms……同时,收获程序实现自定义长按时间的代码×N

不统一的东西时常令猫头秃,然而这个不算——因为程序端时间和用户端感受是两回事。

真实用户做出来的长按通常远大于识别阈值,长按常用于呼出更多选项,他们会保持按住直到选单明显地已被触发为止。同时,我们还可以使用微交互,改变用户的时间感。


如果给按钮反馈加上一个带进度的动画,猫就会按住它直到动画播完。

游戏里长按有更丰富的使用环境,比如持续按住一个按钮来充满进度条,此时进度条本身即是时间指示器——在进度条填满或者资源用完之前用户一般都不会脱手。


长按的时间内,手指持续遮挡物体,所以要注意长按联动内容出现的位置……

前段时间听说苹果新系统取消了『重按』——安卓党狸花大笑三行。

为什么『重按』在用户教育上翻车了:

第一,难做对。在硬表面上按出重而短的一下是不太容易的。我们刚才发现了长按的识别时间只有0.5秒,『按住-加力』的过程很容易长过这个阈值,于是系统收到了一个长按。更重要的是,大部分用户对按屏幕的力并没有直观概念,普通触摸可能轻点,卡机了没能瞬间响应就加大力戳戳戳……谁都不会意识到自己是在做两个不同的动作。

第二,用不着。重按出快捷选单是因为它和长按删除冲突?不存在的。一张图解决问题……


狸花的手机这个状态无法截图,竟然还是只能画一个……猫脸惊呆.jpg

多指手势

前面讲的缩放这种本身需要2个手指的不算,在单指能完成的动作基础上加多对手指数量的识别,可以创造出排列组合的超多手势。理论上讲可以实现2~5个手指的点击/长按/四方向滑动……甚至指节敲击什么的……

还可以有更多……

华点是用户一个都记不住。

手机系统级手势可以有,一般是用在自定义快捷键的部分,比如三指下滑截图。因为是用户自己设定,我们会挑选自己比较熟悉的动作和常用的功能建立联系。游戏里还是算了,一方面强行教学难上加难,一方面它又很可能和系统级手势冲突。

果粉们的笔电触摸板都是多久玩熟练的……?

快捷键

键盘鼠标带来了一系列方便的交互动作,包括单个快捷键、组合键、鼠标滚轮(中键)、鼠标右键等……这些在端游上都可以用。所以端游可以有更高的复杂度,更多的『操作感』。

快捷键一般是用户自己指定的,游戏里也会有初始设定。一般来说,快捷键不能成为达到目标的唯一途径——如果用户设置的快捷键冲刷掉了系统预置……总不能让某个功能就再也无法打开了对吧。

端游里几乎所有的动作都可以设置快捷键,快捷键越多,使用越方便的同时也更容易被忘记……为了避免忘记,最好将用户设定的键位显示在外面。


像技能这样需要快速反应的写在技能栏上,其它的可以放在悬停说明里面。

双击

电脑系统中用双击实现触摸屏里的普通点击——打开窗口。单击仅视为选中,用于多选、或拖拽前的准备动作。

早年狸花看过一本有讲人机交互设备的书,里面给键鼠、手柄、触屏等常见载体做过一个排名——键盘鼠标在状态的数量上远高于其他设备。

『状态』也就是可以支持的动作。比如键盘上每个按键它都有按下/抬起两个状态,都可以控制一个独立的动作——这就是快捷键。

鼠标在屏幕上的每个位置都有点击/不点击/悬停状态,可以控制两个动作——点击和悬停,这里的『每个位置』可以极端到每个像素点,当然现实场景中这个牛角尖无法钻。

即使端游相比手游更大型更复杂,它也不会用完所有键盘鼠标支持的交互动作。只是鼠标可以完成的动作就有悬停、左中右键单击、滚轮等,已经足够多了。加上电脑屏幕更大,鼠标点击比手指更精确,需要的响应面积更小,端游可以摆在一屏上的物体远多于手游。这样一来,端游里对一个物体的所有操作都可以点击一下就平铺在用户面前,只靠单击就可以达成目标。同时, 双击又不会有更多沉浸感,因此我们几乎没有机会用到。

在触摸屏方面,从硬件角度来说是可以识别双击(比如狸花的触屏笔电),但手机系统不一定支持(狸花的手机支持熄屏双击唤醒,目前只见过这一个),交互规范里没有提到,也没有看到过软件这样用。由于很多用户在使用手机的过程中可能从未双击过,这个动作还是不用为妙。

相关阅读:手游UI交互动作设计研究:点击、滑动与拖拽

作者:狸花踏雪
专栏地址:https://zhuanlan.zhihu.com/p/94464727

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多