SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

行動裝置的網頁切換模式 PK 賽:Swipe Vs. Scroll

Magic Hunguser-interface-design
name

瀏覽器上的標籤(Tab)式分頁功能,讓我們能同時新增很多不同的網頁,並且可以輕鬆又快速的在不同的網頁間切換,而不需要開啟過多的視窗。可惜在螢幕空間狹小的行動裝置中,傳統的標籤分頁是窒礙難行的,所以我們必須發展其他的標籤切換模式,來增進使用性。

Andrew Warr 與 Ed H. Chi 於 2013 年發表的論文中,就針對行動裝置中常見的兩種模式進行了使用者測試與比較,分別是分頁式(Pages Interface)與卡片式(Card-based)的切換模式:

這兩種模式除了在排版上的差異外,最重要的不同還有使用者的操作方式。分頁模式透過 swipe 手勢來做網頁間的切換,它最大的特點就是不論使用者 swipe 的快慢與否,每次都一定會切換到下一個網頁,視覺上的排版也通常只會顯示現在的(current)、上一個(previous)與下一個(next),適用於需要清楚的現在目前物件的細節時(如圖片)。

而卡片模式則會一次顯示多個網頁,因而搭配 scroll 方式來捲動畫面,它可以根據使用者 scroll 的快慢與否來快速瀏覽不同的頁面,可以停留在任意的位置點,讓使用者保有切換的彈性,但附加的缺點就是無法一次清楚顯示物件的所有資訊與細節,只能大致瀏覽物件的重要訊息如網頁標題(Title)。

在透過使用者的實驗與測試後,這篇研究結果發現,卡片模式在選取網頁的時間方面明顯低於分頁的切換模式( F(5,78) = 86.57, p

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

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Active 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按...Read more