20250405-UI/UX 設計裡，**顏色其實是有「語意」的txt

發表於 2025-09-06 閱讀次數：

20250405-UI/UX 設計裡，**顏色其實是有「語意」的txt

20250405-UI/UX 設計裡，**顏色其實是有「語意」的txt

好問題 👍
在 UI/UX 設計裡，顏色其實是有「語意」的，常用來代表不同的訊息狀態。

以下是常見的顏色慣例（像 Quasar、Bootstrap、Vuetify 等 UI 框架也差不多）：

狀態	常見顏色	用途 / 說明
錯誤 / 警告 (Error / Danger)	🔴 紅色	表示嚴重錯誤、危險、需要立即注意的事情
警告 / 提醒 (Warning)	🟠 橙色	表示可能有風險，需要注意，但不是致命錯誤
成功 (Success)	🟢 綠色	表示操作成功、完成、正向的狀態
資訊 (Info)	🔵 藍色	提供一般資訊、提示訊息，沒有警告或錯誤性質
次要 / 中性 (Secondary / Neutral)	⚪ 灰色	比較中性、輔助說明，不特別強調

舉例：訊息框顏色

紅色：刪除失敗、登入錯誤、帳號被鎖定
橙色：密碼即將到期、磁碟快滿了
綠色：檔案上傳成功、設定已儲存
藍色：新版本資訊、提示用法
灰色：背景說明、非重點提醒

👉 所以你在 MyBanner.vue 這種公告元件裡，可以用 type 來控制樣式，例如：

1
2
3

<MyBanner type="error">刪除失敗</MyBanner>
<MyBanner type="success">操作成功</MyBanner>
<MyBanner type="info">新版本已上線</MyBanner>

然後在 CSS 裡定義不同顏色。

0%