云风的 BLOG

玩建设类游戏，触摸屏交互和鼠标交互看似差不多，实际差别很大。

触摸屏的点击面其实是一个圆形区域，而鼠标则是一个点。鼠标更容易精确定位点击，而触摸屏难以做到精确。

鼠标有移动和悬停消息，在类似游戏中非常有用，但触摸屏是没有悬停事件的。

手指点击物件的时候，手指会遮挡住点击处，如果按鼠标的模式进一步做拖动，更是会一直挡住被拖动物件，这会导致非常糟糕的交互体验。

所以，我思考了以上问题后，采取了如下的方案：

首先，我们需要定义出一个和游戏场景内物件聚焦的操作。这个操作类似鼠标的悬浮，表示交互焦点在某个物件上。由于触摸屏没有悬浮事件，用点击(tap) 作为等价行为是合适的。

当玩家点击屏幕某个位置时，我们认为他其实是想把交互焦点移到手指下的物件。手指点击难以精确，所以我们可以轮询点击处附近的物件。当物件挤在一起时，只要多次点击就能选中。对于选中物，应该有明确的视觉表现，比如对物件描边。

由于点击仅仅是聚焦（类似鼠标悬浮），而不是对该物件交互，所以误点永远不是问题。这好比用鼠标快速扫过若干物件，最后精确停在想选中的物件上。前面扫过无关的物件是无所谓的。

那么，每次点击都可以立即响应本该由鼠标悬浮触发的事件：比如显示物件的 tips 窗口。但不应该触发原本鼠标点击物件发生的交互事件。

然后，我们把和已聚焦物件的交互放在右下角大拇指最舒适的虚拟按钮上。也就是按下主按钮（右下角大按钮），才被视为鼠标点击了那个物件，与之交互。如果是鼠标操作，这个交互行为通常有两个：左键点击和右键点击。这恰好可以映射为轻点主按钮和长按住按钮。

在我们的游戏中，和物件交互通常是呼出交互菜单。如果是鼠标操作，交互菜单一般会放在交互物件的旁边。因为这样鼠标移动距离最短，操作最舒适，而且可以提示操作对象的位置。

但在手指操作时，交互是通过按下右下角按钮实现的。交互菜单自然可以环绕主按钮做一个扇面。这样也很舒适。特别是，它不会让手指遮挡住操作的物件。

如果是修建菜单，可以视为和场景地板交互，也就是在无聚焦物件时点下主按钮。这时在弹出的二级菜单中选择要修建的建筑，就可以把它在屏幕中心显示出来。通过移动场景的拖动手势，便可以定位。即，手指移动的是场景而不是建筑，建筑永远在屏幕中央。这比按住待修建筑在屏幕上拖动（鼠标逻辑）要好得多。因为玩家不用在拖动物件时兼顾移动场景，也不用担心手指遮住了准备施工的区域。

在手机屏幕上，所有的信息都应该简洁，避免过小的字体和密集的版面。这点说起来容易，做起来很容易忽视。主要原因还是开发时往往在 PC 显示器上进行，使用的是熟悉的桌面界面逻辑。

在手机上，我们通常不会将注意力同时在多个窗口间切换。但这在桌面环境却非常常见：窗口只在屏幕的一小部分，注意力也容易聚焦在屏幕的一个区域。手机上，我们需要当前展现的信息尽量在屏幕中央的阅读舒适区域，内容可以一目了然（而不需要视线来回扫动）。

我按以上逻辑设计了物件的 tips 窗口。当玩家清点屏幕聚焦物件时，tips 窗口显示在屏幕左侧，占大约 1/3 屏幕。切换聚焦物件，这个 tips 窗口内容就立即切换。

信息窗口仅供暂时物件的信息用，不设置任何进一步交互按钮。这一点和 tips 窗口的逻辑一样。这个信息窗口应该尽量少放信息，避免让玩家为分辨密集信息而疲劳。因为这个窗口上没有进一步交互按钮，我们就可以把点击信息窗口的各个区域设定为二级信息窗，用来在屏幕中央展示部分更详尽的信息。

这相当于把需要展示的信息分成两级，总览放在一级窗口，挂在屏幕左侧。一级窗口划分为三到四个区域，对应三四个二级信息面板，玩家触摸这些区域就可以在屏幕中央看到它们。

主屏幕我希望足够干净。做多放一两个常驻按钮就够了，可以放在屏幕的四角舒适的地方。玩家的主要操作是用手指拖动及缩放场景、轻点场景中的物件聚焦、以及按右下主按钮和聚焦物件交互。

如果需要更多的交互菜单，很多手机游戏会把它们放在屏幕左下，列成一行。我不喜欢这样的设计。所以把更多的交互菜单的入口设计为长按屏幕中央，弹出一个全屏的操作面板。相当于在 PC 上按 esc 键弹出的主菜单。

这样设计会让游戏主屏幕显得清爽很多。