原文連結
大屏時代的生态變遷，看平闆手機的拇指熱鍵與界面布局
博文視點 2017-05-11 09:52:33 浏覽73 評論0
android http 布局 Blog 觸屏 界面設計
摘要： 曾幾何時，無數大大小小的觸屏裝置仿佛洩閘的洪水一般湧入這個世界。面對突如其來的生态變遷，界面設計師們别無選擇，隻有在急流當中奮力學習遊泳，才能讓自己不至于被洪潮所吞沒。本文帶你了解如何面向平闆手機的拇指熱鍵與界面布局，為這種轉變提供助力。 本文選自《觸類旁通：多終端時代的觸屏界面設計》。
引言：曾幾何時，無數大大小小的觸屏裝置仿佛洩閘的洪水一般湧入這個世界。面對突如其來的生态變遷，界面設計師們别無選擇，隻有在急流當中奮力學習遊泳，才能讓自己不至于被洪潮所吞沒。本文帶你了解如何面向平闆手機的拇指熱鍵與界面布局，為這種轉變提供助力。
本文選自《觸類旁通：多終端時代的觸屏界面設計》。
人們怎樣使用平闆手機
iPhone出現之後的幾年，手機螢幕的尺寸基本都保持在4英寸以下（以對角線計算），非常便于單手操作。然而，随着大屏手機不斷湧入市場，到2014年年中，已經有将近三分之一的移動Web浏覽量來自這些裝置。大屏手機填補了傳統觸屏手機與平闆電腦之間的空白地帶，有些大屏手機的螢幕甚至達到7英寸之巨，是以也獲得了一個略顯蹩腳的綽号——平闆手機。
這類裝置雖然有着巨大的身形，但人們仍然會将其作為手機使用。不過，與小屏裝置的情況不同，為了在如此巨大的螢幕上舞指自如，使用者必須更加頻繁地在不同的持機方式之間切換，而且在多數時間裡需要雙手同時參與。平闆手機使用者在将近70% 的操作時間裡會同時使用兩隻手，其中一手持機、另一手食指操作的方式最為普遍，約占35%。不過即便如此，對平闆手機來說，真正占據互動主導地位的卻依然是拇指：在60% 的時間裡，使用者會通過拇指進行觸屏操作，無論持機方式是單手還是雙手。
雖然就某一姿态而言，一手持機、另一手食指操作的方式占據的比例最高（35%），但包含拇指操作的所有持機方式的總和卻達到了60%。
平闆手機的拇指熱區
由于拇指操作同樣占據主導地位，是以對平闆手機來說，拇指熱區的重要程度與在小屏手機上的情況旗鼓相當。不同之處在于，平闆手機使用者會更加頻繁地通過雙手拇指同時進行操作。在這種情況下，拇指熱區也會相應地分為兩部分，分别位于螢幕下方的左右兩側，其中還會産生交集，而螢幕上方的廣闊區域則是拇指在正常情況下難以觸及的。不過，對設計師來說，需要優先考慮的仍然是拇指熱區範圍最小的持機方式，也就是單手持機操作。
其實這也正是我們的第一條拇指設計原則：無論對何種規格的觸屏裝置，都要優先考慮拇指熱區最小、操作局限性最高的持機方式，這樣才能確定人們在任何姿态下都能與界面進行正常的互動。是以，對平闆手機而言，我們首先應該聚焦的仍是單手持機操作的情況。
這裡有個挺有意思的現象：同是單手持機操作狀态，平闆手機上的拇指熱區面積卻比普通手機上的小。這是因為，在小屏規格範圍内，無論螢幕尺寸如何變化，拇指熱區基本都能保持相似的形狀及位置，而一旦螢幕尺寸突破了某個臨界值，人們通常需要将小指從螢幕下邊緣移至機身背後，使其與另外三根手指一起托住手機才能保持穩定，但這種姿态會使拇指的活動範圍及相應的熱區面積變得比平時小。
單手操作平闆手機時，人們必須将除拇指之外的四根手指托在機身背後才能保持穩定，這就使拇指的活動範圍及相應的熱區面積變小了。
在單手狀态下，平闆手機的螢幕上方會有很大一部分區域處于拇指的控制範圍之外。面對這種情況，人們在實踐中也有對策，例如直接握住或托住機身中部靠上的位置，使拇指的控制區域得到變相的擴充。
高位持機方式可以向上擴充拇指熱區，但同時會使螢幕下方的更多區域脫離拇指的控制。
平闆手機的界面布局
随着手機螢幕的增大，更多的界面元素被迫移出拇指熱區，布局設計需要針對這一情況進行調整。盡管平闆手機使用者更習慣于根據不同的情況主動調整持機方式，但作為設計師，我們有義務去降低額外的費力度。無論對何種規格的觸屏裝置，都要優先考慮拇指熱區最小、操作局限性最高的持機方式，這樣才能確定人們在任何狀态下都能與界面進行正常的互動。是以，對平闆手機來說，也要盡可能将高頻功能元素集中放置在單手操作的拇指熱區當中。或許你還記得，同是在單手操作狀态下，平闆手機的拇指熱區面積實際上比普通手機的更小，不過這兩者的形狀及位置類似，是以一些基本的設計原則也是相通的。
在平闆手機上，仍然需要将導航及高頻功能控件放置在螢幕底部。無論使用者怎樣持機，平闆手機的螢幕頂部區域總是相對難以觸及。是以，和在小屏手機中一樣，我們在這裡仍然要強調“内容在上，控件在下”的原則，進而使高頻互動元素盡可能保持在拇指熱區範圍内，并避免内容被手指遮擋。不過，例外情況仍然來自Android。雖然根據Android設計規範的要求，我們應該在小屏手機中将App的導航與功能控件放置在頂部，以避免與底部的系統導航欄産生沖突，但是在大屏裝置上，可以将一些高頻控件從标準的Action Bar中移出，并放置到螢幕底部。其實這種分體式Action Bar模式最初是面向小屏裝置設計的，但如今已被證明對大屏手機更為适用。
在預設情況下，Android的Action Bar會将所有的導航及功能選項整合到界面頂部（左），而分體式Action Bar則會将一些重要功能放到螢幕底部，使其更便于被拇指點選（右）。
然而，适用并不等同于理想。在Android中，将互動元素堆疊在螢幕底部的做法确實容易增加誤操作的可能性，這是客觀事實。但是，鑒于平闆手機巨大的螢幕尺寸，單手狀态下又難以觸及螢幕頂部區域，是以權衡下來，将一部分控件移到底部的做法還是合理的，哪怕要冒一定的風險，也至少可以讓人們在單手操作的時候能夠輕松點選。我們在前文中提到過，系統平台複雜的環境特性需要設計師不斷進行各種權衡與妥協。在舉棋不定時，要記得“兩害相權取其輕”的原則——一方面是誤操作的可能性增大，另一方面是無法操作，在這種局面下前者顯然更有利。
此外，懸浮按鈕也是很實用的設計模式。這類按鈕通常位于界面右下角，懸浮于内容之上。可以通過這種方式将App全局或目前界面中最重要的功能提供給使用者，例如發表照片或簽到、發消息等。點選之後将懸浮按鈕變形為橫向工具欄或輻射菜單也是不錯的互動模式。
與分體式Action Bar模式類似，位于螢幕底部的、有可能導緻誤操作的懸浮按鈕同樣展現着妥協的初衷。不過畢竟單一按鈕的尺寸較小，不會像在系統導航欄上堆疊一層工具欄那樣帶來很大的影響。在Android的UI體系當中，這種懸浮按鈕稱為“FAB”（Floating Action Button）。讀者有興趣的話不妨閱讀Android設計規範（http://bkaprt.com/dft/01-16/），進行更加深入的了解。
可以通過螢幕底部的懸浮按鈕觸發更多功能，同時避免與Android的系統導航欄産生大範圍的沖突。
此外，也可以嘗試将控件放置在頂部，但使其能夠響應某種作用于螢幕下方的輔助互動形式。例如，可以将Tab導航放在内容上方，但使其切換能夠被内容區域的左右滑動手勢控制，這也是一種變相的拇指友好模式。
Android的“通訊錄”是一個典型的例子。使用者可以直接點選Tab本身，也可以通過左右滑動操作來切換Tab。
這種模式通常适用于Tab導航。在小屏手機上，使用者可以相對輕松地點選頂部Action Bar中的Tab；而在平闆手機上，直接在内容區域左右滑動實作切換顯然是最為便捷的。實際上，早已普及的下拉重新整理模式也是相同的道理，使用者不必與界面遠端的某個控件産生互動，隻要直接在内容上進行手勢操作即可。
對于移動版本的網頁，仍然建議使用前文中介紹過的錨點連結導航模式。我們在小屏裝置上遇到的諸如CSS相容性局限或頁面元素與浏覽器自身布局沖突等一系列問題，在平闆手機中依然存在。誠然，将錨點連結放置在頂部的做法算不上對拇指友好，但綜合考慮，這個因素在浏覽器環境中的重要性就沒有那麼高了。我總會在使用者研究中觀察到這樣的現象：對移動裝置上的網頁，除非使用者在主要内容區域實在無法找到自己需要的資訊，否則他們幾乎不會想起主導航。從這個角度講，将導航菜單放置在主要内容的下方，讓使用者在最需要的時候能夠用到，也是非常合理的做法，同時不會使拇指受苦。
避免手指跨屏操作。多數人的拇指長度不夠在平闆手機上進行橫跨螢幕的點選。在單手持機的情況下，不用說對角線，即便讓右手拇指去點選位于螢幕左端的元素也是相當困難的。是以，要盡量避免将重要的互動元素緊貼左右兩側邊緣放置。在尺寸方面，要盡可能使元素的寬度達到螢幕寬度的三分之一以上，最好可以接近螢幕寬度，進而最大程度降低拇指操作的費力度。
不要随着螢幕的增大而放大手勢操作的觸發區域。以橫滑展開菜單為例，在平闆手機上，不要放大橫滑所需的距離，别讓使用者必須在整個螢幕範圍内使用手勢才能達到觸發效果。人們使用螢幕巨大的手機，不代表他們有着巨人般的手，手勢應該圍繞手指進行設計，而不是圍繞螢幕。
整體移動。界面中的多數元素是靜态的，需要我們自己伸手觸及。我們要去點選按鈕，而按鈕從來不會主動移到我們手邊。但事情也并非完全如此。三星為其Android平闆手機創造了一種獨特的單手操作模式（如圖1.26所示），整個界面會縮小到普通小屏手機的尺寸，這樣就使幾乎所有的互動元素都能位于拇指熱區當中了。實際上，這種模式相當于臨時把大屏手機縮小了。雖然操作便捷了很多，但經常這樣使用又顯得很尴尬——既然大屏無法得到充分利用，當初何必要購買這樣的裝置呢？
iOS則采用了一種稱為“觸達性”的設計模式。連續兩次輕觸“Home”鍵，界面便會整體下移，進而使頂部元素進入拇指熱區。當使用者完成接下來的操作之後，界面便會自動上移至初始位置。這種模式使得界面頂部的元素更容易被單手拇指操作，在效果上等同于使用者将自己的持機手上移。相比三星來說，蘋果的實作方式有一個顯著的優點——将界面移位而非縮放，可以避免互動元素本身的尺寸或布局發生變化。
三星的單手模式可以将界面整體縮小至小屏手機的規格（左），而蘋果的“觸達性”則是将界面下移至拇指的控制範圍内（右）。
除了蘋果與三星提供的這類系統級的解決方案以外，我們還可以在自己的産品中采用類似的思路，例如通過滑動面闆的形式來承載内容。與系統提供的上下移動界面的方式不同，在App或