（有缺失，請(qǐng)看原文鏈接：http://mp.weixin.qq.com/s?__biz=MjM5MDk0MDM0MA==&mid=204639604&idx=1&sn=f5a9da3e12199f55df9d6f5e546d9ea9#rd）

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

人體工程學(xué)

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

點(diǎn)擊區(qū)域，或者叫“用戶為激活某對(duì)象所需觸摸的屏幕區(qū)域”需要有充分的空間以便用戶準(zhǔn)確（及自信地）操作。一般人的指尖寬度是1到2厘米，大概對(duì)應(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è)計(jì)就行了。

手 勢(shì)

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

下表是對(duì)各種手勢(shì)的簡(jiǎn)單匯總：

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

過 渡

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

基本的過度方式包括：

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

通用模式

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

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

1

主導(dǎo)航

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

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

有很多移動(dò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)會(huì)把內(nèi)容擠到屏幕下方，使用起來會(huì)很煩人和費(fèi)勁。

2

側(cè)邊菜單

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

有的應(yīng)用和網(wǎng)站采用可滑動(dòng)的側(cè)邊菜單。比如Facebook的應(yīng)用。和擴(kuò)展菜單一樣，一般需要點(diǎn)擊一個(gè)有幾行橫線的圖標(biāo)或者滑動(dòng)屏幕，然后就可擴(kuò)展出或滑過菜單，并在屏幕側(cè)面垂直顯示一系列菜單項(xiàng)。側(cè)邊菜單可以包含分類并且可以滾動(dòng)。

適合于：菜單選項(xiàng)較多的應(yīng)用。其可以分離出單獨(dú)的一部分導(dǎo)航區(qū)域，而不用擠占大量屏幕空間，影響用戶與內(nèi)容或功能的交互。

要注意：不要與其他導(dǎo)航或交互模式相沖突，否則用戶容易糊涂。例如，如果在此模式之外你還用了擴(kuò)展或標(biāo)簽菜單，用戶在要找特定的對(duì)象或功能時(shí)就會(huì)迷糊。

3

標(biāo)簽菜單

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

標(biāo)簽菜單是長(zhǎng)期存在的工具欄，一般顯示于應(yīng)用的標(biāo)題或腳注位置，可以讓用戶快速在不同板塊之間進(jìn)行切換。

適合于：出于手機(jī)屏幕水平空間較小考量，適合于菜單選項(xiàng)較少的應(yīng)用。其普遍用作iOS上的應(yīng)用導(dǎo)航欄，一般推薦放置5個(gè)菜單項(xiàng)。

要注意：底部的標(biāo)簽可能會(huì)和Android和Windows 8的標(biāo)準(zhǔn)交互項(xiàng)相沖突。

4

軸輻試菜單

采用儀表板菜單的LinkedIn

可通過集中的主屏幕方便用戶選擇菜單項(xiàng)。這種模式可以將用戶導(dǎo)航到中央板塊，并且中央板塊可以有自己的內(nèi)部導(dǎo)航模式。用戶可以通過激活反向鏈接返回主屏幕。

適合于：快速展示應(yīng)用的各項(xiàng)功能。

要注意：不要把功能彼此孤立。如果用戶需要在不同功能之間進(jìn)行導(dǎo)航，讓他們先返回主屏幕會(huì)比較麻煩。

選擇內(nèi)容

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

A

點(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)的文章中。

要注意：用戶如果對(duì)自己在導(dǎo)航結(jié)構(gòu)中的位置不甚清楚則會(huì)產(chǎn)生迷路的感覺。

B

封面瀏覽

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

用戶可滾動(dòng)查看預(yù)覽內(nèi)容，然后選擇要具體深入導(dǎo)航的對(duì)象。水平滾動(dòng)模式是Win8“地鐵式”應(yīng)用所獨(dú)有的模式。

適合于：讓用戶在深入探索更多視覺內(nèi)容前進(jìn)行預(yù)覽。

