怎麼設計輪播圖片

是一個朋友問我;這個東西到底要怎麼設計;這個問題老實說我還沒想過,我也從來不認為這個是一個問題,但是輪播在現在網站上很多網站都在使用,這有什麼問題嗎?

我一問之下,才發現;原來他的問題是這樣子:

  1. 我的網站的跳出率很高。
  2. 使用者在逛網頁的時候,覺得輪播圖片很難用,常常點不到他們想要的。
  3. 每次進去首頁,剛剛好不是使用者有興趣的圖片,以為是購物網站。
  4. 有些使用者根本不知道怎麼使用輪播圖片。

輪播的目的是什麼?

通常我會使用輪播的目的是在說;我有一堆非常重要的資訊,希望使用者在瀏覽網站的時候;可以看得到,但我又不希望資訊放到網頁的下面,因為使用者有可能還沒看到下面重要的資訊就離開了。

所以很多的電子商務平台;很喜歡把輪播當作廣告再用,為什麼呢,因為對於經營者來說營收很重要阿,所以打廣告讓你知道現在有什麼優惠,折扣的訊息就變得很重要。

不要讓它看起來像廣告

如果你的輪播,沒有辦法替使用者帶來有利有用的東西,基本上是很容易忽略不見的;因為你的東西就看起來像是廣告。

一旦你的東西看起來像廣告,使用者很容易就不看了。

第一張圖片最重要,更要懂得設計每張圖片

因為現在網站那麼多;要知道你;你知道有多難嗎?很多的使用者第一次來到你這個網站,如果你第一張圖,不是他感興趣、有興趣、對他有利的,通常他就走了。

這邊說的第一張圖是指說,你希望使用者看到第一張圖是什麼,不見得是輪播第一張圖,而是你想要讓使用者看的第一張圖。

所以我們在使用輪播的時候第一張圖片一定要經過特別設計,你一定要將你最重要的資訊放到第一張上,並且一定要人一眼就看出來這個網站是在幹嘛的,你是在做留學、還是賣手機、賣包包、還是遊戲或者旅遊、機票、餐廳飯店的網站。

設計的重點在於:

你解決了客戶的那些痛點。
利用妳產品的價值來解決客戶所在意的點,例如我學英文,不只是想應付考試是要可以拿來職場用的,或者你東西是可以消除病痛,或者可以讓我的睡眠品質更好的,當然我產品價值低但品質高..etc。

記住在設計的時候最好一次只講一點,且你每一張都要設計過。

我發現滿多線上教學英語的網站,第一張圖片就是送東西,搞的好像一個購物網站一樣。

要不是因為tutorabc很有名,不然我還真不知道這網站在幹嘛,抽電影票?

看一下另外一個engoo,清楚明確的表達了,他在幹嘛的,並且把你的煩惱寫上去。

另外一個就是next監視器更是直接了當了說,你為什麼需要他們,他門是怎麼阻止犯罪的,可以解決家裡遭遇小偷的時候,可以通知你。

lativ每個輪播的圖片都帶出特色

輪播並不是瀏覽網站內容唯一的方法

這一點最常發生在電子商務上,好像一定要有輪播,沒有好像就哪裡怪怪的,其實就我說的如果你有很多非常重要的資訊要放,不然其實你沒有必要使用輪播,一張大圖或者影片來說明你的產品可能會更好。

http://www.next.tw/zh

看一下next

https://www.gilt.com/

看一下gilt

輪播操作的細節

這個細節會讓你的使用者更方便,才不會有人反應你的東西很難用,然後或者你的使用者看了某一張圖片有興趣才剛要點,你圖片就跑走了。

  1. 當使用者在操作輪播的時候,請自動關閉掉自動輪播。
  2. 當使用者滑鼠移動到輪播圖片的時候,請暫停自動輪播。
  3. 輪播圖片的時候不要太快,如果你的內容要超過7秒才能讓人讀懂,那請你換掉,最好一張圖一段強而有力的話,但如果你真的內容很多,怎麼辦那可以這樣子每三個英中文字算1秒。
  4. 輪播圖片上面的箭頭與圓圈,但這個是控制元件,本身就是要讓使用者來操作輪播的所以箭頭與圓圈的對比一定要強烈,目的在於讓使用者知道,目前有機張圖片,你現在正在看到第幾張圖片,然後你如果想要的話可以回去,麻煩一下箭頭大一點明顯點。
  5. 如果是在手機上麻煩一下,請支援手勢。
https://tw.mall.yahoo.com/

看一下yahoo超級商城

輪播的設計就這幾點要注意,另外我額外提醒一下,手機上請不要使用自動輪播,那個會很卡,但請支援手勢來滑動圖片。

如果你覺得時候到了,那是時候為自己做某些改變了,讓我來幫忙你,我希望你可以更好,你現在就應該行動讓我幫你製作一個網站或應用程序

http://mamatate.com/

我不只是會幫你做網站,我還會跟你說怎麼使用UX設計來幫助你?當然我也會幫助你,提供一些對你事業有幫助的訊息給你。

泓傑工作室
電話:03–3582638
LINE:@ koa4745k 
電子郵件:2094103110@gm.kuas.edu.tw

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.