大屏?xí)r代的生態(tài)變遷，看平板手機(jī)的拇指熱鍵與界面布局

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

人們怎樣使用平板手機(jī)

　　iPhone出現(xiàn)之后的幾年，手機(jī)屏幕的尺寸基本都保持在4英寸以下（以對角線計(jì)算），非常便于單手操作。然而，隨著大屏手機(jī)不斷涌入市場，到2014年年中，已經(jīng)有將近三分之一的移動Web瀏覽量來自這些設(shè)備。大屏手機(jī)填補(bǔ)了傳統(tǒng)觸屏手機(jī)與平板電腦之間的空白地帶，有些大屏手機(jī)的屏幕甚至達(dá)到7英寸之巨，因此也獲得了一個(gè)略顯蹩腳的綽號——平板手機(jī)。
　　 
　　　　　　　　　　　　
　　　　　　　　　　　　
　　這類設(shè)備雖然有著巨大的身形，但人們?nèi)匀粫⑵渥鳛槭謾C(jī)使用。不過，與小屏設(shè)備的情況不同，為了在如此巨大的屏幕上舞指自如，用戶必須更加頻繁地在不同的持機(jī)方式之間切換，而且在多數(shù)時(shí)間里需要雙手同時(shí)參與。平板手機(jī)用戶在將近70% 的操作時(shí)間里會同時(shí)使用兩只手，其中一手持機(jī)、另一手食指操作的方式最為普遍，約占35%。不過即便如此，對平板手機(jī)來說，真正占據(jù)交互主導(dǎo)地位的卻依然是拇指：在60% 的時(shí)間里，用戶會通過拇指進(jìn)行觸屏操作，無論持機(jī)方式是單手還是雙手。
　　　　　　　　　　
雖然就某一姿態(tài)而言，一手持機(jī)、另一手食指操作的方式占據(jù)的比例最高（35%），但包含拇指操作的所有持機(jī)方式的總和卻達(dá)到了60%。

平板手機(jī)的拇指熱區(qū)

　　由于拇指操作同樣占據(jù)主導(dǎo)地位，所以對平板手機(jī)來說，拇指熱區(qū)的重要程度與在小屏手機(jī)上的情況旗鼓相當(dāng)。不同之處在于，平板手機(jī)用戶會更加頻繁地通過雙手拇指同時(shí)進(jìn)行操作。在這種情況下，拇指熱區(qū)也會相應(yīng)地分為兩部分，分別位于屏幕下方的左右兩側(cè)，其中還會產(chǎn)生交集，而屏幕上方的廣闊區(qū)域則是拇指在正常情況下難以觸及的。不過，對設(shè)計(jì)師來說，需要優(yōu)先考慮的仍然是拇指熱區(qū)范圍最小的持機(jī)方式，也就是單手持機(jī)操作。 
其實(shí)這也正是我們的第一條拇指設(shè)計(jì)原則：無論對何種規(guī)格的觸屏設(shè)備，都要優(yōu)先考慮拇指熱區(qū)最小、操作局限性最高的持機(jī)方式，這樣才能確保人們在任何姿態(tài)下都能與界面進(jìn)行正常的互動。因此，對平板手機(jī)而言，我們首先應(yīng)該聚焦的仍是單手持機(jī)操作的情況。
　　這里有個(gè)挺有意思的現(xiàn)象：同是單手持機(jī)操作狀態(tài)，平板手機(jī)上的拇指熱區(qū)面積卻比普通手機(jī)上的小。這是因?yàn)椋谛∑烈?guī)格范圍內(nèi)，無論屏幕尺寸如何變化，拇指熱區(qū)基本都能保持相似的形狀及位置，而一旦屏幕尺寸突破了某個(gè)臨界值，人們通常需要將小指從屏幕下邊緣移至機(jī)身背后，使其與另外三根手指一起托住手機(jī)才能保持穩(wěn)定，但這種姿態(tài)會使拇指的活動范圍及相應(yīng)的熱區(qū)面積變得比平時(shí)小。
　　　　　　　　　　　　
單手操作平板手機(jī)時(shí)，人們必須將除拇指之外的四根手指托在機(jī)身背后才能保持穩(wěn)定，這就使拇指的活動范圍及相應(yīng)的熱區(qū)面積變小了。

