Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件

在今天正式開始介紹按鈕與連結的元件之前，先讓我介紹一下這個網站。

這個系列會用 30 天把 UI 元件慢慢拆開講，但文章有一個很現實的限制：你讀得懂文字，還是得自己想像畫面和互動。我不想讓大家讀完只記得幾個名詞，真正要改 AI 畫面時又找不到可以對照的東西。

所以我同步做了 UI 元件百科。它不會把 30 篇文章整批搬到網站上，而是把元件做成一個隨時可以回來查的工具箱。

首頁先用卡片讓你快速看到元件的樣子，也可以用名稱、俗稱或情境搜尋。點進單一元件後，閱讀順序固定是：先用 60 秒判斷它適不適合，再看畫面規則、必要狀態、可操作 Demo、可複製的 AI Prompt，最後用清單驗收。當兩個元件容易混在一起時，就到元件比較頁集中看差異。

今天會用到這幾頁：

• Button｜按鈕：查看按鈕的狀態、一般與危險操作 Demo，以及可複製 Prompt。
• Link｜連結：確認連結文字、目的地與鍵盤操作該怎麼檢查。
• Button、Link 與操作元件比較：當你只知道「這裡要放個可以點的東西」時，從這裡開始選。

之後文章會說明判斷方法，網站則讓你直接看、直接操作。你寫 Prompt 時也多了一個具體的參考點，不必只對 AI 說「做得像一般 SaaS 一點」。

先把一個最常見的錯誤放到桌上：邀請成員的 Dialog 裡，「送出邀請」和「查看權限說明」都能被點，但前者會完成現在的工作，後者會帶人離開這裡。外觀可以協調，責任不能混在一起。

問題現場：比較頁沒有先問顏色，而是先問「點下去會發生什麼」。這才是 Button、Link 與其他操作元件的分界。

原始 Prompt 與第一版：三個操作看起來都一樣

這次我不想只拿完成版解釋 Button 和 Link，因為那樣很容易把答案說得太理所當然。我把 Brief 裡最早的需求原封不動交給 AI：

把成員管理頁的操作做得好用一點。

第一眼並不糟。角色欄位、權限說明、取消和儲存都看得見。真正的問題是三個可點項目用了幾乎相同的按鈕外觀，畫面也沒有回答以下問題：

• 「查看權限說明」會前往別處，為什麼被做成執行動作的 Button？
• 儲存期間能不能重複按？
• 儲存失敗後，輸入內容會不會消失？
• 關閉或取消後，焦點要回到哪裡？

我的選型判斷

我的判斷不是「把權限說明改成底線、取消改成灰色」而已。我要先按照點擊結果分工：導頁使用 Link；改變目前資料使用 Button；危險操作另外交代確認與取消；狀態改變則要讓按鈕文字和訊息一起更新。

一個可點區域，可能帶來三種結果

把邀請成員的 Dialog 當成一張操作收據來看。使用者不是在辨認藍色、底線或圓角，而是在預測自己點下去後會發生什麼。

這張收據也是最實用的驗收法：若畫面上的文字說不出點下去的結果，先別要求 AI 調色，先把操作責任補上。

我先讓「儲存變更」失敗一次

我在 Button Demo 把狀態切成「儲存失敗」。如果只看顏色，最省事的做法是把按鈕染紅，文字仍寫「儲存變更」。

網站上的版本沒有停在這裡。主要操作改成「重新嘗試」，旁邊顯示「儲存失敗：請檢查連線後重新嘗試。」原本輸入的內容仍保留。

這次失敗讓我更容易判斷 Button 的責任：它不只要能被點，還要把操作目前走到哪裡說清楚。Link 不會接手這段狀態，因為它負責的是前往另一份內容。

AI 常會在表單底下放一排同樣醒目的藍色方塊。第一眼不一定難看，但使用者會猶豫：這一顆是儲存？離開？還是打開更多選項？

判斷 Button 和 Link，不需要先研究顏色、圓角或陰影。先把這句話說清楚：點下去後，使用者是要在目前情境完成一件事，還是要前往另一個地方？

