起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)關(guān)于“按鈕”，你需要知道哪些基礎(chǔ)知識(shí)？
“按鈕”這個(gè)元素我們?cè)赼pp或是網(wǎng)頁(yè)里隨處可見(jiàn)，使用場(chǎng)景也五花八門，今天我們就來(lái)聊一聊～
01 什么是按鈕
按鈕（Button）官方的概念描述我就不多說(shuō)了，按鈕在我理解，就是“可點(diǎn)擊的可觸發(fā)的即時(shí)操作媒介”。
02 按鈕類型
從按鈕類型來(lái)分，按鈕有四種類型：主按鈕、次按鈕、虛線按鈕和鏈接按鈕。主按鈕在同一個(gè)操作區(qū)域最多出現(xiàn)一次。
- 從承載媒介來(lái)區(qū)分，有文字型的、圖標(biāo)型的、幾何型的
- 從樣式來(lái)區(qū)分，有線型的、面型的。
- 從組合方式來(lái)區(qū)分有組合按鈕和單個(gè)按鈕
我們這里主要以幾何形按鈕為常規(guī)按鈕來(lái)敘述并區(qū)分。
03 按鈕狀態(tài)
按鈕從狀態(tài)來(lái)分分為：
- 常規(guī)(normal/primary)
- 懸浮（hover）
- 點(diǎn)擊（click）
- 不可點(diǎn)擊（disabled）
常規(guī)主按鈕可選擇符合產(chǎn)品調(diào)性的按鈕色，懸浮按鈕（PC端狀態(tài)）和點(diǎn)擊按鈕（click）則是需要在視覺(jué)上給予一定反饋的。我常規(guī)的處理辦法是hover狀態(tài)層頂部覆蓋透明度為15%的白色，click狀態(tài)層頂部覆蓋透明度為15%的深色。
不可點(diǎn)擊狀態(tài)（disabled）則置灰即可。
04 按鈕屬性
從屬性來(lái)分又分為四種：
危險(xiǎn)：刪除/移動(dòng)/修改權(quán)限等危險(xiǎn)操作，一般需要二次確認(rèn)。例如微信表情包的刪除等的二次確認(rèn)。以紅色做警示，且需二次確認(rèn)。
幽靈：用于背景色比較復(fù)雜的地方，常用在首頁(yè)/產(chǎn)品頁(yè)等展示場(chǎng)景。
禁用：行動(dòng)點(diǎn)不可用的時(shí)候，一般需要文案解釋、置灰或禁用標(biāo)志。
加載中：用于異步操作等待反饋的時(shí)候，也可以避免多次提交。
05 按鈕樣式
1. 尺寸
在移動(dòng)端，按鈕尺寸根據(jù)手指觸摸屏幕的最小點(diǎn)觸區(qū)域，平均長(zhǎng)度在10-14mm之間，指尖的長(zhǎng)度為8-10mm，所以10mm x 10mm就是一個(gè)最小觸摸目標(biāo)尺寸。在iOS 人機(jī)交互規(guī)范里面的 44*44 最小點(diǎn)觸面積，就是手指點(diǎn)觸的最小尺寸。所以我們可以根據(jù)這個(gè)在不同設(shè)備不同 PPI 時(shí)處理尺寸，在移動(dòng)端設(shè)定點(diǎn)觸尺寸的最小點(diǎn)觸區(qū)域大小來(lái)設(shè)置按鈕尺寸的大小。
web端或者其他終端則需要根據(jù)實(shí)際使用場(chǎng)景及比例來(lái)調(diào)整對(duì)應(yīng)的尺寸大小和高度。
在對(duì)比了多家線上產(chǎn)品尺寸，常規(guī)的按鈕整理了一個(gè)大致范圍：
- 移動(dòng)端：按鈕高度35px-50px之間，字號(hào)13pt-17pt，圓角4-8
- web端：按鈕高度24px-48px，字號(hào)12-18，圓角6-10
- 其他端則需根據(jù)具體的場(chǎng)景比例來(lái)調(diào)整。
2. 圓角
按照按鈕的造型我們可以對(duì)其風(fēng)格做大致分類：
- 直角：嚴(yán)肅、專業(yè)、力量、高端（奢侈品、健身、金融）；
- 0-12圓角：通用、中性、用戶范圍廣（社交）；
- 全圓角：年輕、活潑、親切（兒童、娛樂(lè)、購(gòu)物）；
- 多邊形：少見(jiàn)、個(gè)性、科技感、文藝；
根據(jù)產(chǎn)品風(fēng)格，選用不同圓角角度突出產(chǎn)品的特點(diǎn)
3. 風(fēng)格
線框
漸變風(fēng)格
3D按鈕（帶陰影）：
凸起按鈕：
長(zhǎng)陰影按鈕
光暈效果按鈕：
帶圖標(biāo)按鈕
按鈕組：
block按鈕，寬度根據(jù)頁(yè)面整體安全寬度變化
環(huán)繞效果按鈕：
表單按鈕：
以上是今天的分享
作者：就不，公眾號(hào)：豬三的日常
本文由 @就不 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash， 基于CC0協(xié)議
公眾號(hào)：就設(shè)計(jì)（原名：豬三的日常）
歡迎關(guān)注
贊????