🎨 第 3 堂：文字 + 顏色設計
學習顏色心理學，設計吸引人的跑馬燈
🌈 顏色點樣影響心情？
顏色唔只係用嚟睇，佢會直接影響人的情緒同感受。
💙 藍色
感受： 信任、冷靜、專業
用途： 企業網站、教育、科技
例子： Facebook、LinkedIn
🧡 橙色
感受： 溫暖、創意、能量
用途： 創意工作、食物、娛樂
例子： Orange（電訊公司）
💚 綠色
感受： 自然、和平、成長
用途： 環保、健康、金錢
例子： Spotify、Starbucks
💜 紫色
感受： 創意、豪華、神祕
用途： 藝術、時尚、美容
例子： Yahoo
❤️ 紅色
感受： 熱情、緊急、興奮
用途： 銷售、提醒、運動
例子： YouTube、Netflix
🤍 銀色
感受： 中立、成熟、正式
用途： 背景、輔助、專業
例子： Apple
💡 小知識： 顏色搭配會影響可讀性。例如，紅色文字喺綠色背景上會好難睇（色盲人士的困擾）。
🎯 選擇適合你的背景顏色
點擊下面嘅顏色，睇下你個 portfolio 會變成咩樣：
Aurora
藍色漸層
Sunset
橙色漸層
Forest
綠色漸層
Lavender
紫色漸層
Rose
粉紅漸層
Aurora（藍色漸層）
呢種顏色俾人信任、冷靜的感覺
📝 文字 vs 背景的對比
好嘅設計要有足夠嘅對比，咁樣先睇到清楚。
💡 一致性原則： 我們的 portfolio 用 dark text on light background，確保所有人都睇得清楚。
💬 跑馬燈文字設計
跑馬燈（Marquee）係一個會自動滾動嘅文字帶。選擇顏色同內容，睇下效果：
🎨 跑馬燈預覽
Welcome to my portfolio :)
🎨 一致性在顏色設計的應用
好嘅網頁會重覆使用同樣嘅顏色，建立「視覺品牌」（Visual Identity）。
✅ 一致嘅顏色系統
- 主色（藍色）用晒
- 強調色固定
- 背景色選定
- 文字色一致
睇落專業、有品牌感
❌ 亂晒嘅顏色
- 四處八方嘅色
- 唔知用咩強調
- 背景色變左又變
- 文字色五花八門
睇落亂晒，唔專業
💡 我們的顏色系統：
主色： 藍色 (#5f7cff) = 按鈕、標題、重點
背景： 白色 + 淡藍漸層 = 乾淨、親切
文字： 深灰 (#1f2937) = 清晰易讀
強調色： 綠色（成功）、橙色（警告）、紅色（危險）
♿ 色盲人士的考慮
設計時要考慮佢哋：
- ❌ 唔好只靠顏色傳達資訊（例如「綠色 = 正確」）
- ✅ 配合圖案或文字（例如「✓ 綠色」、「✗ 紅色」）
- ✅ 確保足夠嘅對比（顏色深淺差異要大）
- ✅ 用唔同嘅顏色組合（避免紅+綠並排）
💡 測試工具： 用「色盲模擬器」睇下你個設計喺色盲人士眼中係點樣。
📝 課後功課
- 揀一個顏色代表你，講比朋友知點解
- 寫一句「座右銘」放喺跑馬燈，選擇最配嘅顏色
- 檢查你個設計嘅對比夠唔夠清楚（文字睇得到嗎？）