移動產(chǎn)品中的旋轉(zhuǎn)木馬模式

今天我們在文中要介紹一種高效的縮略圖瀏覽方式——旋轉(zhuǎn)木馬模式(Carousel)。
1.什么是旋轉(zhuǎn)木馬(Carousel)模式?
旋轉(zhuǎn)木馬由來已久,在西方的游樂場中經(jīng)常可以見到,早期的膠片電影靈感即來源于此,將一張張靜止的畫面快速轉(zhuǎn)動投射到熒幕上,在中國古代也有類似的形式——“跑馬燈”,在節(jié)日供百姓觀賞娛樂。
在移動產(chǎn)品交互設計中,旋轉(zhuǎn)木馬模式可以在一條目內(nèi)同時呈現(xiàn)多張圖片,引導用戶通過滑動屏幕瀏覽更多內(nèi)容。這種模式的優(yōu)點在于能夠在有限的屏幕空間內(nèi),高效的呈現(xiàn)大量圖像內(nèi)容,帶給用戶更好的聚焦、瀏覽體驗,讓原本靜止的圖片有如播放電影般精彩紛呈。
1)屏幕中只呈現(xiàn)部分內(nèi)容
旋轉(zhuǎn)木馬模式中通常會展示大量的圖片內(nèi)容,但在手機屏幕的一屏內(nèi)不會呈現(xiàn)過多圖片(根據(jù)圖片尺寸一般在3-5張)。

需要明顯的視覺引導,讓用戶知道可以通過滑動進行瀏覽,并明確滾動的方向??梢蕴峁L動條、按鈕,或在屏幕任意一側(cè)顯示部分額外條目。

可以通過進度條、百分比等形式讓用戶知道瀏覽的當前位置,并為中途退出的用戶保留查看進度。

被選中的圖片與其他圖片要從視覺上明顯區(qū)分,可以提供邊框或?qū)⑦x中圖片置于高亮。

當瀏覽到最后一張圖片時,可以提供“更多”按鈕,讓用戶知道圖集瀏覽完成,可以點擊瀏覽更多信息或下一圖集。

旋轉(zhuǎn)木馬模式在提供大圖瀏覽的同時,也提供瀏覽導航,并可以呈現(xiàn)更多相關(guān)內(nèi)容。比起傳統(tǒng)的瀑布流、縮略圖列表,旋轉(zhuǎn)木馬模式為用戶帶來更流暢的圖片瀏覽效果,是一個更高效、易于識別的圖片查看方式。該模式廣泛應用于以下產(chǎn)品:
1)照片瀏覽類產(chǎn)品
用戶通過它來對照片、視頻進行瀏覽,選擇感興趣的內(nèi)容進行查看。大圖的使用比起縮略圖列表更容易讓用戶獲得良好的體驗,旋轉(zhuǎn)木馬可以在用戶瀏覽大圖的同時提供導航,方便用戶在眾多圖片中切換。
例如:優(yōu)酷,人人網(wǎng)…

旋轉(zhuǎn)木馬模式也是電子商務類網(wǎng)站中經(jīng)常用到的交互形式,產(chǎn)品詳情頁經(jīng)常使用旋轉(zhuǎn)木馬為用戶呈現(xiàn)全方位的產(chǎn)品展示。
例如:淘寶、京東…

新聞圖片最容易吸引用戶的注意力, 隨著視頻新聞、圖片新聞等多媒體元素更多的應用在新聞閱讀類產(chǎn)品中,更多媒體選擇使用旋轉(zhuǎn)木馬呈現(xiàn)新聞列表,輔以適量文章摘要,為用戶帶來更高效、直觀的閱讀體驗。
例如:BBC、華盛頓郵報…

1)減少認知負擔
iTunes的媒體封面流由一張?zhí)幱谄聊恢行牡拇髨D和羅列在兩側(cè)的縮略圖組成,這種組成模式要注意圖片滾動的速度。由于這些圖片不斷變換著,用戶也許無法在快速切換的圖片中聚焦對象,從而嘗試及時停止?jié)L動來獲得焦點。因此,在設計旋轉(zhuǎn)木馬時要謹慎處理圖片的滾動速度、滑動時的加速度,以及滑動停止的減速,不要添加過多動畫效果增加用戶的認知負擔。

開始滾動的方向經(jīng)常讓用戶產(chǎn)生疑惑:“旋轉(zhuǎn)木馬是循環(huán)播放嗎?”,“我是否已經(jīng)看過某些內(nèi)容?” Android 4.0使用“blue parallax”視覺元素提示用戶滾動的方向和終點。

長時間的瀏覽會使用戶感到無聊和疲倦,所以在設計時要注意旋轉(zhuǎn)木馬承載圖片的數(shù)量,一般控制在20張以內(nèi),減少用戶持續(xù)瀏覽產(chǎn)生的疲勞。如果希望用戶繼續(xù)瀏覽,可以在內(nèi)容瀏覽結(jié)束后增加“查看更多”,讓用戶在瀏覽完成后通過點擊跳轉(zhuǎn)到其他內(nèi)容。

在網(wǎng)站設計中,旋轉(zhuǎn)木馬模式已廣泛應用于眾多網(wǎng)站。在移動互聯(lián)網(wǎng)時代,隨著移動設備的高端化、多元化發(fā)展,設計師可以通過應用旋轉(zhuǎn)木馬模式為用戶創(chuàng)造更好的瀏覽體驗,如何利用該模式結(jié)合更多交互手勢、怎樣合理利用平臺特性,為設計師留下了廣闊的想象空間。


[1] Greg Nudelman. A Definitive Guide To The Android Carousel Design Pattern. February 1st, 2013
[2]?http://developer.yahoo.com/ypatterns/selection/carousel.html
VIA:百度MUX
- 目前還沒評論,等你發(fā)揮!