輪播圖、走馬燈形式的廣告頁面展示在我們?nèi)粘５母鞣N平臺上隨處可見。也有很多原理在設(shè)計(jì)中被運(yùn)用和改進(jìn)，但如果沒有理解交互方面的設(shè)計(jì)原則，則會讓輪播圖的效果大打折扣。

一、移動端輪播圖

輪播圖最廣泛運(yùn)用的地方是電商領(lǐng)域，需要具有一定密度的廣告轟炸。在電商app首屏?xí)幸粋€(gè)輪播區(qū)域，會顯示讓用戶感知圖片當(dāng)前所在位置的圓點(diǎn)，而且由于移動端沒有hover狀態(tài)，用戶在觸屏設(shè)備上是滑動來進(jìn)行切換輪播區(qū)域，要求輪播的圖片能在第一時(shí)間抓住用戶的注意力，所以輪播圖的內(nèi)容需要額外的注意，在當(dāng)前移動設(shè)備尺寸下，設(shè)計(jì)輪播圖的時(shí)候有以下幾個(gè)注意點(diǎn)：

（1）文案需清晰可見，需具有很強(qiáng)的可讀性；閱讀不費(fèi)力，這樣才能在有效傳遞廣告主需要傳遞的核心信息。

（2）主題鮮明，無需過多的輔助干擾因素，少即是多；簡易的文案和突出的產(chǎn)品更容易抓住用戶的眼球。但不是用過于刺眼的顏色，不然可能會引起反感，適得其反。

（3）符合閱讀習(xí)慣，盡量是從做往右，或者是從上到下，否則短暫的閱讀時(shí)間無法抓住用戶的注意力，留給這個(gè)banner的宿命就是被劃走或者是忽略。

（4）重點(diǎn)文字需做突出，用最短時(shí)間抓住用戶點(diǎn)擊欲望；是打折還是上新，折扣力度是多大，有效期是幾天等等，摘取重要信息作重點(diǎn)突出和吸引即可。千萬別滿屏幕都是重點(diǎn)，在有限的空間內(nèi)做好信息的平衡和協(xié)調(diào)。

（5）注意畫面節(jié)奏，信息平衡，主次對比鮮明，突出產(chǎn)品特征，必要的重點(diǎn)文案可以突出，畫面適度留白，增加透氣感形成內(nèi)容聚焦，利于閱讀。

（6）最好不要直接拿pc端的圖直接放進(jìn)移動端，因?yàn)槲淖值目勺x性無法保證，需要同風(fēng)格但要對文字進(jìn)行調(diào)整。

通常首屏輪播banner不常使用動圖進(jìn)行展示，如果首屏的多張圖都是動圖，用戶就會眼花繚亂，找不到重點(diǎn)。通常會在次屏的單張banner展示區(qū)域，例如膠囊banner，既不占用過多空間，也能很好的傳遞宣傳的板塊信息，并且有的會結(jié)合動圖或是破格圖來吸引用戶進(jìn)行點(diǎn)擊等操作，很好的平衡了畫面的焦點(diǎn)，以及整個(gè)頁面的節(jié)奏感。

二、PC端的輪播圖

PC端的輪播圖則規(guī)矩多了。但由于PC端和移動端的交互操作方式有很大區(qū)別，在輪播區(qū)域最主要的兩個(gè)區(qū)別是hover狀態(tài)區(qū)別和banner的展示區(qū)域多樣化。

PC端特有的hover狀態(tài)，可以在輪播的圖上作懸停。自動輪播已經(jīng)成為大部分首屏的中心區(qū)域，當(dāng)用戶的鼠標(biāo)移動至輪播區(qū)域，輪播交互可以停留在當(dāng)前，那么體驗(yàn)是比較好的，用戶會感覺自己的意愿被尊重；而且輪播的圖通常3-5秒切換一個(gè)，如果用戶注意到其中一張，并作懸停且輪播因此停留，用戶點(diǎn)擊的可能性就會大大增加。

