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

按鈕是每個産品設計當中必備的交互元素，可以說是整個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協議。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!