移動(dòng)交互：指尖上的“人文”設(shè)計(jì)

Elaine McVicar

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

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

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

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

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

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

1.單擊手勢(shì)，在三個(gè)平臺(tái)上都是初級(jí)選擇行動(dòng)。

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

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

4.滑動(dòng)手勢(shì)，三個(gè)平臺(tái)的滑動(dòng)手勢(shì)均支持頁面滾動(dòng)，不同的是Android和Windows 8平臺(tái)則包含功能欄的呼出功能。

5.雙指縮放，三個(gè)平臺(tái)上都是視圖放大和縮小功能。

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

轉(zhuǎn)場(chǎng)切換

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

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

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

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

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

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

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

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

4.全屏呼出，屏幕上的項(xiàng)目全屏打開/展開。

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

5.水平劃動(dòng)，畫面向左或向右劃過前一個(gè)畫面。

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

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

常見的交互模式

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

主導(dǎo)航

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

1.擴(kuò)展菜單

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

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

2.側(cè)邊菜單

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

3.標(biāo)簽菜單

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

適用于菜單選項(xiàng)較少的應(yīng)用程序。這是由移動(dòng)屏幕的水平空間大小所決定的。標(biāo)簽菜單一般用于iOS（菜單選項(xiàng)推薦數(shù)量為5）的應(yīng)用程序?qū)Ш健Ｐ枰⒁獾氖瞧涞撞繕?biāo)簽可能會(huì)與Android及Windows 8的標(biāo)準(zhǔn)交互發(fā)生沖突。

4.中心輻射型菜單

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

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

如何選擇內(nèi)容

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

1.按觸前進(jìn)

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

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

2.滾動(dòng)效果

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

3.前翻頁/后翻頁

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

登錄入口設(shè)計(jì)

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

1.自動(dòng)登錄

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

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

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

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

3.PIN碼

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

使用表格

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

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

1.保存用戶信息

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

2.顯示合適的鍵盤

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

3.進(jìn)度提示

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

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