操作與導覽元件

外觀可以相近,結果不能混在一起。

Button 在目前情境執行動作;Link 帶人到另一個資源或位置。先說清楚結果,AI 才知道該生成哪一種元件。

快速判斷

點下去後,使用者會不會離開目前的工作?

  1. 會前往資源或位置使用 Link,連結文字說明目的地,例如「查看權限說明」。
  2. 留在目前流程做事使用 Button,補上 Loading、失敗、Disabled、焦點與鍵盤規則。

比較表

不要用同一種藍色,掩蓋兩種不同的互動契約。

比較面向Button|按鈕Link|連結
使用者結果在目前情境觸發動作或事件。前往另一個資源、位置或頁內錨點。
LumenDesk 例子儲存角色、取消編輯、重新載入、開啟確認視窗。查看成員詳情、查看權限說明。
要補的規格成功、失敗、Loading、Disabled、焦點與鍵盤。目的地、連結文字、是否另開分頁與回到原處的脈絡。
不要這樣用只為了文字樣式而把導頁元素做成 Button。用 Link 送出表單、刪除資料或開啟選單。

這組結論

先交代操作目的,才有辦法驗收 AI 的畫面。

「儲存變更」必須說明送出後的狀態;「查看權限說明」必須讓人知道會前往哪裡。把這兩句寫進需求,畫面的層級就會開始清楚。