在本系列的第2節中，交互設計師Elaine McVicar將繼續講解有關移動設計信息架構的知識，并提供大量有關移動端設計模式的范例，為大家解釋它們與電腦端設計模式的區別之處。

我的第一部手機是諾基亞5110（1998年買的），功能非常有限：電話、短信、貪吃蛇。另外，手機所能進行的全部交互都在制造商的掌控之下。而智能手機、觸摸屏和“App store”的出現，給設計師帶來了巨大的機遇。因此，我們現在需要盡可能地熟悉、了解智能手機這種相對還比較新穎的媒介。

歡迎來到移動端設計第2節：交互設計。下面是有關本系列的一些背景資料，方便新加入的同學跟上節奏：為移動而設計系列一：信息架構代表著設計師進行移動端設計時所面臨的幾項關鍵難題，這些難題主要是移動端的環境：從視覺條件到行為再到情感?？紤]到移動端與傳統設計之間的區別給用戶帶來的影響，我在上一節中說明了我們在從到策略再到最終產品這一整套設計流程中對這些區別詳加考慮的重要性。

在第1節中，我們對移動環境下信息架構模式的探索進行了總結。信息架構是設計流程其余部分的基礎。在進入設計審美部分之前，我們務求了解手機和平板電腦交互與傳統臺式電腦交互之間的區別。

交互設計

大部分現代移動設備都采用了觸摸屏，而觸摸屏有著自己獨特的優勢和局限性。我們不僅要使用觸摸屏查看內容，還要與內容進行交互。這就使得設計師要考慮如何設計出符合人體工程學的手勢和過渡效果，以及專門針對移動端的交互模式。

?

人體工程學

移動端人體工程學的設計要求我們既要考慮設備尺寸，也要思考觸摸屏在實際應用情況下的各種問題。舉例來說，用戶拿設備和觸摸屏幕的方式決定著他們能否輕松夠到屏幕的各個部分。

點擊區域，或者叫“用戶為激活某對象所需觸摸的屏幕區域”需要有充分的空間以便用戶準確（及自信地）操作。一般人的指尖寬度是1到2厘米，大概對應標準屏幕的44px到57px，或者高密度屏幕（視網膜屏）的88px到114px?？紤]到觸摸屏的區別，諾基亞、Apple和微軟在這方面的推薦大小彼此之間有著細微的差別。

不過，在點擊區域這一方面，并沒有硬性的規定。你完全不用費勁查看各種標準來尋求既定的答案，只需要思考用戶要在屏幕上實現什么目的、其待實現目的的重要性如何，以及需要完成的速率，然后相應進行設計就行了。

手勢

觸摸屏上專用于某些功能的區域部分是無法顯示內容的，這也就使得手勢成為了移動交互設計的一個關鍵組成部分?，F在所有的主流觸摸操作系統都采用了手勢，其中包括：Google 的 Android、Apple 的 iOS和Microsoft的 Windows 8。

下表是對各種手勢的簡單匯總：

另外，關于觸摸屏設備手勢的開發也出現了一定的標準和模式。設計師可以，也應當根據自己所設計應用的情況拓展手勢的疆界。

過渡

過渡是指讓應用內不同狀態之間界限變模糊的交互操作，其有助于故事的講述或奠定手勢的含義。在更多情況下，過渡可以幫助用戶回憶過往內容，防止他們“迷路”。

基本的過度方式包括：

上面所列的只是眾多過度效果的一小部分，實際可供我們選擇的過渡效果還有很多。而實際操作中，我們的選擇應當能夠提高我們所要推進的交互效果的連貫性。

通用模式

正如第1節中所講到的，移動設備留給設計師安放菜單和導航提示的地方相比電腦來說太少了。另外再考慮到環境因素（例如視覺條件不佳或者分散注意力的因素過多等），我們往往難以讓用戶輕松理解產品內容的結構。

不過，還是有一些比較通用的交互模式能夠幫助大家解決難題。其中最有價值的當屬能夠用于完善導航、選擇內容、登陸/注銷和處理表單的模式。

1、主導航

主導航（或者叫“基本導航”）是對我們網站（或應用）信息架構的一種視覺呈現。下面是幾個可供參考的方法：

采用擴展菜單的星巴克響應式網站

有很多移動端及響應式網站都采用擴展菜單進入主導航畫面。菜單圖標（通常幾行橫線）包含在標題當中。點擊圖標可以顯示一系列主菜單項。
適合于：響應式網站
要注意：過多的菜單選項和子菜單選項會把內容擠到屏幕下方，使用起來會很煩人和費勁。

2、側邊菜單

采用側邊菜單的Facebook應用

有的應用和網站采用可滑動的側邊菜單。比如Facebook的應用。和擴展菜單一樣，一般需要點擊一個有幾行橫線的圖標或者滑動屏幕，然后就可擴展出或滑過菜單，并在屏幕側面垂直顯示一系列菜單項。側邊菜單可以包含分類并且可以滾動。
適合于：菜單選項較多的應用。其可以分離出單獨的一部分導航區域，而不用擠占大量屏幕空間，影響用戶與內容或功能的交互。
要注意：不要與其他導航或交互模式相沖突，否則用戶容易糊涂。例如，如果在此模式之外你還用了擴展或標簽菜單，用戶在要找特定的對象或功能時就會迷糊。

3、標簽菜單

? ?采用標簽菜單的Amazon應用

