大屏時代的生態變遷，看平板手機的拇指熱鍵與界面佈局

引言：曾幾什麼時候，無數大大小小的觸屏設備彷彿泄閘的洪水通常涌入這個世界。面對突如其來的生態變遷，界面設計師們別無選擇，只有在急流當中奮力學習游泳，才能讓本身不至於被洪潮所吞沒。本文帶你瞭解如何面向平板手機的拇指熱鍵與界面佈局，爲這種轉變提供助力。 
本文選自《舉一反三：多終端時代的觸屏界面設計》。

人們怎樣使用平板手機

　　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或網頁內部，一種更具實踐性的作法是在界面邊緣放置某種「抽屜把手」，形如按鈕或Tab，點擊以後便可展開整個面板。 
　　
　　　　　　　　　　　　　　　
　　　　　　　TIME在其移動版頁面側邊放置了一個「抽屜把手」，點擊以後會展開一個完整的近期新聞面板。
　　 
　　在屏幕左右邊緣放置的交互元素極可能處於平板手機的拇指熱區以外，但不管怎樣也比放置在頂部更加容易操做。你也能夠爲這種模式添加橫滑展開的手勢，只要不與界面總體的橫滑回退效果產生衝突便可。整體上講，功能控件位於屏幕左右邊緣的模式更適用於雙手拇指同時操做的狀況，所以在平板電腦的界面中更爲常見。

　　本文選自《舉一反三：多終端時代的觸屏界面設計》，點此連接可在博文視點官網查看此書。
　　　　　　　　　　　　　　　　　　　　
　　想及時得到更多精彩文章，可在微信中搜索「博文視點」或者掃描下方二維碼並關注。