官網「Toast 通知訊息／Snackbar」設計完整攻略：中小企業如何用一個 3 秒小提示同時拉高表單成功率與客戶信任感

有沒有遇過這個畫面：客戶在你的官網把聯絡表單填好了，按下「送出」之後——畫面什麼都沒變，按鈕還在那裡。他不確定送出去了沒，於是再按一次，再按一次。隔天你信箱躺著同一個人的三封詢問單，客戶心裡其實很焦慮：「到底有沒有收到？」

這個情境的解法，不是改表單、也不是換伺服器，而是一個只會出現 3 秒鐘的小提示：Toast 通知訊息（有些設計系統叫 Snackbar）。它是中小企業官網最被低估的一個 UI 元件——做對了，表單成功率與信任感同時往上跳；做錯了，客戶會以為你的網站壞掉。

這篇要把 Toast 從「為什麼需要」、「該長什麼樣子」、「該出現多久」、到「常見地雷」一次講清楚。看完之後，老闆你可以直接拿這份規格去跟工程師對話。

Photo by Jamie Street on Unsplash

一、為什麼官網需要 Toast？因為「沉默」就是失敗

網站的使用者體驗有一條鐵律：每一個操作，都要有回饋。客戶按下按鈕、送出表單、加入購物車、訂閱電子報，系統一定要在 1 秒內告訴他「我收到了」，否則使用者會自動腦補成「壞了」。

為什麼不用傳統的整頁刷新或彈跳視窗（Modal）就好？因為：

• 整頁刷新：在現在的單頁式網站（SPA）時代很怪，會讓客戶覺得「為什麼又重新跑一次」，而且打斷他原本看到的內容。
• 彈跳視窗：太重了，客戶要主動按一下「確定」才會消失，對於「送出成功」這種不需要互動的訊息來說，是一種打擾。
• Toast：輕量、不阻擋操作、會自己消失。剛好就是「我跟你說一聲」的最佳形式。

講白話一點，Toast 之於網頁，就像 LINE 訊息之於對話——你不需要每收到一則就打開對話框看，光是看到右上角跳一下，你就知道有事情發生了。

二、Toast 的三種情境，視覺要分開

不是所有 Toast 都長一樣。一個健康的官網設計系統會把 Toast 分成至少三種狀態，每一種用不同的顏色與圖示，客戶在 0.5 秒內就能判斷「這是好消息還是壞消息」。

1. 成功（Success）：綠色底配勾勾圖示。用在「表單送出成功」、「複製到剪貼簿」、「已加入收藏」這類正面回饋。文案要明確說出「發生了什麼事」，例如「詢問單已送出，我們會在 1 個工作天內回覆」，而不是只寫「成功」兩個字。

2. 警告（Warning）：橘黃色配驚嘆號。用在「網路不穩，請稍候」、「您填的資料看起來不對，請確認」這類「不是錯，但要提醒」的場景。

3. 錯誤（Error）：紅色配叉叉。用在「送出失敗」、「驗證碼錯誤」、「檔案太大」這類客戶必須處理的問題。重點：錯誤 Toast 要告訴客戶「下一步怎麼辦」，光寫「失敗」沒人知道要做什麼。

有些網站還會加上第四種「資訊（Info）」，藍色配 i 圖示，用在「新版本已更新」、「我們正在維護」這類純通知。這個視情況加，不一定要。

三、出現的位置與時間，比你想的還重要

Toast 該出現在螢幕的哪個位置？業界主流有兩派：右上角（桌機常見，像 macOS 的通知）與下方置中（手機常見，像 Android 的 Snackbar）。我們建議中小企業官網直接走：

• 桌機版：右上角，距離邊緣 24px，由上往下堆疊。理由：客戶的視線通常在頁面中間，右上角既不擋內容、又在餘光範圍內，不會被忽略。
• 手機版：下方置中，距離底部 80px（避開 iOS 底部手勢區）。理由：拇指操作區在下半部，視線剛好掃過。

Photo by Faiz Rhm on Unsplash

出現時間（也叫「持續時間」）的拿捏，原則是讓人讀得完、又不要久到變垃圾訊息：

• 成功訊息：3 秒。客戶看一眼確認「喔有送出」就行，不需要久留。
• 警告與錯誤：5–8 秒，或乾脆讓客戶按 X 才消失。因為客戶可能要看清楚錯誤原因。
• 很長的訊息：超過 10 個中文字以上的內容，請增加 1 秒讓人讀完，或考慮用其他元件（例如 Banner、Modal）。