一模式與本系列的上一篇文章遙相呼應。標簽菜單是長期存在的工具欄，一般顯示于應用的標題或腳注位置，可以讓用戶快速在不同板塊之間進行切換。
適合于：出于手機屏幕水平空間較小考量，適合于菜單選項較少的應用。其普遍用作iOS上的應用導航欄，一般推薦放置5個菜單項。
要注意：底部的標簽可能會和Android和Windows 8的標準交互項相沖突。

4、軸輻試菜單

???采用儀表板菜單的LinkedIn

這一模式與本系列的上一篇文章遙相呼應?？赏ㄟ^集中的主屏幕方便用戶選擇菜單項。這種模式可以將用戶導航到中央板塊，并且中央板塊可以有自己的內部導航模式。用戶可以通過激活反向鏈接返回主屏幕。
適合于：快速展示應用的各項功能。
要注意：不要把功能彼此孤立。如果用戶需要在不同功能之間進行導航，讓他們先返回主屏幕會比較麻煩。

選擇內容

通過鏈接激活內容可以讓操作流程更順暢，從而使得用戶能夠輕松快速地用一只手選擇內容。這一過程如果安排妥當還可提供用戶的融入度。

1、點按前進

???采用前進導航的BBC News

用戶可通過選擇類別、子類別然后選擇內容進而前進到新的相關內容來以向前進的方式瀏覽內容。
適合于：讓用戶沉浸在內容主導的文章中。
要注意：用戶如果對自己在導航結構中的位置不甚清楚則會產生迷路的感覺。

2、封面瀏覽

?采用封面瀏覽轉盤的App store

用戶可滾動查看預覽內容，然后選擇要具體深入導航的對象。水平滾動模式是Win8“地鐵式”應用所獨有的模式。
適合于：讓用戶在深入探索更多視覺內容前進行預覽。
要注意：不要讓用戶先經過漫長的滾動才能進入自己需要經常訪問的內容。

3、翻轉/卷頁

iOS地圖可以通過頁面卷角查看更多選項

為了明確表現出你當前所要探索的內容或設置項與正在查看的對象存在聯系，可以通過翻轉或卷頁交互進一步訪問細節內容。
適合于：聯系兩類不同內容，例如設置或更多信息。
要注意：交互過于復雜會讓用戶弄不清楚自己在導航結構中所處的位置。

登陸

輸入用戶名、郵件地址和密碼是很多應用的必備流程。作為設計師，我們要保證這一流程盡量簡便。

1、自動登錄

用戶的登錄信息保存在應用中，啟動后可自動登陸并顯示用戶資料。Facebook、Instagram和Twitter等很多社交類應用都采用了這一模式
適合于：需要登錄才能查看個人信息但不需要過高安全級別的應用。
要注意：保證一定的安全等級。

2、 記憶細節

Gmail

很多針對臺式機的網站會保留用戶的細節信息，例如郵件地址或用戶名等，這樣可以加快登陸流程。
適合于：需要登錄的手機及平板電腦網站。
要注意：不要在不必要的地方要求登陸。

3、識別碼

???Paypal

打造不需要用戶輸入標準登陸信息的快速登陸通道能帶來巨大的幫助。PayPal可允許用戶創建簡單的識別碼進行快速方便的登陸。
適合于：存在安全要求但能夠與特定設備相關聯的應用。
要注意：保證一定的安全等級

使用表單

在移動設備上填寫表單是很煩人的一件事，特別是專門為臺式電腦設計的網站表單。你可以參考常用移動端設計注意事項對流程進行簡化，并想出一些辦法讓使用移動設備填寫表單變得更加簡捷。

1、? ?保存用戶詳細信息

? ?Amazon應用可讓用戶訪問個人信息及訂單歷史

使用登陸方式保存/記憶用戶信息可以大幅節省時間并降低開支，讓網站或應用的使用變得更加方便簡單。
適合于：需要用戶添加個人信息（例如購物過程中）的網站或應用。
要注意：確保安全。

2、提供方便的鍵盤

Just Eat應用可提供專為電子郵件設計的鍵盤

簡化表單填寫流程的方法之一就是在用戶激活表單框時顯示專門的鍵盤。例如，如果用戶需要輸入電話號碼，可以顯示數字鍵盤。這個可以通過代碼實現。
適合于：所有表單
要注意：無！

3、進度欄

? ?Topshop 應用購買流程

在電腦上，進度欄能夠有效地告訴用戶一項多步流程的長度，但由于尺寸限制，這一點對于手機和平板來說實現起來就比較困難了。并不是不可能，但需要巧妙地運用一切可用的空間。
適合于：購物流程或長表單
要注意：不要占太多空間，否則會影響用戶

?

后續

標準和規范是創新的基石。當我在諾基亞5110上玩貪吃蛇的時候，從來沒想到有一天會能有機會為移動設備設計工具。今天的解決方案到了明天就會成為標準和規范。

移動設備上交互的有效性非常關鍵。但要打造真正完美的體驗，還需要保證網站或應用外觀的漂亮、新穎和吸引人。在第3節中，我將探索布局和視覺設計對信息架構及交互的支持作用以及如何打造出從里到外令人驚嘆的用戶體驗。

原文地址：uxbooth.com

擴展閱讀：為移動而設計系列一：信息架構

擴展閱讀：為移動而設計系列三：視覺設計