觸摸交互設計手機快速入門發(fā)布者：本站     時間：2020-06-21 11:06:13

當拇指和食指的操作習慣還停留在桌面時代時，應該如何進行交互設計?交互設計師Josh Clark為你講解在移動端觸摸屏的交互設計中，設計師應該如何思考問題，應該怎樣打造“手指交互友好型”界面。
觸摸交互設計手機快速入門 三聯(lián)
偉大的移動端界面設計，要做的不僅僅是將視覺元素裝進小小的屏幕中，還要考慮到交互問題。在觸摸屏不斷完善、市場占有率不斷提高的背景下，越來越多的用戶主用手指進行交互操作，關于手指的一些人機工程學，也應該作為設計的考量。新的交互形式，需要設計師不再局限于視覺和信息層級方向的設計，要把眼光放得長遠，多多借鑒工業(yè)設計中人機交互的一些觀點。觸摸屏不僅僅是視覺交互，還包含了很多人機工程學的因素：用戶在用手指操作時，感覺如何?

拇指法則

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

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

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

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

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

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

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

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

我，機器人

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

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

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

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

Web應用：在應用中進行應用

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

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