本文首發(fā)于 閱文體驗設(shè)計 公眾號。
前言
如今廣受人們喜愛的大屏幕手機，已經(jīng)讓我們遺忘了喬布斯當年的那句“3.5 英寸是手機的黃金尺寸”。更大的屏幕意味著更大的手機尺寸，尺寸的增大也潛移默化地影響人們持握手機的方式和習(xí)慣。作為設(shè)計師，我們不該死守過時的信條，而該積極應(yīng)對變化帶來新的設(shè)計挑戰(zhàn)。本文將通過梳理拇指區(qū)理論的發(fā)展，以及閱讀類產(chǎn)品工具欄設(shè)計探索，來討論下如何為大屏幕而設(shè)計的問題。
拇指區(qū)理論的發(fā)展
Steven Hoober 于 2013 年介紹了「拇指區(qū)」的概念 [1]：綠色區(qū)域是單手觸屏最舒服的區(qū)域。這個理論被廣泛運用并作為設(shè)計參考依據(jù)，但其中一些數(shù)據(jù)的引用有很大的理解誤區(qū)。49% 的用戶用單手握持手機并使用拇指操作屏幕 [2]：這里的 49% 說的是研究觀察時用戶單手持握手機的占比，而非 49% 的用戶在使用手機時僅用單手持握。而且 Steven 反復(fù)強調(diào)用戶的手勢方式是會頻繁切換的。
經(jīng)過研究的不斷深入，Steven 于 2017 年更新了關(guān)于拇指區(qū)研究發(fā)現(xiàn)的文章 [3] ，以下簡單介紹部分重要發(fā)現(xiàn)：
-
手持方式的多樣性
常見的 6 種持握方式是對之前 3 種持握方式更細致的拆分。人們選擇不同的持握方式，取決于設(shè)備屏幕、需求和使用場景。人們會根據(jù)不同的操作行為來切換持握手機的方式。在與屏幕發(fā)生操作行為（點擊鏈接/勾選復(fù)選框/打字/短長距離滑動）時，單手持握且單個拇指操作（右圖中黃色塊）的占比非常小，雙手持握且單個拇指操作（綠色塊）和單手持握且另一個手的拇指操作（藍色塊）的占比相對比較大。
另外數(shù)據(jù)表明早期「拇指區(qū)理論」中的紅色區(qū)域（OW）的點擊并沒有真的難倒用戶，即便是左上角的返回。這能說明什么？人們并不是真的一直在單手持握手機。
-
屏幕中心是核心區(qū)域
與 PC 端的 F 形的瀏覽熱點圖不同，人們更喜歡查看或點擊手機屏幕的中心區(qū)域。如左圖所示，紅色區(qū)域是人們比較傾向點擊的區(qū)域。右圖展示的是不同持握方式可點擊的區(qū)域，可以看到各種手持方式都可以容易觸達到屏幕中間區(qū)域。據(jù) Steven 觀察，屏幕的邊緣基本上都需要雙手完成操作。
另外根據(jù)測試數(shù)據(jù)，屏幕中心區(qū)域的點擊準確率要比邊緣高。準確性從屏幕中心的 7mm 到角落的 12mm 逐步變化。
新的研究成果對設(shè)計當然具有指導(dǎo)價值，但我們?nèi)员３知毩⑺伎??？偨Y(jié)一下，研究提到人們可以通過切換持握方式觸達到屏幕的任何位置，但并不代表屏幕的屏幕的所有位置都是易于點擊的，這是目標可達性與易達性之間的差別。用戶的使用習(xí)慣的是原有設(shè)計部分影響的結(jié)果。如果可以不用切換握持方式，輕易地通過單手持握且單拇指觸達，這仍然我們希望達到理想效果。另外不管是查看，還是點擊以及其準確性，屏幕中心才是核心區(qū)域。
閱讀工具欄的設(shè)計探索
人們在使用閱讀類產(chǎn)品時，絕大部分情況停留在閱讀頁。閱讀過程中，用戶會頻繁地翻頁、查看目錄、查看評論、切換夜間（調(diào)節(jié)亮度）等操作。承載這些操作的閱讀工具欄設(shè)計是否合理？是否適配大屏幕的使用場景？接下來我們來探討下閱讀工具欄設(shè)計上的探索。
現(xiàn)狀問題
「起點讀書」閱讀工具欄的操作項分布在頁面的頂部和底部，右下角會顯示懸浮按鈕，例如“寫章評”，部分作品還有“真人聽書”的按鈕。對比其他閱讀產(chǎn)品（微信讀書/QQ閱讀/掌閱/書旗）的閱讀頁，工具欄的結(jié)構(gòu)都比較相似。這樣現(xiàn)狀的部分原因可能是各家產(chǎn)品過于遵循系統(tǒng) UI 規(guī)范，但在屏幕越來越大的今天，舊的系統(tǒng) UI 規(guī)范定義已經(jīng)不大實用。頂部的工具欄可達性不佳，不易于單手操作。
閱讀工具欄的一級入口繁多，布局缺乏邏輯性。點擊率數(shù)據(jù)顯示底部的操作項普遍高于頂部。
部分功能的層級較深，「閱讀頁 - 工具欄 - 設(shè)置 - 更多設(shè)置」的操作路徑多達 3 次點擊，其中「更多設(shè)置 - 行間距」等與閱讀顯示強關(guān)聯(lián)的選項已經(jīng)完全脫離閱讀頁場景，用戶的選擇結(jié)果不能通過閱讀頁顯示變化得到直接反饋。
將閱讀工具欄存在的問題歸納成以下 3 點：
1. 工具欄頂部功能入口不易單手操作，易達性不佳；
2. 工具欄功能入口多，布局邏輯混亂、缺乏規(guī)律；
3. 部分高階功能層級深，設(shè)置無法在閱讀頁直觀看到反饋。
參考借鑒
上文提到工具欄布局的不合理，部分原因是設(shè)計從業(yè)人員太過于遵循系統(tǒng) UI 規(guī)范。那么我們來看看 iOS 和 Android 兩大系統(tǒng)平臺對于大屏幕設(shè)計做過哪些優(yōu)化和改進呢？
-
Apple Maps
iOS 系統(tǒng)自家應(yīng)用「蘋果地圖」在2012 年剛推出時，因為大量的錯誤地圖數(shù)據(jù)和一系列的易用性問題，受到了大量的吐槽和責(zé)備。但經(jīng)過不斷的迭代和改進，易用性得到明顯提升。iOS 10 版本的「蘋果地圖」交互形式上做了大幅的調(diào)整，以適應(yīng)大屏幕的手勢操作 [4]。在地圖主界面中，將使用高頻的搜索框從頁面頂部移至底部，導(dǎo)航和更多信息挪到了頁面右上角，提高地圖的屏占比。
新搜索框的展開樣式是浮層，單手下滑可以收起或縮小浮層。在浮層中的任何操作，都會覆蓋新的浮層。在視覺的感知上沒有太多層級間的跳轉(zhuǎn)。地點詳情頁、導(dǎo)航方案頁也采用同樣的浮層樣式?？偟膩碚f，「蘋果地圖」將頁面層級關(guān)系簡化了地圖層和信息浮層。
-
Material Design
另一邊的 Material Design 在 2018 年版本中，底部工具條新增導(dǎo)航菜單入口。導(dǎo)航菜單從頂部下移至底部，規(guī)范中提到這樣的設(shè)計可以提高可達性 [5]。
Place a single navigation menu control in a bottom app bar (for reachability).
展開的導(dǎo)航菜單浮層同樣可以通過上滑控制展示區(qū)域的大小，與「蘋果地圖」差異在于浮層還可以滑成全屏頁面。
今年三星在其開發(fā)者大會上介紹自家全新 Android 界面「One UI」。交互層面的亮點是將屏幕上方三分之一屏幕作為觀看區(qū)，將其余部分作為互動區(qū)，用戶可以通過下方屏幕輕松開啟信息，并在觀看區(qū)閱讀其中的內(nèi)容。三星官方強調(diào) UI 大幅度地精簡、調(diào)整了相關(guān)的界面，旨在讓用戶輕松按到想按的按鈕并用手指順利開啟任何需要的功能 [6]，可以看出「One UI」設(shè)計思路也是將操作項下移，讓單手操作更便捷舒適。
上述的系統(tǒng)針對大屏幕和提高單手易達性的設(shè)計調(diào)整，總結(jié)方法：
1. 操作項下移，提高單手易達性；
2. 利用浮層樣式，加強上下層級的聯(lián)系。
方案推導(dǎo)
以「起點讀書」的閱讀頁為例，將閱讀過程中的所有功能操作進行梳理歸納，按照操作類型的不同可以分成 5 類：閱讀操作、顯示設(shè)置、獨占模式、作品設(shè)置和作品互動。根據(jù)點擊率數(shù)據(jù)排序，底部工具欄中目錄和日夜間的點擊率較高。另外在頂部工具欄點擊率普遍偏低情況下，TTS聽書是除去返回之外點擊最高的功能，因此在 1 級工具欄中篩選出目錄、日夜間和TTS三個高頻功能。
結(jié)合上文提到的方法，首先將閱讀工具欄的頂部操作項下移，提高單手操作易達性。然后將工具欄的層級分為 2 級：第 1 級展示最常用高頻的功能，第 2 級按照功能模塊展示所有功能。
在 1 級工具欄中，除去目錄、夜間模式和TTS聽書，考慮加上數(shù)據(jù)表現(xiàn)不錯的投票打賞以及基礎(chǔ)功能調(diào)節(jié)進度和顯示設(shè)置入口。點擊右下角展開圖標喚起 2 級工具欄。 2 級工具欄按照功能模塊分 3 屏展示所有操作，支持橫向滑動。第 1 屏展示作品設(shè)置以及作品互動，第 2 屏展示高頻顯示設(shè)置和獨占模式，第 3 屏展示低頻顯示設(shè)置。在 1 級工具欄中點擊顯示設(shè)置可以喚起 2 級工具欄并顯示第 2 屏的高頻顯示設(shè)置。
整個方案的操作區(qū)域均在屏幕下方，通過浮層形式加強設(shè)置與閱讀頁內(nèi)容之間的聯(lián)系，各功能模塊的邏輯清晰，布局規(guī)律。
落地方案
借著「紅袖讀書」設(shè)計改版的契機 [7]，嘗試將閱讀工具欄優(yōu)化方案落地在紅袖項目中。根據(jù)紅袖產(chǎn)品的特性做了方案的調(diào)整：
-
首先「紅袖讀書」的閱讀頁中的功能相較于起點，功能數(shù)量會少一些，所以原方案的第 2 層工具欄直接變成 1 級工具欄。
-
工具欄分 2 屏展示：第 1 屏展示作品設(shè)置以及基本操作，第 2 屏展示高頻顯示設(shè)置。每屏右下角均有更多入口，可以將操作低頻和優(yōu)先級不高的功能塞在里面，有效地解決了原方案擴展性不強的缺點。
寫在最后
隨著行業(yè)的不斷發(fā)展，早期的設(shè)計研究或規(guī)范會變得不再適用。目前市面上的閱讀工具欄設(shè)計的高度趨同性，這并不能代表這是唯一的答案。作為一線的設(shè)計人員，我們需要時刻關(guān)注最新的設(shè)計趨勢與變化，拋棄自己的固有認知，敢于打破常規(guī)，基于合理的設(shè)計依據(jù)，不斷嘗試和推動設(shè)計不斷發(fā)展。
最后感謝「紅袖讀書」設(shè)計師崔宴賓和郭思聰對工具欄具體落地方案的優(yōu)化和改進，比心。
參考鏈接
01 How Do Users Really Hold Mobile Devices?，2013
02 The Thumb Zone: Designing For Mobile Users，2016
03 Design for Fingers, Touch, and People，2017
04 這一次，iOS 10 的地圖是「蘋果水準」的地圖，2016
05 Material Guidelines，2018
06 三星新一代自家 Android 界面「One UI」將帶來更舒適的使用體驗，2018
07 打造更輕的閱讀體驗-紅袖讀書設(shè)計改版，2018
