編輯導語：按鈕設計是產品設計中的必要模塊，合理的按鈕設計可以讓用戶有更清晰的認知，一定程度上提升用戶的產品使用體驗。本篇文章里，作者便對按鈕結構、按鈕狀態、按鈕開發對接技巧等方面做了總結，一起來看一下。

按鈕是每個產品設計當中必備的交互元素，可以說是整個Ixd設計當中最為重要的一環。

在現實世界當中，出現的各種各樣的物理按鈕也成為了界面設計當中按鈕的映射，讓我們去理解交互設計當中的按鈕降低了理解的成本。那么今天我為大家分享一下有關交互設計當中按鈕的經驗。

一、什么是按鈕

1. 追本溯源

按鈕從字面解釋來看，可拆解為“按”與“鈕”兩部分。

“按”即為用手或手指壓動作；“鈕”的含義就比較有意思，在東方文化中“鈕”本意指印章上用來系綬帶凸起的部分，引申指物件的機鍵、中心部分。西方文化中“button”指帶有信息的徽章，比如古代帶有家族信息用來蠟封的徽章戒指。

2. 現實中的含義

按鈕（百科）是一種開關，用來控制機械或程序的某些功能。一般而言，紅色按鈕是用來使某一功能停止，而綠色按鈕，則通?？砷_始某一項功能。

3. 交互設計中的含義

按鈕（百科），是程序或網頁常用的一個控件。在程序中，按鈕是最常用的用于觸發事件的控件，也可以開始，中斷，結束一個進程。

綜上結論，在交互設計當中，按鈕是界面之上最具有儀式感的存在，沒有之一（綜上“按鈕定義”與“按鈕釋義”的概念總結源于Hozin的表單課程）。

二、按鈕的結構

1. 圖標：按鈕含義的圖形化表達。
2. 文字標簽：按鈕含義的文字化表達。
3. 圓角：決定按鈕視覺感受的元素。
4. 背景：決定按鈕視覺感受的元素，改變顏色能夠表示按鈕的狀態。
5. 容器：按鈕的載體。
6. 邊框：明確的按鈕的大小與邊界。

通過對按鈕六大要素的不同組合，就可以得到不同種類的按鈕類型，例如主按鈕、標準按鈕、幽靈按鈕、文字按鈕等，從而來適配不同產品不同業務場景下對按鈕的類型需求。

三、按鈕的狀態

按鈕狀態，即當下按鈕所處的操作狀態，它可以幫助用戶去判斷當下按鈕處在：正常狀態（Normal）、聚焦狀態（Focus）、懸停狀態（Hover）、激活狀態（Active）、禁用狀態（Disabled）當中的哪一種。

1. 正常狀態

正常狀態，用戶在日常使用產品中最常接觸到的一種按鈕狀態，也是設計師在工作中對按鈕主要的設計形態。表示該按鈕可交互的，并且已經啟用。

2. 聚焦狀態

聚焦狀態，主要用于展示當前電腦光標所在的具體位置。這種狀態對于一些剛入行的設計師比較容易遺漏。

它的作用是當用戶不用鼠標操作時，也可以用Tab按鍵或者方向鍵去頁面進行訪問。現在相當多的產品幾乎都去掉了該種狀態，造成產品可用性大大降低。

3. 懸停狀態

懸停狀態，出現在鼠標指針在按鈕處停留，該按鈕發出的特殊反饋。該狀態在桌面端產品中出現，移動端交互形態中無此狀態，故不必考慮。

一般的做法是在亮色的按鈕上，疊加一層10%的黑色蒙層。

4. 激活狀態

激活狀態，當用戶按下按鈕時出現該狀態，其顏色由淺變深。一般的做法是在亮色的按鈕上，疊加一層20%的黑色蒙層。

5. 禁用狀態

禁用狀態，當表單信息沒有填寫完整，或者沒有達到某類條件時，按鈕所表現出來的不可點擊的形態。無論web還是app很多場景都會用到該狀態。

但是個人意見來看，如果可以的話，我建議避免使用禁用按鈕。最好可以一直啟用，如果用戶沒有滿足觸發的條件時，只需要在條件處高亮提示，或者顯示通知即可。對于“按鈕為什么不可至灰”在Hozin表單課程中詳細講解。

6. 特別提醒

這里很多朋友提出按鈕似乎還有一個加載狀態是需要考慮的，但是就我個人意見按鈕加載狀態不應該算在按鈕基本狀態當中，甚至不太提倡這種設計，因為此種做法會用戶感到困惑。

例如下圖：

加載態按鈕設計會讓用戶感到存在兩種可能性：

1. 這種狀態是因為輸入搜索信息后數據處在加載中嗎？
2. 這種狀態是因為網絡問題造成按鈕這個組件處在加載中嗎？

四、與開發對接小技巧

相信工作中很多小伙伴在按鈕的設計還原當中會碰到如上圖所示這樣的問題。明明自己標注時很清楚，開發還原起來會有很大的問題，這里其實有個關于padding的思維。

1. Padding的概念

Padding簡單的可以理解為屬性定義元素邊框與元素內容之間的空間。

對于前端同學來說同一系列的按鈕最好可以有相同的padding值。這樣更有利于項目的開發與維護。所以我們在設計時更應該對于規范有預先的判斷與規劃。

2. 最小Padding值

一般習慣于把4個字的寬度定為文字標簽的最小寬度。

舉個例子，我們按鈕內文字大小為12px，左右的padding值分別為24px，那么按鈕的最小寬度=12*4+24+24=96px，方便前端進行CSS開發。

3. 其他事項

在我們的設計軟件中，按鈕邊框有三種，內邊框、居中邊框、外邊框，默認為居中；但是在前端的CSS代碼中沒有居中邊框，如果需要調整為外邊框，需要跟前端小哥特別提醒。

五、結語

按鈕是Ixd設計中作為一個最基礎的元素，但是在整個設計體系中，它一直都扮演著一個十分重要的位置。就跟開頭講的，在交互設計當中，按鈕是界面之上最具有儀式感的存在，沒有之一，通過我的分享可以為大家避開設計當中的坑。

作者：月亮月六便士；公眾號：月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。