這張表不是考試範圍。它比較像你拿來問 AI 的問題清單。原本你可能只會說「這顆怪怪的」，現在可以直接指出：「它會前往權限說明頁，為什麼做成 Button？」這樣才有修正空間。

Button：在目前情境完成操作

先看畫面。Button 的結果留在目前工作裡：儲存資料、送出邀請、開啟確認視窗，或重新嘗試失敗的操作。

圖 1：Button 用來完成眼前的工作。這個 Demo 把儲存、取消與處理中等狀態放在同一個任務裡，方便檢查主要操作是否清楚。

按鈕的任務是觸發一個動作：送出表單、開啟 Dialog、取消編輯、刪除資料。WAI 的 Button Pattern 也用這類情境說明 Button 的用途；焦點在 Button 上時，Enter 和 Space 都應能啟動它。Button Pattern

這不表示一個畫面要塞滿按鈕。以「邀請成員」Dialog 為例，使用者最常做的是送出邀請，那就讓「送出邀請」成為唯一最明顯的操作。「取消」只需要讓人容易找到，不必和主要操作搶注意力。刪除這類不可逆動作則要另外處理，不能只把顏色換成紅色。

圖 2：主要、次要與危險操作需要不同的視覺強度；按鈕也要處理進行中、失敗與不可用等狀態。

在 Button 元件頁裡，我把「按鈕狀態」和「按鈕情境」拆成兩個 Demo。這個拆法很實用：狀態要看同一個動作在儲存中、失敗、不可用時怎麼回應；情境則看一般操作與危險操作該有什麼差別。不要把所有排列組合都塞在同一塊畫面，使用者看不懂，AI 也容易照著做出一整排同樣重要的按鈕。

Button 至少要把這些事說清楚

• 同一個任務區，哪一顆是主要操作？名稱能不能直接說明動作和對象？
• 處理中會不會防止重複點擊？失敗時保不保留使用者已填的內容？
• 暫時不能按時，畫面有沒有說明少了什麼條件？
• 危險操作是否先說明後果，並保留取消或返回的路徑？
• 純圖示按鈕有沒有可存取名稱？垃圾桶、三個點和叉叉不是每個人都會猜對。

最後一點很容易被忽略。按鈕內的文字通常會成為它的可存取名稱；若只有圖示，就要補上能描述用途的名稱，例如 aria-label="編輯專案 Aurora-01"。WAI 的 Button Pattern 也要求 Button 有可辨識的名稱。Button Pattern

Link：前往另一份內容

圖 3：Link 的文字先交代目的地。使用者在啟動前就知道會前往「權限說明」，不是在目前表單送出一個動作。

Link 的目的地可以是另一頁、外部網站、檔案，或本頁的某個段落。它不負責送出資料，也不負責關閉 Dialog。WAI 建議優先使用原生的 <a href>，因為瀏覽器原本就知道怎麼處理導覽、右鍵選單與連結行為；鍵盤使用者可用 Enter 啟動連結。Link Pattern

連結真正需要注意的是文字。

「更多」和「點這裡」放在段落裡也許還看得懂，但使用者掃畫面、用螢幕閱讀器逐一瀏覽連結，或把連結截圖傳給同事時，這兩句話幾乎沒有資訊。改成「查看權限說明」、「閱讀通知規則」或「下載成員報表」就清楚得多。WCAG 2.2 的 Link Purpose (In Context) 也要求使用者能從連結文字與脈絡判斷目的地。Link Purpose (In Context)

如果連結會另開分頁、下載檔案或跳到長頁的某個位置，也要讓使用者事先知道。它不適合承擔儲存、刪除、切換設定等會改變目前資料或介面的工作。

選擇流程：先判斷結果，再決定外觀

圖 4：Button 處理目前情境中的操作；Link 帶人前往另一份內容。外觀可以接近，點下去的結果不能含糊。

1. 點擊後要前往另一頁、文件、檔案或同頁段落嗎？是的話使用 Link。
2. 點擊後要改變目前資料、送出表單、打開視窗或重新載入嗎？使用 Button。
3. 是同一個設定的開／關嗎？使用 Toggle Button；是要收一串次級命令嗎？使用 Menu Button。

