“按鈕”這個元素我們在app或是網頁裡随處可見，使用場景也五花八門，今天我們就來聊一聊～

01 什麼是按鈕

按鈕（Button）官方的概念描述我就不多說了，按鈕在我理解，就是“可點擊的可觸發的即時操作媒介”。

02 按鈕類型

從按鈕類型來分，按鈕有四種類型：主按鈕、次按鈕、虛線按鈕和鍊接按鈕。主按鈕在同一個操作區域最多出現一次。

• 從承載媒介來區分，有文字型的、圖标型的、幾何型的
• 從樣式來區分，有線型的、面型的。
• 從組合方式來區分有組合按鈕和單個按鈕

我們這裡主要以幾何形按鈕為常規按鈕來叙述并區分。

03 按鈕狀态

按鈕從狀态來分分為：

• 常規(normal/primary)
• 懸浮（hover）
• 點擊（click）
• 不可點擊（disabled）

常規主按鈕可選擇符合産品調性的按鈕色，懸浮按鈕（PC端狀态）和點擊按鈕（click）則是需要在視覺上給予一定反饋的。我常規的處理辦法是hover狀态層頂部覆蓋透明度為15%的白色，click狀态層頂部覆蓋透明度為15%的深色。

不可點擊狀态（disabled）則置灰即可。

04 按鈕屬性

從屬性來分又分為四種：

危險：删除/移動/修改權限等危險操作，一般需要二次确認。例如微信表情包的删除等的二次确認。以紅色做警示，且需二次确認。

幽靈：用于背景色比較複雜的地方，常用在首頁/産品頁等展示場景。

禁用：行動點不可用的時候，一般需要文案解釋、置灰或禁用标志。

加載中：用于異步操作等待反饋的時候，也可以避免多次提交。

05 按鈕樣式

1. 尺寸

在移動端，按鈕尺寸根據手指觸摸屏幕的最小點觸區域，平均長度在10-14mm之間，指尖的長度為8-10mm，所以10mm x 10mm就是一個最小觸摸目标尺寸。在iOS 人機交互規範裡面的 44*44 最小點觸面積，就是手指點觸的最小尺寸。所以我們可以根據這個在不同設備不同 PPI 時處理尺寸，在移動端設定點觸尺寸的最小點觸區域大小來設置按鈕尺寸的大小。

web端或者其他終端則需要根據實際使用場景及比例來調整對應的尺寸大小和高度。

在對比了多家線上産品尺寸，常規的按鈕整理了一個大緻範圍：

• 移動端：按鈕高度35px-50px之間，字号13pt-17pt，圓角4-8
• web端：按鈕高度24px-48px，字号12-18，圓角6-10
• 其他端則需根據具體的場景比例來調整。

2. 圓角

按照按鈕的造型我們可以對其風格做大緻分類：

• 直角：嚴肅、專業、力量、高端（奢侈品、健身、金融）；
• 0-12圓角：通用、中性、用戶範圍廣（社交）；
• 全圓角：年輕、活潑、親切（兒童、娛樂、購物）；
• 多邊形：少見、個性、科技感、文藝；

根據産品風格，選用不同圓角角度突出産品的特點

3. 風格

線框

漸變風格

3D按鈕（帶陰影）：

凸起按鈕：

長陰影按鈕

光暈效果按鈕：

帶圖标按鈕

按鈕組：

block按鈕，寬度根據頁面整體安全寬度變化

環繞效果按鈕：

表單按鈕：

以上是今天的分享

作者：就不，公衆号：豬三的日常

本文由 @就不 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash， 基于CC0協議

,

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

查看全部