日韩中文字幕a,最近中文字幕完整版免费高清 ,亚洲一区二区在线视频

本文首發于 閱文體驗設計 公眾號。

前言

如今廣受人們喜愛的大屏幕手機，已經讓我們遺忘了喬布斯當年的那句“3.5 英寸是手機的黃金尺寸”。更大的屏幕意味著更大的手機尺寸，尺寸的增大也潛移默化地影響人們持握手機的方式和習慣。作為設計師，我們不該死守過時的信條，而該積極應對變化帶來新的設計挑戰。本文將通過梳理拇指區理論的發展，以及閱讀類產品工具欄設計探索，來討論下如何為大屏幕而設計的問題。

拇指區理論的發展

Steven Hoober 于 2013 年介紹了「拇指區」的概念 [1]：綠色區域是單手觸屏最舒服的區域。這個理論被廣泛運用并作為設計參考依據，但其中一些數據的引用有很大的理解誤區。49% 的用戶用單手握持手機并使用拇指操作屏幕 [2]：這里的 49% 說的是研究觀察時用戶單手持握手機的占比，而非 49% 的用戶在使用手機時僅用單手持握。而且 Steven 反復強調用戶的手勢方式是會頻繁切換的。

經過研究的不斷深入，Steven 于 2017 年更新了關于拇指區研究發現的文章 [3] ，以下簡單介紹部分重要發現：

手持方式的多樣性

常見的 6 種持握方式是對之前 3 種持握方式更細致的拆分。人們選擇不同的持握方式，取決于設備屏幕、需求和使用場景。人們會根據不同的操作行為來切換持握手機的方式。在與屏幕發生操作行為（點擊鏈接/勾選復選框/打字/短長距離滑動）時，單手持握且單個拇指操作（右圖中黃色塊）的占比非常小，雙手持握且單個拇指操作（綠色塊）和單手持握且另一個手的拇指操作（藍色塊）的占比相對比較大。

另外數據表明早期「拇指區理論」中的紅色區域（OW）的點擊并沒有真的難倒用戶，即便是左上角的返回。這能說明什么？人們并不是真的一直在單手持握手機。

屏幕中心是核心區域

與 PC 端的 F 形的瀏覽熱點圖不同，人們更喜歡查看或點擊手機屏幕的中心區域。如左圖所示，紅色區域是人們比較傾向點擊的區域。右圖展示的是不同持握方式可點擊的區域，可以看到各種手持方式都可以容易觸達到屏幕中間區域。據 Steven 觀察，屏幕的邊緣基本上都需要雙手完成操作。

另外根據測試數據，屏幕中心區域的點擊準確率要比邊緣高。準確性從屏幕中心的 7mm 到角落的 12mm 逐步變化。

新的研究成果對設計當然具有指導價值，但我們仍保持獨立思考。總結一下，研究提到人們可以通過切換持握方式觸達到屏幕的任何位置，但并不代表屏幕的屏幕的所有位置都是易于點擊的，這是目標可達性與易達性之間的差別。用戶的使用習慣的是原有設計部分影響的結果。如果可以不用切換握持方式，輕易地通過單手持握且單拇指觸達，這仍然我們希望達到理想效果。另外不管是查看，還是點擊以及其準確性，屏幕中心才是核心區域。

閱讀工具欄的設計探索

人們在使用閱讀類產品時，絕大部分情況停留在閱讀頁。閱讀過程中，用戶會頻繁地翻頁、查看目錄、查看評論、切換夜間（調節亮度）等操作。承載這些操作的閱讀工具欄設計是否合理？是否適配大屏幕的使用場景？接下來我們來探討下閱讀工具欄設計上的探索。

現狀問題

「起點讀書」閱讀工具欄的操作項分布在頁面的頂部和底部，右下角會顯示懸浮按鈕，例如“寫章評”，部分作品還有“真人聽書”的按鈕。對比其他閱讀產品（微信讀書/QQ閱讀/掌閱/書旗）的閱讀頁，工具欄的結構都比較相似。這樣現狀的部分原因可能是各家產品過于遵循系統 UI 規范，但在屏幕越來越大的今天，舊的系統 UI 規范定義已經不大實用。頂部的工具欄可達性不佳，不易于單手操作。

閱讀工具欄的一級入口繁多，布局缺乏邏輯性。點擊率數據顯示底部的操作項普遍高于頂部。