　　在單手狀態(tài)下，平板手機(jī)的屏幕上方會有很大一部分區(qū)域處于拇指的控制范圍之外。面對這種情況，人們在實(shí)踐中也有對策，例如直接握住或托住機(jī)身中部靠上的位置，使拇指的控制區(qū)域得到變相的擴(kuò)展。 
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　高位持機(jī)方式可以向上擴(kuò)展拇指熱區(qū)，但同時(shí)會使屏幕下方的更多區(qū)域脫離拇指的控制。

平板手機(jī)的界面布局

　　隨著手機(jī)屏幕的增大，更多的界面元素被迫移出拇指熱區(qū)，布局設(shè)計(jì)需要針對這一情況進(jìn)行調(diào)整。盡管平板手機(jī)用戶更習(xí)慣于根據(jù)不同的情況主動調(diào)整持機(jī)方式，但作為設(shè)計(jì)師，我們有義務(wù)去降低額外的費(fèi)力度。無論對何種規(guī)格的觸屏設(shè)備，都要優(yōu)先考慮拇指熱區(qū)最小、操作局限性最高的持機(jī)方式，這樣才能確保人們在任何狀態(tài)下都能與界面進(jìn)行正常的互動。因此，對平板手機(jī)來說，也要盡可能將高頻功能元素集中放置在單手操作的拇指熱區(qū)當(dāng)中?；蛟S你還記得，同是在單手操作狀態(tài)下，平板手機(jī)的拇指熱區(qū)面積實(shí)際上比普通手機(jī)的更小，不過這兩者的形狀及位置類似，因此一些基本的設(shè)計(jì)原則也是相通的。
　　在平板手機(jī)上，仍然需要將導(dǎo)航及高頻功能控件放置在屏幕底部。無論用戶怎樣持機(jī)，平板手機(jī)的屏幕頂部區(qū)域總是相對難以觸及。所以，和在小屏手機(jī)中一樣，我們在這里仍然要強(qiáng)調(diào)“內(nèi)容在上，控件在下”的原則，從而使高頻交互元素盡可能保持在拇指熱區(qū)范圍內(nèi)，并避免內(nèi)容被手指遮擋。不過，例外情況仍然來自Android。雖然根據(jù)Android設(shè)計(jì)規(guī)范的要求，我們應(yīng)該在小屏手機(jī)中將App的導(dǎo)航與功能控件放置在頂部，以避免與底部的系統(tǒng)導(dǎo)航欄產(chǎn)生沖突，但是在大屏設(shè)備上，可以將一些高頻控件從標(biāo)準(zhǔn)的Action Bar中移出，并放置到屏幕底部。其實(shí)這種分體式Action Bar模式最初是面向小屏設(shè)備設(shè)計(jì)的，但如今已被證明對大屏手機(jī)更為適用。 
　　　　　　　　　　　　
在默認(rèn)情況下，Android的Action Bar會將所有的導(dǎo)航及功能選項(xiàng)整合到界面頂部（左），而分體式Action Bar則會將一些重要功能放到屏幕底部，使其更便于被拇指點(diǎn)擊（右）。 
　　

