“炫動”你的螢幕——移動產品中的旋轉木馬模式

發表於2013-06-04

移動產品設計中,圖片傳達的資訊比文字更直白、美觀、容易吸引使用者注意,所以在產品中引入大量圖片資源也成為設計師喜愛的方式之一。

今天我們在文中要介紹一種高效的縮圖瀏覽方式——旋轉木馬模式(Carousel)。

1.什麼是旋轉木馬(Carousel)模式?

旋轉木馬由來已久,在西方的遊樂場中經常可以見到,早期的膠片電影靈感即來源於此,將一張張靜止的畫面快速轉動投射到熒幕上,在中國古代也有類似的形式——“跑馬燈”,在節日供百姓觀賞娛樂。

在移動產品互動設計中,旋轉木馬模式可以在一條目內同時呈現多張圖片,引導使用者通過滑動螢幕瀏覽更多內容。這種模式的優點在於能夠在有限的螢幕空間內,高效的呈現大量影像內容,帶給使用者更好的聚焦、瀏覽體驗,讓原本靜止的圖片有如播放電影般精彩紛呈。
“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

2.互動特性

1)螢幕中只呈現部分內容

旋轉木馬模式中通常會展示大量的圖片內容,但在手機螢幕的一屏內不會呈現過多圖片(根據圖片尺寸一般在3-5張)。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

2)引導使用者進行滾動

需要明顯的視覺引導,讓使用者知道可以通過滑動進行瀏覽,並明確滾動的方向。可以提供滾動條、按鈕,或在螢幕任意一側顯示部分額外條目。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

3)瀏覽進度

可以通過進度條、百分比等形式讓使用者知道瀏覽的當前位置,併為中途退出的使用者保留檢視進度。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

4)選中狀態

被選中的圖片與其他圖片要從視覺上明顯區分,可以提供邊框或將選中圖片置於高亮。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

5)”更多”

當瀏覽到最後一張圖片時,可以提供“更多”按鈕,讓使用者知道圖集瀏覽完成,可以點選瀏覽更多資訊或下一圖集。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

3.旋轉木馬模式的應用

旋轉木馬模式在提供大圖瀏覽的同時,也提供瀏覽導航,並可以呈現更多相關內容。比起傳統的瀑布流、縮圖列表,旋轉木馬模式為使用者帶來更流暢的圖片瀏覽效果,是一個更高效、易於識別的圖片檢視方式。該模式廣泛應用於以下產品:

1)照片瀏覽類產品

使用者通過它來對照片、視訊進行瀏覽,選擇感興趣的內容進行檢視。大圖的使用比起縮圖列表更容易讓使用者獲得良好的體驗,旋轉木馬可以在使用者瀏覽大圖的同時提供導航,方便使用者在眾多圖片中切換。

例如:優酷,人人網…

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

2)電子商務類產品

旋轉木馬模式也是電子商務類網站中經常用到的互動形式,產品詳情頁經常使用旋轉木馬為使用者呈現全方位的產品展示。

例如:淘寶、京東…

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

3)新聞閱讀類產品

新聞圖片最容易吸引使用者的注意力, 隨著視訊新聞、圖片新聞等多媒體元素更多的應用在新聞閱讀類產品中,更多媒體選擇使用旋轉木馬呈現新聞列表,輔以適量文章摘要,為使用者帶來更高效、直觀的閱讀體驗。

例如:BBC、華盛頓郵報…

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

4.注意事項

1)減少認知負擔

iTunes的媒體封面流由一張處於螢幕中心的大圖和羅列在兩側的縮圖組成,這種組成模式要注意圖片滾動的速度。由於這些圖片不斷變換著,使用者也許無法在快速切換的圖片中聚焦物件,從而嘗試及時停止滾動來獲得焦點。因此,在設計旋轉木馬時要謹慎處理圖片的滾動速度、滑動時的加速度,以及滑動停止的減速,不要新增過多動畫效果增加使用者的認知負擔。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

2)滾動的方向和終點

開始滾動的方向經常讓使用者產生疑惑:“旋轉木馬是迴圈播放嗎?”,“我是否已經看過某些內容?” Android 4.0使用“blue parallax”視覺元素提示使用者滾動的方向和終點。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

3)圖片數量

長時間的瀏覽會使使用者感到無聊和疲倦,所以在設計時要注意旋轉木馬承載圖片的數量,一般控制在20張以內,減少使用者持續瀏覽產生的疲勞。如果希望使用者繼續瀏覽,可以在內容瀏覽結束後增加“檢視更多”,讓使用者在瀏覽完成後通過點選跳轉到其他內容。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

結語

在網站設計中,旋轉木馬模式已廣泛應用於眾多網站。在移動網際網路時代,隨著移動裝置的高階化、多元化發展,設計師可以通過應用旋轉木馬模式為使用者創造更好的瀏覽體驗,如何利用該模式結合更多互動手勢、怎樣合理利用平臺特性,為設計師留下了廣闊的想象空間。

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

“炫動”你的螢幕——移動產品中的旋轉木馬模式

 

參考文獻

[1] Greg Nudelman. A Definitive Guide To The Android Carousel Design Pattern. February 1st, 2013

[2] http://developer.yahoo.com/ypatterns/selection/carousel.html

相關文章