部分功能的層級較深，「閱讀頁 - 工具欄 - 設置 - 更多設置」的操作路徑多達 3 次點擊，其中「更多設置 - 行間距」等與閱讀顯示強關聯的選項已經完全脫離閱讀頁場景，用戶的選擇結果不能通過閱讀頁顯示變化得到直接反饋。

將閱讀工具欄存在的問題歸納成以下 3 點：

1. 工具欄頂部功能入口不易單手操作，易達性不佳；

2. 工具欄功能入口多，布局邏輯混亂、缺乏規律；

3. 部分高階功能層級深，設置無法在閱讀頁直觀看到反饋。

參考借鑒

上文提到工具欄布局的不合理，部分原因是設計從業人員太過于遵循系統 UI 規范。那么我們來看看 iOS 和 Android 兩大系統平臺對于大屏幕設計做過哪些優化和改進呢？

Apple Maps

iOS 系統自家應用「蘋果地圖」在2012 年剛推出時，因為大量的錯誤地圖數據和一系列的易用性問題，受到了大量的吐槽和責備。但經過不斷的迭代和改進，易用性得到明顯提升。iOS 10 版本的「蘋果地圖」交互形式上做了大幅的調整，以適應大屏幕的手勢操作 [4]。在地圖主界面中，將使用高頻的搜索框從頁面頂部移至底部，導航和更多信息挪到了頁面右上角，提高地圖的屏占比。

新搜索框的展開樣式是浮層，單手下滑可以收起或縮小浮層。在浮層中的任何操作，都會覆蓋新的浮層。在視覺的感知上沒有太多層級間的跳轉。地點詳情頁、導航方案頁也采用同樣的浮層樣式。總的來說，「蘋果地圖」將頁面層級關系簡化了地圖層和信息浮層。

Material Design

另一邊的 Material Design 在 2018 年版本中，底部工具條新增導航菜單入口。導航菜單從頂部下移至底部，規范中提到這樣的設計可以提高可達性 [5]。

Place a single navigation menu control in a bottom app bar (for reachability).

展開的導航菜單浮層同樣可以通過上滑控制展示區域的大小，與「蘋果地圖」差異在于浮層還可以滑成全屏頁面。

今年三星在其開發者大會上介紹自家全新 Android 界面「One UI」。交互層面的亮點是將屏幕上方三分之一屏幕作為觀看區，將其余部分作為互動區，用戶可以通過下方屏幕輕松開啟信息，并在觀看區閱讀其中的內容。三星官方強調 UI 大幅度地精簡、調整了相關的界面，旨在讓用戶輕松按到想按的按鈕并用手指順利開啟任何需要的功能 [6]，可以看出「One UI」設計思路也是將操作項下移，讓單手操作更便捷舒適。

上述的系統針對大屏幕和提高單手易達性的設計調整，總結方法：

1. 操作項下移，提高單手易達性；

2. 利用浮層樣式，加強上下層級的聯系。

方案推導

以「起點讀書」的閱讀頁為例，將閱讀過程中的所有功能操作進行梳理歸納，按照操作類型的不同可以分成 5 類：閱讀操作、顯示設置、獨占模式、作品設置和作品互動。根據點擊率數據排序，底部工具欄中目錄和日夜間的點擊率較高。另外在頂部工具欄點擊率普遍偏低情況下，TTS聽書是除去返回之外點擊最高的功能，因此在 1 級工具欄中篩選出目錄、日夜間和TTS三個高頻功能。

結合上文提到的方法，首先將閱讀工具欄的頂部操作項下移，提高單手操作易達性。然后將工具欄的層級分為 2 級：第 1 級展示最常用高頻的功能，第 2 級按照功能模塊展示所有功能。

在 1 級工具欄中，除去目錄、夜間模式和TTS聽書，考慮加上數據表現不錯的投票打賞以及基礎功能調節進度和顯示設置入口。點擊右下角展開圖標喚起 2 級工具欄。 2 級工具欄按照功能模塊分 3 屏展示所有操作，支持橫向滑動。第 1 屏展示作品設置以及作品互動，第 2 屏展示高頻顯示設置和獨占模式，第 3 屏展示低頻顯示設置。在 1 級工具欄中點擊顯示設置可以喚起 2 級工具欄并顯示第 2 屏的高頻顯示設置。