PC端的輪播區(qū)域做切換也會選擇箭頭這種明確指示切換的圖標(biāo)，操作一目了然。

自動輪播的輪播圖如果切換時(shí)間太短促也會造成用戶的反感從而直接被忽略，那在這個(gè)區(qū)域展示再多的內(nèi)容，也無法被用戶接收。所以控制自動輪播的時(shí)間以及平滑的切換方式也可以提高點(diǎn)擊率，從而提高產(chǎn)品轉(zhuǎn)化。

三、輪播圖衍生出的用戶需求驅(qū)動分析

我們可以看出，輪播圖大致是位于頁面頂部或頁面中間。無論是PC端還是移動端，還有的其他的一些互聯(lián)網(wǎng)終端例如車載屏幕、ipad、智能手表等，輪播圖這個(gè)視覺焦點(diǎn)部分都是寄予了很多的商業(yè)價(jià)值期待的。

互聯(lián)網(wǎng)生態(tài)圈以用戶為核心，通過產(chǎn)品滿足用戶需求和獲取用戶，而互聯(lián)網(wǎng)的本質(zhì)是要轉(zhuǎn)化用戶價(jià)值令其背后的公司獲得收入，商業(yè)模式?jīng)Q定了寸土寸金的終端屏幕每一寸土地都要發(fā)揮它最大的價(jià)值。每一個(gè)模塊每一個(gè)元素的設(shè)計(jì)都要遵循互聯(lián)網(wǎng)的“用戶需求驅(qū)動”的思維。

現(xiàn)在產(chǎn)品的推薦都會根據(jù)用戶的喜好做個(gè)性化定制推薦，內(nèi)容必定是你近期看過的，或者是大數(shù)據(jù)分析下認(rèn)為你感興趣的內(nèi)容。根據(jù)馬斯洛需求層次理論人的基本底層需求被滿足之后，更高層次的尊重需求就會愈發(fā)的強(qiáng)烈，這也就是為什么所有的產(chǎn)品都在強(qiáng)調(diào)用戶體驗(yàn)，究竟用戶體驗(yàn)的是什么，其實(shí)就是一種被尊重感，而且這種尊重感需要體現(xiàn)在產(chǎn)品的方方面面細(xì)枝末節(jié)。這也就是為什么蘋果設(shè)備在一定程度上備受追捧，沒有胡亂彈出的廣告，沒有不經(jīng)過你允許就亂開通的權(quán)限，沒有流氓的牛皮癬廣告。

• 用戶想買東西，互聯(lián)網(wǎng)公司就作出購物app讓用戶買東西的產(chǎn)品，并且可以比價(jià)，可以網(wǎng)購可以快遞到家讓用戶更好更快更便宜的買東西。
• 用戶想打車，互聯(lián)網(wǎng)公司就作出打車app讓用戶方便打車，并且可以隨時(shí)隨地打車，還可以拼車，讓用戶不僅方便打車打車還更便宜。
• 用戶想租房子，互聯(lián)網(wǎng)公司就作出租房的app，讓用戶可以知道哪里有房源價(jià)格是什么，還可以不用出門就可以VR看房，足不出戶更加方便·····

產(chǎn)品滿足了用戶“更加”“貪婪“的需求，用戶自然愿意買單，大的方向是如此，更何況一些小細(xì)節(jié)上的處理。

了解和運(yùn)用這些基本原理，最大程度的提升畫面占幅極高及視覺聚焦點(diǎn)輪播區(qū)域的轉(zhuǎn)化率，潛移默化的教育用戶，給用戶最想看的內(nèi)容，也讓輪播區(qū)域利用率轉(zhuǎn)化率達(dá)到最大。

好啦，以上就是今天的分享。

作者：就不，公眾號：就設(shè)計(jì)

本文由 @就不 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議