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

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

拇指法則

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

例如，單手持握手機，除非你的手指天生長(cháng)得特別特別長(cháng)，一般你都會(huì )用拇指進(jìn)行點(diǎn)擊操作。因此，對于手機來(lái)說(shuō)，為觸摸進(jìn)行交互設計，主要針對的就是拇指。

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

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

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

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

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

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

我，機器人

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

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

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

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

Web應用：在應用中進(jìn)行應用

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

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