移動交互：指尖上的“人文”設計

Elaine McVicar

現代移動設備大部分都采用觸摸屏，這也導致了觸屏設備的機遇與限制并存。我們使用觸屏設備不僅僅是為了查看內容，還要與內容進行交互。這使得設計師不得不考慮人體工學、手勢表達、轉場切換及針對移動設備的交互模式，這就是交互設計上的“人文關懷”。

移動設備人體工學設計要求我們同時注意設備尺寸與觸屏實用問題。比如，用戶手持設備及觸摸屏幕的方式影響了用戶是否能輕易碰觸屏幕各部位。

碰撞區域或者“用戶觸摸屏幕進行激活的區域”要有充足的空間，讓用戶能夠準確無疑地觸壓。指尖平均寬度為一至兩厘米，在標準屏幕上對應44至57像素，而在高密度（視網膜顯示）屏幕上對應88至114像素。諾基亞、蘋果及微軟分別根據觸摸屏屬性推薦了略有差異的設備尺寸。不過對于碰撞區域還沒有什么硬性規定。與其尋求各種答案標準，不如想想用戶需要通過屏幕實現什么、該項目標有多重要以及他們希望多快實現目標——然后根據這些因素進行設計。

手勢表達的設計與操作

觸摸屏上每一個注重實用功能的區域無法顯示內容，這使得手勢成為了移動交互設計中不可或缺的一部分。所有主要觸屏操作系統都具備手勢，包括谷歌的Android、蘋果的iOS以及微軟的Windows 8。

以下是iOS、Android和Windows 8平臺之間相同手勢操作的不同結果：

1.單擊手勢，在三個平臺上都是初級選擇行動。

2.單擊長按，iOS平臺在可編輯的文本區域顯示放大的視圖光標或進行文本定位；Android和Windows 8平臺則是呼出編輯菜單。

3.雙擊手勢，iOS和Android平臺是視圖放大和縮小；Windows 8平臺則沒有規定的響應。

4.滑動手勢，三個平臺的滑動手勢均支持頁面滾動，不同的是Android和Windows 8平臺則包含功能欄的呼出功能。

5.雙指縮放，三個平臺上都是視圖放大和縮小功能。

另外，觸屏設備手勢開發也出現了多種標準與模式。設計師可以——在很多情況下也應該——限定手勢范圍以與其應用配套。

轉場切換

轉場交互能平滑地在應用程序狀態間進行切換。轉場能撤銷操作，避免用戶不知所措。

基本的轉場包括：

1.快速過度，無動畫轉換畫面。

使用場景：在兩種不同的工具或內容之間進行轉換。

2.視圖擴大，屏幕上的項目將內容向前拉或向下拉。

使用場景：在一個屏幕內展開一系列內容。

3.頁面翻轉，畫面自后向前彈出。

使用場景：查看與前一個屏幕有關的屏幕，如附加設置或信息。

4.全屏呼出，屏幕上的項目全屏打開/展開。

使用場景：前進查看新的相關內容或后退到前一個屏幕。

5.水平劃動，畫面向左或向右劃過前一個畫面。

使用場景：查看支持性或附加性內容。

這些只是一部分；目前已有大量轉場交互可供我們選擇。最好的轉場效果要能提高我們正在改善的交互過程的連貫性。

常見的交互模式

與臺式電腦相比，移動設備留給設計師用以添加菜單及導航線索的空間較少。再加上環境因素——比如瀏覽條件簡陋或存在多種干擾——我們通常很難讓用戶了解我們內容的結構。不過，有幾種常見的交互模式能用來應對這些挑戰。其中最有價值的模式包括能用以改善導航、選擇內容、登錄/退出以及調整表格的模式。

主導航

主導航是我們網站（或應用程序）信息架構的視覺表現。

1.擴展菜單

許多移動設備及響應式網站讓用戶通過擴展菜單獲取主導航。菜單圖標（通常為一排線條）位于頂部。點擊圖標就會彈出主菜單項。顯而易見，擴展菜單更適用于響應式網站。

不過需要注意的是，太多菜單選項及子菜單選項可能會將內容拉到屏幕下方，造成使用不便。

2.側邊菜單

一些應用程序及網站使用滑動型側邊菜單，比如Facebook的應用。擴展菜單經常需要按觸各種線條圖標或者滑動屏幕，而側邊菜單可以展開或滑開菜單，表現為一列菜單選項垂直滑向屏幕一邊。側邊菜單既可以分類也可以滾動，適用于具有大量菜單選項的應用程序。側邊菜單為導航開辟了獨立區域，而不用占據大量用戶與內容或特征進行互動的空間。在使用時要注意確保側邊菜單不會與其他導航或交互模式產生沖突，否則用戶容易感到迷惑。比如，將擴展菜單或標簽菜單與側邊菜單混用，那么用戶在尋找特定項或特征時可能會產生混淆。

