SPARKFUL

Blog

Insights from the SPARKFUL teams

友善的動態更新方式

Magic Hunguser-interface-design
name

透過智慧型行動裝置,我們每天可以接收到很多新聞、好友的最新動態以及大家分享的新鮮有趣的玩意兒,而很多行動裝置應用程式也會貼心的在我們呼叫出程式的時候,自動的幫我們刷新訊息。

但是當每天更新的訊息越來越多的時候,我們很容易在更新的過程中,迷失於新舊訊息之間,身為貼心的開發者,我們該如何讓使用者能更輕鬆的接收新的訊息與狀態呢?

在手機應用程式中更新訊息時,最簡單方式就是直接刷新並取代現有的訊息列(如下圖),這會讓原有顯示位置的訊息被突然替換掉,若是新增訊息量很多時,很容易讓使用者失去焦點,會不知道該先從上方還是下方看起,尤其對於有新訊息強迫症、不想放過任何新的訊息的人來說更是困擾。

為了讓使用者不會迷失在更新的訊息海中,貼心的開發者就應該要在新增訊息時下點功夫:

1. 插入訊息

一種簡單的方式就是採用插入訊息的模式,例如 Twitter 的拖拉更新(下圖),我們在更新訊息時,應該固定瀏覽的位置,將訊息插入在舊訊息的上方,使用者便可以選擇要從最舊的一則新訊息開始往上看,還是直接按到最上方從最新的開始瀏覽,而不會迷失。

2. 透過分隔線

另外一種方式就是透過分隔線加強提醒,明確的將新舊訊息區隔(如下圖),例如 Instagram 的活動通知提醒、以及當新增的訊息過多時的摺疊,這樣簡單的區分方式,能夠讓使用者輕鬆地獲取想要的訊息,而不需浪費時間閱讀舊的東西。

3. 彈出提醒

當然也可以採用更強烈的彈出提醒方式,如 Facebook 的新留言與狀態提醒(下圖), 除了可以透過突現動畫吸引使用者的注意力,還可以直接點擊捲動到最新訊息的位置。

因為智慧型行動裝置的普及,我們是透過間斷又持續的方式在使用這些服務,而不是密集的一次性使用,無論哪種方式,我們想要的都是讓閱讀者能夠保有一個順暢的長期瀏覽經驗,減低他們的任何負擔。


(圖片來源:blykst, CC Licensed)

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