當拇指和食指的操作習慣還停留在桌面時代時，應(yīng)該如何進行交互設(shè)計?交互設(shè)計師Josh Clark為你講解在移動端觸摸屏的交互設(shè)計中，設(shè)計師應(yīng)該如何思考問題，應(yīng)該怎樣打造“手指交互友好型”界面。

　　偉大的移動端界面設(shè)計，要做的不僅僅是將視覺元素裝進小小的屏幕中，還要考慮到交互問題。在觸摸屏不斷完善、市場占有率不斷提高的背景下，越來越多的用戶主用手指進行交互操作，關(guān)于手指的一些人機工程學，也應(yīng)該作為設(shè)計的考量。新的交互形式，需要設(shè)計師不再局限于視覺和信息層級方向的設(shè)計，要把眼光放得長遠，多多借鑒工業(yè)設(shè)計中人機交互的一些觀點。觸摸屏不僅僅是視覺交互，還包含了很多人機工程學的因素：用戶在用手指操作時，感覺如何?

　　拇指法則

　　針對觸摸屏的設(shè)計需要深思熟慮，其中的一個問題便是：手指，通常在屏幕上的哪個部位進行操作?

　　例如，單手持握手機，除非你的手指天生長得特別特別長，一般你都會用拇指進行點擊操作。因此，對于手機來說，為觸摸進行交互設(shè)計，主要針對的就是拇指。

　　因為拇指，人類才具有具有精確的抓握能力，從而在進化中脫穎而出，成為智慧的物種，但在手機操作中，拇指的可控范圍有限，缺乏靈活度。當然，如果你竭盡全力，拇指還是能夠在整個屏幕上進行滑動操作的。但是在大屏手機上，拇指的可控范圍還不到整個屏幕的三分之一——主要集中在屏幕底部、與拇指相對的另外一邊。

　　將主要操作目標放在拇指的熱區(qū)。例如，當用右手持握手機的時候，拇指的熱區(qū)如下圖所示，在左下角呈現(xiàn)一個弧形。

　　這就是為什么，工具欄和導(dǎo)航條一般都在手機界面的下邊緣——這跟我們在桌面界面中的慣例截然相反。這正是由于拇指可控范圍有限導(dǎo)致的，在觸摸屏上的界面設(shè)計與傳統(tǒng)慣例相反，導(dǎo)航條和主要操作目標被放到了底部。

　　針對屏幕底部，拇指的熱區(qū)進行設(shè)計，解決了很多用戶的問題。這比“左撇子”用戶的問題更加重要。因為這個社會上，右撇子還是占據(jù)大多數(shù)的。而幾乎每個用戶在使用手機時，都有過“單手持握，拇指操作”的經(jīng)歷。(公交車上，一只手扶好欄桿，另一只手操作手機)

　　而屏幕底部的拇指法則，無論那只手進行操作，都適用。與此同時，它也給予設(shè)計師一些暗示：要怎樣組織操作目標的視覺層級，以給予用戶最便捷舒適的體驗。例如，按iOS的設(shè)計慣例，一般把編輯按鈕放在右上角，即明顯，又能避免因為誤碰而導(dǎo)致界面突然改變。

　　將控件打壓置屏幕底部不僅僅關(guān)乎到拇指操作的舒適性，還關(guān)系到一個問題：如果放在上面，用手指操作時，會擋住閱讀的視線。如果控件在底部，不管手怎么移動，至少不會擋住主要內(nèi)容，從而給予清晰的視角。呈遞內(nèi)容的屏幕在上方，控制按鍵在下方。是不是感覺有一種很熟悉的感覺?沒錯，工業(yè)設(shè)計上很多經(jīng)典產(chǎn)品也是這么布局的：iPod、計算器、老式手機，還有很多數(shù)不勝數(shù)的產(chǎn)品。

　　我，機器人

　　這條關(guān)于頂部/底部的設(shè)計規(guī)律很簡單，也很實用。但不是所有按照其設(shè)計的產(chǎn)品都從其中收益：Android系統(tǒng)習慣將大量的控制元素塞到屏幕的下方。這些接近屏幕邊緣的按鈕大量擁擠在一起，再加上物理按鍵，手指非常不便于操作。Android為了將控件放到屏幕底部，不惜把搜索欄放到上方(下圖)。這就是Android的主屏幕布局，非常失誤。(這里想要說明的就是：其實設(shè)計規(guī)律依然有效，錯誤在于不合理的遵循設(shè)計規(guī)律，堆砌導(dǎo)致了空間布局問題)

　　(為了解決空間有限的問題)一定要避免在觸摸交互界面中堆砌控件，尤其是底部區(qū)域。 不幸的是，這意味著安卓App不得不將控件放到屏幕的上方來避免擁擠問題。但也不理想：1.處于拇指熱區(qū)之外。2.操作容易擋住視線。但總比原來的那種布局好，原來那種布局，對于手指肥胖的人來說，真是一場噩夢。

　　對于安卓來說，App導(dǎo)航欄和控件應(yīng)該放在頂部。這和iPhone的慣例相反，因為iPhone只有一個Home按鍵，不會像Android，本身就有3個左右的物理按鍵，再加上屏幕底部界面中的控件，會很難以操作。iPhone上的Foursquare(右圖)，而Android上的Foursquare(左圖)之所以這么設(shè)計，可不是偶然。

