我的第一個手機(jī)是Nokia 5110（1988年買的），它的功能非常少，所以我只用它來打打電話、玩玩貪食蛇。但是隨著廠商不斷的技術(shù)革新，傳統(tǒng)手機(jī)使用方式被完全顛覆了。現(xiàn)在我們都在使用大尺寸的觸屏手機(jī)，并且出現(xiàn)了“應(yīng)用商店”的新型平臺。設(shè)計(jì)師也受益于這個時代，所以盡快掌握移動設(shè)計(jì)模式也成了我們的責(zé)任和義務(wù)。

歡迎閱讀《移動設(shè)計(jì)指南！如何理解移動交互？》，正如你所見，系列文章的第二篇。為了方便您的閱讀，我在這里會交代一些《移動設(shè)計(jì)指南！如何理解移動信息架構(gòu)？（一）》的背景。第一篇文章中指出：設(shè)計(jì)師在移動設(shè)計(jì)面臨的挑戰(zhàn)主要有：觀察使用環(huán)境、用戶行為和情緒。因?yàn)檫@些差異會很大程度上影響我們的設(shè)計(jì)思路和研究過程，最終將會導(dǎo)致產(chǎn)品的形態(tài)。

第一篇文章討論了如何在移動環(huán)境下進(jìn)行信息架構(gòu)探索。做好第一點(diǎn)將會為接下來的設(shè)計(jì)流程打下良好的基礎(chǔ)。在繼續(xù)討論交互理論前，非常有必要先讓大家了解一下，移動設(shè)備的交互理念與桌面設(shè)備究竟有何差別。

“設(shè)計(jì)”交互

現(xiàn)今，絕大多數(shù)移動設(shè)備使用觸摸屏，這對我們來說有好有壞。我們不僅可以使用設(shè)備來瀏覽內(nèi)容，并且還可以與之交互。這就要求設(shè)計(jì)師考慮人體工程學(xué)，不停地模擬用戶握持和操作手勢，最終才能得出可用的交互模式。

人體工程學(xué)

人體工程學(xué)在移動設(shè)備中最需要注意的就是屏幕尺寸。用戶握持的姿勢、觸摸的手勢都影響著用戶所能觸及到的區(qū)域。

點(diǎn)擊區(qū)域需要足夠大的面積，大到讓用戶非常自信不會點(diǎn)錯最佳。手指尖通常1到2厘米寬，標(biāo)準(zhǔn)分辨率的屏幕大概44px到57px之間，在retina高分屏上大概88px到114px。諾基亞、蘋果、微軟等根據(jù)使用屏幕的不同推薦策略也不相同。

當(dāng)然對觸摸面積沒有硬性規(guī)定，尋找標(biāo)準(zhǔn)不是目的，為用戶考慮，怎么樣設(shè)計(jì)才能盡快完成他們的任務(wù)，就應(yīng)該怎么設(shè)計(jì)。

手勢操作

移動設(shè)備的屏幕可謂寸土寸金，如何能通過手勢實(shí)現(xiàn)不同的功能很值得研究。下面列舉目前主流三大系統(tǒng)的基本操作模式。

列表如下：

此外，觸屏設(shè)備的系統(tǒng)標(biāo)準(zhǔn)和操作模式也正處于不斷發(fā)展之中，設(shè)計(jì)師要不斷研究新的操作方式以適用于APP。

過渡轉(zhuǎn)場

轉(zhuǎn)場為了使不同界面切換更加平滑順暢，或暗示給用戶一種新的可用手勢操作方式。一般而言，轉(zhuǎn)場在APP中給用戶指引方向，防止用戶“迷路”。

基本的轉(zhuǎn)場如下：

以上僅列舉少部分，還有非常多的轉(zhuǎn)場效果我們可以選擇。最佳選擇標(biāo)準(zhǔn)是引入該轉(zhuǎn)場可以促進(jìn)交互的一致性。

常見的模式

正如第一部分所說，相比桌面電腦，移動設(shè)備給設(shè)計(jì)師放置導(dǎo)航菜單空間更小。結(jié)合環(huán)境因素，例如惡劣的閱讀條件使人分心。這就很難設(shè)計(jì)一種好的內(nèi)容結(jié)構(gòu)去讓用戶專注與內(nèi)容。

