本文首發(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)员3知毩⑺伎???偨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