手遊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