然而，有幾種常見的交互模式迎接了這個挑戰(zhàn)。如何改進(jìn)導(dǎo)航、內(nèi)容選擇、登陸/登出、表格顯示的展現(xiàn)形式是我們所需要學(xué)習(xí)的重點(diǎn)。

主導(dǎo)航

主要（或核心）導(dǎo)航用視覺方式展現(xiàn)了我們網(wǎng)站或APP的信息架構(gòu)。以下有一些需要考慮的地方：

展開式菜單（Expanding Menu）

許多移動和響應(yīng)式網(wǎng)站使用這種展開式菜單作為導(dǎo)航。 一般菜單的圖標(biāo)在頁面頭部，點(diǎn)擊圖標(biāo)就會展開菜單列表。

適用于: 響應(yīng)式網(wǎng)站。

注意: 過多的菜單項(xiàng)目會使本就擁擠的屏幕看起來更加糟糕。

星巴克響應(yīng)網(wǎng)站展開式菜單

側(cè)滑菜單（Side menu）

一些APP和網(wǎng)站都使用側(cè)滑菜單。點(diǎn)擊左上角的菜單圖標(biāo)，屏幕邊緣就會滑出一塊專門的菜單區(qū)域。菜單以列表（可帶分類）的形式展現(xiàn)，并且還可以向下滾動查看更多。

適用于：選項(xiàng)數(shù)目龐大的菜單。它創(chuàng)建一個單獨(dú)的菜單區(qū)域，而不占用用戶瀏覽內(nèi)容的空間。

注意：必須確保它不與其它交互模式?jīng)_突，否則用戶會產(chǎn)生迷茫的感覺。

Facebook 側(cè)滑式菜單

選項(xiàng)卡菜單（Tabbed Menu）

在APP的頂部或底部顯示常駐的選項(xiàng)卡，用戶可以通過點(diǎn)擊切換選項(xiàng)。

適用于：選項(xiàng)數(shù)目非常少的菜單，由屏幕寬度決定。

注意: 需要考慮Android和windows phone 8 屏幕底部虛擬按鍵互相干擾的問題。

亞馬遜選項(xiàng)卡菜單

輻射狀菜單（星型拓?fù)銱ub and spoke menu）

一個集中的主頁屏幕提供菜單可供用戶選擇。點(diǎn)擊菜單選項(xiàng)后會進(jìn)入它自己的內(nèi)部導(dǎo)航模式。用戶可以通過點(diǎn)擊返回鏈接或按鈕回到主頁。

適用于：直觀反映了程序的功能。

注意：對于輻射狀菜單，如果用戶希望在不同功能之間切換，主屏幕這個必經(jīng)之路會使用戶沮喪。

領(lǐng)英儀表板菜單

內(nèi)容選擇形式

如果你的設(shè)計(jì)可以很輕松的讓用戶單手操作，這點(diǎn)就會讓你的產(chǎn)品增加不少轉(zhuǎn)化率。

點(diǎn)擊（Press to move forward）

選擇分類，查看相關(guān)文章，然后再選擇與本篇內(nèi)容相關(guān)的文章，這就是漸進(jìn)式導(dǎo)航的精髓。

適用于：內(nèi)容主導(dǎo)型的網(wǎng)站。

注意：跳轉(zhuǎn)多次頁面之后用可能會不知道當(dāng)前所處位置。

BBC新聞

滾動效果（Coverflow）

用戶可以水平滾動預(yù)覽項(xiàng)目，點(diǎn)擊可以進(jìn)入。Win8的Metro風(fēng)格程序也是如此。

適用于：選項(xiàng)數(shù)目龐大的菜單。它創(chuàng)建一個單獨(dú)的菜單區(qū)域，而不占用用戶瀏覽內(nèi)容的空間。

注意：必須確保它不與其它交互模式?jīng)_突，否則用戶會產(chǎn)生迷茫的感覺。

應(yīng)用商店

翻頁效果（Flip over / Peel back）

如果你想進(jìn)一步了解正在瀏覽的內(nèi)容，或你正要進(jìn)行的設(shè)置，那么翻頁效果是很好的選擇。

適用于：兩個相關(guān)的內(nèi)容，比如進(jìn)行設(shè)置或查看信息詳情。

