哈囉，我是設計師 Riven！剛好前陣子 Adobe Xd 更新了 Component states 的功能，可以設定單一物件的不同狀態，這在管理設計元件上可以說是大大地增加了 UI 設計師的效率，同時對大型專案的團隊來說，也會帶來更清晰的協作管理。
這篇文章我想就來順便聊聊在 UI 介面設計上的按鈕 (Button) 通常會怎麼處理，以及在軟體上該如何實現。
UI 上的按鈕
一般來說，不管是在 Web 或 App 上，「按鈕」都是重要且出現頻率相當高的物件，它可能會出現在各個頁面、不同位置，且會有相對應的文案、樣式，如下圖的四個按鈕就代表著不同的功能。
科普一下：最簡易的按鈕組成由 圓角矩形 + icon + 文字 組成。
這時候，如果我們在設計稿上的每個按鈕都是用各自獨立的形狀物件跟文字來製作，則會在後期設計稿管理上造成「設計債」，比如說臨時要調整字距、拉寬按鈕，還要手工一個一個調整，不僅花費大量時間也會讓開發協作難以進行。
介面中的元件化設計
因此，我們會用 Component (元件) 來幫這顆按鈕做整理，那麼不管這顆按鈕在設計稿上出現了幾次，都可以一次編輯所有的物件，比如說換顏色、調整位置等等：
此功能在 Sketch 中叫做 Symbol。
按鈕的各種狀態
但是，介面上的按鈕還有另一個需要設計師進行處理的環節，也就是狀態(State)，而基本的按鈕狀態包含了：
Default(預設)、Hover(懸停)、Pressed(按壓)、Disable(無效)
/* 我們在溝通上通常以英文為主，這邊中文僅輔助理解；*/
獨立設定元件狀態
想要做出這樣的按鈕互動效果，我們只要在 Adobe Xd 中的把按鈕整組加入 Component，然後就可以在右側欄位的地方找到 Component states 的面板。
接著，我們就可以在這邊新增不同的狀態，進而去獨立編輯每個按鈕的樣式，在下圖的示範中我們新增一個內建就有的 Hover 狀態，並加深一些顏色，讓滑鼠覆蓋按鈕時的使用感受增強。
同理，要新增其他的按鈕狀態就重複操作即可。
這樣就完成 Component states 的設定拉！很簡單對吧？這麼做可以讓我們的設計稿更加簡潔，在日後的管理上會方便很多。
讓按鈕可以操作
接著，如果我們要在原型 (Prototype) 中設定讓此按鈕可以真正被操作，只要切換到 Prototype 面板，並在 Interaction 面板中就可以設定點擊、懸停時的動作，以及簡單的動態效果。
更多按鈕互動效果
在上面的例子中我們僅透過顏色變換來讓按鈕產生變換，相信聰明如你一定能想到更多種按鈕的變化吧？下面擺了三個常見的按鈕 Hover 效果，如果都能知道怎麼做，那麼今天聊的按鈕技巧就差不多學會囉！
不論怎麼樣的互動變換，其目的都是讓使用者可以有「噢，我按到了！」的體驗，沒有這些小動態的按鈕，操作起來就跟去超商操作 ibon 一樣煩躁⋯
而這些按鈕設計後的實作，仰賴於開發語言的不同，其實也有相當大的彈性，我覺得我們不用受限於一般常見的按鈕設計，可以在 UI 階段就發揮創意，做出讓使用者更怦然心動的設計體驗。
給工程師的文件
那麼將整套按鈕做好之後，我們也可以在 Development 文件中獲得更多這顆按鈕的資訊，而工程師可以透過這樣的資料去做開發，但互動效果仍仰賴團隊對原型的掌握，如果想要有更精緻的設計，建議可以在開發階段關心一下身邊的同事們。
快速複習一下本篇提到的技巧：
- 在 Adobe Xd 中實作按鈕並存成 Component
- 用 Component states 來設定與整理按鈕不同的狀態
- 做成可觸動的 Prototype 增加使用者操作體驗
感謝您的閱讀，我是 林育正 Riven，我們下次見囉！
YOTTA 你最專業的學習夥伴，提供優質內容與有趣觀點，擴大豐富你的視野。
- 訂閱林育正老師的專欄，閱讀更多文章。
- 延伸學習：「Adobe Xd設計實務｜成為UI設計師的8項核心技能」
所有圖片來源：林育正