另一個常見錯誤：Toast 一閃就消失，客戶根本來不及讀。請務必加入「淡入淡出」動畫（fade-in / fade-out），各 0.2–0.3 秒，視覺上自然很多。

四、文案的三個鐵則，比樣式更影響轉換率

Toast 看起來只是一個小框，但裡面的文字決定了客戶要不要相信你。寫文案的時候請守住三個原則：

1. 主語要明確，不要寫「成功」就完事。

對的寫法：「詢問單已送出，我們會在 1 個工作日內以 Email 回覆您」。
錯的寫法：「成功」、「完成」、「OK」。

差別在哪？前者告訴客戶「接下來會發生什麼」，他就不會擔心，也不會重複送單。後者讓客戶心裡浮現問號：「然後咧？我要等多久？」

2. 錯誤訊息要給出口，不能只說壞消息。

對的寫法：「Email 格式不正確，請確認是否包含 @ 符號」。
錯的寫法：「Email 錯誤」、「驗證失敗」。

客戶填錯欄位的時候，他自己已經很煩了，這時候你還丟一句「錯誤」過去，他只會更氣。要幫他指出「錯在哪、怎麼改」，這是基本的禮貌。

3. 不要在 Toast 裡塞技術術語。

「API 500 Internal Server Error」、「Token expired」這種文字客戶看了只會覺得這網站怪怪的。請翻成人話：「網路有點不穩，請稍後再試一次」、「您閒置太久，請重新登入」。

五、進階：可互動的 Toast（Action Toast）

Toast 不一定要被動消失，加上「動作按鈕」可以變成超實用的設計：

• 「已刪除文章」 + 「復原」按鈕：避免客戶手滑誤刪，提供 5 秒反悔時間。這比每次跳「確定要刪除嗎？」彈窗更友善。
• 「商品已加入購物車」 + 「前往結帳」按鈕：直接讓客戶從成功訊息一鍵跳到下一步，能明顯拉高轉換。
• 「儲存失敗」 + 「重試」按鈕：客戶不用自己重新操作，省一次點擊就是省一次流失機會。

注意：可互動的 Toast 持續時間要拉長到 8–10 秒，或者乾脆不自動消失，等客戶決定要不要按。

Photo by Jakub Żerdzicki on Unsplash

六、常見的 5 個 Toast 地雷，請避開

地雷 1：Toast 蓋住重要按鈕或表單欄位。
特別是手機版下方的 Toast，常常擋住「送出」按鈕或鍵盤上方的輸入框。設計時記得把 Toast 放在不會干擾客戶下一步動作的位置。

地雷 2：同時跳出 5 個 Toast 堆疊到天花板。
建議同畫面上限 3 個，超過就把舊的擠掉。否則客戶會覺得「這網站怪怪的，一直跳東西」。

地雷 3：消失太快、又沒辦法回看。
重要訊息（例如錯誤碼、訂單編號）一定要讓客戶有辦法重新查看，不要消失就消失。可以考慮在頁面某處保留「通知中心」按鈕。

地雷 4：所有狀態都長一樣。
成功跟失敗用同一個灰色框，客戶根本分不出來。請務必用顏色 + 圖示區分，這是視覺辨識的最基本功。

地雷 5：行動裝置上沒做縮放。
桌機版的 Toast 寬度直接搬到手機上，會變成超出螢幕一截，或者字小到看不清楚。請務必在 RWD 階段就把 Toast 的響應式設計做好。

七、給老闆的行動清單

看完上面這些，如果你想立刻檢查自家官網的 Toast 有沒有做對，請拿這份清單去問你的工程師或網站維護廠商：

1. 官網上所有的表單送出、加入購物車、訂閱電子報，是不是都有 Toast 回饋？
2. 成功、警告、錯誤三種 Toast 有沒有用不同顏色與圖示？
3. 桌機版 Toast 在右上角、手機版在下方置中？
4. 成功訊息有沒有告訴客戶「接下來會發生什麼」？
5. 錯誤訊息有沒有告訴客戶「怎麼解決」？
6. 有沒有淡入淡出動畫，而不是瞬間出現瞬間消失？
7. 有沒有避開「蓋住重要按鈕」的地雷？

Toast 是那種「做好了客戶不會稱讚你，但做不好客戶會默默離開」的設計細節。對中小企業官網來說，這種看似小的細節，往往就是「客戶有沒有完成詢問」與「客戶送一半放棄」的分水嶺。

如果你的官網現在連表單送出後都還在沉默，那基本上每天都在流失準客戶。先把這 7 個檢查項目跑一遍，再來談廣告投放、SEO 排名也不遲。