注意：會讓你的交互方式過于復(fù)雜，用戶也容易對導(dǎo)航結(jié)構(gòu)感到困惑。

iOS蘋果地圖

登陸和注冊

登陸和注冊對于APP必不可少，所以我們應(yīng)該盡可能把過程設(shè)計(jì)的簡單方便。

自動登陸

用戶信息首次登陸就自動保存在APP內(nèi)，以后打開APP會自動登陸，并更新主頁最新消息。這也是在許多社交APP最常見的模式，例如：Facebook、Instagram、Twitter。

適用于：必須登陸才能進(jìn)入主頁查看信息，但對安全要求不是很高。

注意：只適用于對信息安全要求不高的APP。

Instagram

保存賬號和密碼

和電腦網(wǎng)頁一樣，移動APP也可以采用這種設(shè)計(jì)，保存用戶的賬號和密碼等登錄信息，以便于用戶快速登錄。

適用于：需要登錄的手機(jī)版網(wǎng)頁。

注意：盡量減少登錄的步驟。

Gmail

簡單數(shù)字密碼

不需要輸入冗長的詳細(xì)登錄信息，直接輸入一次簡單密碼，簡化登錄步驟，Paypal就是如此。

適用于：需要記住登錄信息，但又必須保證安全的APP。

注意：需要注意APP安全級別（后臺運(yùn)行呼出之后仍需要密碼）。

Paypal

填寫表單

保存用戶信息

據(jù)統(tǒng)計(jì)，用戶安裝的APP中，竟有26%只被打開過一次。辛苦制作了一款A(yù)PP，好不容易被人下載安裝，剛一打開，繁瑣的注冊表單讓用戶不得不放棄。人人都討厭在移動設(shè)備上填寫表單，特別是根本沒針對移動設(shè)備優(yōu)化過的電腦版網(wǎng)頁。

保存用戶的的登錄信息可以節(jié)省時間、減少成本，讓你的應(yīng)用和網(wǎng)站更易于使用。

交互設(shè)計(jì)師Luke Wroblewski曾對于注冊表單給出過三點(diǎn)建議：一、最好不要在App首屏出現(xiàn)注冊界面；二、先體驗(yàn)，后注冊；三、因?yàn)樽越缑娣爆?，所以更要?yōu)化。

適用于：需要用戶添加個人信息的網(wǎng)站或應(yīng)用，比如在購物過程中填寫個人資料。

注意：給予適當(dāng)?shù)陌踩浴?/p>

亞馬遜允許查看個人詳細(xì)信息和歷史訂單

正確的鍵盤類型

在不同的情況顯示與之對應(yīng)的鍵盤類型能簡化操作，例如輸入電話號碼時，默認(rèn)彈出的是數(shù)字鍵盤，輸入密碼時顯示全鍵盤。

適用于：任何表單。

注意：無。

Gmail

進(jìn)度提示

在電腦網(wǎng)頁中顯示進(jìn)度提示條非常好，他能告訴用戶當(dāng)前的進(jìn)度，完成了多少，還剩多少。在移動設(shè)備中這樣設(shè)計(jì)同樣很棒，但由于屏幕大小和比例不同，需要考慮進(jìn)度條的位置和顯示方式。適用于：購物表單或長表單。注意：不要讓它占據(jù)太多空間，不然可能會阻礙用戶快速訪問其他內(nèi)容。

有創(chuàng)意的進(jìn)度條也能緩解用戶的焦慮感呦：

Paypal

下一步

設(shè)計(jì)標(biāo)準(zhǔn)和指南給我們提供了創(chuàng)新的空間。當(dāng)我手拿諾基亞5110玩貪食蛇時，從未想過我能有機(jī)會為手機(jī)設(shè)計(jì)交互界面。而今天我們找到的解決問題的方法，將會成為未來設(shè)計(jì)的標(biāo)準(zhǔn)和指南。

交互是移動設(shè)備不可或缺的重要部分。但是打造體驗(yàn)絕佳、界面生動的移動應(yīng)用或網(wǎng)站，美妙絕倫的視覺設(shè)計(jì)也必不可少。

原文地址：uxbooth

譯文地址：wangder

譯者：王笑Nothing