轉載請注明：學UI網》高級設計師最關鍵的能力是什么？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1、操作型Dashboard
操作儀表盤用于顯示當前用戶在產品中的狀態，顯示與時間相關的關鍵信息。
例如后臺數據分析中，操作儀表盤包含：網站的活躍用戶、熱門社交推薦和每分鐘瀏覽量等數據。
▲ 在谷歌分析的實時儀表盤中，用戶能一目了然地查看所有用戶、新增用戶等一系列數據。操作型儀表盤中通常包含一些簡單的條形圖、折線圖等基本圖表。
2、分析型Dashboard
分析型儀表盤用于向用戶展示關鍵的數據信息，以數據為中心，并盡可能多地顯示相關聯的數據圖表。
分析型儀表盤應該以關鍵的數據為中心，并盡量減少圖形元素。
▲ 在Manson Yarnell的儀表盤中，更注重數據前后的對比和關聯性，并將這種關系通過圖表的形式展示出來，通過對比，我們能更容易看到產品的數據情況，比如瀏覽量是比上個月漲了還是降了、漲了多少。
3、平臺型Dashboard
平臺型儀表盤用于讓用戶訪問社交平臺上與帳戶相關的控件、工具和分析。
▲ 在YouTube的后臺頁面中，通過簡單的初始視圖就能顯示用戶的最新視頻以及每個視頻的播放量等數據信息。
1、確定用戶需要什么
首先要了解受眾。因為只有了解用戶，才能夠回答一個關鍵的問題：用戶希望從這個儀表盤中得到什么？
要先明確用戶希望在儀表盤上想到看到的幾個要點，然后應用F型和Z型閱讀模式，構建相應的頁面。如果儀表盤上的信息太多，有可能會讓訪問后臺的用戶不知所措。
通過將所有的信息和數據合理地組合到一個頁面上，再使用適當的留白來平衡畫面，為數據創造呼吸空間。
2、在儀表盤中添加互動
在儀表板上添加響應性互動，可以讓用戶自己決定去關注哪些數據。讓用戶能夠控制儀表盤，很大程度上更符合用戶差異化的需求。
▲ Cuberto將后臺儀表盤設計成可以左右滑動的樣式，這個設計有點像可以左右滑動的兩塊黑板，既可以看到兩部分不一樣的內容，也能通過滑動展開看到更多的細節內容。
3、以關鍵數據作為先導
有的儀表盤設計得很簡潔，用大尺寸且加粗的字體來展示數據，讓用戶更清晰地明確信息。
▲ 這個Dashboard版式時尚，風格上很簡潔，有很多留白和加粗的數據。這樣呈現數據可以幫助用戶快速看到哪些內容是重要的，節省用戶時間。
▲ 整個頁面通過清晰的圖表形式呈現信息，我們能明確看到數據的變化情況，雖然沒有使用太多的文字信息，但主次分明的數據做到了很好的透視。
4、規劃儀表盤信息架構
在設計儀表盤時，考慮信息架構和層級結構，來確定需要哪些內容卡片以及這些卡片要放在什么位置。
▲ 深色背景的使用在組件之間形成很酷的對比，關鍵數據占據中心位置。左側導航欄和右側卡片式信息在設計上遵循了標準的格式塔原則。
▲ 這個加密貨幣儀表盤以賬戶余額為線索，將最重要的信息放在用戶第一眼就能看到的地方，其他信息會根據內容重要程度，合理調整在頁面的位置。
5、使用多樣的視圖樣式
儀表盤設計也需要變化，通過使用不同的視圖布局來保持整體的簡潔。
▲ 在這個儀表盤中，用戶可以按日期篩選數據、在餐廳之間切換，還能看到關于預訂、付款、員工輪班和外部供應商等很多種信息，同時整個頁面仍然能保持很干凈、簡潔。
6、使用一致的設計方案
通常儀表盤中包含各種數據圖表，設計樣式上很難做到統一，但這并不意味著儀表盤不需要考慮視覺美觀。
▲ 協調的配色和多樣的圖表樣式讓整個頁面看起來很有設計感，環形圖、餅圖和地圖的搭配讓數據呈現更豐富。
▲ 這個儀表盤通過明亮、統一的配色，讓數據圖表更加清晰、整潔，導航更加明確。
慢慢來比較快，希望對你有所幫助！
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉載請注明：學UI網》儀表盤(Dashboard)設計的6個要點，都幫你總結好了！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
下面通過發現問題和案例修改來進行分析（案例來源于黑馬家族內部學員的初次作業）。
好了，看完修改前后的對比之后，我們開始進一步分析，從上到下一起來看一下吧！
頭部導航欄區域
功能層面來說，發布既然運用高亮的處理，證明該功能是相對比較重要的，放在手勢盲區操作體驗不是很友好。
右側的兩個功能圖標距離太近，點擊過程中容易造成誤操作，兩個圖標的視覺不平衡，不能以高度來定標準，要看整體的面積占比。
最后，發布、搜索、功能圖標之間的間距沒有做規范設計，導致設計不夠嚴謹，視覺協調度和節奏感沒有呈現出來。
頂部分類導航區域
這個部分問題不是很大，類別之間的間距可以適當增加，如果是可以左右滑動的，末尾最好再新增一個，把可滑動的樣式體現出來。
Banner 圖區域
輪播 Banner 圖采用通欄的處理，會將整個界面一分為三（頭部區域、Banner 區域、作品區域），如果界面邊距較大的時候，這樣處理不是很理想，會使得整個界面不夠連貫。
輪播點的處理不建議使用灰色來表現，不僅區分不明顯，配色上面也顯得不夠干凈整潔。
Banner 圖本身的質量也是需要注意的，站在輸出作品的角度來說，圖片的質量會影響整個作品的氣質。而且這個圖沒有任何主題，設計的真實感無法得到體現。
作品（菜譜）區域
整個界面篇幅較大的區域就是推薦的各類菜譜，第一眼看過去，是不是圖片顯得沒有食欲啦！針對美食類作品，只有食物本身的食欲感才能吸引用戶去點擊學習。
菜譜名稱、作者信息、收藏與收藏數的顯示親密關系處理不合適，關聯性被分斷了。
間距留白沒有掌握好數字關系，顯得比較擁擠。直角的封面圖顯得有些生硬，親和力不是很強。
底部標簽欄
底部標簽欄最主要的就是圖標設計，圖標設計的規范性需要注重一下。比如針對線性圖標來說，描邊粗細的統一、圓角值的統一和風格的統一等需要重點對待。
其次就是點擊狀態和默認狀態的區分，圖標利用顏色深淺進行區分也是可以的，文字區域的區分也需要進行深淺的對比。
以上便是針對這個界面發現的一些在 UI 層面的問題，接下來我們一起針對這些問題進行修改。
針對羅列出來的問題，下面進行一些修改，設計屬于主觀表達，僅代表黑馬哥自己的想法。不足的地方歡迎大家留言指正，互相進步。
頭部導航欄區域
為了方便用戶發布內容，我將發布按鈕移出導航欄，放置在底部標簽欄。將右側的兩個功能圖標拆分為左右兩側布局，優化了間距和布局細節。
功能圖標繪制上面三條橫線做了長短變化，顯得更靈動。整體圖標的高度要比通知圖標的小一點，以此來平衡它們之間的面積差異。
頂部分類導航區域
這個部分優化了文字之間的間距，然后通過字體大小和顏色深淺來區分點擊和默認狀態的差別，將短線裝飾改為弧線，弧線作為符號基因運用到底部標簽欄的圖標設計中，這里是作為視覺符號的延續。
Banner 圖區域
輪播 Banner 圖本身沒有做，本期案例只是 UI 層面的修改。優化了 Banner 圖的比例，采用 8:3 的比例進行計算，取 4 整除的高度數值。輪播點的設計通常有數字、小圓點、小短線、進度形式等，這里采用進度形式來表達。
作品（菜譜）區域
這個部分調整比較大，從內容到布局結構都做了調整。首先將固定尺寸的封面圖改為寬度固定高度自定義的瀑布流設計，滿足用戶的不同拍攝需求，對圖片設置了圓角處理，增強親和力。
將標題、作者信息、收藏數據統計等信息進行整合，集中布局展示，增加內容之間的親密關系。新增了標簽，由于菜譜種類較多，通過標簽更容易搜索到同類菜譜。
收藏圖標加數字來體現之前的文字表達形式，用戶更容易理解，采用愛心圖標既能表示喜歡也能帶有收藏的作用，點擊欲更強。
單行標題適配為最多兩行顯示，方便用戶為自己的菜譜名稱增加修飾詞。這里需要考慮最大值的情況，設計的時候需要體現出超出最大值的設計樣式。
最后就是選擇了拍攝質量更好的圖片來填充，作為作品輸出來說，配圖的質量還是至關重要的。來看一下這個部分的最終效果，對比一下就可以感受出前后視覺感的差異。
底部標簽欄
將發布按鈕布局在中間位置，做突出形式，吸引用戶發布內容，豐富平臺的作品量和提高用戶參與度?？梢圆季衷跇藴实牡撞繕撕灆趦炔浚部梢宰鐾钩鲲@示，這里嘗試了兩個版本。
優化了圖標設計，統一了描邊值和圓角值，用小弧線作為視覺符號進行點綴。點擊狀態換成面性圖標，區分更加明顯，顯得也更為成熟穩重。文字需要體現當前狀態和默認狀態的差異，這里使用品牌色來區分，也可以使用深淺不同的灰色來體現。
通過對發現的問題進行調整之后，完成了最終的設計案例優化。這個案例比較簡單，通過案例想要說明的點是：無論簡單還是復雜，都要考慮好每一個細節的深入，也要對每一個元素的設計有自己的設計想法。每一個界面都要體現出設計規范、設計質量和自己的設計態度，只有作品成熟才能說服別人，獲得認可。
本次案例修改的大體流程是：分析問題所在、組織優化思路、調整內容結構、設計高保真原型、填充內容完成最終 UI 稿。
最后，感謝大家的閱讀學習，希望對大家能有一定的幫助，后續將會繼續帶來更多案例的修改分析，我們互相進步。
原文地址：黑馬家族（公眾號）
原文地址：UX小學（公眾號）
作者：小學鴨
轉載請注明：學UI網》配色 | 總監說顏色丑，我調了調確實好看多了！！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計系統里面所有涉及到組件圓角值，都要基于8網格來定義。大圓角一般會用在頁面級別的組件設計，比如沉浸式浮層或者彈窗等。
包括整個系統頁面級別的布局，都需要基于8pt網格來建立規則。上圖是web端和移動端基于8pt的布局系統，需要確保水槽和邊距是遵循這個規則的。
以上就是一個8pt網格設計系統的大致思路框架，當然除了上面這些，一個設計系統里面需要涉及到8pt網格系統還有響應式布局等，大家先一步步深入了解學習，將這套理念應用在項目中，發揮最大價值。
最后今天既然講到了設計系統，我正巧也找到了iOS15的figma格式的UIKT，是在線版本的，可直接打開。大家可提前研究下iOS 15的一些新的規則與變化。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
早在平面設計開始之初，就有對“柵格”的使用記錄。（不過那時不叫柵格，而叫網格）因為印刷機器以及切割工具的限制，導致在頁面的板式設計需要一定的出血線用于防止書籍內容的缺失，因此出現了當時非?；鸨摹镀矫嬖O計中的網格系統》一書。
雖然這是一本非常老的書，但是設計本身就是相通，將其核心思想用在圖標設計、網頁設計、B端設計當中都有著明確的指導意義。
而在設計（網頁端、桌面端）產品時，對于空間上的理解，一直以來都是令人頭疼的問題。
我們將屏幕當中的設計空間分為 橫向 與 縱向 兩個維度：
橫向：
由于大多數顯示器都是寬屏的形式，導致我們大多數頁面內容都是通過橫向的方式進行列式排布，也就導致縱向導航、二三級內容分布較多；而市面上所要兼容的橫向尺寸較多，大致分為：1920、1440、1366、1280，而怎樣將如此多的尺寸，擺放不同的元素，這仿佛才是設計的難點。
縱向：
屏幕的縱向的空間同樣十分關鍵，當內容在橫向無法滿足時，則會增加屏幕縱向的內容量。但是我們可以通過瀏覽器的特性，縱向的內容通過滾動條進行收折，進而實現兼容。
前面說了這么多，我們來聊聊柵格的定義。
柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于 圖標與文字 間隔的小型元素。
這里有兩個重要點：
橫向排布：代表著柵格的用法，這也是為什么柵格都是一列一列的原因。
用于大型區塊：不是任何內容都可以用柵格，比如在 卡片當中的圖標、文字，更多是要分析整個卡片，將其看作一個整體，如上圖。
在一個常見的柵格當中，一般分為 頁邊距、水槽、柵格寬度：
頁邊距：是柵格與外層信息的保護區域
因為在整個柵格系統當中，除了柵格之外，往往還會有其他的內容進行展示（如上上方圖，柵格日常的使用頁面），而我們正好可以通過頁邊距的方式，將其進行區分。我們以常見的B端界面為例，通過頁邊距可以將側邊導航與內容頁進行區分，保證頁面間的親密性，常見的頁邊距尺寸一般為 20px、24px。
水槽：是確定柵格寬度間的固定間距，通常是幫助柵格內的元素進行更為合理的排布。
水槽目的就是為了統一元素間的距離。比如現在頁面當中有兩個卡片的內容，而使用水槽，我就可以將這兩個卡片的內容，確定其間距（再次強調柵格用于確定橫向內容）方便柵格當中元素的信息排列。
柵格寬度：是柵格當中內容所占的基本寬度，一個柵格寬度往往是通過 內容寬度、頁邊距、水槽 排除過后所剩的寬度平均得出，一般會分為 12欄、24欄 兩種方式。
柵格寬度的確定，其實就是一個數學題，先給你一個公式（不建議使）：
(A×n) – i = W
A：一個柵格單元的寬度；a：一個柵格的寬度；n：正整數；i：水槽寬度；W：頁面的寬度。
雖然公式好像是萬能的，但我不喜歡死記硬背，來深入講一講這個公式背后的邏輯和使用方法。
以1440的頁面為例，通常B端產品左側會有一個導航菜單，假設為 200px，因此整個柵格的內容頁則為1440 – 200=1240px。
然后設定頁邊距寬度為 24px，一個柵格會有兩條頁邊距，剩下寬度則為：1240 – (24*2)=1192px
接著設定整個柵格為12欄，水槽寬度為8px。因為水槽位于 柵格 的左右兩側，也就意味著水槽的數量會比柵格少一列（別問為什么，問就自己去下面圖片數一數）也就是1192 – (8*11)=1104px
最后因為在水槽已經確定柵格為12欄，整個柵格的寬度則為：1104/12=92px
如果還不能理解，建議跳到開頭，再看一遍。
整個柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小，從外到里，不然做出來的內容很容易無效。
將元素擺放在柵格中，還需要注意起始位置與結束位置。這里教你們一個口訣：起始在左，結束在右；換句話說就是元素的起始位置必須放在柵格寬度的左側（也中的紅線）；
結束位置必須放在柵格寬度的右側（圖中的藍線）
這樣的方式也是為了避免很多設計師知道畫柵格而不會用柵格，出現一些低級錯誤。
關于柵格的定義就先聊到這，下期來與大家講一講關于柵格應用當中的自適應布局、響應式布局，以及其中的斷點等內容，我們下期見～
原文鏈接：CE青年（公眾號）
作者：CE青年
轉載請注明：學UI網》B端設計指南 – 柵格的定義
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計語言是把設計作為一種“溝通的方式”，在特定的場景中進行內容與信息的傳達。設計是介于科學與美學之間的一種藝術，是需要理性的去解決感性的問題。它和藝術之間的差別就在于“解決問題”。
設計語言最底層是項目設計語言，具有典型特征和主題，比如醫療項目凸顯專業冷靜，節日項目凸顯熱鬧氛圍。往上一層是產品設計語言，強調個性品牌，比如小視頻的設計深色更沉浸，電商從結構到色彩都凸顯熱鬧。很多產品隨著發展，形成一些系列平臺服務，平臺設計語言確保服務“統一規范”。最頂層是生態設計語言，跨設備跨平臺和硬件呈現的設計語言。
百度直播業務，從單一業務形成系列平臺服務，囊括的不只是 B 端和 C 端用戶產品，還有 8 大垂類蓬勃發展，以及跨業務多宿主的呈現。龐大的平臺業務，特別需要建設平臺設計語言。
所有的設計語言，都是服務于業務頂層戰略發展。制定設計策略前，需對業務所在的行業背景、品牌戰略、用戶群體、流行趨勢有充足的認知。當返工無數次還是沒方向時，說明以下前四點需要再深入明確。
建立設計原則時（設計語言的標準），不妨嘗試把品牌戰略人格化，由所有人解決所有人問題的愿景，得出產品是一個解決問題的行業專家的身份，Ta 傳達的氣質是簡潔大方的儀表，親和有力的儀態，和專業權威的素養。
設計語言以現代輕奢風格為基調，它大簡至美、配色和諧、材質考究，以獨具特色的現代格調，構筑起一個充滿質感又十分舒適的直播間，給用戶一致、友好、有品的體驗。
設計動手前，按照風格基調具象化拆解分析必不可少，每一個元素的表達手法都要定位清晰。
在圖標的設計中，我們基于專業親和的品牌理念延展出 2 個不同的方向。方案一以直線折紙與光影為視覺元素，呈現一個用心專業的態度。方案二以曲線雕刻藝術展現專業親和的魅力。
圖標體系化，多場景驗證一致性，發現方案一不夠極致，造型復雜；方案二具備良好的一致性，但破壞了物體固有的結構，影響識別度。
在一致性的前提下，嘗試簡化、提高識別度。巧妙的將光影和結構交匯，極簡到 2 個圖層呈現主體；語義清晰識別度高；角度漸變光影帶來舒適親和感，15°x 角度的精準把控傳達專業的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。
a）標準色
初期直播品牌色繼承百度 App 品牌色，隨著業務逐漸中臺化，需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調，更能體現親和有力的產品氣質。
紅色也有冷暖之分，此時提高色相、飽和度的顆粒度，H 色相以 350°為起點，以 2°遞增或遞減，S 飽和度以 5°為階梯，生成更多色階（保持相同 B 明度 100），在多界面和真機驗證，得出直播專屬紅（H350 S80 B100），冷暖適中符合平臺屬性。
b)協調的輔助色
同時，運用色環建立輔助色彩體系。H 色相以 350°為起點，以 15°遞增或遞減標準，創建 24 色相色板（保持相同 B 明度 100、S 飽和度 80）；選取柔和與協調的類似色和鄰近色作為家族色彩主體，調和互補色與對比色，平衡整體色調。因為不同色相的感官明度并不相同，校正每一個輔助色的 HSB，達到色彩感官上一致。
C）調色版
一般會有 2 種方法，一種是使用明度差獲得統一性佳的調色板，優點是落地成本低，代碼可直接實現；另一種則是微調飽和度和色相，獲得鮮明的色板，可使用在插圖繪制上。
亞克力，這種具有透明質感、光學品質的材質，在設計領域最早應用在家居設計上，被互聯網設計師熟知是在微軟的概念視頻里，隨之逐漸應用到 icon 繪制上，亞克力 1.0 版本背景和主體層次沒拉開，2.0 版本更趨向加大不透明度和模糊值，達到清晰舒適又兼具藝術美感。
這種量身打造的稀缺材質運用在運營玩法上，如紅包雨玩法，既能凸顯平臺專業用心的態度，又能強化用戶消費行為轉化，助力變現增長。
用戶激勵體系，采用 3D 玉石潤澤質感+動態折射光影，體現有內涵不張揚的泛知識調性，凸顯用戶獨特身份感
在每一個小元素的創作中，我們都時刻謹記，無論是項目的主題語言、還是產品的設計語言、甚至是生態的，終點都是傳達企業文化以及價值觀。從戰略層重構業務的認知體系，再將品牌戰略人格化，才能夠在茫然期產生真正的篤定感，逐步拆解設計目標和構建符合業務氣質的設計語言，達到最愉悅的體驗。
文章來源：優設 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
通過研究分析，發現fogg模型可以幫助我們了解為什么用戶不行動，又如何利用fogg模型讓用戶行動起來
我近期在做的一個項目，是成人直播在線學習的平臺，主要以書畫為主。
我們發現用戶的到課率和完課率較低，所以我們花了挺多時間在研究分析用戶，討論用戶為什么沒來上課？用戶來了為什么沒有堅持看完直播？她們出于什么動機來學習的？又在學習過程中遇到了什么困難？……
通過研究分析，我發現用fogg模型來解釋特別清晰，所以我特意深入了解了這一模型。所以就有了這篇文章。
福格行為模型，是以BJ Fogg（斯坦福說服力科學實驗室主任）命名的，表明一個行為得以發生，行為者首先需要需要有進行此行為的動力和操作此行為的能力。接著，他們有足夠的動力和能力來實施既定行為，他們就會在被誘導/觸發時進行。
fogg總結為一個人的行為產生需要三個要素：動力、能力、觸發。B=mat，即行為=動機、能力、觸發，三個要素必須同時滿足才會形成一次有效的轉化行動，否則不會發生。
fogg總結的動機分為3類：感覺、期待、歸屬感，人的本能都是追求快樂，逃避痛苦的；抱有希望，逃避恐懼的；尋求認同，避免拒絕的。
拿書畫學習來說，為什么用戶會來上課學習？首先是感興趣，甚至喜歡和熱愛才來的，學習書畫
可以讓她們感到快樂，愉悅身心，陶冶情操；其次會抱著學會和掌握的希望，幻想自己習得一技之長以后的樣子；另外通過書畫創作希望得到他人的認可和欣賞……
結合馬斯洛需求層次理論，可以發現不同的人在不同的時刻有不同的需求，就會表現為不同的動機，越接近動物本性的需求，動機則更為強烈，只有低層次的需求得到滿足，才會追求更高層級的需求。
還是說回書畫學習的例子，用戶只有能感受都書畫魅力，在學習的過程中感到愉悅，她才會追求更高層次的需求，比如得到他人的認可，最后成名成家（自我實現）。
能力是指有能力（人本身的能力）完成，并且完成這件事的成本是可接受的范圍內的。
可以有兩種方式提高用戶的能力：1、降低成本；2、通過利益等誘惑增加用戶動機
1、降低成本
至于成本，有幾個方面的成本：時間成本、金錢成本、體力付出、腦力付出、社會壓力、習慣力量。
肯來學習書畫的人多少都是愿意付出時間和金錢成本的。
體力付出呢，比方說，我們的產品當中沒有給用戶提供購買材料的鏈接，用戶就需要額外付出體力，可能是淘寶京東之類的電商平臺去選購，又可能是到線下畫材店去選購，那很有可能她就因此放棄了學習的念頭…
社會壓力：比如說我之前一位做設計的同事，后來辭職去北京油畫村專注學油畫去了，那其實在外人看來就不是很好理解，這時候他其實是頂著一定的壓力的，也就付出了更多的成本。
習慣的力量：比如平時有空都是跳廣場的王阿姨在李阿姨的鼓動下，也想學書畫，但是學書畫這件事破壞了她跳廣場舞的習慣，產生了額外的成本。所以除非王阿姨的動力很足，不然她很容易就打消了學習書畫的念頭。
2、通過誘惑增加用戶的動機
誘惑可以是利益相關的誘惑，比如說學習書畫，平臺定期舉辦活動或者比賽，評選優秀作品并送出豐厚獎品；甚至平臺有幫助用戶賣畫的渠道，可以額外增加收入或名氣，那用戶的學習動力也會大很多。
fogg認為用戶最在的是成本，與其用更多的誘惑增加用戶的動機，不如想辦法降低用戶的成本。
現在用戶既有動機也有能力了，但還不一定能產生相應的行為，還需要觸發因素。
觸發因素主要有：刺激、輔助、信號
刺激：當用戶有學畫動機了，也有能力，但是她可能還是會猶猶豫豫，這時候我們通過文案“零基礎，3-70歲都能學得會”，或許一下子就打消了她的顧慮，分分鐘領課體驗。
也就是說，用戶動機弱能力強時，我們需要刺激用戶產生或加強動機。
輔助：當用戶有足夠的學畫動機，但是不知道怎么領課體驗學習，那我們就需要簡化領課的流程，或者增加輔助，只需打個電話就能找到專屬的客服進行問詢和幫助。
也就是說，用戶動機強能力弱時，我們需要幫助用戶，降低用戶的操作成本。
信號：當用戶既有了學畫的動機也知道怎么領課體驗，但是還是難免會因為其他事情沖突而忘記了來上課，這時我們就需要在合適的時機給她一個提醒。
也就是說，用戶動機強能力強的時，我們只需要在合適的時機給出提醒就行，不要有過渡勸說行為，反而會適得其反。
說完這3個要素，再來分析我所做的項目，我利用fogg模型分析對比不同的用戶的動機、能力、觸發因素。
詳細項目方案：https://www.zcool.com.cn/work/ZNTU3NDY5NDg=.html
單看動機，每類用戶的動機不足的原因是不一樣的，三十幾歲可能是感覺上不夠愉悅，畢竟她年輕不太能靜心領略國畫帶來的樂趣，這個和閱歷有關，心氣還不夠沉穩；而50歲以上的中老年人非常享受作畫的帶來的身心愉悅，但是期待感可能會不夠，總擔心自己老了學東西費力，學不會，沒信心。
再看能力，也是各有不同的，對于三十幾歲的用戶而言時間就是金錢，所以她會比較看重學習效率，如果我們的每節直播課都是一個多小時兩個小時，那她就會覺得需要付出的時間成本實在是太高了，就容易放棄，反而我們告訴她，可以利用碎片化時間學習，那她還是愿意嘗試的；而四十幾歲、五十幾歲的用戶學習新東西的能力遠不如年輕人，并且他們的行為習慣已經非常固化，所以他們需要付出的成本更多的是腦力付出和習慣改變/養成。
那這樣一頓分析之后，也就容易找到對應的策略了，這對產品設計真的很有幫助。
fogg認為增加用戶的動機比降低用戶成本要難。
確實如此，人的意愿很難被改變。用戶如果對書畫一點興趣都沒有，那這樣的用戶我們就可以直接放棄，而不是想方設法提升她的興趣，多次勸說反而還會讓用戶反感。我們要做的是找到潛在用戶，至少是有興趣，愿意嘗試的用戶，想辦法讓她們來上課體驗，并且在短期內入門，學習有效果，才有可能轉化成我們的VIP用戶。
fogg模型在電商領域運用特別多，商家的各種套路不是在強化我們的購買動機就是在降低我們的購買成本。不知不覺中就買買買，尤其是各種活動促銷時，你有沒有發現雙十一買了很多東西，但東西寄到家后其實并沒那么需要或者喜歡，所以又退掉了……
除了電商領域，fogg模型可以運用在各種媒介和場景中，比如我所做的這個書畫學習項目，提升用戶到課率和完課率為目標，可以用這個模型指導，換成提升轉化率或者轉介紹率同樣也可以用這個模型來指導。
B=mat，行動=動機、能力、觸發因素三者同時出現
動機主要體現在：感覺、期待、歸屬感
能力提升主要有兩種方式：1 降低成本，2 提升用戶動機(利益等誘惑)
成本主要有：時間成本、金錢成本、體力付出、腦力付出、社會壓力、習慣力量
觸發因素主要有：刺激，輔助，信號
文章來源：站酷 作者：酥酥d
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn