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