按鈕的基礎(chǔ)應(yīng)用規(guī)范

2024-10-24 藍(lán)藍(lán)小助手

寫(xiě)在前面

當(dāng)你沒(méi)有看之前，你會(huì)覺(jué)得按鈕嘛。有什么不清楚的呢，有什么不會(huì)用呢。是的呀。在我寫(xiě)這篇文章之前也是這樣的想法。但是當(dāng)我去搜集了一堆的關(guān)于按鈕的資料后。感覺(jué)這東西還真有意思。你可以用你的感性去做設(shè)計(jì)但是你也要明白理性的設(shè)計(jì)才能更好的讓設(shè)計(jì)決策更加準(zhǔn)確、更容易說(shuō)服需求方、從而更好得服務(wù)于用戶(hù)、賦能于業(yè)務(wù)。

唐納德·A·諾曼在《設(shè)計(jì)心理學(xué)》中說(shuō)設(shè)計(jì)是一種解決問(wèn)題的方式，是一種創(chuàng)新的過(guò)程。設(shè)計(jì)師的成長(zhǎng)始于對(duì)每一個(gè)項(xiàng)目的獨(dú)特理解，止于對(duì)每一個(gè)細(xì)節(jié)的完美追求。

先贊后收藏、開(kāi)啟我們的學(xué)習(xí)旅程...

第一部分 | 按鈕基礎(chǔ)知識(shí)

按鈕在我們界面中也是大量存在的一個(gè)設(shè)計(jì)組件。大多數(shù)的設(shè)計(jì)師可能就不會(huì)太在意他，從而導(dǎo)致我們?cè)谠O(shè)計(jì)過(guò)程中會(huì)出現(xiàn)一些問(wèn)題。比如用戶(hù)找不到入口、不知道到界面怎么操作等。

在大場(chǎng)規(guī)范里，都對(duì)按鈕有一套完整的組件規(guī)范。在現(xiàn)在的設(shè)計(jì)當(dāng)中，你可以不會(huì)做按鈕但是你要會(huì)用。要知道在什么場(chǎng)景怎么使用這些大廠(chǎng)的組件。

在TDesign中是這樣定義按鈕的；按鈕用于開(kāi)啟一個(gè)閉環(huán)的操作任務(wù)，如“刪除”對(duì)象、“購(gòu)買(mǎi)”商品等。在Arco Design的按鈕定義是；按鈕是一種命令組件，可發(fā)起一個(gè)即時(shí)操作。

在各大場(chǎng)規(guī)范里面，對(duì)按鈕的分類(lèi)出發(fā)的維度不一樣，所以對(duì)按鈕的類(lèi)型劃分也都不太一樣。但無(wú)論他們?cè)趺捶诸?lèi)，這樣我們結(jié)合使用場(chǎng)景去用就不會(huì)有什么問(wèn)題。因?yàn)槲易龅南到y(tǒng)是用的ant design的規(guī)范框架。所以下面是總結(jié)了各大規(guī)范的內(nèi)容的結(jié)合體。旨在更好理解按鈕。（哈哈好像不怎么搭嘎，不重要）

本文按鈕基礎(chǔ)規(guī)范內(nèi)容基于一下三個(gè)大廠(chǎng)規(guī)范而來(lái)

1、常規(guī)按鈕

我們常用的基礎(chǔ)按鈕主要就分為、次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕、在按鈕中添加圖標(biāo)、這幾種按鈕形式。

① 次按鈕
常規(guī)按鈕，用于非主要?jiǎng)幼鳌Ｈ绻淮_定選擇哪種按鈕，次按鈕永遠(yuǎn)是最安全的選擇。

② 主按鈕
突出“完成”、“推薦”類(lèi)操作；一個(gè)按鈕區(qū)最多使用一個(gè)主按鈕。

③ 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場(chǎng)景，例如表格組件中的操作列。

④ 圖標(biāo)按鈕
圖標(biāo)提供視覺(jué)線(xiàn)索，避免逐字閱讀按鈕文案，更高效地使用界面。
-需要在較小的空間內(nèi)展示盡量多的按鈕。-使用純圖標(biāo)按鈕必須有 Tooltip 提示按鈕含義。

⑤ 在按鈕中添加圖標(biāo)
用于對(duì)按鈕含義補(bǔ)充解釋?zhuān)岣甙粹o識(shí)別效率。

在三個(gè)大廠(chǎng)規(guī)范里他們對(duì)基礎(chǔ)按鈕的劃分也差不多，只是他們出發(fā)的依據(jù)不一樣而已。大同小異。你可以理解東西就那么多東西至于怎么劃分。條條大路通羅馬嘛。我個(gè)人感覺(jué)ant的按鈕規(guī)范做的會(huì)更普世。其他兩個(gè)平臺(tái)的做的就更簡(jiǎn)單純粹。

