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

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

人們怎樣使用平板手機

　　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在其移動版頁面側邊放置了一個“抽屜把手”，點擊之后會展開一個完整的近期新聞面板。
　　 
　　在屏幕左右邊緣放置的交互元素很可能處于平板手機的拇指熱區之外，但無論怎樣也比放置在頂部更加容易操作。你也可以為這種模式添加橫滑展開的手勢，只要不與界面整體的橫滑回退效果產生沖突即可。總體上講，功能控件位于屏幕左右邊緣的模式更適用于雙手拇指同時操作的情況，因此在平板電腦的界面中更為常見。

　　本文選自《觸類旁通：多終端時代的觸屏界面設計》，點此鏈接可在博文視點官網查看此書。
　　　　　　　　　　　　　　　　　　　　
　　想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼并關注。