【功能更新】儲存按鈕為什麼要搬到右下角？秒站後台 UX 升級的五個小細節

「我剛剛好像沒有按到儲存，所以網站沒有更新？」——這句話，是我們偶爾會從 LINE 客服聽到的詢問。

情境大概是這樣的：你打開秒站後台的網站設定，認真調整了主色、副色、字型、首頁 SEO 描述，甚至順手把營業時間也更新了一輪。一切看起來都很滿意，於是你關掉分頁，回到剛剛的工作流程。過了幾分鐘，你打開網站想確認效果，畫面卻和原來一模一樣。

這不是網站系統出了問題，但那顆「更新」按鈕的確靜靜的待在頁面右上角，使得您改完最下面的欄位之後，忘了再捲回去按它。

我們一直致力讓使用體驗更好，這類型的事情我們也會盡力避免，秒站後台完成了一次比較大的 UX 升級，目的只有一個——讓「忘記按儲存」這件事，從今以後變得非常難。

這次升級一次看：五個小細節

• 浮動儲存按鈕（FAB）：右下角出現、改動才顯示、琥珀色 ＋ 呼吸動畫、徽章顯示變動欄位數
• Toast 通知系統：每個操作都給你明確回饋，四種狀態顏色、2.2 秒自動消失
• 離開頁面防呆：改完沒存就想關分頁，瀏覽器會先拉住你問一句
• 首頁 SEO 標題自訂：首頁的搜尋標題現在你自己決定，即時生效
• 統一的儲存邏輯：從即時寫入改為「預覽到滿意，再一鍵送出」

一、從「右上固定」到「右下浮動」——儲存按鈕搬家了

在這次升級之前，秒站後台的「更新」按鈕是固定在頁首右上角的。這是一個很常見的設計，幾乎每個 WordPress 原生的後台更新按鈕都放在這個位置。

但這個位置有一個很現實的問題：網站設定頁面往下捲的欄位非常多——主色、副色、字型、圓角、首頁內容、頁尾資訊、營業時間、社群連結——捲到下半部，頁首早就消失在視線之外了。客戶改完最下面的欄位，常常會忘記頁面上還有一顆必須按的「更新」按鈕。

新設計：它只在你需要的時候出現

這次我們把儲存按鈕改成右下角的浮動按鈕（Floating Action Button，簡稱 FAB）。關鍵設計是：

• 預設隱藏：你還沒改任何東西的時候，畫面保持乾淨，不打擾你閱讀設定
• 改了才出現：一旦你動到任何欄位，按鈕會從右下角滑出來（spring bounce 動畫）
• 呼吸動畫：按鈕會一直輕輕脈動，你的眼角餘光一定會注意到它
• 變動計數徽章：改了 3 個欄位，按鈕上會顯示「3」。你一眼知道「有多少事情待儲存」
• 點擊後的回饋：按下去之後按鈕會變成藍色、轉圈 spinner，儲存成功後跳出綠色 toast

換句話說：你捲到哪，按鈕就跟到哪。無論你正在看頁面的哪個位置，儲存這件事永遠只有一個手指頭的距離。

二、為什麼是琥珀色，不是紅色？

這次升級的過程中，有一個小插曲我們想分享給你。

最早的幾版，我們把這顆「未儲存」按鈕設計成紅色。直覺上紅色是「警告」「重要」「注意看這裡」，理論上應該最能吸引客戶的目光。

但實際測試之後，我們發現一個現象：客戶看到紅色按鈕，會「猶豫」。

原因是，在長期的介面語言裡，紅色幾乎專門被用來表達兩件事：

• 錯誤訊息（表單驗證失敗、網路斷線、系統報錯）
• 破壞性動作（刪除檔案、移除帳號、清空資料）

所以當客戶看到一顆紅色的大按鈕浮在螢幕右下角，腦中的第一個問題不是「我來按它」，而是：「這是什麼？點了會不會出事？」——這個遲疑只要超過一秒，體驗就不對了。

最後選了琥珀色 #F59E0B

我們繞了一圈，看了幾個業界的主流設計系統——VS Code、Figma、Notion 處理「有未儲存變更」的場景，不約而同使用的都是琥珀色這個色系。

琥珀色（amber /#F59E0B）在 UX 語言裡傳達的訊息是「請注意，這件事需要你處理一下」，而不是「警告，你做錯事了」。它有足夠的亮度吸引視線，但不帶威脅感。客戶看到琥珀色會理解為「提醒」，點擊意願明顯比紅色高。

這一顆按鈕的顏色，我們改了三個版本，才落在現在這個琥珀色。表面上是顏色的事，背後其實是整個產品在思考：「我們希望客戶在看到這顆按鈕時，心裡產生什麼樣的感覺？」——是緊張、還是輕鬆？是警戒、還是被溫柔地提醒？

我們選了後者。因為秒站的使用情境，不該讓人感到緊張。

三、每個操作都會告訴你「成功了」——Toast 通知系統

