2024-10-24 藍藍小助手
當你沒有看之前，你會覺得按鈕嘛。有什么不清楚的呢，有什么不會用呢。是的呀。在我寫這篇文章之前也是這樣的想法。但是當我去搜集了一堆的關于按鈕的資料后。感覺這東西還真有意思。你可以用你的感性去做設計但是你也要明白理性的設計才能更好的讓設計決策更加準確、更容易說服需求方、從而更好得服務于用戶、賦能于業務。
唐納德·A·諾曼在《設計心理學》中說設計是一種解決問題的方式，是一種創新的過程。設計師的成長始于對每一個項目的獨特理解，止于對每一個細節的完美追求。
先贊后收藏、開啟我們的學習旅程...
按鈕在我們界面中也是大量存在的一個設計組件。大多數的設計師可能就不會太在意他，從而導致我們在設計過程中會出現一些問題。比如用戶找不到入口、不知道到界面怎么操作等。
在大場規范里，都對按鈕有一套完整的組件規范。在現在的設計當中，你可以不會做按鈕但是你要會用。要知道在什么場景怎么使用這些大廠的組件。
在TDesign中是這樣定義按鈕的；按鈕用于開啟一個閉環的操作任務，如“刪除”對象、“購買”商品等。在Arco Design的按鈕定義是；按鈕是一種命令組件，可發起一個即時操作。
在各大場規范里面，對按鈕的分類出發的維度不一樣，所以對按鈕的類型劃分也都不太一樣。但無論他們怎么分類，這樣我們結合使用場景去用就不會有什么問題。因為我做的系統是用的ant design的規范框架。所以下面是總結了各大規范的內容的結合體。旨在更好理解按鈕。（哈哈好像不怎么搭嘎，不重要）
本文按鈕基礎規范內容基于一下三個大廠規范而來
我們常用的基礎按鈕主要就分為、次要按鈕、主要按鈕、文字按鈕、圖標按鈕、在按鈕中添加圖標、這幾種按鈕形式。
① 次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
② 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
③ 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如表格組件中的操作列。
④ 圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。
-需要在較小的空間內展示盡量多的按鈕。-使用純圖標按鈕必須有 Tooltip 提示按鈕含義。
⑤ 在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
在三個大廠規范里他們對基礎按鈕的劃分也差不多，只是他們出發的依據不一樣而已。大同小異。你可以理解東西就那么多東西至于怎么劃分。條條大路通羅馬嘛。我個人感覺ant的按鈕規范做的會更普世。其他兩個平臺的做的就更簡單純粹。
在按鈕的狀態里如果從操作上出發應該分為可用、禁用、加載。
如果站在強調性上去看那就可以分為警告、危險、成功、可以與基礎按鈕同時生效，優先級高于基礎基礎按鈕屬性。
在按鈕尺寸的規范制定里我更傾向于arco的規范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認為尺寸「中」?？稍诓煌瑘鼍凹安煌瑯I務需求選擇適合尺寸。
各個規范對按鈕形狀的規范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
在基礎常規按鈕之外還有那么一批特殊的按鈕需要注意。虛線按鈕、幽靈按鈕
用于引導用戶在一個區域中添加內容。
置于復雜或較深的背景中，避免按鈕突兀地破壞背景的整體性。該場景下可靈活定制樣式。
按鈕的布局位置也是一個很講究的事情。我們現在基本大廠的規范也都是從一些基礎的概念出發所延伸出來的解決方案。所以我們了解了解這些普通的概念還是很有必要的事情。
在我要寫這篇文章時，在網上翻找資料。于是乎就發現了在我們現在很多很常規的界面設計里面。各個元素的位置是有很多基礎概念做理論支撐的。下面我們來了解一下這些有趣的概念吧。
古藤堡法則或者原則，劇說是由14世紀西方活字印刷術發明者古藤堡提出的。他這個原則大概意思是人們在閱讀時遵循這某種習慣。從左到右、從上到下。（其實吧，我在網上搜了搜，感覺這個法則也需存在。但不一定是古藤堡提出來的。百度百科也沒有說有古藤堡法則或者原則這一說。而且我百度了一下。最早出現這一說法的是0幾年的一篇文章里。說古藤保法則對網頁排版有幫助）
我們暫且就先相信這些基礎的規則是古藤堡提出來的。那么根據他的這些原則，得出了我們現在熟知的一些理論。（這里吐槽一下。從左往右是近代西方傳進我國的。我們國家的書籍是從上到下從右往左，新中國成立之后才采取了我們現在的這種閱讀方式和習慣。）根據古藤堡原則我們可以得到一張古藤堡圖。
在這張圖中、把我們閱讀的過程用四個區域進行了劃分。第一視覺區、強休息區、弱休息區、終端休息區。這張圖所表達的是在我們的閱讀過程中我們的注意力在不同的區域是有強弱之分的。
有了古藤堡原則和他的這張圖、我們發現在我們視覺閱讀信息時對不同的區域的注意力是不同的。所以我們在設計的時候。會將主要的信息放到注意力強的位置上去。
比如在寫一些文件時。我們會把日期和簽名放到右下角的區域。在B端頁面中我們會經常把標題放到左上角、然后把按鈕放到右下角去展示。這些都和古藤堡原則有很大的關系。
費茨定律可以簡單歸納為、幕布的大小和距離會影響到操作者移動目標的速度和準確性。是美國人類工程學部門的主任保羅·費茨博士在1954年提出的。
菲茨定律是對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行了研究。所總結出來的定律。我們簡要的介紹一下這個定律。
簡單的說費茨定律說的就是、我們在操作的過程中。距離越短、目標越大、用時越少。具體說一下費茨定律指的是，使用設備（比如我們的鼠標）到達一個目標（比如按鈕）的時間和下面兩個因素有關系。
01、設備當前的位置離目標位置的距離（D）。距離越長、所用時間越長。
02、目標的大?。⊿）目標越大，所用時間越短
該定律經常運用于鼠標從點A到點B的運動。例如，以一個更有效的途徑使可接近性更大和提高點擊率去放置內容，這個定律便顯得重要。
我們在設計里主要會應用費茨定律的幾個點來優化我們的設計。1、放大可點擊元素的尺寸，但不能無限放大；2、減少移動的距離，綜合權衡效率。防錯、安全等要素；3、相關元素靠近；4、屏幕的邊緣和角落無限大；5、方向利用
上面兩個概念中。古藤堡原則告訴我們怎么放置按鈕或重要信息才能讓我們得視覺剛好的注意到他。費茨定律的應用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶完成目標。比如做一場活動。你怎么去吸引用戶去點擊呢。或者說用戶的點擊與哪些條件相關呢。
什么事福格行為模型、在體驗設計中。我們可以通過福格行為模型去深入的理解用戶行為發生的原因。和影響用戶行為的因素。從而提示我們產品的體驗，和不斷地優化我們的產品。
福格行為模型，它以BJ Fogg（斯坦福說服力科技實驗室主任）命名。表明一個行為得以發生，行為者首先需要有進行此行為的動機和操作此行為的能力。接著，如果他們有充足的動機和能力來施行既定行為，他們就會在被誘導/觸發時進行。
福格將人們的行為拆解為動機、能力、和觸發條件三個要素。認為只要三個要素同時滿足時行為才會發生。表示為B=MAT，其中B（Behavior）是行為，M（Motivation）是 動機，A（Ability）是能力，T（Triggers）是觸發。
這個例子引用來自知乎子木牧先生https://www.zhihu.com/question/500859092/answer/2631793047?utm_id=0
我個人覺得他的這篇關于福格行為模型寫的很不錯。下面大部分內容摘錄于這篇文章內容。
舉一個簡單的例子，你看到朋友圈有人分享了水果的購買鏈接，最終你也下單購買了。這其中包含的動機、能力和觸發分別是什么呢？
動機就是對水果的渴望，能力就是有時間，有金錢購買商品，而好友的朋友圈則是對購買行為的觸發。
動機
所謂動機，就是行為的出發點。動機可以分為3個類別：感覺、期待和歸屬感?？偟膩碚f就是為了什么你的目的是什么。
能力
有了足夠的動機之后，用戶還必須要有能力來完成行為。能力包含了以下6個方面：時間、金錢、體力、腦力、社會偏好（社會的約定俗成、認知、從眾等）、非日常（非日常的購物方式）。
觸發條件
觸發就是行為的刺激點，引導用戶行為的發生。在上癮模型中，觸發可以分為內部觸發和外部觸發。
在產品設計中，我們希望能夠實現用戶自主的內部觸發，比如每天7點鐘，用戶都能主動打開到螞蟻森林收取能量。當你拿起手機時，會不由自主的打開微信。但是很多時候我們都無法喚起用戶內心的觸點，只能依靠各種外部觸發。例如購物過程中常見的各種促銷活動的廣告位，或者優惠券即將過期的提醒等。
動機、能力、觸發條件、這三者的關系是什么呢。動機、能力以及觸發條件會構成一條行為曲線，用戶的動機越強，行為過程中要求的能力越簡單，加上特定的觸發情景，用戶完成行為的幾率也就越高。
這福格行為模型。我在網上整體看了看。很有意思的，他并不是一個針對設計的一個行為模型。而是只對于人的。一大的行為模型。當你明白他怎么說什么的時候可以把這個理論用到很多的方面去。比如生活，比如人際關系。比如怎么能夠讓你的朋友給你幫個幫。哈哈哈
本來這部分內容是要將各大廠的示例界面拿出來逐個說說的。但是這篇文章，本來是2023年12月份就要寫完的。一直拖到2024了才寫完。沒有了當初的激情了。所以這部分示例就只拿我自己做的SaaS平臺里面一個小業務模塊的界面拿出來淺談幾句。
整個就不談什么項目背景、業務需求呀，什么的。單純從底層的原理出發。去淺淺的談一談這個很平常的界面。首先頁面上方標題的切換、這很成熟的處理方式、在B端設計里也是很常見的至少有90%的界面是采集的這種切換方式。為什么其實很簡單。就是因為他簡單高效、而且放置的位置也是頁面內容區域最明顯的地方。
充值按鈕、也是在你的視覺相對會集中的地方。而且他和下方的操作按鈕也都在一個區域。整個界面其實就是對不同信息模塊進行不同的劃分和分區。這樣去處理B端的信息、能夠最大程度上解決界面信息混亂的問題。我個人覺得B端界面大部分都是像抽屜?；蛘呦褚粋€整齊的工作太。
當你沒有看之前，你會覺得按鈕嘛。有什么不清楚的呢，有什么不會用呢。是的呀。在我寫這篇文章之前也是這樣的想法。但是當我去搜集了一堆的關于按鈕的資料后。感覺這東西還真有意思。你可以用你的感性去做設計但是你也要明白理性的設計才能更好的讓設計決策更加準確、更容易說服需求方、從而更好得服務于用戶、賦能于業務。
唐納德·A·諾曼在《設計心理學》中說設計是一種解決問題的方式，是一種創新的過程。設計師的成長始于對每一個項目的獨特理解，止于對每一個細節的完美追求。
先贊后收藏、開啟我們的學習旅程...
按鈕在我們界面中也是大量存在的一個設計組件。大多數的設計師可能就不會太在意他，從而導致我們在設計過程中會出現一些問題。比如用戶找不到入口、不知道到界面怎么操作等。
在大場規范里，都對按鈕有一套完整的組件規范。在現在的設計當中，你可以不會做按鈕但是你要會用。要知道在什么場景怎么使用這些大廠的組件。
在TDesign中是這樣定義按鈕的；按鈕用于開啟一個閉環的操作任務，如“刪除”對象、“購買”商品等。在Arco Design的按鈕定義是；按鈕是一種命令組件，可發起一個即時操作。
在各大場規范里面，對按鈕的分類出發的維度不一樣，所以對按鈕的類型劃分也都不太一樣。但無論他們怎么分類，這樣我們結合使用場景去用就不會有什么問題。因為我做的系統是用的ant design的規范框架。所以下面是總結了各大規范的內容的結合體。旨在更好理解按鈕。（哈哈好像不怎么搭嘎，不重要）
本文按鈕基礎規范內容基于一下三個大廠規范而來
我們常用的基礎按鈕主要就分為、次要按鈕、主要按鈕、文字按鈕、圖標按鈕、在按鈕中添加圖標、這幾種按鈕形式。
① 次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
② 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
③ 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如表格組件中的操作列。
④ 圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。
-需要在較小的空間內展示盡量多的按鈕。-使用純圖標按鈕必須有 Tooltip 提示按鈕含義。
⑤ 在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
在三個大廠規范里他們對基礎按鈕的劃分也差不多，只是他們出發的依據不一樣而已。大同小異。你可以理解東西就那么多東西至于怎么劃分。條條大路通羅馬嘛。我個人感覺ant的按鈕規范做的會更普世。其他兩個平臺的做的就更簡單純粹。
在按鈕的狀態里如果從操作上出發應該分為可用、禁用、加載。
如果站在強調性上去看那就可以分為警告、危險、成功、可以與基礎按鈕同時生效，優先級高于基礎基礎按鈕屬性。
在按鈕尺寸的規范制定里我更傾向于arco的規范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認為尺寸「中」?？稍诓煌瑘鼍凹安煌瑯I務需求選擇適合尺寸。
各個規范對按鈕形狀的規范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
在基礎常規按鈕之外還有那么一批特殊的按鈕需要注意。虛線按鈕、幽靈按鈕
用于引導用戶在一個區域中添加內容。
置于復雜或較深的背景中，避免按鈕突兀地破壞背景的整體性。該場景下可靈活定制樣式。
按鈕的布局位置也是一個很講究的事情。我們現在基本大廠的規范也都是從一些基礎的概念出發所延伸出來的解決方案。所以我們了解了解這些普通的概念還是很有必要的事情。
在我要寫這篇文章時，在網上翻找資料。于是乎就發現了在我們現在很多很常規的界面設計里面。各個元素的位置是有很多基礎概念做理論支撐的。下面我們來了解一下這些有趣的概念吧。
古藤堡法則或者原則，劇說是由14世紀西方活字印刷術發明者古藤堡提出的。他這個原則大概意思是人們在閱讀時遵循這某種習慣。從左到右、從上到下。（其實吧，我在網上搜了搜，感覺這個法則也需存在。但不一定是古藤堡提出來的。百度百科也沒有說有古藤堡法則或者原則這一說。而且我百度了一下。最早出現這一說法的是0幾年的一篇文章里。說古藤保法則對網頁排版有幫助）
我們暫且就先相信這些基礎的規則是古藤堡提出來的。那么根據他的這些原則，得出了我們現在熟知的一些理論。（這里吐槽一下。從左往右是近代西方傳進我國的。我們國家的書籍是從上到下從右往左，新中國成立之后才采取了我們現在的這種閱讀方式和習慣。）根據古藤堡原則我們可以得到一張古藤堡圖。
在這張圖中、把我們閱讀的過程用四個區域進行了劃分。第一視覺區、強休息區、弱休息區、終端休息區。這張圖所表達的是在我們的閱讀過程中我們的注意力在不同的區域是有強弱之分的。
有了古藤堡原則和他的這張圖、我們發現在我們視覺閱讀信息時對不同的區域的注意力是不同的。所以我們在設計的時候。會將主要的信息放到注意力強的位置上去。
比如在寫一些文件時。我們會把日期和簽名放到右下角的區域。在B端頁面中我們會經常把標題放到左上角、然后把按鈕放到右下角去展示。這些都和古藤堡原則有很大的關系。
費茨定律可以簡單歸納為、幕布的大小和距離會影響到操作者移動目標的速度和準確性。是美國人類工程學部門的主任保羅·費茨博士在1954年提出的。
菲茨定律是對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行了研究。所總結出來的定律。我們簡要的介紹一下這個定律。
簡單的說費茨定律說的就是、我們在操作的過程中。距離越短、目標越大、用時越少。具體說一下費茨定律指的是，使用設備（比如我們的鼠標）到達一個目標（比如按鈕）的時間和下面兩個因素有關系。
01、設備當前的位置離目標位置的距離（D）。距離越長、所用時間越長。
02、目標的大?。⊿）目標越大，所用時間越短
該定律經常運用于鼠標從點A到點B的運動。例如，以一個更有效的途徑使可接近性更大和提高點擊率去放置內容，這個定律便顯得重要。
我們在設計里主要會應用費茨定律的幾個點來優化我們的設計。1、放大可點擊元素的尺寸，但不能無限放大；2、減少移動的距離，綜合權衡效率。防錯、安全等要素；3、相關元素靠近；4、屏幕的邊緣和角落無限大；5、方向利用
上面兩個概念中。古藤堡原則告訴我們怎么放置按鈕或重要信息才能讓我們得視覺剛好的注意到他。費茨定律的應用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶完成目標。比如做一場活動。你怎么去吸引用戶去點擊呢。或者說用戶的點擊與哪些條件相關呢。
什么事福格行為模型、在體驗設計中。我們可以通過福格行為模型去深入的理解用戶行為發生的原因。和影響用戶行為的因素。從而提示我們產品的體驗，和不斷地優化我們的產品。
福格行為模型，它以BJ Fogg（斯坦福說服力科技實驗室主任）命名。表明一個行為得以發生，行為者首先需要有進行此行為的動機和操作此行為的能力。接著，如果他們有充足的動機和能力來施行既定行為，他們就會在被誘導/觸發時進行。
福格將人們的行為拆解為動機、能力、和觸發條件三個要素。認為只要三個要素同時滿足時行為才會發生。表示為B=MAT，其中B（Behavior）是行為，M（Motivation）是 動機，A（Ability）是能力，T（Triggers）是觸發。
這個例子引用來自知乎子木牧先生https://www.zhihu.com/question/500859092/answer/2631793047?utm_id=0
我個人覺得他的這篇關于福格行為模型寫的很不錯。下面大部分內容摘錄于這篇文章內容。
舉一個簡單的例子，你看到朋友圈有人分享了水果的購買鏈接，最終你也下單購買了。這其中包含的動機、能力和觸發分別是什么呢？
動機就是對水果的渴望，能力就是有時間，有金錢購買商品，而好友的朋友圈則是對購買行為的觸發。
動機
所謂動機，就是行為的出發點。動機可以分為3個類別：感覺、期待和歸屬感?？偟膩碚f就是為了什么你的目的是什么。
能力
有了足夠的動機之后，用戶還必須要有能力來完成行為。能力包含了以下6個方面：時間、金錢、體力、腦力、社會偏好（社會的約定俗成、認知、從眾等）、非日常（非日常的購物方式）。
觸發條件
觸發就是行為的刺激點，引導用戶行為的發生。在上癮模型中，觸發可以分為內部觸發和外部觸發。
在產品設計中，我們希望能夠實現用戶自主的內部觸發，比如每天7點鐘，用戶都能主動打開到螞蟻森林收取能量。當你拿起手機時，會不由自主的打開微信。但是很多時候我們都無法喚起用戶內心的觸點，只能依靠各種外部觸發。例如購物過程中常見的各種促銷活動的廣告位，或者優惠券即將過期的提醒等。
動機、能力、觸發條件、這三者的關系是什么呢。動機、能力以及觸發條件會構成一條行為曲線，用戶的動機越強，行為過程中要求的能力越簡單，加上特定的觸發情景，用戶完成行為的幾率也就越高。
這福格行為模型。我在網上整體看了看。很有意思的，他并不是一個針對設計的一個行為模型。而是只對于人的。一大的行為模型。當你明白他怎么說什么的時候可以把這個理論用到很多的方面去。比如生活，比如人際關系。比如怎么能夠讓你的朋友給你幫個幫。哈哈哈
本來這部分內容是要將各大廠的示例界面拿出來逐個說說的。但是這篇文章，本來是2023年12月份就要寫完的。一直拖到2024了才寫完。沒有了當初的激情了。所以這部分示例就只拿我自己做的SaaS平臺里面一個小業務模塊的界面拿出來淺談幾句。
整個就不談什么項目背景、業務需求呀，什么的。單純從底層的原理出發。去淺淺的談一談這個很平常的界面。首先頁面上方標題的切換、這很成熟的處理方式、在B端設計里也是很常見的至少有90%的界面是采集的這種切換方式。為什么其實很簡單。就是因為他簡單高效、而且放置的位置也是頁面內容區域最明顯的地方。
充值按鈕、也是在你的視覺相對會集中的地方。而且他和下方的操作按鈕也都在一個區域。整個界面其實就是對不同信息模塊進行不同的劃分和分區。這樣去處理B端的信息、能夠最大程度上解決界面信息混亂的問題。我個人覺得B端界面大部分都是像抽屜?；蛘呦褚粋€整齊的工作太。
藍藍設計(www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發