編輯導(dǎo)語：按鈕設(shè)計(jì)是產(chǎn)品設(shè)計(jì)中的必要模塊，合理的按鈕設(shè)計(jì)可以讓用戶有更清晰的認(rèn)知，一定程度上提升用戶的產(chǎn)品使用體驗(yàn)。本篇文章里，作者便對按鈕結(jié)構(gòu)、按鈕狀態(tài)、按鈕開發(fā)對接技巧等方面做了總結(jié)，一起來看一下。

按鈕是每個(gè)產(chǎn)品設(shè)計(jì)當(dāng)中必備的交互元素，可以說是整個(gè)Ixd設(shè)計(jì)當(dāng)中最為重要的一環(huán)。

在現(xiàn)實(shí)世界當(dāng)中，出現(xiàn)的各種各樣的物理按鈕也成為了界面設(shè)計(jì)當(dāng)中按鈕的映射，讓我們?nèi)ダ斫饨换ピO(shè)計(jì)當(dāng)中的按鈕降低了理解的成本。那么今天我為大家分享一下有關(guān)交互設(shè)計(jì)當(dāng)中按鈕的經(jīng)驗(yàn)。

一、什么是按鈕

1. 追本溯源

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

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

2. 現(xiàn)實(shí)中的含義

按鈕（百科）是一種開關(guān)，用來控制機(jī)械或程序的某些功能。一般而言，紅色按鈕是用來使某一功能停止，而綠色按鈕，則通常可開始某一項(xiàng)功能。

3. 交互設(shè)計(jì)中的含義

按鈕（百科），是程序或網(wǎng)頁常用的一個(gè)控件。在程序中，按鈕是最常用的用于觸發(fā)事件的控件，也可以開始，中斷，結(jié)束一個(gè)進(jìn)程。

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

二、按鈕的結(jié)構(gòu)

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

通過對按鈕六大要素的不同組合，就可以得到不同種類的按鈕類型，例如主按鈕、標(biāo)準(zhǔn)按鈕、幽靈按鈕、文字按鈕等，從而來適配不同產(chǎn)品不同業(yè)務(wù)場景下對按鈕的類型需求。

三、按鈕的狀態(tài)

按鈕狀態(tài)，即當(dāng)下按鈕所處的操作狀態(tài)，它可以幫助用戶去判斷當(dāng)下按鈕處在：正常狀態(tài)（Normal）、聚焦?fàn)顟B(tài)（Focus）、懸停狀態(tài)（Hover）、激活狀態(tài)（Active）、禁用狀態(tài)（Disabled）當(dāng)中的哪一種。

1. 正常狀態(tài)

正常狀態(tài)，用戶在日常使用產(chǎn)品中最常接觸到的一種按鈕狀態(tài)，也是設(shè)計(jì)師在工作中對按鈕主要的設(shè)計(jì)形態(tài)。表示該按鈕可交互的，并且已經(jīng)啟用。

2. 聚焦?fàn)顟B(tài)

聚焦?fàn)顟B(tài)，主要用于展示當(dāng)前電腦光標(biāo)所在的具體位置。這種狀態(tài)對于一些剛?cè)胄械脑O(shè)計(jì)師比較容易遺漏。

它的作用是當(dāng)用戶不用鼠標(biāo)操作時(shí)，也可以用Tab按鍵或者方向鍵去頁面進(jìn)行訪問。現(xiàn)在相當(dāng)多的產(chǎn)品幾乎都去掉了該種狀態(tài)，造成產(chǎn)品可用性大大降低。

3. 懸停狀態(tài)

懸停狀態(tài)，出現(xiàn)在鼠標(biāo)指針在按鈕處停留，該按鈕發(fā)出的特殊反饋。該狀態(tài)在桌面端產(chǎn)品中出現(xiàn)，移動(dòng)端交互形態(tài)中無此狀態(tài)，故不必考慮。

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

4. 激活狀態(tài)

激活狀態(tài)，當(dāng)用戶按下按鈕時(shí)出現(xiàn)該狀態(tài)，其顏色由淺變深。一般的做法是在亮色的按鈕上，疊加一層20%的黑色蒙層。

5. 禁用狀態(tài)

禁用狀態(tài)，當(dāng)表單信息沒有填寫完整，或者沒有達(dá)到某類條件時(shí)，按鈕所表現(xiàn)出來的不可點(diǎn)擊的形態(tài)。無論web還是app很多場景都會(huì)用到該狀態(tài)。

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

6. 特別提醒

這里很多朋友提出按鈕似乎還有一個(gè)加載狀態(tài)是需要考慮的，但是就我個(gè)人意見按鈕加載狀態(tài)不應(yīng)該算在按鈕基本狀態(tài)當(dāng)中，甚至不太提倡這種設(shè)計(jì)，因?yàn)榇朔N做法會(huì)用戶感到困惑。

例如下圖：

加載態(tài)按鈕設(shè)計(jì)會(huì)讓用戶感到存在兩種可能性：

1. 這種狀態(tài)是因?yàn)檩斎胨阉餍畔⒑髷?shù)據(jù)處在加載中嗎？
2. 這種狀態(tài)是因?yàn)榫W(wǎng)絡(luò)問題造成按鈕這個(gè)組件處在加載中嗎？

四、與開發(fā)對接小技巧

相信工作中很多小伙伴在按鈕的設(shè)計(jì)還原當(dāng)中會(huì)碰到如上圖所示這樣的問題。明明自己標(biāo)注時(shí)很清楚，開發(fā)還原起來會(huì)有很大的問題，這里其實(shí)有個(gè)關(guān)于padding的思維。

1. Padding的概念

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

對于前端同學(xué)來說同一系列的按鈕最好可以有相同的padding值。這樣更有利于項(xiàng)目的開發(fā)與維護(hù)。所以我們在設(shè)計(jì)時(shí)更應(yīng)該對于規(guī)范有預(yù)先的判斷與規(guī)劃。

2. 最小Padding值

一般習(xí)慣于把4個(gè)字的寬度定為文字標(biāo)簽的最小寬度。

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

3. 其他事項(xiàng)

在我們的設(shè)計(jì)軟件中，按鈕邊框有三種，內(nèi)邊框、居中邊框、外邊框，默認(rèn)為居中；但是在前端的CSS代碼中沒有居中邊框，如果需要調(diào)整為外邊框，需要跟前端小哥特別提醒。

五、結(jié)語

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

作者：月亮月六便士；公眾號：月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。