如何創建輪播圖體驗有利於提高行銷轉換?幾乎所有品牌UI都會使用輪播圖(Carousels)，但毫無疑問的是，在整個UX設計中，輪播圖是最容易傷害產品的用戶體驗。這是因為在大多數情況下，隱藏於輪播圖中的內容，要麼對用戶來說是毫無意義，要麼是令人討厭的促銷訊息或容易分心的內容。

輪播圖真的會損害網站用戶體驗嗎?

UI設計技巧

在使用網站/APP時，大部分用戶都會更傾向於滾動越過輪播圖，並試圖將其從視野中移開，繼續執行任務，而這種情況在APP新手教程尤為突出。當用戶在教程中遇到引導流程輪播圖時，他們會毫不猶豫地直接點擊「Skip」按鈕。

UI設計技巧

就算在常規促銷、新聞稿等內容發現方面，輪播圖同樣作用不大，如果某些重要內容被展示輪播圖靠後的滑塊中，更是讓用戶難以發現它們。

那是不是說輪播圖就肯定對UX設計毫無作用?

不一定!

△ 在有效的輪播圖中，用戶以線性衰減方式查看輪播圖

事實上，當我們需要突出顯示所有功能或選項，但缺乏同時顯示它們的空間時，輪播圖可以非常有效的。另外，在某些情況下，如果輪播圖被有目的地集成到用戶當前任務中時，點擊率通常也相對較高。

一般來說，輪播圖適合以下場合使用：

• 用戶正在探索合適的選項或選擇購買方案

• 用戶瀏覽推薦頁、評論、產品或功能

• 用戶在電商頁面上研究產品圖片，以了解他們有興趣購買的產品規格

• 用戶希望預覽他們想預訂地方的體驗，他們看到大全屏圖片或視頻時會來回瀏覽

• 用戶在手機上以卡片形式探索內容細節

總的來說，當我們在特定和相關背景下提供額外內容時，輪播圖能發揮最大的作用，譬如時電商、旅遊、畫廊、新聞報道等都是輪播圖閃閃發光的地方。

但大多數時候，我們所設計的輪播圖其實並不利於網站/APP的可用性和可訪問性，這使得輪播圖幾乎沒有太大作用，因此我們需要利用一些UI設計技巧來改變這一點。

UI設計技巧：如何創建輪播圖體驗有利於提高行銷轉換

由於輪播圖在UI設計中存在很多可用性和可訪問性問題，通常要設計更好的輪播圖時，我們需要遵循以下這些UI設計細則：

▏誠實地標明滾動方向

如果輪播圖水平移動，那麼只有水平模塊來暗示預期行為才是最合理的;同樣，輪播圖是垂直移動，也只能使用垂直模塊來暗示預期行為。

UI設計技巧

You and Oil的輪播圖雖然帶有一個垂直對齊的模塊，但用戶需要左右滑動才能瀏覽輪播圖其他內容，這容易造成用戶混亂、疑惑。

▏避免使用進度點

由於進度點通常比較小，容易導致用戶誤觸;加上其本身信息量不多，不會傳達除進度本身的其他特定含義，因此它們對激烈用戶互動的作用並不大。

UI設計技巧

Squarespace Circle在圓形路徑中使用「標籤」突出貢獻者的個人故事，這比毫無生氣的進度點更引人入勝。

UI設計技巧

在Tylko網站中，使用水平模塊替代進度點，不僅能顯示用戶當前所在位置，同時每個滑塊中都整合了自定義選項和相關資料，這使得網站佈局非常整齊且簡潔。

UI設計技巧

Daphne Wilde網站使用「數字」替代進度點，不僅能顯示用戶當前所在位置，而且數字足夠大，方便用戶點擊輪播圖中的圖像/數字進行跳轉。

▏組合選項卡和輪播圖

一般來說，輪播圖呈現的內容大多不太受用戶控制，但如果在輪播圖中添加過濾器，可幫助用戶選擇他們真正想要看到的內容。

UI設計技巧

在Reuters網站，卡片和選項的組合與輪播圖相輔相成，上一個/下一個按鈕位於該區域的右上方，有助於鼓勵用戶點擊感興趣的主題和探索可用的選項。另外，用戶可以通過「See all World」的按鈕直接挑選到其他類別，非常方便。

▏使用縮略圖或圖標激勵點擊

一般來說，如果介面顯示用於「激勵用戶採取行動」的相關內容越多，將更有利於提高我們所期望的點擊率。

UI設計技巧

Weber Grill Original 使用縮略圖替換標籤來顯示他們的食譜，這將幫助用戶更直觀地看到所有選項並以最短時間內選擇想要內容。

▏在輪播圖中添加訊息線索

大部分用戶都只會留意到輪播圖當前展現的圖片，為確保他們了解到尚未看到的所有內容，建議在UI設計中為其他圖片添加某種訊息線索。

UI設計技巧

Neufuntrois網站將輪播圖片裁切為可愛形狀，同時還在介面中展現上一張和下一張圖片中的部分內容，使用戶清楚知道這些內容是可發現的。

▏避免自動輪播或添加至少5-7秒延遲

自動輪播會損害用戶的耐性和介面優先級，尤其是在移動端上，用戶經常會過快地越過輪播圖，甚至沒有注意到它實際是自動輪播的。因此，如果你真的需要自動輪播來吸引和保持用戶興趣，建議每張圖片固定延遲5-7秒。

UI設計技巧

Google Pixel Buds的每張輪播圖都有6秒的延遲，這為用戶在當前圖片提供足夠的時間來操作向下滾動或離開頁面，不會在此過程中被打斷。

【最後】

由於輪播圖隱藏了相關內容，從而使用戶很難正常訪問內容。因此為了更好地提高品牌UI設計的轉換，更建議選用其他方式來替換輪播圖，比如Resident Advisor 網站使用「查看更多功能」來替代輪播圖，方便用戶通過這個按鈕探索更多內容，以及顯示足夠文本和視覺效果，吸引用戶潛入其中。

當然，在實際操作中，輪播圖的替換方案並不少，而且它們通常都很容易實現，因此品牌UI設計是否需要輪播圖，我們不妨從可用性、可訪問性等方面去考慮!