2、按鈕狀態(tài)

在按鈕的狀態(tài)里如果從操作上出發(fā)應(yīng)該分為可用、禁用、加載。

如果站在強(qiáng)調(diào)性上去看那就可以分為警告、危險(xiǎn)、成功、可以與基礎(chǔ)按鈕同時(shí)生效，優(yōu)先級(jí)高于基礎(chǔ)基礎(chǔ)按鈕屬性。

3、按鈕尺寸

在按鈕尺寸的規(guī)范制定里我更傾向于arco的規(guī)范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。可在不同場(chǎng)景及不同業(yè)務(wù)需求選擇適合尺寸。

4、按鈕形狀

各個(gè)規(guī)范對(duì)按鈕形狀的規(guī)范基本都一樣。提供長(zhǎng)方形、正方形、圓角長(zhǎng)方形、圓形四種形狀。

5、特殊按鈕

在基礎(chǔ)常規(guī)按鈕之外還有那么一批特殊的按鈕需要注意。虛線(xiàn)按鈕、幽靈按鈕

虛線(xiàn)按鈕

用于引導(dǎo)用戶(hù)在一個(gè)區(qū)域中添加內(nèi)容。

幽靈按鈕

置于復(fù)雜或較深的背景中，避免按鈕突兀地破壞背景的整體性。該場(chǎng)景下可靈活定制樣式。

第二部分 | 按鈕的布局概念

按鈕的布局位置也是一個(gè)很講究的事情。我們現(xiàn)在基本大廠(chǎng)的規(guī)范也都是從一些基礎(chǔ)的概念出發(fā)所延伸出來(lái)的解決方案。所以我們了解了解這些普通的概念還是很有必要的事情。

1、兩個(gè)概念

在我要寫(xiě)這篇文章時(shí)，在網(wǎng)上翻找資料。于是乎就發(fā)現(xiàn)了在我們現(xiàn)在很多很常規(guī)的界面設(shè)計(jì)里面。各個(gè)元素的位置是有很多基礎(chǔ)概念做理論支撐的。下面我們來(lái)了解一下這些有趣的概念吧。

1-1、古藤堡法則

古藤堡法則或者原則，劇說(shuō)是由14世紀(jì)西方活字印刷術(shù)發(fā)明者古藤堡提出的。他這個(gè)原則大概意思是人們?cè)陂喿x時(shí)遵循這某種習(xí)慣。從左到右、從上到下。（其實(shí)吧，我在網(wǎng)上搜了搜，感覺(jué)這個(gè)法則也需存在。但不一定是古藤堡提出來(lái)的。百度百科也沒(méi)有說(shuō)有古藤堡法則或者原則這一說(shuō)。而且我百度了一下。最早出現(xiàn)這一說(shuō)法的是0幾年的一篇文章里。說(shuō)古藤保法則對(duì)網(wǎng)頁(yè)排版有幫助）

1-1-1、古藤堡圖表

我們暫且就先相信這些基礎(chǔ)的規(guī)則是古藤堡提出來(lái)的。那么根據(jù)他的這些原則，得出了我們現(xiàn)在熟知的一些理論。（這里吐槽一下。從左往右是近代西方傳進(jìn)我國(guó)的。我們國(guó)家的書(shū)籍是從上到下從右往左，新中國(guó)成立之后才采取了我們現(xiàn)在的這種閱讀方式和習(xí)慣。）根據(jù)古藤堡原則我們可以得到一張古藤堡圖。

在這張圖中、把我們閱讀的過(guò)程用四個(gè)區(qū)域進(jìn)行了劃分。第一視覺(jué)區(qū)、強(qiáng)休息區(qū)、弱休息區(qū)、終端休息區(qū)。這張圖所表達(dá)的是在我們的閱讀過(guò)程中我們的注意力在不同的區(qū)域是有強(qiáng)弱之分的。

1-1-2、設(shè)計(jì)中的應(yīng)用

有了古藤堡原則和他的這張圖、我們發(fā)現(xiàn)在我們視覺(jué)閱讀信息時(shí)對(duì)不同的區(qū)域的注意力是不同的。所以我們?cè)谠O(shè)計(jì)的時(shí)候。會(huì)將主要的信息放到注意力強(qiáng)的位置上去。

比如在寫(xiě)一些文件時(shí)。我們會(huì)把日期和簽名放到右下角的區(qū)域。在B端頁(yè)面中我們會(huì)經(jīng)常把標(biāo)題放到左上角、然后把按鈕放到右下角去展示。這些都和古藤堡原則有很大的關(guān)系。

