域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

移動(dòng)產(chǎn)品設(shè)計(jì)中，圖片傳達(dá)的信息比文字更直白、美觀、容易吸引用戶(hù)注意，所以在產(chǎn)品中引入大量圖片資源也成為設(shè)計(jì)師喜愛(ài)的方式之一。

今天我們?cè)谖闹幸榻B一種高效的縮略圖瀏覽方式——旋轉(zhuǎn)木馬模式(Carousel)。

1.什么是旋轉(zhuǎn)木馬(Carousel)模式?

旋轉(zhuǎn)木馬由來(lái)已久，在西方的游樂(lè)場(chǎng)中經(jīng)?？梢砸?jiàn)到，早期的膠片電影靈感即來(lái)源于此，將一張張靜止的畫(huà)面快速轉(zhuǎn)動(dòng)投射到熒幕上，在中國(guó)古代也有類(lèi)似的形式——“跑馬燈”，在節(jié)日供百姓觀賞娛樂(lè)。

在移動(dòng)產(chǎn)品交互設(shè)計(jì)中，旋轉(zhuǎn)木馬模式可以在一條目?jī)?nèi)同時(shí)呈現(xiàn)多張圖片，引導(dǎo)用戶(hù)通過(guò)滑動(dòng)屏幕瀏覽更多內(nèi)容。這種模式的優(yōu)點(diǎn)在于能夠在有限的屏幕空間內(nèi)，高效的呈現(xiàn)大量圖像內(nèi)容，帶給用戶(hù)更好的聚焦、瀏覽體驗(yàn)，讓原本靜止的圖片有如播放電影般精彩紛呈。

2.交互特性

1)屏幕中只呈現(xiàn)部分內(nèi)容

旋轉(zhuǎn)木馬模式中通常會(huì)展示大量的圖片內(nèi)容，但在手機(jī)屏幕的一屏內(nèi)不會(huì)呈現(xiàn)過(guò)多圖片(根據(jù)圖片尺寸一般在3-5張)。

2)引導(dǎo)用戶(hù)進(jìn)行滾動(dòng)

需要明顯的視覺(jué)引導(dǎo)，讓用戶(hù)知道可以通過(guò)滑動(dòng)進(jìn)行瀏覽，并明確滾動(dòng)的方向?？梢蕴峁L動(dòng)條、按鈕，或在屏幕任意一側(cè)顯示部分額外條目。

3)瀏覽進(jìn)度

可以通過(guò)進(jìn)度條、百分比等形式讓用戶(hù)知道瀏覽的當(dāng)前位置，并為中途退出的用戶(hù)保留查看進(jìn)度。

4)選中狀態(tài)

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

5)”更多”

當(dāng)瀏覽到最后一張圖片時(shí)，可以提供“更多”按鈕，讓用戶(hù)知道圖集瀏覽完成，可以點(diǎn)擊瀏覽更多信息或下一圖集。

3.旋轉(zhuǎn)木馬模式的應(yīng)用

旋轉(zhuǎn)木馬模式在提供大圖瀏覽的同時(shí)，也提供瀏覽導(dǎo)航，并可以呈現(xiàn)更多相關(guān)內(nèi)容。比起傳統(tǒng)的瀑布流、縮略圖列表，旋轉(zhuǎn)木馬模式為用戶(hù)帶來(lái)更流暢的圖片瀏覽效果，是一個(gè)更高效、易于識(shí)別的圖片查看方式。該模式廣泛應(yīng)用于以下產(chǎn)品：

1)照片瀏覽類(lèi)產(chǎn)品

用戶(hù)通過(guò)它來(lái)對(duì)照片、視頻進(jìn)行瀏覽，選擇感興趣的內(nèi)容進(jìn)行查看。大圖的使用比起縮略圖列表更容易讓用戶(hù)獲得良好的體驗(yàn)，旋轉(zhuǎn)木馬可以在用戶(hù)瀏覽大圖的同時(shí)提供導(dǎo)航，方便用戶(hù)在眾多圖片中切換。

例如:優(yōu)酷，人人網(wǎng)…

2)電子商務(wù)類(lèi)產(chǎn)品

旋轉(zhuǎn)木馬模式也是電子商務(wù)類(lèi)網(wǎng)站中經(jīng)常用到的交互形式，產(chǎn)品詳情頁(yè)經(jīng)常使用旋轉(zhuǎn)木馬為用戶(hù)呈現(xiàn)全方位的產(chǎn)品展示。

例如:淘寶、京東…

3)新聞閱讀類(lèi)產(chǎn)品

新聞圖片最容易吸引用戶(hù)的注意力， 隨著視頻新聞、圖片新聞等多媒體元素更多的應(yīng)用在新聞閱讀類(lèi)產(chǎn)品中，更多媒體選擇使用旋轉(zhuǎn)木馬呈現(xiàn)新聞列表，輔以適量文章摘要，為用戶(hù)帶來(lái)更高效、直觀的閱讀體驗(yàn)。

例如:BBC、*…

4.注意事項(xiàng)

1)減少認(rèn)知負(fù)擔(dān)

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

2)滾動(dòng)的方向和終點(diǎn)

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

3)圖片數(shù)量

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

結(jié)語(yǔ)

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

參考文獻(xiàn)

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

[2]

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！