升級前，秒站後台的某些操作做完之後，畫面不會有明顯的回應——資料存進去了，但你看不到它在哪裡、什麼時候完成。客戶的心裡就會一直有一個問號：「我剛剛那個動作，到底有沒有成功？」

這次我們做了一套全站統一的 Toast 通知系統。每一個動作——儲存、切換、選擇、上傳、刪除——都會在畫面底部中央浮出一條訊息，數秒後自動消失。

四種狀態，對應四種顏色：

狀態	顏色	使用情境
Success	綠色	儲存成功、更新成功、上傳完成
Error	紅色	操作失敗、驗證錯誤、系統暫時無法回應
Loading	藍色（含 spinner）	AJAX 正在進行，請稍等
Info	深灰色	狀態提示，例如「已選擇，儲存後生效」

這個看似很小的設計，對使用體驗的影響其實不小。客戶不再需要用「懷疑的眼神」盯著螢幕猜系統在幹嘛，每一個動作都會得到一句明確的回應。

我們認為，一個成熟的網站後台，應該要有「禮貌地對你說話」的能力——你做了什麼，它都會回你一句。這是秒站在這次升級裡想傳達的其中一個設計態度。

四、想關分頁前，瀏覽器會先幫你拉住一把

有了 FAB 浮動儲存按鈕之後，還是可能發生一種狀況：客戶改完欄位，沒按儲存，直接點了瀏覽器的「關閉分頁」或「上一頁」。

這種時候，我們加了最後一道防線——瀏覽器原生的離開頁面提醒（技術上叫 beforeunload）。當系統偵測到你有未儲存的變動，在你關分頁的瞬間，瀏覽器會跳出一個對話框，問你：

「你做的變動可能不會被儲存，確定要離開嗎？」

這個提示不是秒站的視覺，是瀏覽器系統內建的對話框。現代瀏覽器為了防止惡意網站用自訂訊息誘導使用者，規定只能顯示瀏覽器官方的固定文字——我們能觸發這個行為，但不能改文字。

即使文字不能客製，這個機制本身的意義還是很重要：至少客戶有一次按「留在此頁」的機會，不會在完全沒有提示的情況下把半小時的工作直接丟掉。

三層防線加起來：右下角浮動按鈕（第一層提醒）、Toast 儲存成功訊息（第二層確認）、離開頁面對話框（第三層防呆）。我們希望你的網站設定，不會再因為「忘了按一下」而消失。

五、首頁的 SEO 標題，你終於可以自己決定

這是這次升級裡比較偏 SEO 的部分。如果你對搜尋排名有在意，這一段特別重要。

過去，秒站首頁的 SEO Title（就是客戶在 Google 搜尋結果上看到的那行標題）是寫死在系統裡的，預設的格式大概是「首頁 – 你的網站名」。這個設定有兩個不理想的地方：

• 對 SEO 不友善：搜尋結果第一行看到「首頁」兩個字，搜尋意圖並不明確，點擊率通常會受影響
• 對品牌呈現不友善：許多品牌希望首頁標題直接是「品牌名 — Slogan」或「品牌名｜核心服務」，而不是「首頁」兩個字

新的做法：自訂欄位 ＋ 動態接管

我們在網站設定的「首頁」分頁最上方，加了一個「首頁名稱」的欄位。這個欄位：

• 預設顯示：放著你的網站名稱當 placeholder，提示你預設會這樣呈現
• 留空時：首頁的 SEO 標題就是你的網站名稱
• 有輸入時：你輸入的字串會同時變成首頁的 SEO 標題 ＋ WordPress 後台選單上的首頁標籤
• 即時生效：儲存之後立即生效，搜尋引擎下次爬到網站就能看到新標題

六、這些升級背後的同一件事：替您著想

如果你仔細看，上面這五個升級其實都在處理同一個命題：一個好的網站後台，應該主動照顧使用者，而不是讓使用者被迫記住系統的規則。

按鈕不該讓你捲半天才找到，所以它搬到了一個永遠看得見的位置。顏色不該讓你緊張，所以我們選了琥珀而非紅。操作結果不該讓你用猜的，所以每個動作都會主動告訴你狀態。關分頁時不該讓你的工作憑空消失，所以多加一層防線。SEO 標題不該寫死在資料庫裡，所以我們讓它可以自訂、可以被品牌化。

這些看起來都是「小事」，但這些小事加起來，就是一個後台能不能讓客戶在半小時後、三個月後、一年後都覺得「用起來很順」的關鍵。

秒站 x 即站力是台灣團隊完整打包的 SaaS 架站服務，底層用 WordPress，但你面對的後台是我們一手自製的體驗。這些自製的部分，讓我們在發現問題之後，可以直接動手調整。不是靠裝外掛、不是靠堆設定、不是靠客戶自己學，而是從系統層級把體驗做細。

如果你還沒看過秒站的後台，歡迎到 免費試用 實際玩玩看；如果你對秒站有興趣，可以先看 方案頁 了解差異。

