Vibe詞典

內容展示詞條 2-20

卡片Card

也常叫做：資訊卡、Card（直接用英文也很常見）、圖文區塊

你可能會這樣說

商品一個一個裝在小框框裡、整整齊齊排開的那種版面——那個框框怎麼說？

白話解釋

卡片是把一個東西的圖片、標題、說明、動作打包成一格的容器：一張商品卡、一篇精選文章、一位講者的介紹。它像名片——一張講一個人（或一件事），內容獨立、格式統一。

卡片好用是因為它自帶整理感：同樣的資訊換個內容填進去，重複排就是商品列表。但也是同樣的原因，它最容易被濫用——什麼都做成卡片、一頁三十張等寬等高的卡片海，資訊沒有輕重。

跟 AI 協作時，把一張卡的內部結構講清楚（圖、標題、一行說明、價格、按鈕各擺哪），再講外部規則（一行幾張、手機幾張、卡片之間距離多少）。兩層都講，它排出的版面才不會散。

親手試試

網站健檢

40 項自動檢查：速度、SEO、無障礙，附修正建議。

了解方案

內容代管

每月 4 篇文案與圖片更新，你看稿我們動工。

了解方案

緊急救援

網站掛了？4 小時內有人處理，全年無休。

了解方案

注意：整張卡片都能點（不只「了解方案」）、移上去只上浮一點點——這就是「回應」而不是「表演」。

圖 2-6　滑鼠移到卡片上，看正統的卡片互動是什麼感覺。

別搞混

卡片和表格都在「排列重複資訊」，但適合的資料型態完全不同。

卡片 Card

每筆資料有圖有字、需要被瀏覽：商品、文章、人物。適合「逛」的場景——使用者在掃視，視覺吸引重要。

表格 Table

每筆資料欄位整齊、需要被比對：訂單編號、金額、日期。適合「查」的場景——使用者在找東西，對齊重要。

這樣對 AI 說

中文就可以 
請做一個「服務項目」的卡片區：

1. 一張卡片包含：小圖示、服務名稱、一行說明、「了解方案」連結。整張卡片點哪裡都可以點進去（不只按鈕）。
2. 電腦一排三張、平板兩張、手機一張，卡片等高，標題和按鈕要對齊。
3. 滑鼠移上去：卡片稍微上浮、陰影加深、邊框變色——動作小而克制，不要旋轉跳動。
4. 卡片之間距離 20px，跟頁面其他區塊的節奏一致。
5. 只要三張卡，不要為了湊版面生更多。

「整張卡可點」和「動作要克制」是兩個卡片品質的關鍵詞，講了 AI 就會做得像樣。

延伸閱讀

同一課的其他詞

標籤Tag徽章Badge頭像Avatar頭像群組Avatar Group表格Table清單List