網頁設計中的爆款之一
「輪播」又稱滑塊、幻燈片，一種在特定範圍內的畫面過渡特效。可以自動播放或者結合互動，讓使用者在滑動、滾動、點擊等操作時自由切換畫面。
我們對於輪播應該不陌生，從各大官網、購物站的首頁 Banner，到移動端的內容觸控，都能看到它的蹤影。輪播除了能用來收納，讓頁面整體更加簡潔乾淨，此外，很重要的一點是，它能夠在 “ 有限的版面中(尤其在移動端)傳遞更多的資訊 ”，這就是為什麼輪播一直以來都是網頁 UI（User Interface）介面設計中的熱門選項，並且具有相當高的使用頻率。
▎常見的內容
- 圖片/影片：大多為主視覺、展示、產品或用於背景。
- 文字：簡潔有力、醒目的標題，文章/新聞類的輪播可能包含摘要。
- 按鈕：常用於連結(Link)、輪播控制項(Direction Nav/Control Thumbs)。
- 其他元素：如圖型、色塊、遮罩等，通常用於加強主要元素或情境，這裡就不一一列舉。
若輪播具有特別的過渡效果、搭配適當的動態或互動式元素，可有助於吸引目光，加深使用者印象。
▎範例介紹
網站的輪播至今已經發展得相當成熟，很多套件基本都支援 RWD 及移動裝置，更演變出了各種動態效果。接下來介紹幾個輪播範例，希望大家能夠有所收穫或者從中得到一些靈感~
# 背景切換
我們時常在電商網站上見到產品輪撥，但不可否認千篇一律的輪播總是較容易視覺疲乏，雖然 E-Commerce Shop (Single Item) 本質上也是經典的產品輪撥，不同的是它在輪播時改變了背景色，使背景與產品彼此連結相互呼應，這個小巧思，除了讓產品與顏色選擇更有帶入感，也讓整體畫面更有活力。
# 視差效果
Madies 視差是現代網頁中很常見的效果動態，只要將輪播內的元素以不同速度進場，就能輕鬆實現立體的輪播效果。
Fancy Slider 這是運用遮罩的例子，遮罩區域利用 CSS 新的背景混合模式(background-blend-mode)產生疊加色調，並改變其定位，結合動畫營造出視覺錯位。
# 3D 輪播
Tilted Content Slideshow 將元素 Transform 可以營造出不錯的 3D 效果。
Gucci Zumi 轉場方式頗有趣味性，也是種另類的 3D 表現手法，看膩了水平與垂直，那用轉的怎麼樣~
# 互動式
滑鼠拖曳是現代互動式網頁常見的手法之一，Ben Mingo 的設計風格雖然簡約，但在拖曳轉場以及小細節的懸停處理都非常細膩，網站整體美感很好，處處可見巧思，內容簡單卻不單調。
接下來這兩個作品也是互動式輪播，都有著讓人驚艷的轉場動態，可使用點擊作畫面切換，Yannis Yannakopoulos 在滑鼠懸停時能產生波紋效果，而 PANAMÆRA 則是能產生煙霧效果。
# 畫面分割
有別於一般影片輪撥的切換方式，When we were kids 以畫面分割作為轉場手法，有一種跳躍時空場景變換的感覺，是不是也非常貼合 When we were kids 主題呢~
# 垂直輪撥
雖說目前輪撥大多還是以水平滑動為主流，但 Climate History 在歷史時間軸的演示中將垂直輪撥運用的恰如其分！這種線性且資訊量較多的內容，引導使用者繼續向下閱讀，會比橫向滑動更加合適。
結語
輪播雖然廣泛被應用在網頁/行動裝置之中，但它還是存在一些爭議：
01/ 內容行銷/用戶體驗
輪播單次能顯示的內容及數量有限、不夠直覺的控制項設計、過快的播放速度不好閱讀，用戶沒有意願等候切換…等，都是影響使用者是否得到資訊的潛在因素，所以在規劃輪播時，務必先考量到隱藏內容將有被錯過的風險，尤其在重要資訊、廣告、大標題的使用上更要謹慎。
02/ 搜尋引擎 SEO
網站的結構會影響 SEO 自然排序，如果網頁是大 Banner 、圖片為主，那麼更要有完善的圖片優化，並且為圖片添加詳細描述，此外，由於文字在 SEO 中的影響力不小於圖片，因此最好還是盡可能在其他的文字區塊中加入圖片相關內容。
