觸摸互動設計手機快速入門

來源:互聯網
上載者:User

   當拇指和食指的操作習慣還停留在案頭時代時,應該如何進行互動設計?互動設計師Josh Clark為你講解在移動端觸控螢幕的互動設計中,設計師應該如何思考問題,應該怎樣打造“手指互動友好型”介面。

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

  拇指法則

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

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

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

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

  這就是為什麼,工具列和導航條一般都在手機介面的下邊緣——這跟我們在案頭介面中的慣例截然相反。這正是由於拇指可控範圍有限導致的,在觸控螢幕上的介面設計與傳統慣例相反,導航條和主要操作目標被放到了底部。

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

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

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

  我,機器人

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

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

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

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

  Web應用:在應用中進行應用

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

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

  因此,在《移動至上》中,Luke Wroblewski寫到“當導航選項不再佔據內容的空間,便是人機對話的開始”時間就是金錢,下載耗費流量,所以資訊傳遞一定要快速直觀(避免因為控制項太多,佔據大量空間,從而導致使用者閱讀速度下降)

  不管這些問題,趨勢依然是:網頁瀏覽體驗要以內容為主,並且將主要的導覽列限制在螢幕的底部。Wroblewski通過一種有效設計模式解決了這一系列的問題,你可以在Ad Age移動版網站上看到,所有的導航元素被塞進一個功能表按鈕,而功能表按鈕在螢幕右上方。只需要敲擊這個按鈕,就會全屏彈出導航選項。僅僅需要錨連結就能跳轉至頁面底部進行瀏覽。

  Wroblewski寫到,這種方有幾種優點:

  “這種設計模式,用最少量的導航元素,佔據最少量的空間,就能給予使用者導航,讓使用者選擇所需資訊進行瀏覽,而且資訊層級更少,僅僅需要簡單的錨連結就能工作。無需購買昂貴的Javascrip,無需疊加層級,無需建立單獨的導航頁就能夠實現——僅僅是錨連結,就能協助使用者跳至頁面底部。這有點像HTML 0.”

  “內容至上,控制處下”似乎只是一條簡單的法則,但正如你所見,情況不同,我們也應該根據這條法則做出適當的調整。然後按需設計,讓設計既能遵循這條法則,以保證使用者的無障礙瀏覽(否則手依然會擋住視線),又能根據有限的空間進行布局,以保證頁面不擁擠、不複雜。如果兩全無法其美,也只能找個折中的辦法了。

  其實,移動端觸控螢幕的設計,本文提到的問題,通俗的講,就是兩個:

  1.空間有限,元素過於擁擠會導致失誤操作。

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

  總結一下不同平台的設計模式:

  1.iPhone中, 將 app 控制項放到螢幕底部(內容至上)

  2.Android中, app 控制項放到螢幕頂部(空間有限)

  3.對於網頁app來說,全域導航放在整個頁面的最底部(而不是螢幕的底部)

  但是這些指導規則僅僅適用於手機;當在更大的觸控螢幕上,我們該如何進行互動設計?iPad上的遊戲規則,再一次改變,我們下次再談。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。