外觀可以依情境調整，但不要因為都「能點」就把它們做成同一種元件。

改寫 Prompt：先交代每個可點操作的責任

假設你要請 AI 做一個「邀請成員」Dialog。只說「下方有兩顆按鈕，看起來現代一點」的話，AI 很可能交出兩顆同樣藍的按鈕，或把前往說明頁的操作混進去。

可以改成這樣：

請為 LumenDesk 的「邀請成員」Dialog 設計操作區。

- 「查看權限說明」使用 Link，前往 /permissions-guide；文字必須能獨立說明目的地。
- 「取消」使用次要 Button，關閉 Dialog，不儲存已輸入內容；焦點回到原本開啟 Dialog 的位置。
- 「送出邀請」是唯一的主要 Button。送出期間顯示「邀請傳送中…」，並禁止重複點擊。
- 若送出失敗，保留表單內容，在操作區附近顯示可理解的錯誤與「重新嘗試」。
- 「移除成員」使用 Danger Button。執行前顯示無法復原的後果，並提供取消路徑。
- 純圖示的更多操作按鈕要有可存取名稱「更多成員操作」。
- 360px 寬度下，按鈕可換行或垂直排列，文字與錯誤訊息不可被截斷。

這份 Prompt 沒有規定 AI 一定要用哪個字型或多大的圓角，卻交代了更重要的事：誰是主要操作、每個點擊會發生什麼、失敗時要留下什麼，以及小螢幕怎麼維持可用。這就是你想要的畫面感開始變得可以驗收的地方。

如果你現在只需要設計其中一個元件，不必從這一大段剪貼。網站的 Button 頁和 Link 頁各自有聚焦單一元件的 Prompt，複製後再換成你的功能情境就好。

第二版實際得到什麼

我沒有用「比較完整」當作結論，而是實際切換預設、儲存中、儲存失敗與不可用狀態。失敗時，主要操作改成「重新嘗試」，錯誤訊息留在操作區，原本資料不消失；權限說明則保持 Link 的目的地語意。

失敗狀態要寫進 Prompt，不是等 AI 自己補

剛才的操作也改變了我寫 Prompt 的方式。我不只要求 Success、Error 狀態，而會直接說：失敗後按鈕改成什麼、資料是否保留、能不能重試，以及成功後回到哪個狀態。否則 AI 很可能只替同一顆按鈕換顏色。

用操作結果驗收，不用顏色猜按鈕

• [ ] 前往頁面、文件或資源的項目是 Link，文字看得出目的地。
• [ ] 會改變目前資料或介面的項目是 Button。
• [ ] 一個任務區有清楚的主要操作，其他操作沒有搶走注意力。
• [ ] 主要 Button 在處理中、失敗與不可用時，都讓使用者知道下一步。
• [ ] 危險操作有後果說明和取消路徑。
• [ ] 只有圖示的按鈕有名稱；Tab 焦點清楚，Button 可用 Enter／Space，Link 可用 Enter。
• [ ] 360px 寬度下，按鈕與連結文字沒有被截斷或擠成難以點擊的一排。

這份清單也放在網站的元件頁。文章讀完後，最好的做法是打開你的 AI 成品，對著畫面一項一項看，而不是只憑「感覺還可以」就收工。

小結

Button 是用來完成眼前的操作；Link 是用來前往另一份內容。這條線越早說清楚，AI 做出的操作區就越不容易讓人按了才後悔。

下次看到一排可以點的東西，先別急著改成同一種藍色。先判斷每一項點下去的結果，再到 Button、Link 與操作元件比較頁核對。能說出元件名稱、用途和狀態，才有辦法把腦中的畫面交代給 AI。

參考來源與查閱日期

• WAI-ARIA APG：Button Pattern（2026-07-23 查閱）：Button 的用途、鍵盤操作、焦點與可存取名稱。
• WAI-ARIA APG：Link Pattern（2026-07-23 查閱）：原生連結、目的地與鍵盤操作。
• WCAG 2.2：Link Purpose (In Context)（2026-07-23 查閱）：連結目的必須可從文字與脈絡判斷。