要注意：不要讓用戶先經(jīng)過漫長(zhǎng)的滾動(dòng)才能進(jìn)入自己需要經(jīng)常訪問的內(nèi)容。

C

翻轉(zhuǎn)/卷頁

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

為了明確表現(xiàn)出你當(dāng)前所要探索的內(nèi)容或設(shè)置項(xiàng)與正在查看的對(duì)象存在聯(lián)系，可以通過翻轉(zhuǎn)或卷頁交互進(jìn)一步訪問細(xì)節(jié)內(nèi)容。

適合于：聯(lián)系兩類不同內(nèi)容，例如設(shè)置或更多信息。

要注意：交互過于復(fù)雜會(huì)讓用戶弄不清楚自己在導(dǎo)航結(jié)構(gòu)中所處的位置。

登 錄

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

a

自動(dòng)登錄

Instagram

用戶的登錄信息保存在應(yīng)用中，啟動(dòng)后可自動(dòng)登陸并顯示用戶資料。Facebook、Instagram和Twitter等很多社交類應(yīng)用都采用了這一模式。

適合于：需要登錄才能查看個(gè)人信息但不需要過高安全級(jí)別的應(yīng)用。

要注意：保證一定的安全等級(jí)。

b

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

Gmail

很多針對(duì)臺(tái)式機(jī)的網(wǎng)站會(huì)保留用戶的細(xì)節(jié)信息，例如郵件地址或用戶名等，這樣可以加快登陸流程。

適合于：需要登錄的手機(jī)及平板電腦網(wǎng)站。

要注意：不要在不必要的地方要求登陸。

c

識(shí)別碼

Paypal

打造不需要用戶輸入標(biāo)準(zhǔn)登陸信息的快速登陸通道能帶來巨大的幫助。PayPal可允許用戶創(chuàng)建簡(jiǎn)單的識(shí)別碼進(jìn)行快速方便的登陸。

適合于：存在安全要求但能夠與特定設(shè)備相關(guān)聯(lián)的應(yīng)用。

要注意：保證一定的安全等級(jí)

使用表單

在移動(dòng)設(shè)備上填寫表單是很煩人的一件事，特別是專門為臺(tái)式電腦設(shè)計(jì)的網(wǎng)站表單。但你可以對(duì)流程進(jìn)行簡(jiǎn)化，并想出一些辦法讓使用移動(dòng)設(shè)備填寫表單變得更加簡(jiǎn)捷。

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

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

使用登陸方式保存/記憶用戶信息可以大幅節(jié)省時(shí)間并降低開支，讓網(wǎng)站或應(yīng)用的使用變得更加方便簡(jiǎn)單。

適合于：需要用戶添加個(gè)人信息（例如購(gòu)物過程中）的網(wǎng)站或應(yīng)用。

要注意：確保安全。

2、 提供方便的鍵盤

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

簡(jiǎn)化表單填寫流程的方法之一就是在用戶激活表單框時(shí)顯示專門的鍵盤。例如，如果用戶需要輸入電話號(hào)碼，可以顯示數(shù)字鍵盤。這個(gè)可以通過代碼實(shí)現(xiàn)。

適合于：所有表單

要注意：無！

3、 進(jìn)度欄

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

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

適合于：購(gòu)物流程或長(zhǎng)表單

要注意：不要占太多空間，否則會(huì)影響用戶

后 續(xù)

標(biāo)準(zhǔn)和規(guī)范是創(chuàng)新的基石，移動(dòng)設(shè)備上交互的有效性非常關(guān)鍵。但要打造真正完美的體驗(yàn)，還需要保證網(wǎng)站或應(yīng)用外觀的漂亮、新穎和吸引人。明天，將和大家探索布局和視覺設(shè)計(jì)對(duì)信息架構(gòu)及交互的支持作用以及如何打造出從里到外令人驚嘆的用戶體驗(yàn)。