從「能用」走向「療癒」

昨天我們透過 Vibe Coding，成功產生了《喵語日誌》的對話視窗元件。

目前的畫面已經可以輸入文字、顯示對話，也有基本的情緒選擇按鈕。不過實際操作後，還是覺得畫面稍微有點生硬，少了一點正在和貓咪互動的感覺。

對一款主打情緒陪伴和生活紀錄的應用程式來說，功能可以正常運作只是第一步。色彩、間距、動畫和按鈕回饋，這些小細節其實都會影響使用者是否願意長時間使用。

所以今天的目標，就是替《喵語日誌》進行一次 UI/UX 升級：

• 建立溫暖、舒壓的色彩計畫
• 加入「喵喵思考中⋯⋯」的打字動畫
• 讓對話氣泡自然地出現
• 替情緒按鈕加入 Hover 和 Click 回饋

希望每一次喵喵回應時，都不只是顯示一段文字，而是讓使用者感覺真的有一隻貓咪正在陪伴自己。

色彩計畫：打造沒有壓力的視覺氛圍

這次的配色方向，是希望營造一種在房間裡摸著貓咪寫日記的感覺。

因此我避開高飽和、過度刺眼的顏色，改用比較柔和的馬卡龍暖色系。這樣長時間閱讀和輸入文字時，視覺上比較不容易疲勞。

1. 背景與整體基底

背景使用：

bg-stone-50

這是一種偏暖的米灰色，比純白色多了一點溫度，也能讓對話卡片和按鈕更容易被凸顯出來。

2. 喵喵的對話氣泡

喵喵的訊息使用：

bg-rose-50 border-rose-100

淡淡的玫瑰粉搭配淺色邊框，看起來比較柔和，也能和貓咪主題呼應。

3. 使用者的對話氣泡

使用者訊息則使用：

bg-stone-200

溫和的暖灰色可以和喵喵的粉色氣泡形成區別，同時不會像深灰色那麼有壓迫感。

4. 五種情緒按鈕

情緒選擇器也使用不同顏色區分：

這些配色不僅是裝飾，也協助使用者更直覺地辨識不同的情緒強度。

微互動一：喵喵思考中的三點動畫

當使用者送出訊息後，Gemini API 需要一點時間分析內容。如果畫面完全沒有變化，使用者很容易懷疑：

• 按鈕是不是沒有按成功？

• 網頁是不是卡住了？

• API 是不是沒有回應？

因此，我新增了一個 TypingIndicator 元件。當 isLoading 是 true 時，畫面左側會出現貓咪頭像與三個跳動的粉紅小圓點。

function TypingIndicator() {
  return (
    <div className="flex items-end gap-2">
      <CatAvatar size="sm" />

      <div className="flex items-center gap-1.5 rounded-2xl rounded-bl-md border border-rose-100 bg-rose-50 px-4 py-3 shadow-sm">
        <span className="h-2 w-2 animate-bounce rounded-full bg-rose-400 [animation-delay:-0.3s]" />
        <span className="h-2 w-2 animate-bounce rounded-full bg-rose-400 [animation-delay:-0.15s]" />
        <span className="h-2 w-2 animate-bounce rounded-full bg-rose-400" />
      </div>
    </div>
  );
}

三個圓點都使用 animate-bounce，但透過不同的 animation-delay 錯開動畫時間，就能做出連續跳動的效果。Tailwind CSS 本身提供 animate-bounce，也支援以 utility class 控制動畫與延遲效果。

在訊息區中，只要根據載入狀態條件渲染即可：

{isLoading && <TypingIndicator />}

這個動畫看起來很簡單，卻能讓等待 API 回應的過程自然很多。使用者知道喵喵正在思考，而不是以為系統失去反應。

▲　喵喵正在分析訊息時，畫面顯示三個粉紅色跳動圓點。

微互動二：氣泡進場與按鈕回饋

除了打字動畫之外，我也替訊息和情緒按鈕增加了一些互動效果。

1. 對話氣泡進場效果

如果訊息突然出現在畫面上，視覺上會有一點突兀。因此我希望訊息可以淡淡地出現，並從下方微微滑入。

如果專案有安裝支援 animate-in 的動畫套件，可以使用：

<div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
  喵嗚～今天過得怎麼樣？
</div>

不過要注意，animate-in、fade-in 和 slide-in-from-bottom-2 並不是所有 Tailwind 基礎安裝都會自動提供的 class。如果畫面沒有動畫效果，需要確認專案是否安裝對應的動畫插件，或改用自訂 CSS。

例如，也可以先使用 Tailwind 內建的過渡效果：

<div className="translate-y-0 opacity-100 transition-all duration-300">
  喵嗚～今天過得怎麼樣？
</div>

Tailwind 的 transition、translate 和 scale utilities，可以用來控制元素的位移、縮放和過渡效果。

2. 情緒按鈕的 Hover 與 Click 效果

情緒按鈕加入以下 class：

<button
  className="
    rounded-full
    transition-all
    duration-200
    hover:-translate-y-0.5
    active:scale-95
  "
>
  😺 Good
</button>

這幾個 class 的效果是：

• transition-all：讓樣式變化更平滑

• duration-200：設定 200 毫秒的動畫時間

• hover:-translate-y-0.5：滑鼠移上去時，按鈕微微浮起

• active:scale-95：點擊瞬間稍微縮小，模擬實體按鈕被按下的感覺

這些效果都很輕微，不會搶走使用者注意力，但能讓操作感覺更自然。Tailwind 支援使用 hover: 和 active: 狀態變化來處理這類互動回饋。

▲　加入溫暖色彩、情緒按鈕選取狀態與 Hover 效果後的畫面。

心得與結語

這次實作讓我深刻體會到，UI 動畫不需要多麼華麗，就能讓畫面充滿生命力。無論是三個跳動的小圓點、氣泡微滑入的效果，還是按鈕被點擊時的輕微縮放，這些微互動完全不需要喧賓奪主，就能給予使用者最自然的陪伴感與系統回應。

色彩也是如此，全站統一換上低飽和度的暖色系後，視覺變得非常柔和舒壓，讓介面從原本單純的可以使用，進化成令人感到溫暖舒服的陪伴空間。

明天我們將繼續解鎖《喵語日誌》的視覺陪伴功能，挑戰 Day 10【多媒體元件】前端照片上傳與預覽模組實作！我們將實作照片的點擊與拖曳上傳、前端預覽、格式檢查以及壓縮處理，為後續的 Gemini 多模態分析做好準備。到時候，使用者不只能分享文字，也能把今天的生活點滴或寵物照直接拿給喵喵看囉！喵～