本文有大量圖檔遺失,我們正在努力恢復中了!
清單視圖(List view)為一常見又方便的介面控制元件,它主要是利用清單的方式來呈現一堆具有相似格式的資訊, 使用者可以輕鬆透過它預覽大量資訊,找尋有興趣的內容下手。但礙於行動裝置有限的瀏覽空間以及尺寸大小,螢幕上的寸土寸金都必須應用的洽到好處,才不會造成使用上的不便。
以下圖左為例,標籤(Tab)以及導覽列(Navigation bar)的組合為 iOS 介面中一個標準且實用的實作架構,大部分會再加上一個子功能列(例下左圖的搜尋列),然而這樣的編排方式存在一個問題:主要的內容捲動區塊只能用到整個螢幕的 67%,剩下約有 33% 的螢幕空間在使用者捲動內容清單時是浪費的!尤其是當清單內容的項目是以圖片影像為主時,緊繃的內容捲動區會讓使用者手指感到束縛並且難以瀏覽項目內容。
但若我們能夠在當使用者瀏覽並捲動清單時,暫時釋放這些可利用的空間,可以增加原來閱讀區塊 42% 的空間!除了可以讓畫面更簡潔乾淨,還可以提昇閱讀性以及使用舒暢度(如上圖右)。
使用捲動隱藏的 APP 如 Foap(上圖)、Pinterest、Pulse News 等,其方法主要在當使用者指頭向上滑動時,此時系統判斷為使用者開始閱讀內容,便可將上下其他的視圖透過簡單的動畫滑動移除,並將內容區塊大小漸變至全螢幕(如上圖右);而當使用者停止捲動而指頭稍往下方滑動時,可以判定為使用者已經停止閱讀更新訊息,並希望有下一步動作或離開此頁面,此時便可將移除的視圖都呼叫回初始的狀態(如上圖左)。
透過這樣簡單的機制,便可以讓使用者在閱讀內容時,有個舒適寬闊的視野與環境!
Reference
Photo by Plann on Unsplash