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ì)師的成長始于對(duì)每一個(gè)項(xiàng)目的獨(dú)特理解，止于對(duì)每一個(gè)細(xì)節(jié)的完美追求。
先贊后收藏、開啟我們的學(xué)習(xí)旅程...
按鈕在我們界面中也是大量存在的一個(gè)設(shè)計(jì)組件。大多數(shù)的設(shè)計(jì)師可能就不會(huì)太在意他，從而導(dǎo)致我們?cè)谠O(shè)計(jì)過程中會(huì)出現(xiàn)一些問題。比如用戶找不到入口、不知道到界面怎么操作等。
在大場規(guī)范里，都對(duì)按鈕有一套完整的組件規(guī)范。在現(xiàn)在的設(shè)計(jì)當(dāng)中，你可以不會(huì)做按鈕但是你要會(huì)用。要知道在什么場景怎么使用這些大廠的組件。
在TDesign中是這樣定義按鈕的；按鈕用于開啟一個(gè)閉環(huán)的操作任務(wù)，如“刪除”對(duì)象、“購買”商品等。在Arco Design的按鈕定義是；按鈕是一種命令組件，可發(fā)起一個(gè)即時(shí)操作。
在各大場規(guī)范里面，對(duì)按鈕的分類出發(fā)的維度不一樣，所以對(duì)按鈕的類型劃分也都不太一樣。但無論他們?cè)趺捶诸悾@樣我們結(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)
用于對(duì)按鈕含義補(bǔ)充解釋，提高按鈕識(shí)別效率。
在三個(gè)大廠規(guī)范里他們對(duì)基礎(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)先級(jí)高于基礎(chǔ)基礎(chǔ)按鈕屬性。
在按鈕尺寸的規(guī)范制定里我更傾向于arco的規(guī)范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。可在不同場景及不同業(yè)務(wù)需求選擇適合尺寸。
各個(gè)規(guī)范對(duì)按鈕形狀的規(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è)原則大概意思是人們?cè)陂喿x時(shí)遵循這某種習(xí)慣。從左到右、從上到下。（其實(shí)吧，我在網(wǎng)上搜了搜，感覺這個(gè)法則也需存在。但不一定是古藤堡提出來的。百度百科也沒有說有古藤堡法則或者原則這一說。而且我百度了一下。最早出現(xiàn)這一說法的是0幾年的一篇文章里。說古藤保法則對(duì)網(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í)對(duì)不同的區(qū)域的注意力是不同的。所以我們?cè)谠O(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年提出的。
菲茨定律是對(duì)人類操作過程中的運(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)茨定律說的就是、我們?cè)诓僮鞯倪^程中。距離越短、目標(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)的大小（S）目標(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è)定律便顯得重要。
我們?cè)谠O(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è)概念中。古藤堡原則告訴我們?cè)趺捶胖冒粹o或重要信息才能讓我們得視覺剛好的注意到他。費(fèi)茨定律的應(yīng)用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶完成目標(biāo)。比如做一場活動(dòng)。你怎么去吸引用戶去點(diǎn)擊呢。或者說用戶的點(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ī)就是對(duì)水果的渴望，能力就是有時(shí)間，有金錢購買商品，而好友的朋友圈則是對(duì)購買行為的觸發(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è)針對(duì)設(shè)計(jì)的一個(gè)行為模型。而是只對(duì)于人的。一大的行為模型。當(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ū)域最明顯的地方。
充值按鈕、也是在你的視覺相對(duì)會(huì)集中的地方。而且他和下方的操作按鈕也都在一個(gè)區(qū)域。整個(gè)界面其實(shí)就是對(duì)不同信息模塊進(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ì)師的成長始于對(duì)每一個(gè)項(xiàng)目的獨(dú)特理解，止于對(duì)每一個(gè)細(xì)節(jié)的完美追求。
先贊后收藏、開啟我們的學(xué)習(xí)旅程...
按鈕在我們界面中也是大量存在的一個(gè)設(shè)計(jì)組件。大多數(shù)的設(shè)計(jì)師可能就不會(huì)太在意他，從而導(dǎo)致我們?cè)谠O(shè)計(jì)過程中會(huì)出現(xiàn)一些問題。比如用戶找不到入口、不知道到界面怎么操作等。
在大場規(guī)范里，都對(duì)按鈕有一套完整的組件規(guī)范。在現(xiàn)在的設(shè)計(jì)當(dāng)中，你可以不會(huì)做按鈕但是你要會(huì)用。要知道在什么場景怎么使用這些大廠的組件。
在TDesign中是這樣定義按鈕的；按鈕用于開啟一個(gè)閉環(huán)的操作任務(wù)，如“刪除”對(duì)象、“購買”商品等。在Arco Design的按鈕定義是；按鈕是一種命令組件，可發(fā)起一個(gè)即時(shí)操作。
在各大場規(guī)范里面，對(duì)按鈕的分類出發(fā)的維度不一樣，所以對(duì)按鈕的類型劃分也都不太一樣。但無論他們?cè)趺捶诸悾@樣我們結(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)
用于對(duì)按鈕含義補(bǔ)充解釋，提高按鈕識(shí)別效率。
在三個(gè)大廠規(guī)范里他們對(duì)基礎(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)先級(jí)高于基礎(chǔ)基礎(chǔ)按鈕屬性。
在按鈕尺寸的規(guī)范制定里我更傾向于arco的規(guī)范、把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。可在不同場景及不同業(yè)務(wù)需求選擇適合尺寸。
各個(gè)規(guī)范對(duì)按鈕形狀的規(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è)原則大概意思是人們?cè)陂喿x時(shí)遵循這某種習(xí)慣。從左到右、從上到下。（其實(shí)吧，我在網(wǎng)上搜了搜，感覺這個(gè)法則也需存在。但不一定是古藤堡提出來的。百度百科也沒有說有古藤堡法則或者原則這一說。而且我百度了一下。最早出現(xiàn)這一說法的是0幾年的一篇文章里。說古藤保法則對(duì)網(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í)對(duì)不同的區(qū)域的注意力是不同的。所以我們?cè)谠O(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年提出的。
菲茨定律是對(duì)人類操作過程中的運(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)茨定律說的就是、我們?cè)诓僮鞯倪^程中。距離越短、目標(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)的大小（S）目標(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è)定律便顯得重要。
我們?cè)谠O(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è)概念中。古藤堡原則告訴我們?cè)趺捶胖冒粹o或重要信息才能讓我們得視覺剛好的注意到他。費(fèi)茨定律的應(yīng)用讓我們可能更高效和快速的完成我們的操作。那么下面這條送你的概念就是如果讓用戶完成目標(biāo)。比如做一場活動(dòng)。你怎么去吸引用戶去點(diǎn)擊呢。或者說用戶的點(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ī)就是對(duì)水果的渴望，能力就是有時(shí)間，有金錢購買商品，而好友的朋友圈則是對(duì)購買行為的觸發(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è)針對(duì)設(shè)計(jì)的一個(gè)行為模型。而是只對(duì)于人的。一大的行為模型。當(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ū)域最明顯的地方。
充值按鈕、也是在你的視覺相對(duì)會(huì)集中的地方。而且他和下方的操作按鈕也都在一個(gè)區(qū)域。整個(gè)界面其實(shí)就是對(duì)不同信息模塊進(jìn)行不同的劃分和分區(qū)。這樣去處理B端的信息、能夠最大程度上解決界面信息混亂的問題。我個(gè)人覺得B端界面大部分都是像抽屜。或者像一個(gè)整齊的工作太。
藍(lán)藍(lán)設(shè)計(jì)(paul-jarrel.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ì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(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://paul-jarrel.com