好的卡片應回答一個簡單問題:這是供閱讀的內容,還是可以點擊的入口?陰影、游標與箭頭都會建立期待。如果視覺訊息與實際行為不同,使用者就得猜。
有連結的卡片,可以在懸停時縮小陰影並稍微位移,像把紙張壓下去。鍵盤焦點也需要清楚的狀態。別只打磨滑鼠經過的效果,卻忘了按 Tab 的人。
沒有目的頁面的卡片,仍可提供輕微視覺回饋,但不應用手形游標或箭頭承諾不存在的操作。空連結不會把內容變成功能。
文字顏色應依元件本身的表面設定。深色區塊內的淺色卡片,需要自己的深色文字。若繼承父層的淺色文字,數字即使仍在頁面中,也可能在白底上看不見。
懸停沒有反應時,先查看哪條樣式規則生效,再加新效果。讓卡片保持水平的規則可能覆蓋懸停位移;靜態卡片的狀態可能保留陰影。解決衝突通常比堆更多 CSS 簡單。
最後測試觸控與減少動態效果的設定。不要把重要資訊藏在懸停後,也不必靠不停移動讓頁面顯得活潑。好的效果說明發生了什麼,然後把注意力交還給內容。