1-2、費(fèi)茨定律

費(fèi)茨定律可以簡(jiǎn)單歸納為、幕布的大小和距離會(huì)影響到操作者移動(dòng)目標(biāo)的速度和準(zhǔn)確性。是美國(guó)人類(lèi)工程學(xué)部門(mén)的主任保羅·費(fèi)茨博士在1954年提出的。

菲茨定律是對(duì)人類(lèi)操作過(guò)程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行了研究。所總結(jié)出來(lái)的定律。我們簡(jiǎn)要的介紹一下這個(gè)定律。

1-2-1、費(fèi)茨定律內(nèi)容

簡(jiǎn)單的說(shuō)費(fèi)茨定律說(shuō)的就是、我們?cè)诓僮鞯倪^(guò)程中。距離越短、目標(biāo)越大、用時(shí)越少。具體說(shuō)一下費(fèi)茨定律指的是，使用設(shè)備（比如我們的鼠標(biāo)）到達(dá)一個(gè)目標(biāo)（比如按鈕）的時(shí)間和下面兩個(gè)因素有關(guān)系。

01、設(shè)備當(dāng)前的位置離目標(biāo)位置的距離（D）。距離越長(zhǎng)、所用時(shí)間越長(zhǎng)。

02、目標(biāo)的大?。⊿）目標(biāo)越大，所用時(shí)間越短

該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動(dòng)。例如，以一個(gè)更有效的途徑使可接近性更大和提高點(diǎn)擊率去放置內(nèi)容，這個(gè)定律便顯得重要。

1-2-2、設(shè)計(jì)里的費(fèi)茨定律應(yīng)用

我們?cè)谠O(shè)計(jì)里主要會(huì)應(yīng)用費(fèi)茨定律的幾個(gè)點(diǎn)來(lái)優(yōu)化我們的設(shè)計(jì)。1、放大可點(diǎn)擊元素的尺寸，但不能無(wú)限放大；2、減少移動(dòng)的距離，綜合權(quán)衡效率。防錯(cuò)、安全等要素；3、相關(guān)元素靠近；4、屏幕的邊緣和角落無(wú)限大；5、方向利用

2、不夠吃的在送一個(gè)

上面兩個(gè)概念中。古藤堡原則告訴我們?cè)趺捶胖冒粹o或重要信息才能讓我們得視覺(jué)剛好的注意到他。費(fèi)茨定律的應(yīng)用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶(hù)完成目標(biāo)。比如做一場(chǎng)活動(dòng)。你怎么去吸引用戶(hù)去點(diǎn)擊呢。或者說(shuō)用戶(hù)的點(diǎn)擊與哪些條件相關(guān)呢。

2-1、福格行為模型

什么事福格行為模型、在體驗(yàn)設(shè)計(jì)中。我們可以通過(guò)福格行為模型去深入的理解用戶(hù)行為發(fā)生的原因。和影響用戶(hù)行為的因素。從而提示我們產(chǎn)品的體驗(yàn)，和不斷地優(yōu)化我們的產(chǎn)品。

福格行為模型，它以BJ Fogg（斯坦福說(shuō)服力科技實(shí)驗(yàn)室主任）命名。表明一個(gè)行為得以發(fā)生，行為者首先需要有進(jìn)行此行為的動(dòng)機(jī)和操作此行為的能力。接著，如果他們有充足的動(dòng)機(jī)和能力來(lái)施行既定行為，他們就會(huì)在被誘導(dǎo)/觸發(fā)時(shí)進(jìn)行。

2-1-1、福格行為三要素

福格將人們的行為拆解為動(dòng)機(jī)、能力、和觸發(fā)條件三個(gè)要素。認(rèn)為只要三個(gè)要素同時(shí)滿(mǎn)足時(shí)行為才會(huì)發(fā)生。表示為B=MAT，其中B（Behavior）是行為，M（Motivation）是動(dòng)機(jī)，A（Ability）是能力，T（Triggers）是觸發(fā)。

這個(gè)例子引用來(lái)自知乎子木牧先生https://www.zhihu.com/question/500859092/answer/2631793047?utm_id=0

我個(gè)人覺(jué)得他的這篇關(guān)于福格行為模型寫(xiě)的很不錯(cuò)。下面大部分內(nèi)容摘錄于這篇文章內(nèi)容。

舉一個(gè)簡(jiǎn)單的例子，你看到朋友圈有人分享了水果的購(gòu)買(mǎi)鏈接，最終你也下單購(gòu)買(mǎi)了。這其中包含的動(dòng)機(jī)、能力和觸發(fā)分別是什么呢？

