健身房里的欲乱h文_筱惠欲乱美女全文免费_欧美无遮挡一区二区三区_国产极品粉嫩福利在线观看

觸摸交互設計快速入門之手機篇發布者：本站     時間：2021-12-23 10:12:47

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

觸摸交互設計快速入門之手機篇,PS教程,

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

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

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

觸摸交互設計快速入門之手機篇,PS教程,

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

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

 

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

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

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

觸摸交互設計快速入門之手機篇,PS教程,

 

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

我，機器人
 

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

 

觸摸交互設計快速入門之手機篇,PS教程,

 

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

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

觸摸交互設計快速入門之手機篇,PS教程,

 

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

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

觸摸交互設計快速入門之手機篇,PS教程,

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