卡片式 UI 設計 6 原則:間距、陰影、互動、內容比例

TL;DR卡片是資訊的容器——好的卡片讓一大堆資訊看起來清爽好掃描;差的卡片讓資訊互相打架。

6 個設計原則

1. 內距(Padding):至少 20-24px,內容太貼邊會很擠 2. 圓角:8-16px 最舒服(0px 太硬、24px+ 太可愛) 3. 陰影層次:卡片間用陰影分層,別用邊框(太重) 4. 圖片比例統一:整組卡片圖片比例一致(16:9 或 4:3 選一種) 5. 標題長度限制:2 行內截斷、加省略號 6. Hover 互動:微微上浮 + 陰影加深 = 「這是可點的」訊號

6 個設計原則

卡片內容黃金比例

圖片:文字:CTA = 5:4:1

  • 圖片區約佔卡片 45-55% 高度
  • 標題 + 說明佔 30-40%
  • 底部 CTA / meta 佔 10-15%

內容順序:類別/日期(小) → 標題(大) → 說明(中) → CTA/作者(小)

常見錯誤

  • 卡片內文字太多(超過 3 行)→ 移到內頁
  • 每張卡片 CTA 文字不同 → 統一
  • 圖片沒對齊(有直有橫)→ 統一裁切比例
卡片內容黃金比例

為什麼要找 LOOKME 做網站與數位行銷?

看完上面的內容,你會發現——現代網站不是「架起來就好」。設計要顧美感與轉換、SEO 要顧結構與內容、行銷要顧公域與私域,每一步都要有數據驗證。單點外包 5 個廠商,通常不會贏過一個真正整合的團隊

LOOKME 數位行銷的 5 個差異:

  1. 一站整合,不用你當專案經理:網站、內容、SEO、短影音、LINE 官方帳號,一個窗口對到底
  2. 我們自己就在跑:所有策略先在我們自家品牌驗證過才提案
  3. 交件即帶走:網站、內容、影音原始檔全部給你
  4. 月報說人話:直接告訴你這個月哪 3 件事有效、下個月做什麼
  5. 不強推方案:預算不夠時我們會告訴你「先做這一項就好」

服務項目對應

想聊聊你的狀況?先聊,不收費、不推銷

留下你的產業、目前遇到的狀況與預算範圍,我們會依實際情況給出具體的優先順序建議,而不是一開口就先報價。

也可以直接點文字連結:LINE 諮詢 →聯絡我們 →

讓好想法,被看見。—— LOOKME 數位行銷

返回頂端