動(dòng)機(jī)就是對(duì)水果的渴望，能力就是有時(shí)間，有金錢(qián)購(gòu)買(mǎi)商品，而好友的朋友圈則是對(duì)購(gòu)買(mǎi)行為的觸發(fā)。

動(dòng)機(jī)
所謂動(dòng)機(jī)，就是行為的出發(fā)點(diǎn)。動(dòng)機(jī)可以分為3個(gè)類(lèi)別：感覺(jué)、期待和歸屬感?？偟膩?lái)說(shuō)就是為了什么你的目的是什么。

能力
有了足夠的動(dòng)機(jī)之后，用戶(hù)還必須要有能力來(lái)完成行為。能力包含了以下6個(gè)方面：時(shí)間、金錢(qián)、體力、腦力、社會(huì)偏好（社會(huì)的約定俗成、認(rèn)知、從眾等）、非日常（非日常的購(gòu)物方式）。

觸發(fā)條件
觸發(fā)就是行為的刺激點(diǎn)，引導(dǎo)用戶(hù)行為的發(fā)生。在上癮模型中，觸發(fā)可以分為內(nèi)部觸發(fā)和外部觸發(fā)。

在產(chǎn)品設(shè)計(jì)中，我們希望能夠?qū)崿F(xiàn)用戶(hù)自主的內(nèi)部觸發(fā)，比如每天7點(diǎn)鐘，用戶(hù)都能主動(dòng)打開(kāi)到螞蟻森林收取能量。當(dāng)你拿起手機(jī)時(shí)，會(huì)不由自主的打開(kāi)微信。但是很多時(shí)候我們都無(wú)法喚起用戶(hù)內(nèi)心的觸點(diǎn)，只能依靠各種外部觸發(fā)。例如購(gòu)物過(guò)程中常見(jiàn)的各種促銷(xiāo)活動(dòng)的廣告位，或者優(yōu)惠券即將過(guò)期的提醒等。

2-1-2、行動(dòng)曲線(xiàn)

動(dòng)機(jī)、能力、觸發(fā)條件、這三者的關(guān)系是什么呢。動(dòng)機(jī)、能力以及觸發(fā)條件會(huì)構(gòu)成一條行為曲線(xiàn)，用戶(hù)的動(dòng)機(jī)越強(qiáng)，行為過(guò)程中要求的能力越簡(jiǎn)單，加上特定的觸發(fā)情景，用戶(hù)完成行為的幾率也就越高。

這福格行為模型。我在網(wǎng)上整體看了看。很有意思的，他并不是一個(gè)針對(duì)設(shè)計(jì)的一個(gè)行為模型。而是只對(duì)于人的。一大的行為模型。當(dāng)你明白他怎么說(shuō)什么的時(shí)候可以把這個(gè)理論用到很多的方面去。比如生活，比如人際關(guān)系。比如怎么能夠讓你的朋友給你幫個(gè)幫。哈哈哈

第三部分 | 實(shí)例

本來(lái)這部分內(nèi)容是要將各大廠(chǎng)的示例界面拿出來(lái)逐個(gè)說(shuō)說(shuō)的。但是這篇文章，本來(lái)是2023年12月份就要寫(xiě)完的。一直拖到2024了才寫(xiě)完。沒(méi)有了當(dāng)初的激情了。所以這部分示例就只拿我自己做的SaaS平臺(tái)里面一個(gè)小業(yè)務(wù)模塊的界面拿出來(lái)淺談幾句。

整個(gè)就不談什么項(xiàng)目背景、業(yè)務(wù)需求呀，什么的。單純從底層的原理出發(fā)。去淺淺的談一談這個(gè)很平常的界面。首先頁(yè)面上方標(biāo)題的切換、這很成熟的處理方式、在B端設(shè)計(jì)里也是很常見(jiàn)的至少有90%的界面是采集的這種切換方式。為什么其實(shí)很簡(jiǎn)單。就是因?yàn)樗?jiǎn)單高效、而且放置的位置也是頁(yè)面內(nèi)容區(qū)域最明顯的地方。

充值按鈕、也是在你的視覺(jué)相對(duì)會(huì)集中的地方。而且他和下方的操作按鈕也都在一個(gè)區(qū)域。整個(gè)界面其實(shí)就是對(duì)不同信息模塊進(jìn)行不同的劃分和分區(qū)。這樣去處理B端的信息、能夠最大程度上解決界面信息混亂的問(wèn)題。我個(gè)人覺(jué)得B端界面大部分都是像抽屜?；蛘呦褚粋€(gè)整齊的工作太。

作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTU5NzAwOA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。