　　然而，適用并不等同于理想。在Android中，將交互元素堆疊在屏幕底部的做法確實(shí)容易增加誤操作的可能性，這是客觀事實(shí)。但是，鑒于平板手機(jī)巨大的屏幕尺寸，單手狀態(tài)下又難以觸及屏幕頂部區(qū)域，所以權(quán)衡下來，將一部分控件移到底部的做法還是合理的，哪怕要冒一定的風(fēng)險(xiǎn)，也至少可以讓人們在單手操作的時(shí)候能夠輕松點(diǎn)擊。我們在前文中提到過，系統(tǒng)平臺復(fù)雜的環(huán)境特性需要設(shè)計(jì)師不斷進(jìn)行各種權(quán)衡與妥協(xié)。在舉棋不定時(shí)，要記得“兩害相權(quán)取其輕”的原則——一方面是誤操作的可能性增大，另一方面是無法操作，在這種局面下前者顯然更有利。 
　　此外，懸浮按鈕也是很實(shí)用的設(shè)計(jì)模式。這類按鈕通常位于界面右下角，懸浮于內(nèi)容之上?？梢酝ㄟ^這種方式將App全局或當(dāng)前界面中最重要的功能提供給用戶，例如發(fā)表照片或簽到、發(fā)消息等。點(diǎn)擊之后將懸浮按鈕變形為橫向工具欄或輻射菜單也是不錯(cuò)的交互模式。

　　　　　　　　　　　 
　　與分體式Action Bar模式類似，位于屏幕底部的、有可能導(dǎo)致誤操作的懸浮按鈕同樣體現(xiàn)著妥協(xié)的初衷。不過畢竟單一按鈕的尺寸較小，不會像在系統(tǒng)導(dǎo)航欄上堆疊一層工具欄那樣帶來很大的影響。在Android的UI體系當(dāng)中，這種懸浮按鈕稱為“FAB”（Floating Action Button）。讀者有興趣的話不妨閱讀Android設(shè)計(jì)規(guī)范（http://bkaprt.com/dft/01-16/），進(jìn)行更加深入的了解。

　　　　　　　　　　　　　　　　　
　　可以通過屏幕底部的懸浮按鈕觸發(fā)更多功能，同時(shí)避免與Android的系統(tǒng)導(dǎo)航欄產(chǎn)生大范圍的沖突。
　　 
　　此外，也可以嘗試將控件放置在頂部，但使其能夠響應(yīng)某種作用于屏幕下方的輔助交互形式。例如，可以將Tab導(dǎo)航放在內(nèi)容上方，但使其切換能夠被內(nèi)容區(qū)域的左右滑動手勢控制，這也是一種變相的拇指友好模式。

　　　　　　　　　　　　　　　　　　
　　　 Android的“通訊錄”是一個(gè)典型的例子。用戶可以直接點(diǎn)擊Tab本身，也可以通過左右滑動操作來切換Tab。

