為什麼首頁用三欄卡片,而不是輪播圖或全版影片
在確認首頁中段的核心元素時,我們評估過幾個常見的替代方案:輪播圖(Carousel)、全版背景影片、以及手風琴式的展開選單。最後選擇了三欄靜態卡片——這個決定,是設計美學判斷、使用者體驗研究,以及對目標受眾行為模式的綜合考量。
先說為什麼不選輪播圖。輪播圖的問題,在數位設計圈其實已經被討論了很多年,但客戶仍然很常提出這個需求,因為「感覺可以放很多內容」。然而使用者研究的結論非常一致:大多數訪客只會看輪播圖的第一張,第二張以後的內容點閱率幾乎可以忽略不計,尤其是在行動裝置上,自動輪播的機制更是常見的體驗干擾源。一個正在用手機搜尋「桃園地政士繼承登記怎麼辦」的使用者,他需要的是立刻看到答案,而不是等待輪播跑到他需要的那張。
全版背景影片的問題更直接:頻寬消耗大,在 4G 甚至部分 5G 環境下,影片緩衝會讓首屏的出現時間大幅延遲,直接衝擊 Google Core Web Vitals 的 LCP 指標。對於一個有具體技術效能目標的形象網站,這是一個很難被接受的代價,尤其這個案子的目標訪客群中,有相當比例是年齡偏長、使用中低階手機的在地民眾。
三欄靜態卡片最終勝出,理由是它在任何情境下都能穩定地同時呈現三個核心入口:「專業團隊」對應「我想確認這個人的資歷」、「服務項目」對應「我有個問題想確認能不能處理」、「聯絡我們」對應「我已經決定要詢問了」。三種訪客心理狀態,三個入口,一次全部照顧到,不需要等待,不需要滑動,也不需要在腦袋裡拼湊分散的資訊。這種設計的底層邏輯,其實是在替訪客的認知負荷做減法,讓「下一步要做什麼」這個問題在視覺上自動被回答。
在RWD 響應式設計的框架下,三欄卡片在手機版自然疊成單欄垂直排列,優先順序的邏輯保持不變,第一張永遠是最重要的入口。這個結構的可預測性,讓跨裝置的使用者體驗維持了一致的閱讀節奏。