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

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

缩放


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

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

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


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

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


着名的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