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

標籤：左右   介面   面向   轉變   dft   blank   web   view   比例   

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

人們怎樣使用平板手機

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

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

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