（有缺失，請看原文鏈接：http://mp.weixin.qq.com/s?__biz=MjM5MDk0MDM0MA==&mid=204639604&idx=1&sn=f5a9da3e12199f55df9d6f5e546d9ea9#rd）
大部分現(xiàn)代移動設(shè)備都采用了觸摸屏蜡娶，而觸摸屏有著自己獨特的優(yōu)勢和局限性锅棕。我們不僅要使用觸摸屏查看內(nèi)容，還要與內(nèi)容進(jìn)行交互荆烈。這就使得設(shè)計師要考慮如何設(shè)計出符合人體工程學(xué)的手勢和過渡效果拯勉，以及專門針對移動端的交互模式。
人體工程學(xué)
移動端人體工程學(xué)的設(shè)計要求我們既要考慮設(shè)備尺寸憔购，也要思考觸摸屏在實際應(yīng)用情況下的各種問題宫峦。舉例來說，用戶拿設(shè)備和觸摸屏幕的方式?jīng)Q定著他們能否輕松夠到屏幕的各個部分倦始。
點擊區(qū)域斗遏，或者叫“用戶為激活某對象所需觸摸的屏幕區(qū)域”需要有充分的空間以便用戶準(zhǔn)確（及自信地）操作。一般人的指尖寬度是1到2厘米鞋邑，大概對應(yīng)標(biāo)準(zhǔn)屏幕的44px到57px诵次，或者高密度屏幕（視網(wǎng)膜屏）的88px到114px账蓉。考慮到觸摸屏的區(qū)別逾一，諾基亞铸本、Apple和微軟在這方面的推薦大小彼此之間有著細(xì)微的差別。
不過遵堵，在點擊區(qū)域這一方面箱玷，并沒有硬性的規(guī)定。你完全不用費勁查看各種標(biāo)準(zhǔn)來尋求既定的答案陌宿，只需要思考用戶要在屏幕上實現(xiàn)什么目的锡足、其待實現(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)容，防止他們“迷路”个唧。
基本的過度方式包括：
上面所列的只是眾多過度效果的一小部分江解，實際可供我們選擇的過渡效果還有很多。而實際操作中徙歼，我們的選擇應(yīng)當(dāng)能夠提高我們所要推進(jìn)的交互效果的連貫性犁河。
通用模式
正如第一章中所講到的，移動設(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)中煌张。點擊圖標(biāo)可以顯示一系列主菜單項呐赡。
適合于：響應(yīng)式網(wǎng)站
要注意：過多的菜單選項和子菜單選項會把內(nèi)容擠到屏幕下方，使用起來會很煩人和費勁骏融。
2
側(cè)邊菜單
采用側(cè)邊菜單的Facebook應(yīng)用
有的應(yīng)用和網(wǎng)站采用可滑動的側(cè)邊菜單链嘀。比如Facebook的應(yīng)用。和擴(kuò)展菜單一樣档玻，一般需要點擊一個有幾行橫線的圖標(biāo)或者滑動屏幕怀泊，然后就可擴(kuò)展出或滑過菜單，并在屏幕側(cè)面垂直顯示一系列菜單項误趴。側(cè)邊菜單可以包含分類并且可以滾動包个。
適合于：菜單選項較多的應(yīng)用。其可以分離出單獨的一部分導(dǎo)航區(qū)域冤留，而不用擠占大量屏幕空間，影響用戶與內(nèi)容或功能的交互树灶。
要注意：不要與其他導(dǎo)航或交互模式相沖突纤怒，否則用戶容易糊涂。例如天通，如果在此模式之外你還用了擴(kuò)展或標(biāo)簽菜單泊窘，用戶在要找特定的對象或功能時就會迷糊。
3
標(biāo)簽菜單
采用標(biāo)簽菜單的Amazon應(yīng)用
標(biāo)簽菜單是長期存在的工具欄像寒，一般顯示于應(yīng)用的標(biāo)題或腳注位置烘豹，可以讓用戶快速在不同板塊之間進(jìn)行切換。
適合于：出于手機(jī)屏幕水平空間較小考量诺祸，適合于菜單選項較少的應(yīng)用携悯。其普遍用作iOS上的應(yīng)用導(dǎo)航欄，一般推薦放置5個菜單項筷笨。
要注意：底部的標(biāo)簽可能會和Android和Windows 8的標(biāo)準(zhǔn)交互項相沖突憔鬼。
4
軸輻試菜單
采用儀表板菜單的LinkedIn
可通過集中的主屏幕方便用戶選擇菜單項。這種模式可以將用戶導(dǎo)航到中央板塊胃夏，并且中央板塊可以有自己的內(nèi)部導(dǎo)航模式轴或。用戶可以通過激活反向鏈接返回主屏幕。
適合于：快速展示應(yīng)用的各項功能仰禀。
要注意：不要把功能彼此孤立照雁。如果用戶需要在不同功能之間進(jìn)行導(dǎo)航，讓他們先返回主屏幕會比較麻煩答恶。
選擇內(nèi)容
通過鏈接激活內(nèi)容可以讓操作流程更順暢饺蚊，從而使得用戶能夠輕松快速地用一只手選擇內(nèi)容萍诱。這一過程如果安排妥當(dāng)還可提供用戶的融入度。
A
點按前進(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)生迷路的感覺曙求。
B
封面瀏覽
采用封面瀏覽轉(zhuǎn)盤的App store
用戶可滾動查看預(yù)覽內(nèi)容碍庵，然后選擇要具體深入導(dǎo)航的對象。水平滾動模式是Win8“地鐵式”應(yīng)用所獨有的模式悟狱。
適合于：讓用戶在深入探索更多視覺內(nèi)容前進(jìn)行預(yù)覽静浴。
要注意：不要讓用戶先經(jīng)過漫長的滾動才能進(jìn)入自己需要經(jīng)常訪問的內(nèi)容。
C
翻轉(zhuǎn)/卷頁
iOS地圖可以通過頁面卷角查看更多選項
為了明確表現(xiàn)出你當(dāng)前所要探索的內(nèi)容或設(shè)置項與正在查看的對象存在聯(lián)系挤渐，可以通過翻轉(zhuǎn)或卷頁交互進(jìn)一步訪問細(xì)節(jié)內(nèi)容苹享。
適合于：聯(lián)系兩類不同內(nèi)容，例如設(shè)置或更多信息浴麻。
要注意：交互過于復(fù)雜會讓用戶弄不清楚自己在導(dǎo)航結(jié)構(gòu)中所處的位置得问。
登 錄
輸入用戶名、郵件地址和密碼是很多應(yīng)用的必備流程软免。作為設(shè)計師宫纬，我們要保證這一流程盡量簡便。
a
自動登錄
用戶的登錄信息保存在應(yīng)用中膏萧，啟動后可自動登陸并顯示用戶資料漓骚。Facebook、Instagram和Twitter等很多社交類應(yīng)用都采用了這一模式榛泛。
適合于：需要登錄才能查看個人信息但不需要過高安全級別的應(yīng)用蝌蹂。
要注意：保證一定的安全等級。
b
記憶細(xì)節(jié)
Gmail
很多針對臺式機(jī)的網(wǎng)站會保留用戶的細(xì)節(jié)信息曹锨，例如郵件地址或用戶名等孤个，這樣可以加快登陸流程。
適合于：需要登錄的手機(jī)及平板電腦網(wǎng)站沛简。
要注意：不要在不必要的地方要求登陸硼身。
c
識別碼
Paypal
打造不需要用戶輸入標(biāo)準(zhǔn)登陸信息的快速登陸通道能帶來巨大的幫助。PayPal可允許用戶創(chuàng)建簡單的識別碼進(jìn)行快速方便的登陸覆享。
適合于：存在安全要求但能夠與特定設(shè)備相關(guān)聯(lián)的應(yīng)用佳遂。
要注意：保證一定的安全等級
使用表單
在移動設(shè)備上填寫表單是很煩人的一件事，特別是專門為臺式電腦設(shè)計的網(wǎ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ù)字鍵盤。這個可以通過代碼實現(xiàn)迹卢。
適合于：所有表單
要注意：無辽故！
3、 進(jìn)度欄
Topshop 應(yīng)用購買流程
在電腦上腐碱，進(jìn)度欄能夠有效地告訴用戶一項多步流程的長度誊垢，但由于尺寸限制，這一點對于手機(jī)和平板來說實現(xiàn)起來就比較困難了症见。并不是不可能喂走，但需要巧妙地運用一切可用的空間。
適合于：購物流程或長表單
要注意：不要占太多空間谋作，否則會影響用戶
后 續(xù)
標(biāo)準(zhǔn)和規(guī)范是創(chuàng)新的基石缴啡，移動設(shè)備上交互的有效性非常關(guān)鍵。但要打造真正完美的體驗瓷们，還需要保證網(wǎng)站或應(yīng)用外觀的漂亮、新穎和吸引人秒咐。明天谬晕，將和大家探索布局和視覺設(shè)計對信息架構(gòu)及交互的支持作用以及如何打造出從里到外令人驚嘆的用戶體驗。
