編輯導語：如今隨著互聯網的不斷發展，用戶平常使用APP的時間也變長，也會注意到產品中的一些按鈕體驗，所以對于設計師來說，設計一款有趣、用戶體驗較好的按鈕是非常重要的；本文作者分享了關于按鈕的完整介紹，我們一起來看一下。

按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認識這個組件，今天我把關于按鈕的一些知識和我的一些觀點分享給大家。

一、按鈕的作用

在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時候該用按鈕。

1. 什么是按鈕

按鈕用于觸發一個及時操作。

2. 有什么作用

1）功能操作

比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當弱化，重點強調功能，突出主體信息。

2）指引用戶下一步操作

這個是最常見的使用場景，每個可交互頁面上都有這類按鈕的出現，用來指引用戶下一步該怎么做。比如：創建、保存…

3）培養用戶習慣

當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長此以往用戶就會形成使用習慣。如果某操作能夠為用戶持續帶來價值，那就可以在按鈕的位置讓它更醒目，持續培養用戶點擊習慣。

二、按鈕有哪些類型

• 主按鈕：用于主動行動點，一個操作區域內只有且只能有一個主按鈕；
• 默認按鈕：用戶內有主次之分的一組行動點；
• 虛線按鈕：常用于【添加】操作；
• 文本按鈕：用于次級的行動點；
• 鏈接按鈕：用于作為外鏈的行動點。

三、按鈕的狀態

1. 交互狀態

1）Normal 正常狀態

此狀態為按鈕的正常顯示狀態，就是按鈕在也頁面中的常規狀態。

2）Hover 懸浮狀態

此狀態為按鈕的懸浮狀態，當鼠標滑過時候的狀態會給用戶一個交互反饋，因為它只是一個視覺上的反饋并無實際作用，所以在移動端就把此狀態去掉了。

此狀態的效果并沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。

3）Click 點擊狀態

此狀態為按鈕的鼠標 / 手指按鈕狀態，操作完此狀態后，就會引發此按鈕的真實作用。

同時，此狀態的效果也沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。

4）Disable 禁用狀態

此狀態為按鈕的不可操作狀態。

當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時，按鈕會處于 Disable 狀態。這個狀態在產品中也是很常用的，而且這種情況下應該引導用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個通用的展示方案。

一般方案有兩種：

• 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
• Disable 狀態為 Normal 狀態的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。

2. 狀態屬性

• 常規：常規樣式的按鈕，主操作按鈕；
• 危險按鈕：刪除/移動/修改權限等危險操作，一般需要二次確認；
• 幽靈按鈕：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景；
• 加載：用于異步操作等待反饋的時候，可以避免多次提交。

四、按鈕的使用方法 / 禁忌

1. 一個操作區有且只有一個主按鈕

一個操作區有且只有一個主按鈕去引導用戶操作，如有有多個或沒有則會影響用戶的判斷。盡可能少的讓用戶去做選擇，產品的終極目標應該是“傻瓜式”產品，不要讓用戶有學習成本。

2. 圓角值

根據產品風格，三種圓角值的設定：

1）圓角值為 0

這種適合用在比較嚴謹 / 企業級產品中，比如：阿里云；

2）小圓角值

這種是最常用的形式，在不失嚴謹的同時還有一些細節，如果可以的話，盡量選這種的；

3）超大圓角值

這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。

較大圓角值，此類千萬不要用，不要問，問就是太丑。

3. 精簡文字

按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。

4. 文字與按鈕比例要適中

文字與按鈕的比例要適中，文字不要太大或太小，都會影響視覺展示。

5. 彌散陰影

如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級別的不要用，不然識別度會變差，并且會讓按鈕的體驗變得很差。

6. 主次操作按鈕樣式統一

主次操作按鈕樣式要統一，不要濫用樣式。

7. 按鈕樣式與其他組件要有區別

實際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產生誤解，做一些不必要的操作和思考。

8. 不同場景適配

現在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識別度的問題。

9. 主次按鈕的位置

主次按鈕左右的問題，也常常出現在設計討論會中，這次我直接放個結論吧，以后不要再為這件事吵架了。

在提交頁面、彈窗中，主按鈕在右；在其他常規頁面上，酌情考慮。

五、按鈕尺寸

按鈕尺寸具體用多大的，這里我總結了一個規范（僅代表個人意見）。

• 高 = 文字行高 + Xn，X=自然數，n=4
• 寬 = 文字寬度 + Xn，X=自然數，n=4

在其他地方也可以用類似的公式去做規范，比如卡片的間距，你可以設置 n 為基礎值，在此基礎上用 Xn 去選取合適的值。

注意：常用的字號為 12px、14px，盡量不要用太大的字號在按鈕上。

六、總結

按鈕只是眾多組件中的其中一個，也是最常用的組件之一。

對于設計師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個細節做好了，才能做好產品。

日積月累的把每一個知識點掌握了，我們也就成長了。

作者：友設青年，公眾號：友設青年

本文由 @友設青年 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議