　　從某種角度上講，這種反堆砌元素(為防止操作失誤，提倡避免底部堆砌元素)似乎是“內(nèi)容在上，控制在下”元素的對立。Android雖然有效的避免了元素的堆砌，減少了失誤操作，但這種設(shè)計模式導(dǎo)致了前面提到過的問題：操作過程中，手會遮擋視線。

　　Web應(yīng)用：在應(yīng)用中進行應(yīng)用

　　相似的，在移動端互聯(lián)網(wǎng)中，反堆砌原則給互聯(lián)網(wǎng)瀏覽帶來了不便。網(wǎng)頁以及網(wǎng)頁應(yīng)用，一般需要依托瀏覽器才能實現(xiàn)瀏覽。瀏覽器有自己的按鈕和控件，而網(wǎng)頁/網(wǎng)頁應(yīng)用 的界面中也有按鈕和控件。如果你滑動屏幕，將網(wǎng)頁中的導(dǎo)航欄滑動至屏幕底部，那么你會發(fā)現(xiàn)，附近還有瀏覽器的工具欄，這種界面元素沖突導(dǎo)致操作極其容易出現(xiàn)出錯(見下圖)。那就意味著，要盡量避免“網(wǎng)頁的導(dǎo)航欄滑動到屏幕底部”現(xiàn)象的發(fā)生，這就需要我們將網(wǎng)站的工具欄放在頂部(部分指導(dǎo)準則中輕描淡寫的寫著：使用CSS代碼position:fixed，就能實現(xiàn)固定，但殊不知，很多手機瀏覽器不支持此功能。)

　　Android的問題可不一樣。Android的手機瀏覽器，也就是Chrome，將導(dǎo)航欄放到頂部依然不能解決它的問題，問題在于整體頁面。因為Chorme的控件吃掉了大量的空間，用戶在瀏覽過程中的體驗非常不順暢，有一種擠牙膏的感覺，再加上頂部導(dǎo)航欄，真讓人窒息(見下圖早期Chrome)。

　　因此，在《移動至上》中，Luke Wroblewski寫到“當導(dǎo)航選項不再占據(jù)內(nèi)容的空間，便是人機對話的開始”時間就是金錢，下載耗費流量，所以信息傳遞一定要快速直觀(避免因為控件太多，占據(jù)大量空間，從而導(dǎo)致用戶閱讀速度下降)

　　不管這些問題，趨勢依然是：網(wǎng)頁瀏覽體驗要以內(nèi)容為主，并且將主要的導(dǎo)航欄限制在屏幕的底部。Wroblewski通過一種有效的設(shè)計模式解決了這一系列的問題，你可以在Ad Age移動版網(wǎng)站上看到，所有的導(dǎo)航元素被塞進一個菜單按鈕，而菜單按鈕在屏幕右上方。只需要敲擊這個按鈕，就會全屏彈出導(dǎo)航選項。僅僅需要錨鏈接就能跳轉(zhuǎn)至頁面底部進行瀏覽。

　　Wroblewski寫到，這種方有幾種優(yōu)點：

　　“這種設(shè)計模式，用最少量的導(dǎo)航元素，占據(jù)最少量的空間，就能給予用戶導(dǎo)航，讓用戶選擇所需信息進行瀏覽，而且信息層級更少，僅僅需要簡單的錨鏈接就能工作。無需購買昂貴的Javascrip，無需疊加層級，無需建立單獨的導(dǎo)航頁就能夠?qū)崿F(xiàn)——僅僅是錨鏈接，就能幫助用戶跳至頁面底部。這有點像HTML 0.”

　　“內(nèi)容至上，控制處下”似乎只是一條簡單的法則，但正如你所見，情況不同，我們也應(yīng)該根據(jù)這條法則做出適當?shù)恼{(diào)整。然后按需設(shè)計，讓設(shè)計既能遵循這條法則，以保證用戶的無障礙瀏覽(否則手依然會擋住視線)，又能根據(jù)有限的空間進行布局，以保證頁面不擁擠、不復(fù)雜。如果兩全無法其美，也只能找個折中的辦法了。

　　其實，移動端觸摸屏的設(shè)計，本文提到的問題，通俗的講，就是兩個：

　　1.空間有限，元素過于擁擠會導(dǎo)致失誤操作。

　　2.如果“控制”在上方，而“內(nèi)容”在下方，用手操作的時候，會擋住視線，不方便閱讀。

　　總結(jié)一下不同平臺的設(shè)計模式：

　　1.iPhone中, 將 app 控件放到屏幕底部(內(nèi)容至上)

　　2.Android中, app 控件放到屏幕頂部(空間有限)

　　3.對于網(wǎng)頁app來說，全局導(dǎo)航放在整個頁面的最底部(而不是屏幕的底部)

　　但是這些指導(dǎo)規(guī)則僅僅適用于手機;當在更大的觸摸屏上，我們該如何進行交互設(shè)計?iPad上的游戲規(guī)則，再一次改變，我們下次再談。