跳至主要內容
越
學越南語
简

🎨 設計系統標準

越南語聲調色彩系統與設計規範參考指南

🎨

越南語聲調系統

六種聲調的視覺化參考

¯
平聲

平穩中調

ma
鬼
´
升聲

快速上揚

má
媽媽
`
降聲

平緩下降

mà
但是
ˇ
問聲

先降後升

mả
墳墓
˜
拐聲

升降斷裂

mã
馬
.
重聲

急促下沉

mạ
稻秧

📝聲調符號說明

¯
平聲 (ngang) — 無符號，中平調
´
升聲 (sắc) — 銳音符，上升調
`
降聲 (huyền) — 重音符，下降調
ˇ
問聲 (hỏi) — 鉤符，降升調
˜
拐聲 (ngã) — 波浪符，升降調（有斷裂）
.
重聲 (nặng) — 下點符，急降調
💡南部口音中，「問聲 hỏi」與「拐聲 ngã」發音相近，常被合併為同一聲調。

💻 實作範例

聲調卡片組件

<div className="bg-gradient-to-br ${tone.colors.primary} dark:${tone.colors.primaryDark}
     p-6 rounded-xl border ${tone.colors.border} dark:${tone.colors.borderDark}
     hover:shadow-lg transition-shadow">
  <div className="text-center mb-4">
    <div className="text-4xl font-mono mb-2">{tone.symbol}</div>
    <div className="inline-block px-3 py-1 rounded-full text-sm font-medium ${tone.colors.badge}">
      {tone.displayName}
    </div>
  </div>
  <div className="text-center">
    <div className="text-lg font-semibold ${tone.colors.text} dark:${tone.colors.textDark} mb-1">
      {example}
    </div>
    <div className="text-sm ${tone.colors.accent} dark:${tone.colors.accentDark}">
      {description}
    </div>
  </div>
</div>

聲調按鈕

<button className="bg-gradient-to-r ${tone.colors.primary} dark:${tone.colors.primaryDark}
                hover:shadow-md transition-all duration-200
                px-4 py-2 rounded-lg border ${tone.colors.border} dark:${tone.colors.borderDark}
                ${tone.colors.text} dark:${tone.colors.textDark}
                hover:scale-105 transform">
  <span className="font-mono text-lg mr-2">{tone.symbol}</span>
  {tone.displayName}
</button>

資訊卡片

<div className="bg-gradient-to-r ${tone.colors.primary} dark:${tone.colors.primaryDark}
     p-4 rounded-lg border ${tone.colors.border} dark:${tone.colors.borderDark}">
  <h4 className="font-semibold ${tone.colors.text} dark:${tone.colors.textDark} mb-2">
    {title}
  </h4>
  <p className="text-sm ${tone.colors.accent} dark:${tone.colors.accentDark}">
    {description}
  </p>
</div>

🎨 色彩調色盤

¯平聲 (ngang)

淺色 (Light)
from-slate-50 to-gray-50
深色 (Dark)
from-slate-900/30 to-gray-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

´升聲 (sac)

淺色 (Light)
from-cyan-50 to-teal-50
深色 (Dark)
from-cyan-900/30 to-teal-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

`降聲 (huyen)

淺色 (Light)
from-violet-50 to-purple-50
深色 (Dark)
from-violet-900/30 to-purple-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

ˇ問聲 (hoi)

淺色 (Light)
from-amber-50 to-orange-50
深色 (Dark)
from-amber-900/30 to-orange-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

˜拐聲 (nga)

淺色 (Light)
from-yellow-50 to-amber-50
深色 (Dark)
from-yellow-900/30 to-amber-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

.重聲 (nang)

淺色 (Light)
from-red-50 to-rose-50
深色 (Dark)
from-red-900/30 to-rose-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

✅ 使用最佳實務

色彩使用原則

  • ✓每個聲調使用專屬色彩，保持視覺一致性
  • ✓淺色主題與深色主題都要支援
  • ✓確保色彩對比度足夠，提升可讀性
  • ✓漸層效果用於主要區域，純色用於次要元素

開發注意事項

  • 📁從 lib/design-tokens.ts 匯入色彩
  • 🧩使用 ToneColorReference 組件
  • 🔄保持與設計系統的一致性
  • 📱測試在不同裝置上的顯示效果
設計系統｜學越南語