延伸閱讀

• 網站色系、字型、圓角怎麼選才好看？秒站網頁外觀設定升級解析——同一批更新的另一半，專注在「看得見的選擇」這件事
• 秒站 SEO 優勢完整解析——從底層架構到 AI 搜尋時代，秒站在 SEO 上為你準備了什麼
• 秒站三個方案的差異——標準、專業、輕電商，哪一個最適合你現在的階段

重點整理

這次的後台 UX 升級，我需要做什麼才能使用？

不需要做任何事。這次升級是秒站後端系統的版本更新，所有秒站客戶在升級完成後，下一次進入網站設定頁面，就會自動看到新的浮動儲存按鈕、Toast 通知、離開防呆等功能。你不需要手動啟用、不需要裝外掛、也不需要重新設定任何東西——我們推上去了，你用就好。這也是 SaaS 架站服務相對於自架 WordPress 的優勢之一：系統升級由團隊集中處理，客戶不用操心。

浮動儲存按鈕（FAB）在手機上也會顯示嗎？

會。我們已經針對行動裝置做了樣式調整，按鈕的 padding 在手機螢幕上會自動縮小，避免擋到你正在編輯的欄位。整體行為跟桌機版一致——改動才出現、徽章顯示變動欄位數、點擊後送出儲存。我們觀察到許多秒站客戶會在手機上快速更新一些設定（例如營業時間、公告文字），這個情境我們有特別測試過，請放心使用。

為什麼不直接做「自動儲存」，而是要用浮動按鈕提醒？

這是我們在設計初期討論過的方向。自動儲存的優點是完全不需要客戶操心，但缺點也很明顯：客戶可能「邊想邊改」，中途改了幾個欄位又後悔、想回到原狀，這時候如果系統已經自動寫入，回復就變得很麻煩。我們最後選擇「浮動按鈕 ＋ 顯性儲存」的設計，保留客戶的「確認權」——你決定什麼時候才真正把變動送進系統。這個取捨是為了給客戶更多控制感，不是技術上做不到自動儲存。

Toast 通知會不會干擾我的操作？

不會。Toast 出現的位置在畫面底部中央，距離你通常操作的欄位有一段距離。顯示時間是 2.2 秒，這個長度足夠你讀完一句話，又不會停留太久變成視覺干擾。如果你同一時間做了多個動作，最新的 toast 會取代前一個，不會在畫面上堆疊。我們參考了 Material Design 和 Ant Design 兩套主流設計系統的 toast 規範，2.2 秒是業界驗證過的最佳停留時間。

離開頁面的對話框文字為什麼我改不了？

這個對話框的文字是瀏覽器（Chrome、Safari、Firefox、Edge）內建的，所有網站都無法自訂。這個限制是現代瀏覽器為了防止惡意網站偽造系統訊息、誘導使用者誤點所做的安全設計。秒站能做的是「觸發這個對話框」——也就是告訴瀏覽器「這個頁面有未儲存變動」——但文字本身由瀏覽器決定。你看到的「是否離開此頁？」這種訊息，在全世界所有網站上都長一樣，不是秒站的限制。

首頁 SEO 標題自訂了，會不會影響現有的排名？

如果你原本沒有特別調整、用系統的預設值，改成自訂的品牌化標題一般會是正面的影響——搜尋引擎看到更清楚的品牌 ＋ 核心服務描述，點擊率通常會提升。唯一要注意的是，如果你的網站已經運作了一段時間、首頁已經有穩定的搜尋排名，建議一次只改一次、改完觀察 2–4 週再決定要不要調整。SEO 的反饋週期比較長，頻繁變動反而會讓搜尋引擎需要重新評估。關於 SEO 的完整思路，秒站 SEO 顧問 Frank Chiu 從系統規劃的起點就參與底層設計，你可以參考 秒站 SEO 優勢完整解析。

我還發現了後台有其他可以改進的地方，要怎麼告訴你們？

歡迎直接加我們的 LINE 官方帳號跟我們說——無論是 bug 回報、體驗建議、希望加上什麼功能、哪裡覺得卡卡的，都可以直接傳訊息過來。我們的客服會在 24 小時內回覆。這一年來，秒站的許多後台細節（包括這次升級的好幾個決定）都是從客戶的 LINE 訊息開始的。你的意見會真的被聽見，不會掉進無人回覆的信箱。點這裡加入秒站 LINE 官方帳號。

這些設計細節，之後還會繼續調整嗎？

會。這次升級只是一個開始，後台還有很多地方我們持續在觀察、持續在改。如果你發現這次的浮動按鈕在你的使用情境下有什麼不順、或 Toast 通知在某些頁面沒出現、或者你覺得某個顏色、某個動畫、某個文字還可以更好，都歡迎告訴我們。秒站的後台從來不是「做完就結束」的專案，它會隨著你和其他客戶的使用，不斷長出新的細節。