輪播圖設計,你還需要知道這3點

1 評論 8544 瀏覽 18 收藏 9 分鐘

輪播圖、走馬燈形式的廣告頁面展示在我們日常的各種平臺上隨處可見。也有很多原理在設計中被運用和改進,但如果沒有理解交互方面的設計原則,則會讓輪播圖的效果大打折扣。

一、移動端輪播圖

輪播圖最廣泛運用的地方是電商領域,需要具有一定密度的廣告轟炸。在電商app首屏會有一個輪播區域,會顯示讓用戶感知圖片當前所在位置的圓點,而且由于移動端沒有hover狀態,用戶在觸屏設備上是滑動來進行切換輪播區域,要求輪播的圖片能在第一時間抓住用戶的注意力,所以輪播圖的內容需要額外的注意,在當前移動設備尺寸下,設計輪播圖的時候有以下幾個注意點:

(1)文案需清晰可見,需具有很強的可讀性;閱讀不費力,這樣才能在有效傳遞廣告主需要傳遞的核心信息。

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

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

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

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

(6)最好不要直接拿pc端的圖直接放進移動端,因為文字的可讀性無法保證,需要同風格但要對文字進行調整。

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

二、PC端的輪播圖

PC端的輪播圖則規矩多了。但由于PC端和移動端的交互操作方式有很大區別,在輪播區域最主要的兩個區別是hover狀態區別和banner的展示區域多樣化。

PC端特有的hover狀態,可以在輪播的圖上作懸停。自動輪播已經成為大部分首屏的中心區域,當用戶的鼠標移動至輪播區域,輪播交互可以停留在當前,那么體驗是比較好的,用戶會感覺自己的意愿被尊重;而且輪播的圖通常3-5秒切換一個,如果用戶注意到其中一張,并作懸停且輪播因此停留,用戶點擊的可能性就會大大增加。

PC端的輪播區域做切換也會選擇箭頭這種明確指示切換的圖標,操作一目了然。

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

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

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

互聯網生態圈以用戶為核心,通過產品滿足用戶需求和獲取用戶,而互聯網的本質是要轉化用戶價值令其背后的公司獲得收入,商業模式決定了寸土寸金的終端屏幕每一寸土地都要發揮它最大的價值。每一個模塊每一個元素的設計都要遵循互聯網的“用戶需求驅動”的思維。

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

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

產品滿足了用戶“更加”“貪婪“的需求,用戶自然愿意買單,大的方向是如此,更何況一些小細節上的處理。

了解和運用這些基本原理,最大程度的提升畫面占幅極高及視覺聚焦點輪播區域的轉化率,潛移默化的教育用戶,給用戶最想看的內容,也讓輪播區域利用率轉化率達到最大。

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

 

作者:就不,公眾號:就設計

本文由 @就不 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash, 基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 說了一大堆,get不到重點

    來自浙江 回復