触摸屏上的一些交互设计问题

我们现在制作的游戏以手机优先，交互都是围绕着触摸屏来做。如果开发的时候总是在 PC 上用鼠标测试，很多交互问题都容易被忽视掉。所以，我们自研的引擎花了很大气力在手机设备上即改即所得。在开发时推荐开发人员直接在手机上修改、调试。这样更容易发掘出平时用鼠标操作难以察觉的问题。

btw，直接在手机上开发比在 PC 上开发还有另一个好处，就是随时能关注画面元素（尤其是字体）的大小是否合适。

鼠标和触摸屏在交互上有很多类似的地方，但也有很大的不同。

1. 鼠标的点击是精确到单点的，触摸屏的 tap 其实是一个面。很多框架直接取了面的中心点和鼠标事件划上等号，这是不对的。我们做交互的时候，时刻应该清楚，触摸屏的 tap 事件并不是像鼠标点击事件那样有一个精确的屏幕坐标。

2. 触摸屏是有多个触摸点同时存在的，而鼠标指针一般只有一个。我们未必要深入使用多点触摸的交互逻辑，但在用手机的时候，一只手不小心压住了屏幕一侧，另一只手做 tap 操作，这非常常见。

3. 鼠标的基础操作有移动、左键点击、右键点击；而触摸屏只有在屏幕上拖动的消息，没有指针移动事件，也无法区分左右键两个不同的点击操作。或许可以用手势来区分，比如用轻触和长按来分出两种不同的交互操作，但滥用可能会造成用户的困扰。

4. 鼠标手势属于高级玩法，一般不去教育初级用户使用；但触摸屏是反过来的，必须依靠手势完成更丰富的交互操作，而且用户已经被教育的很好。比如两指缩放，滑动，轻触点击这些手势已经不需要对用户再教育了。但引入高级手势还是需要慎重。

5. 手机屏幕有一些禁区，那些位置用户难以操作；鼠标基本没有禁区。

对于一个基地建设（类异星工厂）的游戏，点击选中特定屏幕对象，在手机上怎么操作更好？显然，不能照搬鼠标键盘的交互逻辑。

首先，我倾向于把手机看成是游戏手柄，按手柄的操作逻辑做更好。这样，可以在屏幕的中间虚拟出一个鼠标指针，用软摇杆（搓玻璃）的方式移动地图，而指针固定在屏幕中间，确定键放在右下角，这样和鼠标逻辑最为接近。

其次，还需要保留直接点击屏幕上特定位置的方式，这在手机上最直接明了：我想关注哪个建筑就点哪个。这个时候，摄像机应该跟着聚焦的对象，把它移到屏幕中心。

那么，怎么解决点击面下有多个对象的问题呢？一般的鼠标逻辑精确到点，总可以精确的找到这个点上对应的对象。用户发现选错了，可以稍微移动鼠标指针调整。而手指操作却无法做这种调整：因为手指和屏幕本来就是面接触而不是点接触。而且，当手指按下后，盖住了焦点处的屏幕，难以进一步调整。

我的解决方法是，每次手指点选，都按一个面积去选取场景中的多个可能对象，然后只聚焦到其中一个。有一个全局循环队列记住历史上聚焦的对象。每次点选，如果有多个备选对象，那么就比对历史上的选取记录，选出过去几次没选取过的聚焦对象。如果所有备选对象都聚焦过了，就用 LRU 算法淘汰最老的那个。

用户操作的时候，它在对象密集的区域点选，发现选中的焦点对象并非他期望的，只需要不断地在原地多次 tap ，就能在附近的几个对象间轮换了。

我们现在制作的游戏以手机优先，交互都是围绕着触摸屏来做。如果开发的时候总是在 PC 上用鼠标测试，很多交互问题都容易被忽视掉。所以，我们自研的引擎花了很大气力在手机设备上即改即所得。在开发时推荐开发人员直接在手机上修改、调试。这样更容易发掘出平时用鼠标操作难以察觉的问题。

btw，直接在手机上开发比在 PC 上开发还有另一个好处，就是随时能关注画面元素（尤其是字体）的大小是否合适。

鼠标和触摸屏在交互上有很多类似的地方，但也有很大的不同。

1. 鼠标的点击是精确到单点的，触摸屏的 tap 其实是一个面。很多框架直接取了面的中心点和鼠标事件划上等号，这是不对的。我们做交互的时候，时刻应该清楚，触摸屏的 tap 事件并不是像鼠标点击事件那样有一个精确的屏幕坐标。

2. 触摸屏是有多个触摸点同时存在的，而鼠标指针一般只有一个。我们未必要深入使用多点触摸的交互逻辑，但在用手机的时候，一只手不小心压住了屏幕一侧，另一只手做 tap 操作，这非常常见。

3. 鼠标的基础操作有移动、左键点击、右键点击；而触摸屏只有在屏幕上拖动的消息，没有指针移动事件，也无法区分左右键两个不同的点击操作。或许可以用手势来区分，比如用轻触和长按来分出两种不同的交互操作，但滥用可能会造成用户的困扰。

4. 鼠标手势属于高级玩法，一般不去教育初级用户使用；但触摸屏是反过来的，必须依靠手势完成更丰富的交互操作，而且用户已经被教育的很好。比如两指缩放，滑动，轻触点击这些手势已经不需要对用户再教育了。但引入高级手势还是需要慎重。

5. 手机屏幕有一些禁区，那些位置用户难以操作；鼠标基本没有禁区。

对于一个基地建设（类异星工厂）的游戏，点击选中特定屏幕对象，在手机上怎么操作更好？显然，不能照搬鼠标键盘的交互逻辑。

首先，我倾向于把手机看成是游戏手柄，按手柄的操作逻辑做更好。这样，可以在屏幕的中间虚拟出一个鼠标指针，用软摇杆（搓玻璃）的方式移动地图，而指针固定在屏幕中间，确定键放在右下角，这样和鼠标逻辑最为接近。

其次，还需要保留直接点击屏幕上特定位置的方式，这在手机上最直接明了：我想关注哪个建筑就点哪个。这个时候，摄像机应该跟着聚焦的对象，把它移到屏幕中心。

那么，怎么解决点击面下有多个对象的问题呢？一般的鼠标逻辑精确到点，总可以精确的找到这个点上对应的对象。用户发现选错了，可以稍微移动鼠标指针调整。而手指操作却无法做这种调整：因为手指和屏幕本来就是面接触而不是点接触。而且，当手指按下后，盖住了焦点处的屏幕，难以进一步调整。

我的解决方法是，每次手指点选，都按一个面积去选取场景中的多个可能对象，然后只聚焦到其中一个。有一个全局循环队列记住历史上聚焦的对象。每次点选，如果有多个备选对象，那么就比对历史上的选取记录，选出过去几次没选取过的聚焦对象。如果所有备选对象都聚焦过了，就用 LRU 算法淘汰最老的那个。

用户操作的时候，它在对象密集的区域点选，发现选中的焦点对象并非他期望的，只需要不断地在原地多次 tap ，就能在附近的几个对象间轮换了。