　　這種模式通常適用于Tab導(dǎo)航。在小屏手機(jī)上，用戶可以相對輕松地點(diǎn)擊頂部Action Bar中的Tab；而在平板手機(jī)上，直接在內(nèi)容區(qū)域左右滑動實(shí)現(xiàn)切換顯然是最為便捷的。實(shí)際上，早已普及的下拉刷新模式也是相同的道理，用戶不必與界面遠(yuǎn)端的某個(gè)控件產(chǎn)生交互，只要直接在內(nèi)容上進(jìn)行手勢操作即可。 
　　對于移動版本的網(wǎng)頁，仍然建議使用前文中介紹過的錨點(diǎn)鏈接導(dǎo)航模式。我們在小屏設(shè)備上遇到的諸如CSS兼容性局限或頁面元素與瀏覽器自身布局沖突等一系列問題，在平板手機(jī)中依然存在。誠然，將錨點(diǎn)鏈接放置在頂部的做法算不上對拇指友好，但綜合考慮，這個(gè)因素在瀏覽器環(huán)境中的重要性就沒有那么高了。我總會在用戶研究中觀察到這樣的現(xiàn)象：對移動設(shè)備上的網(wǎng)頁，除非用戶在主要內(nèi)容區(qū)域?qū)嵲跓o法找到自己需要的信息，否則他們幾乎不會想起主導(dǎo)航。從這個(gè)角度講，將導(dǎo)航菜單放置在主要內(nèi)容的下方，讓用戶在最需要的時(shí)候能夠用到，也是非常合理的做法，同時(shí)不會使拇指受苦。 
　　避免手指跨屏操作。多數(shù)人的拇指長度不夠在平板手機(jī)上進(jìn)行橫跨屏幕的點(diǎn)擊。在單手持機(jī)的情況下，不用說對角線，即便讓右手拇指去點(diǎn)擊位于屏幕左端的元素也是相當(dāng)困難的。所以，要盡量避免將重要的交互元素緊貼左右兩側(cè)邊緣放置。在尺寸方面，要盡可能使元素的寬度達(dá)到屏幕寬度的三分之一以上，最好可以接近屏幕寬度，從而最大程度降低拇指操作的費(fèi)力度。 
　　不要隨著屏幕的增大而放大手勢操作的觸發(fā)區(qū)域。以橫滑展開菜單為例，在平板手機(jī)上，不要放大橫滑所需的距離，別讓用戶必須在整個(gè)屏幕范圍內(nèi)使用手勢才能達(dá)到觸發(fā)效果。人們使用屏幕巨大的手機(jī)，不代表他們有著巨人般的手，手勢應(yīng)該圍繞手指進(jìn)行設(shè)計(jì)，而不是圍繞屏幕。 
　　整體移動。界面中的多數(shù)元素是靜態(tài)的，需要我們自己伸手觸及。我們要去點(diǎn)擊按鈕，而按鈕從來不會主動移到我們手邊。但事情也并非完全如此。三星為其Android平板手機(jī)創(chuàng)造了一種獨(dú)特的單手操作模式（如圖1.26所示），整個(gè)界面會縮小到普通小屏手機(jī)的尺寸，這樣就使幾乎所有的交互元素都能位于拇指熱區(qū)當(dāng)中了。實(shí)際上，這種模式相當(dāng)于臨時(shí)把大屏手機(jī)縮小了。雖然操作便捷了很多，但經(jīng)常這樣使用又顯得很尷尬——既然大屏無法得到充分利用，當(dāng)初何必要購買這樣的設(shè)備呢？
　　iOS則采用了一種稱為“觸達(dá)性”的設(shè)計(jì)模式。連續(xù)兩次輕觸“Home”鍵，界面便會整體下移，從而使頂部元素進(jìn)入拇指熱區(qū)。當(dāng)用戶完成接下來的操作之后，界面便會自動上移至初始位置。這種模式使得界面頂部的元素更容易被單手拇指操作，在效果上等同于用戶將自己的持機(jī)手上移。相比三星來說，蘋果的實(shí)現(xiàn)方式有一個(gè)顯著的優(yōu)點(diǎn)——將界面移位而非縮放，可以避免交互元素本身的尺寸或布局發(fā)生變化。

　　　　　　　　　　　　　 
三星的單手模式可以將界面整體縮小至小屏手機(jī)的規(guī)格（左），而蘋果的“觸達(dá)性”則是將界面下移至拇指的控制范圍內(nèi)（右）。

　　除了蘋果與三星提供的這類系統(tǒng)級的解決方案以外，我們還可以在自己的產(chǎn)品中采用類似的思路，例如通過滑動面板的形式來承載內(nèi)容。與系統(tǒng)提供的上下移動界面的方式不同，在App或網(wǎng)頁內(nèi)部，一種更具實(shí)踐性的做法是在界面邊緣放置某種“抽屜把手”，形如按鈕或Tab，點(diǎn)擊之后即可展開整個(gè)面板。 
　　
　　　　　　　　　　　　　　　
　　　　　　　TIME在其移動版頁面?zhèn)冗叿胖昧艘粋€(gè)“抽屜把手”，點(diǎn)擊之后會展開一個(gè)完整的近期新聞面板。
　　 
　　在屏幕左右邊緣放置的交互元素很可能處于平板手機(jī)的拇指熱區(qū)之外，但無論怎樣也比放置在頂部更加容易操作。你也可以為這種模式添加橫滑展開的手勢，只要不與界面整體的橫滑回退效果產(chǎn)生沖突即可。總體上講，功能控件位于屏幕左右邊緣的模式更適用于雙手拇指同時(shí)操作的情況，因此在平板電腦的界面中更為常見。

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