SPARKFUL

Blog

Insights from the SPARKFUL teams

釋放瀏覽空間:滑動隱藏術

Magic Hunguser-interface-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

清單視圖(List view)為一常見又方便的介面控制元件,它主要是利用清單的方式來呈現一堆具有相似格式的資訊, 使用者可以輕鬆透過它預覽大量資訊,找尋有興趣的內容下手。但礙於行動裝置有限的瀏覽空間以及尺寸大小,螢幕上的寸土寸金都必須應用的洽到好處,才不會造成使用上的不便。

以下圖左為例,標籤(Tab)以及導覽列(Navigation bar)的組合為 iOS 介面中一個標準且實用的實作架構,大部分會再加上一個子功能列(例下左圖的搜尋列),然而這樣的編排方式存在一個問題:主要的內容捲動區塊只能用到整個螢幕的 67%,剩下約有 33% 的螢幕空間在使用者捲動內容清單時是浪費的!尤其是當清單內容的項目是以圖片影像為主時,緊繃的內容捲動區會讓使用者手指感到束縛並且難以瀏覽項目內容。

iphone

但若我們能夠在當使用者瀏覽並捲動清單時,暫時釋放這些可利用的空間,可以增加原來閱讀區塊 42% 的空間!除了可以讓畫面更簡潔乾淨,還可以提昇閱讀性以及使用舒暢度(如上圖右)。

Foap

使用捲動隱藏的 APP 如 Foap(上圖)、Pinterest、Pulse News 等,其方法主要在當使用者指頭向上滑動時,此時系統判斷為使用者開始閱讀內容,便可將上下其他的視圖透過簡單的動畫滑動移除,並將內容區塊大小漸變至全螢幕(如上圖右);而當使用者停止捲動而指頭稍往下方滑動時,可以判定為使用者已經停止閱讀更新訊息,並希望有下一步動作或離開此頁面,此時便可將移除的視圖都呼叫回初始的狀態(如上圖左)。

透過這樣簡單的機制,便可以讓使用者在閱讀內容時,有個舒適寬闊的視野與環境!


Reference

Photo by Plann on Unsplash

Magic Hung
Magic Hung
Technical Director
Technical Director @ Fourdesire. Create fun and crafts via programming.
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more