3.標簽菜單

位于應用程序頂部或底部的持久化工具欄能讓用戶在不同部分之間快速轉換。

適用于菜單選項較少的應用程序。這是由移動屏幕的水平空間大小所決定的。標簽菜單一般用于iOS（菜單選項推薦數量為5）的應用程序導航。需要注意的是其底部標簽可能會與Android及Windows 8的標準交互發生沖突。

4.中心輻射型菜單

集中式主屏幕可以讓用戶選擇菜單選項，導航至該部分，而該部分有自己的內部導航模式。用戶可以通過激活反向鏈接返回主屏幕。輻射型菜單更適用于快速展示應用程序的特征。

同時需要注意筒倉型功能，如果用戶想要在不同功能之間進行導航，可能較難返回主屏幕。

如何選擇內容

按觸激活內容的鏈接能促進流動，用戶可以方便快速地單手選擇內容。如果取得良好效果，這種轉場也能增加用戶的參與程度。

1.按觸前進

用戶通常可以通過選擇類別、子類別然后點擊進入瀏覽內容，之后前往新的相關內容。按觸前進可以讓用戶持續參與以文章為主的內容。

不過用戶如果無法確定他們處于導航結構中的哪個位置，可能會感到迷惑。

2.滾動效果

用戶可以滾動瀏覽內容，然后從中選擇一個選項。這種水平滾動的設計方式，是Windows 8 Metro風格應用固有的。當然，類似的設計我們在iPhone上也見過，就是比較常用的App Store。該效果適用于一些需要用戶自己去發掘的視覺化內容界面，而用戶也可以在選擇前進行預覽。缺點是如果用戶希望瀏覽他們經常訪問的內容，可能需要不停地重復滾動操作。

3.前翻頁/后翻頁

如果你想要進一步探索你正在查看的內容項的相關內容或設置，那么翻頁交互可以讓你獲取令人滿意的詳細信息。此種操作方式適用于關聯兩種內容，如設置或詳細信息。但是如果交互過于復雜，用戶會分辨不出他們在導航結構中所處位置。

登錄入口設計

輸入用戶名、郵箱及密碼是某些應用必不可少的過程。作為設計師，我們可以讓這個過程變得盡可能輕松。

1.自動登錄

用戶登錄詳情儲存于應用程序中，初始化時自動登錄，并顯示用戶信息。Facebook、Instagram與Twitter等眾多社交網絡應用都采取這種方式。

自動登錄適用于需要登錄才能獲取個人信息但安全要求不很高的應用程序，但是其安全系數較低。

2.記住細節

正如一些臺式網站能保留用戶細節一樣，記住電子郵箱或用戶名等可以加速登錄過程。該方式要求登錄的對象是移動設備或平板電腦。在登陸過程中盡量避免不必要的登錄操作。

3.PIN碼

創建一種無需用戶輸入全部登錄信息就能快速登錄的方式將取得很好的效果。比如PayPal允許你創建一個簡單的PIN碼，讓登錄操作變得快速簡便。適用于有一定安全要求但可以與特定設備相關聯的應用。

使用表格

在移動設備上填寫表單很麻煩，特別是針對臺式電腦設計卻還沒提供移動設備版本的網站表單。

我們可以通過關注常見的移動設計考慮因素來讓填單過程變得方便，同時還可以探索一些能簡化移動設備表格使用過程的方案。

1.保存用戶信息

通過登錄程序來保存/檢索用戶信息可以節省時間、減少系統開銷，并讓你的網站或應用更方便好用。適用于要求用戶添加個人信息的網站或應用，比如購物過程。

2.顯示合適的鍵盤

確保用戶在激活表單域時能顯示合適的鍵盤，可以讓填表過程變得流暢。比如，如果用戶要輸入電話號碼，就顯示數字鍵盤。這種效果可以通過代碼實現。這種方式適用于所有表格。

3.進度提示

在臺式電腦上，進度提示可以向用戶顯示某個多步驟過程的進度，可謂高招。不過移動和平板設備由于尺寸關系，設置進度條可能有點麻煩。如果巧妙合理地利用空間，這些設備也是可以使用進度條的。進度條適用于購物過程或長表單。需要注意的是，由于進度條可能阻礙用戶快速訪問內容，所以不能占據太多空間。

在移動設備上開展順利的交互過程是必不可少的。但是要創造真正的美妙體驗，網站或應用程序的實際外觀就必須激發興趣、富有魅力并引人入勝。 （編輯：楊磊）