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