3

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

 1 year ago
source link: https://blog.codingnow.com/2022/12/interaction.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

云风的 BLOG

思绪来得快去得也快,偶尔会在这里停留

« 间断储存的字符串 | 返回首页 | covid-19 感染康复记录 »

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

云风 提交于 December 13, 2022 10:54 AM | 固定链接

Comments

触屏上模仿游戏手柄操作指针选择建筑这操作感觉太低效了。异星工厂这么多小东西需要点?像COC那样纯粹手指点,能点到吗?实在不行第二下点击局部放大

Posted by: fripSide | (3) December 17, 2022 11:21 PM

需不需要加个时间间隔来判断是否执行循环选取呢?比如说2秒以内连续点击,考虑用户可能是想点选其他对象。

Posted by: wuleslie | (2) December 13, 2022 04:50 PM

需不需要加个时间间隔来判断是否执行循环选取呢?比如说2秒以内连续点击,考虑用户可能是想点选其他对象。

Posted by: wuleslie | (1) December 13, 2022 04:49 PM

Post a comment

非这个主题相关的留言请到:留言本

名字:

Email 地址:

为了验证您是人类,请将六加一的结果(阿拉伯数字七)填写在下面:

URL:

记住我的信息?

留言:
(不欢迎在留言中粘贴程序代码)


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK