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

2024-10-24 藍(lán)藍(lán)小助手系統(tǒng)UI設(shè)計文章及欣賞

寫在前面

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

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

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

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

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

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

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

在各大場規(guī)范里面，對按鈕的分類出發(fā)的維度不一樣，所以對按鈕的類型劃分也都不太一樣。但無論他們怎么分類，這樣我們結(jié)合使用場景去用就不會有什么問題。因為我做的系統(tǒng)是用的ant design的規(guī)范框架。所以下面是總結(jié)了各大規(guī)范的內(nèi)容的結(jié)合體。旨在更好理解按鈕。（哈哈好像不怎么搭嘎，不重要）

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

1、常規(guī)按鈕

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

① 次按鈕
常規(guī)按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠(yuǎn)是最安全的選擇。

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

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

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

⑤ 在按鈕中添加圖標(biāo)
用于對按鈕含義補充解釋，提高按鈕識別效率。

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

2、按鈕狀態(tài)

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

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

3、按鈕尺寸

在按鈕尺寸的規(guī)范制定里我更傾向于arco的規(guī)范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」?？稍诓煌瑘鼍凹安煌瑯I(yè)務(wù)需求選擇適合尺寸。

4、按鈕形狀

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

5、特殊按鈕

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

虛線按鈕

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

幽靈按鈕

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

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

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

1、兩個概念

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

1-1、古藤堡法則

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

1-1-1、古藤堡圖表

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

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

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

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

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

1-2、費茨定律

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

菲茨定律是對人類操作過程中的運動特征、運動時間、運動范圍和運動準(zhǔn)確性進(jìn)行了研究。所總結(jié)出來的定律。我們簡要的介紹一下這個定律。

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

簡單的說費茨定律說的就是、我們在操作的過程中。距離越短、目標(biāo)越大、用時越少。具體說一下費茨定律指的是，使用設(shè)備（比如我們的鼠標(biāo)）到達(dá)一個目標(biāo)（比如按鈕）的時間和下面兩個因素有關(guān)系。

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

02、目標(biāo)的大小（S）目標(biāo)越大，所用時間越短

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

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

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

2、不夠吃的在送一個

上面兩個概念中。古藤堡原則告訴我們怎么放置按鈕或重要信息才能讓我們得視覺剛好的注意到他。費茨定律的應(yīng)用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶完成目標(biāo)。比如做一場活動。你怎么去吸引用戶去點擊呢?；蛘哒f用戶的點擊與哪些條件相關(guān)呢。

2-1、福格行為模型

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

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

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

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

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

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

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

動機就是對水果的渴望，能力就是有時間，有金錢購買商品，而好友的朋友圈則是對購買行為的觸發(fā)。

動機
所謂動機，就是行為的出發(fā)點。動機可以分為3個類別：感覺、期待和歸屬感?？偟膩碚f就是為了什么你的目的是什么。

能力
有了足夠的動機之后，用戶還必須要有能力來完成行為。能力包含了以下6個方面：時間、金錢、體力、腦力、社會偏好（社會的約定俗成、認(rèn)知、從眾等）、非日常（非日常的購物方式）。

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

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

2-1-2、行動曲線

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

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

第三部分 | 實例

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

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

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

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