嗨，
我是 Taony
加拿大這邊剛過完感恩節長週末，你那邊天氣也轉涼了嗎？
最近幾期私房菜都在聊 AI
今天想換換口味，回到好一陣子沒分享的 UI/UX 避雷指南
設計細節多一點，使用者多愛你一點
這次的主角，是一顆你每天都在按，卻很少人注意過的按鈕
「Back Btn 返回鍵」
先請你想像一個場景
你想在購物網站找一雙跑鞋
篩選了品牌、尺寸、價格三個條件，好不容易縮到幾十個結果
一路往下滑到第 30 個，看到一雙不錯的
點進去看產品的細節
看完覺得不太對，想回去跟剛才第 28 個比較一下
於是按下返回
然後呢？
篩選條件全部清空，畫面跳回到最上面
（這時候大部分人的反應，應該是直接關掉網頁了吧）
返回鍵，是使用者的後悔藥
很多設計師會覺得，返回鍵是瀏覽器的事，或是開發工程師的事
但其實，按下去之後「要回到哪裡」
是 UI/UX 設計師要做的決定
去年我寫過一期「請給使用者自由」
核心就是一句話：好的設計，要讓使用者有退路
返回鍵，就是最直接的那條退路
也是使用者後悔的時候，第一個伸手去按的東西
沒有退路，使用者就會失去掌控感
每點一下都要先想「點錯了怎麼辦？」，越用越緊張
如果你在 Vibe coding 自己的產品，這一期一樣適用
像是單頁式的網站，返回鍵就特別容易出問題
我把整份避雷指南壓縮成一個問題：
使用者按下返回的那一刻，他的心裡預期回到哪裡？
下面我會分成四組，每一條都附上實際的例子
你可以收藏起來喔
一、哪些動作，應該被記住？
簡單說就是：
使用者覺得自己「去了一個新地方」，就該留下一筆瀏覽紀錄
P.S. 返回鍵只認得 URL
網址沒變，對瀏覽器來說你就沒去過新地方
加了篩選條件，URL 有沒有跟著變？
例子：選了「紅色」「M 號」，重新整理或分享給朋友，條件都還在改變了排序方式，有沒有被記住？
例子：從「熱門」切到「價格低到高」，按返回會回到「熱門」
（不然又要重新打開排序選單，再找一次）多步驟流程，每一步是不是都有自己的位置？
例子：結帳的「地址、付款、確認」，按返回是回上一步，不是整個退出切換商品規格，有沒有被記住？
例子：選了藍色 L 號再分享出去，朋友打開看到的也是藍色 L 號
（而不是回你一句：你傳的是 M 號？）新手引導的每一步，按返回會回到前一步嗎？
例子：引導看到第三步想回去重看第二步，按返回卻直接跳出整個引導開啟 Modal 彈窗時，要不要留下紀錄？
例子：很多社群網站點開貼文是彈窗，但網址會跟著變，按返回就關掉無限捲動或「載入更多」，有沒有記住載入到哪？
例子：按了兩次載入更多，點進去再回來，loading 過的內容都還在
二、哪些動作，不該被記住？
反過來，使用者只是在原地動了一下，就不該多一筆紀錄
不然使用者要連按好幾次返回，才真的離得開這一頁（超煩的）
滑動 Banner 輪播或商品圖，有沒有避免產生紀錄？
例子：看了五張商品圖，按返回應該回上一頁，不是倒回第四張展開 Accordion 手風琴，有沒有避免產生紀錄？
例子：FAQ 展開三題再按返回，使用者要的是離開，不是把三題收起來按「顯示更多」展開內容，有沒有避免產生紀錄？
例子：商品描述按「展開全文」，不需要多佔一步Cookie 或隱私提示，有沒有避免佔掉一筆紀錄？
例子：從 Google 點進網站，跳出 Cookie 提示，覺得不是要找的網站，按返回卻只關掉提示
老實說，這兩組不是死規定，是判斷題
同一個 Modal，在 A 產品該記，在 B 產品可能不用
這取決於你的產品如何被使用
三、回來之後，要跟離開時一模一樣
這一組，是最容易被漏掉的
也就是開頭買跑鞋那次，體驗很差的原因
從列表點進去再返回，有沒有回到原本的捲動位置？
例子：滑到第 30 個進去，回來時還停在第 30 個
（這條沒做好，前面幾條做得再好也會嚴重影響使用體驗）多個篩選條件，返回時是不是只拿掉最後一個？
例子：加了品牌、尺寸、特價三個條件，按返回只拿掉「特價」多步驟流程回到上一步，填過的資料還在嗎？
例子：結帳第三步回到第二步，地址不用重打一次
（特別是在手機上，重打一次地址，真的會讓人想放棄！）打開商品大圖 Lightbox 再按返回，是不是關掉大圖留在原頁？
例子：看完大圖留在商品頁，而不是被丟回列表點了頁面裡的目錄跳到下方，按返回會回到目錄嗎？
例子：長文章點「第三段」跳下去，看完按返回，回到原本的目錄刪除東西之後按返回，救得回來嗎？
例子：刪了一則筆記，看到類似「已刪除，復原」的提示
（瀏覽器的返回不等於復原，這個要另外設計）
四、頁面上的「返回」連結
除了瀏覽器本身的返回鍵，很多頁面也會放一個自己的返回連結
像是商品頁左上角那個小小的「← 返回」
這個連結，是真的回上一頁，還是連到固定頁面？
例子：「← 返回搜尋結果」應該回到帶著篩選條件的那一頁，而不是空白的搜尋首頁URL 本身，使用者看得懂嗎？
例子：/shoes/men/running比一串亂碼數字好理解，使用者看網址就知道自己在哪
（分享到群組的時候，大家也看得出這是什麼連結）
這些都是很小的細節，但也是這些細節決定了
一個產品做完了，還是做好了
把每一個決定寫進設計稿裡
清單看完，你可能會想：
這些不都是開發工程師在處理的嗎？
說對了一半，確實最後是工程師把它做出來
但「哪些要記、哪些不記、回來要恢復什麼？」
設計稿上沒標註，工程師就只能自己猜
我的建議是：在交付設計稿的時候，在流程旁邊多標一行
這個互動，按返回會回到哪裡？
（不僅僅是返回啦，所有的互動細節都應該標註）
不用很複雜，Figma 裡一個 comment 就可以
不是所有專案都要寫幾十頁的設計文件
例如在篩選面板旁邊寫：「篩選條件寫進網址，返回時只移除最後一個」
這一行字，可以省掉之後來回確認好幾輪的時間
（工程師們也會很感謝你）
回到開頭那雙跑鞋
用大家最熟悉的 Nike 網站試一次：
添加了篩選條件，往下滑，點進一雙鞋，再按瀏覽器的返回
篩選條件都還在，畫面也停在剛才滑到的位置
（它的頁面上沒有另外放返回按鈕，靠的就是瀏覽器本身的返回鍵）
整個過程非常順利，順到你不會覺得它做了什麼
這就是返回鍵做好的樣子，好到使用者根本不會發現
做得不好，他也不會判斷說「返回鍵壞了」
他只會覺得這個網站很難用，然後選擇離開
UI/UX 設計很多時候就是這樣
那些沒人說出口的不舒服，才是最需要設計師關注的地方
下次當你遇到返回鍵，不妨多留意一秒：
你被帶去了哪裡？ 前後的邏輯是什麼？
希望分享的這些設計細節，可以幫助你做出更棒的產品
也讓開發工程師們喜歡和你合作
那我們就下次見囉～
Have a good week
Best,
Taony
