在本系列的第2節(jié)中，交互設(shè)計師Elaine McVicar將繼續(xù)講解有關(guān)移動設(shè)計信息架構(gòu)的知識，并提供大量有關(guān)移動端設(shè)計模式的范例，為大家解釋它們與電腦端設(shè)計模式的區(qū)別之處。

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

歡迎來到移動端設(shè)計第2節(jié)：交互設(shè)計。下面是有關(guān)本系列的一些背景資料，方便新加入的同學(xué)跟上節(jié)奏：移動端設(shè)計——第一節(jié)：信息架構(gòu)代表著設(shè)計師進(jìn)行移動端設(shè)計時所面臨的幾項(xiàng)關(guān)鍵難題，這些難題主要是移動端的環(huán)境：從視覺條件到行為再到情感。考慮到移動端與傳統(tǒng)設(shè)計之間的區(qū)別給用戶帶來的影響，我在上一節(jié)中說明了我們在從到策略再到最終產(chǎn)品這一整套設(shè)計流程中對這些區(qū)別詳加考慮的重要性。

在第1節(jié)中，我們對移動環(huán)境下信息架構(gòu)模式的探索進(jìn)行了總結(jié)。信息架構(gòu)是設(shè)計流程其余部分的基礎(chǔ)。在進(jìn)入設(shè)計審美部分之前，我們務(wù)求了解手機(jī)和平板電腦交互與傳統(tǒng)臺式電腦交互之間的區(qū)別。

交互設(shè)計

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

人體工程學(xué)

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

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

不過，在點(diǎn)擊區(qū)域這一方面，并沒有硬性的規(guī)定。你完全不用費(fèi)勁查看各種標(biāo)準(zhǔn)來尋求既定的答案，只需要思考用戶要在屏幕上實(shí)現(xiàn)什么目的、其待實(shí)現(xiàn)目的的重要性如何，以及需要完成的速率，然后相應(yīng)進(jìn)行設(shè)計就行了。

手勢

觸摸屏上專用于某些功能的區(qū)域部分是無法顯示內(nèi)容的，這也就使得手勢成為了移動交互設(shè)計的一個關(guān)鍵組成部分。現(xiàn)在所有的主流觸摸操作系統(tǒng)都采用了手勢，其中包括：Google 的 Android、Apple 的 iOS和Microsoft的 Windows 8。

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

另外，關(guān)于觸摸屏設(shè)備手勢的開發(fā)也出現(xiàn)了一定的標(biāo)準(zhǔn)和模式。設(shè)計師可以，也應(yīng)當(dāng)根據(jù)自己所設(shè)計應(yīng)用的情況拓展手勢的疆界。

過渡

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

基本的過度方式包括：

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

通用模式

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

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

1、主導(dǎo)航

主導(dǎo)航（或者叫“基本導(dǎo)航”）是對我們網(wǎng)站（或應(yīng)用）信息架構(gòu)的一種視覺呈現(xiàn)。下面是幾個可供參考的方法：

采用擴(kuò)展菜單的星巴克響應(yīng)式網(wǎng)站

有很多移動端及響應(yīng)式網(wǎng)站都采用擴(kuò)展菜單進(jìn)入主導(dǎo)航畫面。菜單圖標(biāo)（通常幾行橫線）包含在標(biāo)題當(dāng)中。點(diǎn)擊圖標(biāo)可以顯示一系列主菜單項(xiàng)。
適合于：響應(yīng)式網(wǎng)站要注意：過多的菜單選項(xiàng)和子菜單選項(xiàng)會把內(nèi)容擠到屏幕下方，使用起來會很煩人和費(fèi)勁。

2、側(cè)邊菜單

   采用側(cè)邊菜單的Facebook應(yīng)用

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

3、標(biāo)簽菜單

   采用標(biāo)簽菜單的Amazon應(yīng)用

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

4、軸輻試菜單

   采用儀表板菜單的LinkedIn

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

選擇內(nèi)容

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

1、點(diǎn)按前進(jìn)

   采用前進(jìn)導(dǎo)航的BBC News

用戶可通過選擇類別、子類別然后選擇內(nèi)容進(jìn)而前進(jìn)到新的相關(guān)內(nèi)容來以向前進(jìn)的方式瀏覽內(nèi)容。
適合于：讓用戶沉浸在內(nèi)容主導(dǎo)的文章中。
要注意：用戶如果對自己在導(dǎo)航結(jié)構(gòu)中的位置不甚清楚則會產(chǎn)生迷路的感覺。

2、封面瀏覽

 采用封面瀏覽轉(zhuǎn)盤的App store

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

3、翻轉(zhuǎn)/卷頁

iOS地圖可以通過頁面卷角查看更多選項(xiàng)

為了明確表現(xiàn)出你當(dāng)前所要探索的內(nèi)容或設(shè)置項(xiàng)與正在查看的對象存在聯(lián)系，可以通過翻轉(zhuǎn)或卷頁交互進(jìn)一步訪問細(xì)節(jié)內(nèi)容。
適合于：聯(lián)系兩類不同內(nèi)容，例如設(shè)置或更多信息。要注意：交互過于復(fù)雜會讓用戶弄不清楚自己在導(dǎo)航結(jié)構(gòu)中所處的位置。

登陸

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

1、自動登錄

 Instagram

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

2、 記憶細(xì)節(jié)

Gmail

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

3、識別碼

   Paypal

打造不需要用戶輸入標(biāo)準(zhǔn)登陸信息的快速登陸通道能帶來巨大的幫助。PayPal可允許用戶創(chuàng)建簡單的識別碼進(jìn)行快速方便的登陸。
適合于：存在安全要求但能夠與特定設(shè)備相關(guān)聯(lián)的應(yīng)用。要注意：保證一定的安全等級

使用表單

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

1、   保存用戶詳細(xì)信息

   Amazon應(yīng)用可讓用戶訪問個人信息及訂單歷史

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

2、提供方便的鍵盤

   Just Eat應(yīng)用可提供專為電子郵件設(shè)計的鍵盤

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

3、進(jìn)度欄

   Topshop 應(yīng)用購買流程

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

后續(xù)

標(biāo)準(zhǔn)和規(guī)范是創(chuàng)新的基石。當(dāng)我在諾基亞5110上玩貪吃蛇的時候，從來沒想到有一天會能有機(jī)會為移動設(shè)備設(shè)計工具。今天的解決方案到了明天就會成為標(biāo)準(zhǔn)和規(guī)范。

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

原文地址：uec.nq