Elaine McVicar

現(xiàn)代移動設(shè)備大部分都采用觸摸屏，這也導(dǎo)致了觸屏設(shè)備的機(jī)遇與限制并存。我們使用觸屏設(shè)備不僅僅是為了查看內(nèi)容，還要與內(nèi)容進(jìn)行交互。這使得設(shè)計師不得不考慮人體工學(xué)、手勢表達(dá)、轉(zhuǎn)場切換及針對移動設(shè)備的交互模式，這就是交互設(shè)計上的“人文關(guān)懷”。

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

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

手勢表達(dá)的設(shè)計與操作

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

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

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

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

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

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

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

另外，觸屏設(shè)備手勢開發(fā)也出現(xiàn)了多種標(biāo)準(zhǔn)與模式。設(shè)計師可以——在很多情況下也應(yīng)該——限定手勢范圍以與其應(yīng)用配套。

轉(zhuǎn)場切換

轉(zhuǎn)場交互能平滑地在應(yīng)用程序狀態(tài)間進(jìn)行切換。轉(zhuǎn)場能撤銷操作，避免用戶不知所措。

基本的轉(zhuǎn)場包括：

1.快速過度，無動畫轉(zhuǎn)換畫面。

使用場景：在兩種不同的工具或內(nèi)容之間進(jìn)行轉(zhuǎn)換。

2.視圖擴(kuò)大，屏幕上的項目將內(nèi)容向前拉或向下拉。

使用場景：在一個屏幕內(nèi)展開一系列內(nèi)容。

3.頁面翻轉(zhuǎn)，畫面自后向前彈出。

使用場景：查看與前一個屏幕有關(guān)的屏幕，如附加設(shè)置或信息。

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

使用場景：前進(jìn)查看新的相關(guān)內(nèi)容或后退到前一個屏幕。

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

使用場景：查看支持性或附加性內(nèi)容。

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

常見的交互模式

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

主導(dǎo)航

主導(dǎo)航是我們網(wǎng)站（或應(yīng)用程序）信息架構(gòu)的視覺表現(xiàn)。

1.擴(kuò)展菜單

許多移動設(shè)備及響應(yīng)式網(wǎng)站讓用戶通過擴(kuò)展菜單獲取主導(dǎo)航。菜單圖標(biāo)（通常為一排線條）位于頂部。點擊圖標(biāo)就會彈出主菜單項。顯而易見，擴(kuò)展菜單更適用于響應(yīng)式網(wǎng)站。

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

2.側(cè)邊菜單

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

3.標(biāo)簽菜單

位于應(yīng)用程序頂部或底部的持久化工具欄能讓用戶在不同部分之間快速轉(zhuǎn)換。

適用于菜單選項較少的應(yīng)用程序。這是由移動屏幕的水平空間大小所決定的。標(biāo)簽菜單一般用于iOS（菜單選項推薦數(shù)量為5）的應(yīng)用程序?qū)Ш?。需要注意的是其底部?biāo)簽可能會與Android及Windows 8的標(biāo)準(zhǔn)交互發(fā)生沖突。

4.中心輻射型菜單

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

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

如何選擇內(nèi)容

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

1.按觸前進(jìn)

用戶通?？梢酝ㄟ^選擇類別、子類別然后點擊進(jìn)入瀏覽內(nèi)容，之后前往新的相關(guān)內(nèi)容。按觸前進(jìn)可以讓用戶持續(xù)參與以文章為主的內(nèi)容。

不過用戶如果無法確定他們處于導(dǎo)航結(jié)構(gòu)中的哪個位置，可能會感到迷惑。

2.滾動效果

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

3.前翻頁/后翻頁

如果你想要進(jìn)一步探索你正在查看的內(nèi)容項的相關(guān)內(nèi)容或設(shè)置，那么翻頁交互可以讓你獲取令人滿意的詳細(xì)信息。此種操作方式適用于關(guān)聯(lián)兩種內(nèi)容，如設(shè)置或詳細(xì)信息。但是如果交互過于復(fù)雜，用戶會分辨不出他們在導(dǎo)航結(jié)構(gòu)中所處位置。

登錄入口設(shè)計

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

1.自動登錄

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

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

2.記住細(xì)節(jié)

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

3.PIN碼

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

使用表格

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

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

1.保存用戶信息

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

2.顯示合適的鍵盤

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

3.進(jìn)度提示

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

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