一、數(shù)據(jù)可視化的核心價(jià)值

二、圖表設(shè)計(jì)核心方法：先選對(duì)，再做好

1. 圖表選型三步法

（1）讀懂?dāng)?shù)據(jù)：明確核心關(guān)系

• 比較：不同類(lèi)別數(shù)據(jù)差異
• 趨勢(shì)：隨時(shí)間 / 序列的變化
• 分布：多變量關(guān)聯(lián)與規(guī)律
• 構(gòu)成：整體與部分的占比
• 流轉(zhuǎn)：流程階段的數(shù)值變化

（2）分析用戶(hù)：匹配閱讀需求

• 管理者：看整體趨勢(shì)、核心結(jié)果
• 業(yè)務(wù)崗：看細(xì)分對(duì)比、個(gè)體變化
• 執(zhí)行層：看明細(xì)數(shù)據(jù)、流程節(jié)點(diǎn)

（3）按數(shù)據(jù)關(guān)系選圖表

• 比較類(lèi)：柱形圖、條形圖、折線(xiàn)圖
   
  柱 / 條形圖：快速對(duì)比類(lèi)別差異，是最通用的選擇；
  
  折線(xiàn)圖：展示連續(xù)數(shù)據(jù)（如時(shí)間）的變化趨勢(shì)。
• 分布類(lèi)：散點(diǎn)圖、氣泡圖、雷達(dá)圖

  

  散點(diǎn)圖：看變量相關(guān)性；氣泡圖：新增維度用大小表達(dá)；雷達(dá)圖：多指標(biāo)綜合對(duì)比。
• 構(gòu)成類(lèi)：餅圖、環(huán)形圖、樹(shù)狀圖

  

  餅 / 環(huán)形圖：展示單一維度占比；樹(shù)狀圖：呈現(xiàn)層級(jí)化結(jié)構(gòu)占比。
• 流轉(zhuǎn)類(lèi)：漏斗圖、瀑布圖、桑基圖

  

  漏斗圖：轉(zhuǎn)化流程分析；瀑布圖：數(shù)值增減變化；桑基圖：數(shù)據(jù)流向與分配。

2. 信息圖形（Infographic）

三、圖表設(shè)計(jì)四大原則

1. 準(zhǔn)確性

   

   數(shù)據(jù)真實(shí)無(wú)扭曲，優(yōu)先用大眾熟悉的圖表（柱、線(xiàn)、餅）；顏色不超過(guò) 5 種，降低認(rèn)知負(fù)擔(dān)。
2. 一致性

   

   顏色、樣式、術(shù)語(yǔ)全局統(tǒng)一，同一指標(biāo)固定用同一顏色，保持視覺(jué)連貫。
3. 輔助性

   

   用標(biāo)題、圖例、交互提示降低理解成本；小眾圖表需加說(shuō)明，通用圖表保持簡(jiǎn)潔。
4. 可擴(kuò)展性

   

   適配多設(shè)備尺寸，兼顧宏觀(guān)（整體）與微觀(guān)（單點(diǎn)）數(shù)據(jù)；通過(guò)小圖預(yù)覽、大圖交互實(shí)現(xiàn)層級(jí)展示。

四、圖表視覺(jué)設(shè)計(jì)規(guī)范

1. 基礎(chǔ)構(gòu)成

• 標(biāo)題與說(shuō)明：清晰點(diǎn)明核心結(jié)論，副標(biāo)題補(bǔ)充數(shù)據(jù)范圍、時(shí)間等背景；
• 坐標(biāo)軸與網(wǎng)格：橫軸常用作時(shí)間 / 類(lèi)別，縱軸為數(shù)值；網(wǎng)格線(xiàn)密度適中，小圖可省略；
• 圖形元素：柱、線(xiàn)、點(diǎn)等保持簡(jiǎn)潔，適配真實(shí)數(shù)據(jù)與極限場(chǎng)景。

2. 顏色設(shè)計(jì)

• 用法邏輯：色相區(qū)分類(lèi)別，明度 / 飽和度表達(dá)數(shù)值梯度；
• 配色方式：鄰近色（溫和統(tǒng)一）、互補(bǔ)色（強(qiáng)對(duì)比突出）、連續(xù)漸變（體現(xiàn)數(shù)值變化）；
• 品牌適配：沿用品牌色，或從 Logo、素材圖提取配色，保持視覺(jué)統(tǒng)一。

3. 數(shù)據(jù)墨水比

• 保留核心數(shù)據(jù)元素，刪除無(wú)關(guān)裝飾；
• 不過(guò)度簡(jiǎn)化導(dǎo)致信息缺失，在簡(jiǎn)潔與完整間平衡。

五、高效圖表設(shè)計(jì)工具

1. Flourish：在線(xiàn)可視化平臺(tái)，模板豐富，支持多數(shù)據(jù)源導(dǎo)入與一鍵導(dǎo)出；
2. ECharts：開(kāi)源免費(fèi)，配置靈活，兼容多端，適合前端開(kāi)發(fā)與設(shè)計(jì)師使用；
3. Tableau Public：拖拽式操作，快速制作交互式儀表盤(pán)，支持在線(xiàn)分享；
4. Informationisbeautiful：創(chuàng)意可視化模板，適合制作高顏值信息圖；
5. D3.js：前端可視化庫(kù)，支持高度自定義交互圖表；
6. 配色工具：Muzli Colors、Coolors、Brand Colors、Flat UI Colors。

    

   轉(zhuǎn)載：優(yōu)設(shè)

   

   蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。

   關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).

谷歌Material Design的圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)正在重新定義界面視覺(jué)語(yǔ)言。蘭亭妙微UI設(shè)計(jì)公司深度解析從簡(jiǎn)潔性、幾何形狀到風(fēng)格統(tǒng)一的三大核心原則，詳解24dp標(biāo)準(zhǔn)尺寸下的網(wǎng)格系統(tǒng)與布局規(guī)范，并揭秘復(fù)雜圖標(biāo)的細(xì)節(jié)處理技巧。無(wú)論是圓角控制還是描邊粗細(xì)，這套方法論讓零基礎(chǔ)設(shè)計(jì)師也能快速掌握專(zhuān)業(yè)級(jí)圖標(biāo)設(shè)計(jì)。

今天分享的是「圖標(biāo)設(shè)計(jì)準(zhǔn)則」。圖標(biāo)是界面設(shè)計(jì)里的 “剛需元素”，一個(gè)小圖標(biāo)能快速傳遞很多信息。好的圖標(biāo)需要兼顧簡(jiǎn)潔、現(xiàn)代、友好。但圖標(biāo)的尺寸很小，設(shè)計(jì)時(shí)既要嚴(yán)格遵守設(shè)計(jì)規(guī)則，又得清晰表達(dá)信息，這樣才能保證整套圖標(biāo)的風(fēng)格統(tǒng)一、辨識(shí)度高。

今天就來(lái)聊聊大廠(chǎng)在用的圖標(biāo)設(shè)計(jì)原則和設(shè)計(jì)規(guī)范，配合案例進(jìn)行設(shè)計(jì)分析~

01 圖標(biāo)設(shè)計(jì)的3個(gè)核心原則

① 形式夠簡(jiǎn)潔

給大家舉個(gè)例子，就說(shuō)下面的小船圖標(biāo)，想讓圖標(biāo)清晰好認(rèn)，就得做減法，那么用正面的簡(jiǎn)約船身造型最合適。

如果圖標(biāo)設(shè)計(jì)的過(guò)于細(xì)致，例如圖標(biāo)中添加了船帆、桅桿或者旗幟等細(xì)節(jié)，太寫(xiě)實(shí)的圖標(biāo)不僅會(huì)降低識(shí)別速度，還會(huì)破壞整套圖標(biāo)的視覺(jué)統(tǒng)一性。

設(shè)計(jì)總結(jié)：

? 簡(jiǎn)化圖標(biāo)造型，提升清晰度和辨識(shí)度

? 拒絕過(guò)度寫(xiě)實(shí)，避開(kāi)復(fù)雜繁瑣的設(shè)計(jì)

② 多用幾何形狀打底

使用幾何圖形和統(tǒng)一的基礎(chǔ)形狀來(lái)設(shè)計(jì)圖標(biāo)，能打造出清晰醒目的視覺(jué)感受。哪怕結(jié)構(gòu)簡(jiǎn)單，也能保持清晰的形態(tài)，縮小到小尺寸時(shí)也照樣容易分辨。

反過(guò)來(lái)講，盡量少用那些纖細(xì)、松散的不規(guī)則形狀，它們會(huì)破壞線(xiàn)條的連貫性，讓整套圖標(biāo)看起來(lái)亂糟糟的，沒(méi)個(gè)統(tǒng)一的調(diào)性。

設(shè)計(jì)總結(jié)：

? 靠幾何圖形和統(tǒng)一的造型，打造醒目視覺(jué)效果

? 少用纖細(xì)、不規(guī)則的形狀

③ 整套風(fēng)格保持一致

這里給大家看一組風(fēng)格統(tǒng)一的圖標(biāo)示例。對(duì)品牌識(shí)別和系統(tǒng)適配來(lái)說(shuō)，保持圖標(biāo)集的視覺(jué)一致性太重要了。

要是把不同風(fēng)格的圖標(biāo)混在一起用，用戶(hù)根本沒(méi)法把它們當(dāng)成“一家人”。所以同一套圖標(biāo)里，不管是形狀、線(xiàn)條粗細(xì)，還是比例、邊角處理，都得按同一個(gè)標(biāo)準(zhǔn)來(lái)。

設(shè)計(jì)總結(jié)：

? 單套圖標(biāo)集里視覺(jué)風(fēng)格要保持統(tǒng)一

? 千萬(wàn)別混搭不同風(fēng)格的圖標(biāo)

02 圖標(biāo)尺寸怎么選？

在谷歌的Material Design 3 設(shè)計(jì)規(guī)范中，標(biāo)準(zhǔn) (基線(xiàn)) 圖標(biāo)尺寸是24dp×24dp，設(shè)計(jì)時(shí)建議按100%的比例來(lái)做，這樣能保證像素級(jí)的精準(zhǔn)度。

除了這個(gè)標(biāo)準(zhǔn)尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：

20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺(jué)元素

40dp/48dp：針對(duì)顯示器、大屏幕，還有標(biāo)題欄這類(lèi)特殊場(chǎng)景

03 標(biāo)準(zhǔn)圖標(biāo)布局

設(shè)計(jì)圖標(biāo)時(shí)，內(nèi)容需要放在有效區(qū)域內(nèi)里。有效區(qū)域是指頁(yè)面滾動(dòng)或適配不同設(shè)備時(shí)圖標(biāo)不會(huì)被遮擋的“安全可視區(qū)域”。

如果想讓圖標(biāo)的視覺(jué)沖擊力更強(qiáng)，可以讓內(nèi)容延伸到有效區(qū)域和裁剪區(qū)域之間的留白處，但不能超出裁剪區(qū)域，不然圖標(biāo)很容易被裁剪顯示不全。

具體要怎么布局呢？看下面這兩點(diǎn)就夠了：

① 有效區(qū)域：圖標(biāo)內(nèi)容要放在20dp×20dp的范圍內(nèi)，四周各留2dp的邊距

② 邊距：給有效區(qū)域留出2dp邊距，既能讓圖標(biāo)和周?chē)乩_(kāi)視覺(jué)距離，又能讓整體看起來(lái)更平衡

接下來(lái)通過(guò)一個(gè)圖標(biāo)案例來(lái)簡(jiǎn)單總結(jié)一下：

上圖從左到右分別代表了在有效區(qū)域、在有效區(qū)域和裁剪區(qū)域、在裁剪區(qū)域之外創(chuàng)建的圖標(biāo)案例。

設(shè)計(jì)總結(jié)：

? 圖標(biāo)內(nèi)容保持在20dp×20dp的有效區(qū)域里，記得留2dp邊距?? 想加視覺(jué)沖擊力？?jī)?nèi)容可以延伸到邊距區(qū)域

? 任何情況下，圖標(biāo)都不能超出裁剪區(qū)域

① 網(wǎng)格和關(guān)輔助線(xiàn)

一套圖標(biāo)中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標(biāo)保持視覺(jué)大小的一致性呢？

這種情況大家在設(shè)計(jì)圖標(biāo)時(shí)應(yīng)該都碰到過(guò)，解決方法可能大多是通過(guò)眼睛對(duì)比查看，把看著小的圖標(biāo)調(diào)大一些或者把看著大的圖標(biāo)調(diào)小一點(diǎn)。這種方法效率不高，而且設(shè)計(jì)出來(lái)的圖標(biāo)大小不容易保持一致性。

這里提供一個(gè)更科學(xué)和高效的輔助圖標(biāo)設(shè)計(jì)方法——使用網(wǎng)格和輔助線(xiàn)，照著這些輔助線(xiàn)來(lái)設(shè)計(jì)圖標(biāo)，能輕松保持比例一致。

例如常用的24dp×24dp圖標(biāo)網(wǎng)格，由正方形、圓形、豎矩形、橫矩形這四種基礎(chǔ)輔助線(xiàn)構(gòu)成。它們就像圖標(biāo)的“骨架”，能幫所有圖標(biāo)保持統(tǒng)一的比例和對(duì)齊效果，哪怕放大10倍看，結(jié)構(gòu)也照樣清晰。

給大家拆解一下這四種輔助線(xiàn)：

方形輔助線(xiàn)：邊長(zhǎng)18dp，是圖標(biāo)的基礎(chǔ)平衡基準(zhǔn)。比如圖表類(lèi)圖標(biāo)就可以照著這個(gè)方形來(lái)畫(huà)，保證比例穩(wěn)定。

圓形輔助線(xiàn)：直徑20dp，用來(lái)設(shè)計(jì)圓潤(rùn)平衡的圖標(biāo)。像地球圖標(biāo)用這個(gè)圓形打底，就能和其他圖標(biāo)和諧搭配。

垂直矩形輔助線(xiàn)：高20dp、寬16dp，適合強(qiáng)調(diào)縱向比例的圖標(biāo)。比如文檔圖標(biāo)圍著這個(gè)豎矩形設(shè)計(jì)，比例會(huì)特別清晰。

水平矩形輔助線(xiàn)：高16dp、寬20dp，適合橫向比例的圖標(biāo)。像郵件圖標(biāo)用這個(gè)橫矩形當(dāng)基礎(chǔ)，形狀會(huì)很均衡。

04 圖標(biāo)結(jié)構(gòu)解析

一個(gè)完整的圖標(biāo)，由圓角、起始/結(jié)束點(diǎn)、內(nèi)部形狀、外部輪廓等組成。

① 圖標(biāo)圓角

這里重點(diǎn)說(shuō)下大家容易踩坑的“圓角”的設(shè)計(jì)：例如下圖的銀行卡圖標(biāo)，采用外角2dp圓角、內(nèi)角尖角的設(shè)計(jì)，這樣既柔和又利落。

如果把圓角做得太大，如下圖左側(cè)文檔圖標(biāo)，圖標(biāo)的辨識(shí)度就會(huì)下降；如果一個(gè)圖標(biāo)中混用不同半徑的圓角，如下圖右側(cè)的圖標(biāo)，整個(gè)圖標(biāo)看著就會(huì)很雜亂。

設(shè)計(jì)總結(jié)：

? 按規(guī)則設(shè)置圓角，統(tǒng)一圓角半徑

? 避免圓角半徑過(guò)大/半徑混用的情況

② 描邊粗細(xì)

推薦的圖標(biāo)描邊粗細(xì)是2dp或常規(guī) (400)，也可以根據(jù)需求靈活調(diào)整，例如在MD3設(shè)計(jì)規(guī)范中就提供了100 (細(xì))到700 (粗)的多種選擇。

這里有兩個(gè)小技巧：

設(shè)計(jì)直角線(xiàn)性圖標(biāo)時(shí)，描邊的末端盡量做成直角，例如下圖左側(cè)的箭頭圖標(biāo)，45度切割的直角就很清晰；在下圖右側(cè)的添加圖標(biāo)中，內(nèi)部的加號(hào)也采用了2dp的描邊粗細(xì)，與外輪廓保持一致。

另外要注意一套圖標(biāo)需要保持相同的描邊粗細(xì)。如果描邊x粗細(xì)不一致，不僅會(huì)模糊圖標(biāo)形狀，還會(huì)破壞視覺(jué)一致性。

設(shè)計(jì)總結(jié)：

? 描邊粗細(xì)保持統(tǒng)一，直角圖標(biāo)末端也用直角

05 復(fù)雜圖標(biāo)怎么處理？

如果圖標(biāo)需要一些精細(xì)的細(xì)節(jié)，可以通過(guò)一些靈活的調(diào)整來(lái)提升辨識(shí)度，但不能扭曲基礎(chǔ)的幾何形狀或破壞整體比例。

比如回形針圖標(biāo)，為了在24dp的空間里放下多個(gè)曲線(xiàn)，可以把 2dp的標(biāo)準(zhǔn)描邊粗細(xì)微調(diào)成1.5dp；再比如拉面圖標(biāo)，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細(xì)節(jié)更多，則采用1.5dp的細(xì)描邊，讓細(xì)節(jié)更清晰。

還有一個(gè)小原則：設(shè)計(jì)復(fù)雜圖標(biāo)時(shí)，盡量保持正面視角，別做傾斜、旋轉(zhuǎn)的等距或者3D效果——多余的深度感會(huì)增加識(shí)別難度。

設(shè)計(jì)總結(jié)

? 正面視角設(shè)計(jì)，細(xì)節(jié)微調(diào)不跑偏

? 少用傾斜、旋轉(zhuǎn)的等距/3D呈現(xiàn)方式

最后

圖標(biāo)是一種高效的視覺(jué)語(yǔ)言，能打破語(yǔ)言壁壘，快速傳遞信息。但它的優(yōu)勢(shì)，必須建立在清晰的結(jié)構(gòu)和統(tǒng)一的規(guī)則之上。

設(shè)計(jì)時(shí)基于標(biāo)準(zhǔn)的輔助網(wǎng)格走，保持比例均衡、視覺(jué)重量一致，設(shè)計(jì)出的圖標(biāo)才不會(huì)喧賓奪主，反而能提升整個(gè)產(chǎn)品的用戶(hù)體驗(yàn)。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。

表單是 B 端產(chǎn)品核心信息載體，優(yōu)秀的表單設(shè)計(jì)能直接提升填寫(xiě)效率、降低錯(cuò)誤率、減少業(yè)務(wù)成本，是 B 端體驗(yàn)與數(shù)據(jù)流轉(zhuǎn)的關(guān)鍵環(huán)節(jié)。蘭亭妙微ui設(shè)計(jì)公司在上篇基礎(chǔ)上，用 14 個(gè)可落地章節(jié)，幫你掌握高易用性表單設(shè)計(jì)。

一、先明確：好表單的 5 個(gè)核心價(jià)值

1. 提升體驗(yàn)：降低填寫(xiě)困惑，讓操作更輕松順暢
2. 降低錯(cuò)率：清晰指引 + 實(shí)時(shí)校驗(yàn)，保障數(shù)據(jù)準(zhǔn)確
3. 提高效率：簡(jiǎn)化操作、減少重復(fù)輸入，節(jié)省時(shí)間
4. 提升完成率：降低填寫(xiě)門(mén)檻，減少用戶(hù)中途放棄
5. 降本增效：減少數(shù)據(jù)糾錯(cuò)與溝通成本，賦能業(yè)務(wù)

二、14 個(gè)表單設(shè)計(jì)核心方法（可直接落地）

1. 信息降噪：只留關(guān)鍵，簡(jiǎn)化內(nèi)容

• 極簡(jiǎn)處理：必填項(xiàng)占絕大多數(shù)時(shí)，隱藏選填提示符，減少視覺(jué)干擾
• 折疊非必填：用「展示更多」收起次要字段，只保留核心必填項(xiàng)
• 選填項(xiàng)保留意義：給愿意補(bǔ)充信息的用戶(hù)選擇權(quán)，降低填寫(xiě)壓力，靈活收集額外數(shù)據(jù)

2. 標(biāo)簽與指引：清晰易懂，不產(chǎn)生歧義

• 標(biāo)簽簡(jiǎn)短直白，不使用專(zhuān)業(yè)黑話(huà)
• 填寫(xiě)規(guī)則前置提示，比如格式、長(zhǎng)度、范圍
• 復(fù)雜字段加小問(wèn)號(hào)提示，hover 顯示說(shuō)明，不占主視覺(jué)

3. 長(zhǎng)表單：分步 / 分頁(yè)，緩解填寫(xiě)壓力

• 分步填寫(xiě)：按業(yè)務(wù)邏輯拆步驟，配清晰步驟導(dǎo)航
• 分頁(yè)填寫(xiě)：左側(cè)固定導(dǎo)航，用戶(hù)可快速跳轉(zhuǎn)模塊
• 小缺陷：用戶(hù)無(wú)法一次性看到全部字段，需做好進(jìn)度提示

4. 動(dòng)態(tài)驗(yàn)證：實(shí)時(shí)反饋，即時(shí)糾錯(cuò)

• 輸入失焦后立即校驗(yàn)，不等到提交才報(bào)錯(cuò)
• 錯(cuò)誤提示就近展示，明確錯(cuò)誤原因 + 修改建議
• 避免提交后批量修改，大幅降低用戶(hù)挫敗感

5. 默認(rèn)值 + 自動(dòng)填充：減少手動(dòng)輸入

• 高頻選項(xiàng)設(shè)默認(rèn)值，比如常用城市、狀態(tài)
• 復(fù)用歷史數(shù)據(jù)，自動(dòng)填入重復(fù)信息
• 關(guān)聯(lián)字段自動(dòng)聯(lián)動(dòng)，比如地址→郵編、身份證→生日

6. 智能輔助：讓表單 “會(huì)思考”

1. 上下文自動(dòng)填充：手機(jī)號(hào)→姓名、身份證→生日 / 性別
2. 條件邏輯顯隱：選 “是” 展開(kāi)對(duì)應(yīng)字段，選 “否” 直接隱藏
3. OCR 智能識(shí)別：身份證、發(fā)票、營(yíng)業(yè)執(zhí)照上傳后自動(dòng)提取信息填入

7. 響應(yīng)式適配：多端一致，不崩不亂

• 固定適配：字段寬度固定，兼容客戶(hù)最低屏幕分辨率
• 間距適配：左右邊距固定，組件自適應(yīng)寬度（適合彈窗 / 抽屜，不建議長(zhǎng)表單）
• 移動(dòng)端：單獨(dú)設(shè)計(jì)，用系統(tǒng)原生輸入組件，不直接套用 PC 端

8. 字段簡(jiǎn)潔：用最少文字講清含義

• 標(biāo)簽短、準(zhǔn)、無(wú)歧義，不堆砌長(zhǎng)文案
• 合并冗余字段，不拆分語(yǔ)義完整的信息

9. 長(zhǎng)數(shù)字不拆分：一個(gè)輸入框搞定

• 減少點(diǎn)擊切換，支持一鍵復(fù)制粘貼
• 避免分段輸入帶來(lái)的操作繁瑣與誤操作

10. 防錯(cuò)糾錯(cuò)：從源頭減少錯(cuò)誤

• 格式限制：數(shù)字框僅輸數(shù)字，限制長(zhǎng)度（手機(jī)號(hào) 11 位、身份證 18 位）
• 專(zhuān)用輸入：車(chē)牌號(hào)用專(zhuān)屬鍵盤(pán)，屏蔽 I/O 等易混淆字符
• 范圍置灰：時(shí)間選擇器禁用無(wú)效日期，堵死錯(cuò)誤操作路徑

11. 就地編輯：在哪看就在哪改

• 列表少量編輯：直接在行內(nèi)修改，不跳轉(zhuǎn)、不彈窗
• 保持注意力連貫，提升操作效率

12. 三重保存：杜絕數(shù)據(jù)丟失

1. 延遲草稿：間隙 / 定時(shí)自動(dòng)保存，無(wú)打擾后臺(tái)運(yùn)行
2. 隨機(jī)草稿：高頻自動(dòng)保存，保留歷史版本，支持回退
3. 條件草稿：觸發(fā)式保存，異常關(guān)閉可恢復(fù)
4. 提示保存：未保存跳轉(zhuǎn) / 離開(kāi)時(shí)，彈窗確認(rèn)，防止誤操作

13. 所見(jiàn)即所得：實(shí)時(shí)預(yù)覽最終效果

• 表單編輯區(qū) + 預(yù)覽區(qū)聯(lián)動(dòng)，即時(shí)看到展示效果
• CMS、物料配置、富文本等場(chǎng)景必加預(yù)覽
• 支持多端（PC / 移動(dòng)端 / 小程序）效果切換查看

14. 重視用戶(hù)反饋：讓業(yè)務(wù)專(zhuān)家?guī)湍銉?yōu)化

• B 端用戶(hù)是一線(xiàn)業(yè)務(wù)專(zhuān)家，最懂真實(shí)痛點(diǎn)
• 做用戶(hù)測(cè)試、收集操作反饋，持續(xù)迭代
• 案例：貸款審核從 “逐個(gè)審” 優(yōu)化為 “批量審”，效率大幅提升

三、總結(jié)

一、用戶(hù)行為分析：如何開(kāi)始搭建

體驗(yàn)或交互設(shè)計(jì)師知曉用戶(hù)行為分析有什么用？

答：我們所處的行業(yè)下，各類(lèi)產(chǎn)品變得成熟精細(xì)，大家開(kāi)始拼細(xì)節(jié)卷服務(wù)，市場(chǎng)競(jìng)爭(zhēng)激烈。對(duì)于產(chǎn)品的各種優(yōu)化改版也就開(kāi)始變得謹(jǐn)慎，往往需要經(jīng)過(guò)用戶(hù)研究或是數(shù)據(jù)分析等工作來(lái)驗(yàn)證或決策，不再是由設(shè)計(jì)師或產(chǎn)品經(jīng)理憑借過(guò)往經(jīng)驗(yàn)辦事或?qū)?biāo)競(jìng)品照抄了，恰好用戶(hù)行為分析就是用戶(hù)洞察中具有代表性的一項(xiàng)；

體驗(yàn)或交互設(shè)計(jì)師為什么要掌握這些呢？

答：回歸到用戶(hù)體驗(yàn)相關(guān)設(shè)計(jì)，本身就是一項(xiàng)細(xì)致活兒，處處需要用戶(hù)研究或數(shù)據(jù)洞察來(lái)輔助設(shè)計(jì)工作，了解其相關(guān)甚至熟悉搭建分析，從職能發(fā)展趨勢(shì)來(lái)看，可能是遲早的事；

所以即使你目前用不上用戶(hù)行為分析相關(guān)，也不要急著關(guān)掉文章，先簡(jiǎn)單了解一下吧，說(shuō)不定你會(huì)有興趣呢，說(shuō)不定不久后剛好用上呢？

二、用戶(hù)行為分析能干啥

用戶(hù)行為分析是數(shù)據(jù)分析的一個(gè)重要領(lǐng)域，特別是在數(shù)字化服務(wù)行業(yè)中，主要目的是通過(guò)深入研究用戶(hù)群體的流量動(dòng)向以及操作行為特征等，來(lái)了解用戶(hù)與產(chǎn)品間的關(guān)系、效果、趨勢(shì)，以幫助我們優(yōu)化產(chǎn)品設(shè)計(jì)、提升用戶(hù)體驗(yàn)并驅(qū)動(dòng)業(yè)務(wù)決策。

說(shuō)人話(huà)就是：

監(jiān)測(cè)用戶(hù)在產(chǎn)品上做出了哪些行為、是否符合預(yù)期、有什么特征、問(wèn)題在哪里，然后看看產(chǎn)品上需要做些什么調(diào)整或迎合用戶(hù)的特征偏好來(lái)決策啥的。

三、用戶(hù)行為分析有啥優(yōu)勢(shì)

具備一定的客觀(guān)性與真實(shí)性

被動(dòng)采集的行為數(shù)據(jù)有時(shí)候比用戶(hù)口述反饋的信息要更真實(shí)有效，一方面更加直接，另一方面也少了些用戶(hù)心理設(shè)防（霍桑效應(yīng)）；

具備一定的代表性與準(zhǔn)確性

由于是群體性的大數(shù)據(jù)，所以更有代表性，并且是即時(shí)的數(shù)據(jù)記錄，不容易記混記錯(cuò)，準(zhǔn)確性也更好；

具備可持續(xù)性與可追溯性

通過(guò)數(shù)字化技術(shù)實(shí)現(xiàn)，可以伴隨產(chǎn)品發(fā)展持續(xù)的采集數(shù)據(jù)，可以較為方便的調(diào)取過(guò)往數(shù)據(jù)進(jìn)行比對(duì)追溯分析；

具備一定的 AI 不可代替性

用戶(hù)行為的背后依舊是人文心理等方面的內(nèi)容分析或業(yè)務(wù)場(chǎng)景化決策，往往離不開(kāi)人工的加持介入；

四、實(shí)施構(gòu)建的流程

以下是對(duì)用戶(hù)行為分析的工作流圖解，由于不同企業(yè)的訴求有差異，以下工作流僅代表大部分用作交流；

五、關(guān)鍵節(jié)點(diǎn)拆解說(shuō)明

此次主要聊聊基礎(chǔ)的上手運(yùn)用與注意事項(xiàng)，不涉及過(guò)深或難以理解的部分，如果說(shuō)用戶(hù)行為分析可以到達(dá)高等數(shù)學(xué)的程度，那么此次就講講加減乘除好了，師父領(lǐng)進(jìn)門(mén)，修行靠個(gè)人，各位看客請(qǐng)上座！

1. 目標(biāo)需求拆解

① 什么時(shí)候開(kāi)始？

首先你的產(chǎn)品得有流量，然后得有一個(gè)關(guān)乎到用戶(hù)行為的目標(biāo)，例如想看看用戶(hù)流量分布、了解功能使用頻率、任務(wù)執(zhí)行的漏斗關(guān)系、用戶(hù)行為偏好、用戶(hù)數(shù)據(jù)畫(huà)像構(gòu)建等，這個(gè)時(shí)候就可以考慮開(kāi)始了，不然就可能南轅北轍費(fèi)力不討好。

② 界定一個(gè)范圍？

首先構(gòu)建一套完善的用戶(hù)行為分析系統(tǒng)并持續(xù)的維護(hù)與應(yīng)用并不是一個(gè)輕松的事情，所以最好是針對(duì)性構(gòu)建+多迭代，不要上來(lái)就想著做全盤(pán)搭建，表面的工作或問(wèn)題往往可能只是浮冰，逐步的深入后問(wèn)題會(huì)越來(lái)越多，個(gè)人深有體會(huì)！

③ 由上而下，找準(zhǔn)路線(xiàn)？

通過(guò)業(yè)務(wù)目標(biāo)向下拆解，一般上層目標(biāo)無(wú)非是商業(yè)轉(zhuǎn)化、用戶(hù)活躍留存、任務(wù)通過(guò)率這些，向下拆解則是通過(guò)業(yè)務(wù)目標(biāo)去鎖定核心的業(yè)務(wù)場(chǎng)景或任務(wù)線(xiàn)路，這些核心的頁(yè)面、場(chǎng)景或是任務(wù)線(xiàn)路，就是你前期可以界定的一個(gè)范圍，后續(xù)的重點(diǎn)工作則是將核心功能的入口或路徑窮舉出來(lái)，避免數(shù)據(jù)對(duì)不上或找不到異常源頭的情況。

在我的認(rèn)知里，用戶(hù)行為分析建設(shè)不是一錘子買(mǎi)賣(mài)，步伐走小一點(diǎn)，基礎(chǔ)搭好一些，以后的迭代建設(shè)或維護(hù)也會(huì)輕松許多；

概括一下就是，不要追求全面，靠攏業(yè)務(wù)價(jià)值，關(guān)聯(lián)上指標(biāo)或者核心業(yè)務(wù)場(chǎng)景即可。

之前網(wǎng)上看到有大佬給了一個(gè)建設(shè)思路，這里搬來(lái)大家參考一下；

2. 帶你認(rèn)識(shí)不一樣的埋點(diǎn)

數(shù)據(jù)埋點(diǎn)技術(shù)已經(jīng)很成熟了，甚至有很多第三方的埋點(diǎn)+分析的服務(wù)，以及采集用戶(hù)行為數(shù)據(jù)的不僅僅只有埋點(diǎn)技術(shù)方案，哪怕你做一個(gè)錄屏技術(shù)都可以，只不過(guò)從數(shù)字化產(chǎn)品視角出發(fā)，埋點(diǎn)技術(shù)更有性?xún)r(jià)比，以及符合用戶(hù)隱私權(quán)益，所以這里專(zhuān)門(mén)講一下“埋點(diǎn)”這個(gè)老技術(shù)，熟悉的大佬們可以跳過(guò)埋點(diǎn)這部分。

① 埋點(diǎn)是什么

數(shù)字化應(yīng)用大多有個(gè)特征，就是需要用戶(hù)進(jìn)行界面交互，有交互就有行為動(dòng)作發(fā)生，而數(shù)據(jù)埋點(diǎn)就是將用戶(hù)在界面交互時(shí)產(chǎn)生的各種類(lèi)型的監(jiān)控日志上報(bào)到產(chǎn)品后臺(tái)去，這樣業(yè)務(wù)團(tuán)隊(duì)就可以知道到用戶(hù)在不同頁(yè)面或業(yè)務(wù)場(chǎng)景下操作了什么，去往過(guò)哪些頁(yè)面，當(dāng)結(jié)合業(yè)務(wù)后臺(tái)的訂單等數(shù)據(jù)時(shí)，就可以還原出更加清晰的用戶(hù)行為全貌。

通常這些埋點(diǎn)會(huì)分為“頁(yè)面訪(fǎng)問(wèn)(PV、UV)、區(qū)塊曝光(區(qū)域、時(shí)長(zhǎng))、按鈕操作(動(dòng)作、狀態(tài))”三大類(lèi)型，并攜帶交互元素和操作者的各類(lèi)特征信息參數(shù)，便于我們知曉更多的場(chǎng)景細(xì)節(jié)與用戶(hù)情況，例如知曉這個(gè)「免費(fèi)試用」按鈕是對(duì)應(yīng)了那個(gè)產(chǎn)品？點(diǎn)擊的用戶(hù)是否已開(kāi)通這個(gè)產(chǎn)品？這個(gè)用戶(hù)是否為付費(fèi)用戶(hù)？是否個(gè)人還是商家類(lèi)型？用戶(hù)從哪個(gè)渠道進(jìn)來(lái)的等，而且這些植入在產(chǎn)品代碼中的埋點(diǎn)可以不間斷持續(xù)的采集和配套產(chǎn)品迭代進(jìn)行維護(hù)，可以幫助業(yè)務(wù)團(tuán)隊(duì)獲取大量有效數(shù)據(jù)用作業(yè)務(wù)分析決策。

② 什么時(shí)候派上用場(chǎng)

這些數(shù)據(jù)埋點(diǎn)主要是為業(yè)務(wù)目標(biāo)的洞察分析服務(wù)，也就是說(shuō)業(yè)務(wù)目標(biāo)中需要采集用戶(hù)行為數(shù)據(jù)時(shí)，埋點(diǎn)就要派上用場(chǎng)了，相比傳統(tǒng)的業(yè)務(wù)日志，埋點(diǎn)可以收集到更加全面的界面交互的行為數(shù)據(jù)，能夠簡(jiǎn)易的還原出一套線(xiàn)上用戶(hù)的使用情景，而不僅限于一些業(yè)務(wù)后臺(tái)就能統(tǒng)計(jì)出的轉(zhuǎn)化率或基礎(chǔ)數(shù)據(jù)等；

并且埋點(diǎn)數(shù)據(jù)可以與業(yè)務(wù)數(shù)據(jù)分開(kāi)存儲(chǔ)運(yùn)維，這意味著埋點(diǎn)數(shù)據(jù)可以更迅速的根據(jù)設(shè)定的指標(biāo)公式統(tǒng)計(jì)出期望的數(shù)據(jù)或視圖，并且不會(huì)干擾業(yè)務(wù)訪(fǎng)問(wèn)的性能質(zhì)量，因此產(chǎn)品迭代后的新老數(shù)據(jù)對(duì)比、營(yíng)銷(xiāo)活動(dòng)的效果評(píng)估、用戶(hù)行為的特征偏好識(shí)別等，數(shù)據(jù)埋點(diǎn)都以可以派上用場(chǎng)的。

③ 怎么提埋點(diǎn)需求？

首先埋點(diǎn)需求沒(méi)有固定的文檔格式，其次不同埋點(diǎn)服務(wù)平臺(tái)的要求也有差異，就移動(dòng)端來(lái)講，很多服務(wù)商已經(jīng)支持可視化埋點(diǎn)、全埋點(diǎn)、無(wú)埋點(diǎn)服務(wù)，可以實(shí)現(xiàn)自動(dòng)識(shí)別交互元素并進(jìn)行埋點(diǎn)操作，大大減少了開(kāi)發(fā)工作量，那么再聊回埋點(diǎn)需求怎么提。

核心結(jié)論就是由上而下，通過(guò)業(yè)務(wù)目標(biāo)或核心指標(biāo)進(jìn)行拆解，然后關(guān)聯(lián)到核心的任務(wù)流程上，對(duì)于一個(gè)頁(yè)面或一套流程沒(méi)有必要進(jìn)行全篇埋點(diǎn)，技巧我概括為以下幾點(diǎn)；

埋點(diǎn)需求的主要內(nèi)容基本包含以下，根據(jù)業(yè)務(wù)或埋點(diǎn)平臺(tái)的差異，可以自行調(diào)整；

④ 業(yè)務(wù)擴(kuò)參怎么一回事兒

擴(kuò)參即擴(kuò)展參數(shù)，指在當(dāng)前用戶(hù)界面中可以請(qǐng)求到的業(yè)務(wù)數(shù)據(jù)，并將這些業(yè)務(wù)數(shù)據(jù)綁定到埋點(diǎn)日志中一并上報(bào)給埋點(diǎn)數(shù)據(jù)后臺(tái)，通常為一些用戶(hù)屬性參數(shù)、業(yè)務(wù)屬性參數(shù)、設(shè)備屬性參數(shù)、網(wǎng)絡(luò)環(huán)境參數(shù)，這樣我們就可以通過(guò)這些額外的參數(shù)進(jìn)行數(shù)據(jù)分析或是過(guò)濾，舉個(gè)典型案例；

3. 數(shù)據(jù)治理是做什么

① 為什么要治理？

簡(jiǎn)單說(shuō)就是提升數(shù)據(jù)質(zhì)量與準(zhǔn)確性，在龐大的一套數(shù)據(jù)中，我們需要弄清楚數(shù)據(jù)之間的映射關(guān)系，即不同的數(shù)據(jù)參數(shù)代表了什么元素什么動(dòng)作什么含義，數(shù)據(jù)是否有缺漏或冗余、報(bào)錯(cuò)漏報(bào)亂報(bào)、是否有無(wú)效的臟數(shù)據(jù)（例如內(nèi)部的測(cè)試數(shù)據(jù)或腳本爬蟲(chóng)等帶來(lái)的數(shù)據(jù)），如果我們不去將這些數(shù)據(jù)進(jìn)行治理，則統(tǒng)計(jì)出的數(shù)據(jù)指標(biāo)特征或趨勢(shì)都將不可靠，無(wú)法被商業(yè)應(yīng)用。

簡(jiǎn)單講就是元數(shù)據(jù)沒(méi)治理準(zhǔn)確，得到的數(shù)據(jù)指標(biāo)也就失去了實(shí)用價(jià)值。

② 怎么去治理？

本質(zhì)是查缺補(bǔ)漏將無(wú)效的數(shù)據(jù)過(guò)濾掉或糾錯(cuò)，再把數(shù)據(jù)涵義映射成具體的指標(biāo)或描述，用作進(jìn)一步的指標(biāo)計(jì)算與分析，如果數(shù)據(jù)又多又雜，你會(huì)發(fā)覺(jué)這一步要你老命，例如埋點(diǎn)就需要逐個(gè)查詢(xún)?cè)悸顸c(diǎn)的位置、觸發(fā)條件、埋點(diǎn)用途、埋點(diǎn)含義甚至與關(guān)聯(lián)業(yè)務(wù)數(shù)據(jù)的關(guān)系校對(duì)等。

不過(guò)還好，一般來(lái)講這些工作都是數(shù)據(jù)建模（BI）相關(guān)人員去負(fù)責(zé)的，作為應(yīng)用層的我們，更多的是能夠根據(jù)業(yè)務(wù)目標(biāo)提出埋點(diǎn)需求、提出指標(biāo)與數(shù)據(jù)報(bào)表需求，以及通過(guò)數(shù)據(jù)核算或查看數(shù)據(jù)趨勢(shì)等手段找出異常讓 BI 修復(fù)，所以這里就不展開(kāi)埋點(diǎn)數(shù)據(jù)治理的方法了。

③ 數(shù)據(jù)維護(hù)不易

就埋點(diǎn)監(jiān)控用戶(hù)行為的方式來(lái)講，除了平時(shí)的治理與報(bào)表問(wèn)題修復(fù)，每次迭代改版還要做好相關(guān)埋點(diǎn)信息的管理與維護(hù)更新，保證不出錯(cuò)，不影響關(guān)聯(lián)指標(biāo)，甚至是線(xiàn)上用戶(hù)偏好的推薦算法等應(yīng)用，特別是數(shù)據(jù)規(guī)模越來(lái)越大后，又密切關(guān)聯(lián)著業(yè)務(wù)決策時(shí)，數(shù)據(jù)更不容出錯(cuò)，且要求準(zhǔn)確。

六、三大分析內(nèi)容產(chǎn)出

1. 內(nèi)容產(chǎn)出的先后

在用戶(hù)行為分析內(nèi)容構(gòu)建的過(guò)程中，除非是有特定場(chǎng)景特定訴求，通常個(gè)人認(rèn)為都是先出指標(biāo)、再完善行為鏈路、再逐步豐滿(mǎn)用戶(hù)畫(huà)像的一個(gè)過(guò)程，原因如下；

1. 通常先接到的都是一些核心指標(biāo)，例如轉(zhuǎn)化率、留存率、活躍度等，同時(shí)這些指標(biāo)也是上層最先關(guān)注到的；
2. 接著就是完善不同場(chǎng)景或任務(wù)路徑相關(guān)，幫助洞察微觀(guān)視角下的體驗(yàn)障礙或用戶(hù)偏好等，產(chǎn)出流量統(tǒng)計(jì)、流程漏斗等，起到業(yè)務(wù)體驗(yàn)的洞察改善決策作用；
3. 用戶(hù)畫(huà)像的數(shù)據(jù)本身就沒(méi)那么好收集，并且是一個(gè)逐步完善和被業(yè)務(wù)決策應(yīng)用的過(guò)程，所以一開(kāi)始不會(huì)直接奔著用戶(hù)畫(huà)像構(gòu)建開(kāi)始；

2. 基礎(chǔ)指標(biāo)構(gòu)建

所謂指標(biāo)可以理解成是產(chǎn)品某項(xiàng)業(yè)務(wù)的成績(jī)，例如我是賣(mài)包子的，那么我的指標(biāo)大概率就是每天賣(mài)出去多少包子、利潤(rùn)有多少、哪款包子銷(xiāo)量高，根據(jù)這些信息我就可以知道我平時(shí)應(yīng)該準(zhǔn)備多少包子、哪些品類(lèi)的包子需要多做一些、我靠賣(mài)包子能賺多少錢(qián)。

① 指標(biāo)構(gòu)建的原理

實(shí)際上指標(biāo)的構(gòu)建邏輯可以很簡(jiǎn)單，例如 A 占 B 的百分比、ABC 的總和、連續(xù)多天 A 占 B 的變化等，很多加減乘除的算法就能搞定，主要是能拿到真實(shí)數(shù)據(jù)，不然我懷疑你在做爛賬......

常見(jiàn)指標(biāo)：

3. 行為鏈路分析

用戶(hù)行為路徑是一種數(shù)字化的旅行地圖，相比較傳統(tǒng)服務(wù)的旅行地圖，場(chǎng)景會(huì)更純粹、意圖更準(zhǔn)確、數(shù)據(jù)采集更便捷，主要作用有以下幾點(diǎn)；

1. 分析用戶(hù)在產(chǎn)品中的活動(dòng)范圍或頁(yè)面路徑的關(guān)系，可以幫助了解用戶(hù)活躍分布，流量走向等情況；
2. 識(shí)別在任務(wù)或流程漏斗中的卡點(diǎn)或跳失情況，幫助優(yōu)化流程體驗(yàn)或提升轉(zhuǎn)化率等指標(biāo)；
3. 通過(guò)用戶(hù)的互動(dòng)方式或路徑特征來(lái)進(jìn)行用戶(hù)分類(lèi)或偏好分析預(yù)測(cè)等，用于內(nèi)容推薦算法或精準(zhǔn)營(yíng)銷(xiāo)；

這些行為我們可以大致分為瀏覽、消費(fèi)、互動(dòng)三大類(lèi)，根據(jù)不同的業(yè)務(wù)類(lèi)型，可以選擇性采集和分析相關(guān)數(shù)據(jù)，例如電商產(chǎn)品就比較關(guān)注用戶(hù)的瀏覽與消費(fèi)行為，常見(jiàn)的有商品瀏覽、添加購(gòu)物車(chē)到下單；

而社交應(yīng)用就更關(guān)注用戶(hù)的互動(dòng)行為，如不同類(lèi)型的內(nèi)容訪(fǎng)問(wèn)、評(píng)論點(diǎn)贊、關(guān)注收藏分享等；

這些數(shù)據(jù)最終可能由可視化的數(shù)據(jù)報(bào)表呈現(xiàn)出來(lái)，以便于業(yè)務(wù)團(tuán)隊(duì)快捷的找到數(shù)據(jù)問(wèn)題或特征，如常見(jiàn)的漏斗圖、桑基圖、雷達(dá)圖、樹(shù)狀圖、散點(diǎn)圖、決策樹(shù)等；

小話(huà)題延展

最近在 UXRen 的一場(chǎng)分享會(huì)中，聽(tīng)羅浩講了體驗(yàn)營(yíng)銷(xiāo)的話(huà)題，雖然是關(guān)于用戶(hù)研究在職能崗位上挖掘新的商業(yè)能力的內(nèi)容，但是其中有一段是關(guān)于如何在旅行地圖中挖掘新的營(yíng)銷(xiāo)觸點(diǎn)，有一些體會(huì)，這里結(jié)合用戶(hù)行為鏈路分析簡(jiǎn)單聊一下；

背景與問(wèn)題：

產(chǎn)品功能與業(yè)務(wù)增多，引流渠道多樣化，不同渠道流量的撬動(dòng)關(guān)鍵是什么，核心場(chǎng)景具備哪些能力，哪些渠道的流量能吃掉，這些流量所處的觸點(diǎn)或場(chǎng)景能支持什么，用戶(hù)意圖是什么，產(chǎn)品能力能滿(mǎn)足什么，產(chǎn)品發(fā)展可以支持哪些？如何分流或匹配各類(lèi)流量的意圖，并提供路徑分發(fā)，這些用戶(hù)流量數(shù)據(jù)有何趨勢(shì)或特征，是否能與場(chǎng)景或觸點(diǎn)進(jìn)行根因分析，是否沉淀行為或偏好模型？

行為路徑的重點(diǎn)：

在于觀(guān)察不同觸點(diǎn)下的客戶(hù)意圖，展開(kāi)業(yè)務(wù)所能觸及的部分或新的機(jī)會(huì)，并匹配合適的關(guān)鍵路徑，以提升轉(zhuǎn)化或用戶(hù)粘性等，然后做數(shù)據(jù)回歸分析，抓取有效的用戶(hù)特征信息，并應(yīng)用到產(chǎn)品的內(nèi)容推薦或外部引流投放信息優(yōu)化上。

流程過(guò)程：

觸點(diǎn)展開(kāi)與機(jī)會(huì)洞察，觸點(diǎn)場(chǎng)景——意圖識(shí)別——結(jié)果匹配（關(guān)鍵路徑）——（根因回歸）畫(huà)像更新——算法推薦——廣告優(yōu)化

這一套下來(lái)，是不是感覺(jué)有點(diǎn)兒似成相識(shí)？后來(lái)一想這不就是一套用戶(hù)增長(zhǎng)的設(shè)計(jì)思路嘛。

4. 用戶(hù)數(shù)據(jù)畫(huà)像

主要是幫助了解和理解用戶(hù)，使得我們可以劃分用戶(hù)群體和識(shí)別偏好特征，最終以提供精準(zhǔn)營(yíng)銷(xiāo)或是洞察用戶(hù)訴求來(lái)迭代改善產(chǎn)品。

其中偏好特征我們還可以根據(jù)業(yè)務(wù)屬性細(xì)分為興趣偏好、行為偏好、消費(fèi)偏好等，并為不同偏好特征的群體提供個(gè)性化的內(nèi)容服務(wù)，例如常見(jiàn)的內(nèi)容標(biāo)簽標(biāo)記，通過(guò)識(shí)別用戶(hù)常看內(nèi)容的標(biāo)簽，來(lái)推薦類(lèi)似的標(biāo)簽的內(nèi)容或是有潛在興趣的標(biāo)簽內(nèi)容來(lái)抓住用戶(hù)的興趣。

常見(jiàn)畫(huà)像指標(biāo)構(gòu)建

這些指標(biāo)會(huì)通過(guò)用戶(hù)行為、設(shè)備信息、個(gè)人資料的完善來(lái)逐步獲取，主要可以了解到用戶(hù)的地域分布、年齡與性別分布、設(shè)備與活躍度情況，相應(yīng)的數(shù)據(jù)在業(yè)務(wù)后臺(tái)基本上都能夠獲取到，只需要將某個(gè)時(shí)間分區(qū)的數(shù)據(jù)拉出來(lái)，經(jīng)過(guò) Excel 之類(lèi)的軟件把數(shù)據(jù)加工一下，就能夠獲取到相關(guān)數(shù)據(jù)視圖。

如果將多個(gè)數(shù)據(jù)指標(biāo)結(jié)合起來(lái)分析，便可以獲取一些復(fù)合型數(shù)據(jù)指標(biāo)，例如哪些年齡段的用戶(hù)群體消費(fèi)能力更強(qiáng)、活躍度更高、不同教育背景的興趣愛(ài)好是否有一定的關(guān)聯(lián)性等等；

進(jìn)階畫(huà)像指標(biāo)構(gòu)建

進(jìn)階的數(shù)據(jù)畫(huà)像會(huì)完善更多的用戶(hù)特征信息，便于業(yè)務(wù)團(tuán)隊(duì)找到用戶(hù)群體的特征，做進(jìn)一步的精細(xì)化運(yùn)營(yíng)或內(nèi)容推薦，常見(jiàn)的畫(huà)像指標(biāo)如下；

此外就是在收集用戶(hù)數(shù)據(jù)的過(guò)程中，保證用戶(hù)隱私安全、合法性和安全性。

用戶(hù)分層模型應(yīng)用

當(dāng)我們采集到一定的用戶(hù)數(shù)據(jù)后，就可以在數(shù)據(jù)畫(huà)像的構(gòu)建階段進(jìn)一步完成用戶(hù)分層工作，這一步是為了將用戶(hù)分類(lèi)，因?yàn)椴煌脩?hù)群的目的是有差異的，例如閑逛、精準(zhǔn)采購(gòu)、參與活動(dòng)的等等，以提供差異化的服務(wù)做精準(zhǔn)營(yíng)銷(xiāo)、識(shí)別用戶(hù)群體特征做業(yè)務(wù)策略決策、或是優(yōu)化產(chǎn)品體驗(yàn)相關(guān)，不過(guò)當(dāng)你的用戶(hù)規(guī)模尚小，運(yùn)營(yíng)模式簡(jiǎn)單，你也不用迫切去進(jìn)行用戶(hù)分層相關(guān)，因?yàn)槭找娌淮蟆?/p>

那么通常都有哪些用戶(hù)分層模型呢？其實(shí)你并不陌生，一些給你列舉了一些；

七、分析結(jié)論到應(yīng)用

相信你也發(fā)現(xiàn)了，用戶(hù)行為分析的構(gòu)建與產(chǎn)出并不只是行為鏈路的數(shù)據(jù)，同時(shí)會(huì)包攬很多其他的有價(jià)值的指標(biāo)與數(shù)據(jù)，所以不要被用戶(hù)行為四個(gè)字迷惑，或許你此刻正需要構(gòu)建相關(guān)數(shù)據(jù)。

當(dāng)你準(zhǔn)備構(gòu)建或整理用戶(hù)行為分析前，記得目標(biāo)或問(wèn)題先行，針對(duì)性采集數(shù)據(jù)或建設(shè)指標(biāo)，在你有了相對(duì)準(zhǔn)確或清晰易懂的數(shù)據(jù)后，那些數(shù)據(jù)報(bào)表或圖表根本難不倒你，說(shuō)白了無(wú)非是將純純的一堆數(shù)據(jù)換了形式展示，如果你數(shù)據(jù)可視化的形式與應(yīng)用不夠了解，你可以看看 AntV 官網(wǎng)的介紹說(shuō)明了解一下，其實(shí)你也不用每個(gè)都研究個(gè)遍，實(shí)用的就那么幾個(gè)，酷炫是要代價(jià)的，報(bào)表搭建平臺(tái)支不支持、Excel 支不支持、時(shí)間精力夠不夠研發(fā)給你整，都是問(wèn)題～

AntV 官網(wǎng) ：https://ant-design-charts.antgroup.com/examples

最后

你可能疑問(wèn)沒(méi)有完整的教程手把手教你啊，其實(shí)不然，構(gòu)建的前提、流程、要點(diǎn)、建設(shè)方向均在此篇中交代過(guò)，當(dāng)你按照這套流程框架去做，基本上不會(huì)有啥大問(wèn)題，一般來(lái)講這些內(nèi)容也夠用，至于選用哪些數(shù)據(jù)埋點(diǎn)平臺(tái)、數(shù)據(jù)分析平臺(tái)、報(bào)表搭建平臺(tái)、視自家公司情況而定吧。

也不要擔(dān)心在數(shù)據(jù)報(bào)表搭建或分析的過(guò)程中，你搞不定，是不是你執(zhí)行先不說(shuō)，多問(wèn)問(wèn)百度或平臺(tái)客服總能解決，如果就是覺(jué)得很難上手，那么大概率是工具你不熟，或者工具不好用

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。

那好話(huà)不多說(shuō)，我們正式開(kāi)始～

在開(kāi)始之前先來(lái)說(shuō)說(shuō) 什么是 B 端產(chǎn)品，我們通常也叫做管理后臺(tái)。

這里會(huì)有兩個(gè)問(wèn)題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。

首先它管理的是數(shù)據(jù)，無(wú)論是 ERP 系統(tǒng)的訂單數(shù)據(jù)、CRM 的客戶(hù)數(shù)據(jù)、OA 的流程數(shù)據(jù)，你都會(huì)發(fā)現(xiàn)管理后臺(tái)就是在不停的對(duì)數(shù)據(jù)進(jìn)行補(bǔ)充、整合。

那到底應(yīng)該如何管理？簡(jiǎn)單來(lái)說(shuō)就是 數(shù)據(jù)的“增刪改查”，篩選其實(shí)就是查詢(xún)的一種重要方式。

比如一個(gè)客戶(hù)關(guān)系管理系統(tǒng)（CRM），銷(xiāo)售人員去拜訪(fǎng)客戶(hù)就會(huì)提前查詢(xún)客戶(hù)信息，來(lái)了解客戶(hù)關(guān)注內(nèi)容進(jìn)而去組織銷(xiāo)售話(huà)術(shù)。

那這里的篩選應(yīng)該如何設(shè)計(jì)？怎樣設(shè)計(jì)既能高效便利，同時(shí)也具備擴(kuò)展性？那今天我們系統(tǒng)盤(pán)點(diǎn)篩選組件究竟應(yīng)該如何設(shè)計(jì)？

一、篩選與搜索的差別

這里我們先來(lái)講講篩選的鄰居“搜索”，因?yàn)楹芏嗤瑢W(xué)其實(shí)對(duì)于這兩者之間的差別不太了解，只知道它們都是在工具欄當(dāng)中，都是在做查詢(xún)數(shù)據(jù)的工作。但在功能上是有明顯的區(qū)分：

搜索是對(duì)系統(tǒng)的關(guān)鍵詞進(jìn)行精準(zhǔn)匹配，比如用戶(hù) ID、手機(jī)號(hào)、昵稱(chēng)、地址等信息內(nèi)容

篩選則是給出產(chǎn)品的固定條件選項(xiàng)，比如歸屬人、狀態(tài)、類(lèi)型 等，你可以按需勾選條件，就能得出對(duì)應(yīng)數(shù)據(jù)

這里稍微多說(shuō)一句，因?yàn)樗械?B 端系統(tǒng)都是由字段組成，而在大的分類(lèi)上，字段主要包含有輸入、選擇、上傳三大類(lèi)型。

搜索服務(wù)于輸入類(lèi)字段，比如剛才講到了 用戶(hù) ID、手機(jī)號(hào)、昵稱(chēng)、地址等 都是得讓用戶(hù)自行輸入才會(huì)得到，因此在表單里輸入，在表格當(dāng)中也是輸入搜索，所以系統(tǒng)是關(guān)聯(lián)的。

篩選則是選擇類(lèi)字段，也就是歸屬人、狀態(tài)、類(lèi)型 等，在 B 端系統(tǒng)當(dāng)中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。

理解篩選與搜索的差異后，我們?cè)賮?lái)說(shuō)說(shuō)篩選～

二、篩選的邏輯

在篩選的過(guò)程當(dāng)中，有著非常多重要的邏輯需要提前掌握，我們通過(guò)簡(jiǎn)單的快問(wèn)快答，幫助大家快速拆解。

第一題：什么是 且、或、非

這是篩選當(dāng)中必須要了解的基礎(chǔ)運(yùn)算條件。

且就是篩選的條件必須同時(shí)滿(mǎn)足才能出結(jié)果，比如一個(gè)電商數(shù)據(jù)分析師，需要篩選潛在高意向客戶(hù)，在篩選條件為「時(shí)間在近 30 天有支付訂單、近 30 天累計(jì)消費(fèi)金額≥800 元、近 30 天訂單次數(shù)≥2 次」，必須同時(shí)滿(mǎn)足才會(huì)滿(mǎn)足用戶(hù)需求。

或就是這些條件滿(mǎn)足任意一個(gè)就能出結(jié)果，比如還是電商數(shù)據(jù)，需要尋找對(duì)產(chǎn)品有興趣的潛在客戶(hù)，就需要篩選「近 90 天內(nèi)有過(guò)人工咨詢(xún)記錄、近 30 天內(nèi)訪(fǎng)問(wèn)產(chǎn)品詳情頁(yè)≥6 次、近 180 天內(nèi)提交過(guò)試用申請(qǐng)」，三個(gè)條件滿(mǎn)足任意一個(gè)，這樣就能涵蓋更為全面。

非就是這些條件必須排除掉才能出結(jié)果，比如電商數(shù)據(jù)，因?yàn)樯婕暗剿巍⑼丝畹那闆r，需要將其進(jìn)行清洗，因此在篩選條件上就需要滿(mǎn)足「訂單狀態(tài)≠測(cè)試訂單、支付狀態(tài)≠已退款、客戶(hù)類(lèi)型≠內(nèi)部員工」，需要同時(shí)排除這些數(shù)據(jù)。

所以對(duì)應(yīng)的篩選運(yùn)算規(guī)則，其實(shí)背后都是用戶(hù)在使用時(shí)需要深度分析使用的最為重要的工具～

第二題：在B端系統(tǒng)當(dāng)中多個(gè)篩選條件默認(rèn)的運(yùn)算規(guī)則是什么？

A：且 B：或 C：非

在 B 端系統(tǒng)當(dāng)中，最常用的運(yùn)算規(guī)則就是且，也就是取多個(gè)篩選當(dāng)中的交集。

比如下面這三個(gè)篩選項(xiàng)，所計(jì)算的呈現(xiàn)規(guī)則就是 「銷(xiāo)售負(fù)責(zé)人是李強(qiáng)」且「銷(xiāo)售時(shí)間是 近一個(gè)月」且「價(jià)值為高價(jià)值」的客戶(hù)，這樣就是一個(gè)典型的且的關(guān)系。

因?yàn)檫@種思維方式是最符合用戶(hù)的思考邏輯，這也是眾多 B 端系統(tǒng)當(dāng)中的常見(jiàn)邏輯。

第三題：且、或、非可以同時(shí)存在于一個(gè)篩選組合當(dāng)中嗎？

A.可以

B.不可以

它們可以出現(xiàn)在同一個(gè)篩選組合當(dāng)中，因?yàn)閷?shí)際的業(yè)務(wù)往往是“多條件、多邏輯” 的復(fù)合場(chǎng)景。

比如在教育管理系統(tǒng)當(dāng)中，班主任要篩選 初三年級(jí)且數(shù)學(xué)月考不及格 或 非 住校生 的學(xué)生，來(lái)針對(duì)這兩類(lèi)人群進(jìn)行重點(diǎn)管理與監(jiān)控。

但在篩選的設(shè)計(jì)當(dāng)中，為了讓用戶(hù)理解邏輯，我們需要通過(guò) 條件組（如括號(hào)、層級(jí)縮進(jìn)、虛線(xiàn)框）讓用戶(hù)直觀(guān)感知分組關(guān)系，避免依賴(lài)抽象的優(yōu)先級(jí)規(guī)則。

第四題：如果你是一個(gè)設(shè)計(jì)師，應(yīng)該如何降低成本表達(dá)這個(gè)關(guān)系？

因?yàn)檫壿嬢^為復(fù)雜，所以在篩選時(shí)有些基礎(chǔ)辦法可以降低門(mén)檻。

① 可視化展示篩選運(yùn)算，如果用戶(hù)對(duì)于且、或邏輯不太了解，可以使用圖標(biāo)快速表示

② 實(shí)時(shí)校驗(yàn)邏輯規(guī)則，不要出現(xiàn)相互矛盾的篩選邏輯

這個(gè)功能其實(shí)不太好做，但 ONES 做了一個(gè)最簡(jiǎn)單的邏輯判斷。在且條件當(dāng)中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當(dāng)中經(jīng)常出現(xiàn)的相互矛盾的篩選邏輯。

三、篩選的類(lèi)型

好的，準(zhǔn)備工作已經(jīng)完成，我們就可以順利了解篩選的類(lèi)型。

由于篩選的類(lèi)型眾多，我們會(huì)按照 業(yè)務(wù)復(fù)雜度、容器差異 兩個(gè)維度，來(lái)對(duì)篩選進(jìn)行歸類(lèi)。
通過(guò)業(yè)務(wù)復(fù)雜度，將其分為：基礎(chǔ)篩選、高級(jí)篩選、自定義篩選

按照容器差異，將其分為：標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選

1. 基礎(chǔ)篩選

基礎(chǔ)篩選是將 高頻使用（使用頻率≥80%）的篩選條件進(jìn)行固定，一直保持在頁(yè)面中的核心位置，不折疊、不隱藏，讓用戶(hù)能夠直接看到的篩選類(lèi)型。

這是一個(gè)最為基礎(chǔ)的篩選方式，在常見(jiàn)的 Ant Design、Arco Design 的頁(yè)面模板當(dāng)中都會(huì)有基礎(chǔ)篩選的身影。

使用基礎(chǔ)篩選最為重要的便是 快速觸達(dá)，用戶(hù)打開(kāi)頁(yè)面就會(huì)查看篩選條件，不需要點(diǎn)擊“更多”“展開(kāi)” 等入口，這能滿(mǎn)足 B 端用戶(hù) 高效完成日常操作 的核心需求。

在使用基礎(chǔ)篩選時(shí)，我們需要注意以下問(wèn)題：

① 基礎(chǔ)篩選條件的數(shù)量不宜過(guò)多，一般 3-4 個(gè)最為合適

因?yàn)楹Y選條件過(guò)多，就失去了常駐的意義。但在實(shí)際業(yè)務(wù)當(dāng)中，我們也需要考慮 5 個(gè)、7 個(gè)這類(lèi)極端場(chǎng)景，畢竟常駐是最為基礎(chǔ)的方案，難免會(huì)遇到特殊情況。（需要在篩選的規(guī)則當(dāng)中進(jìn)行梳理，將交互邏輯呈現(xiàn)清楚）

② 基礎(chǔ)篩選當(dāng)中，排序規(guī)則會(huì)非常重要

一般按照 高頻-低頻 的方式，從左到右依次排列，對(duì)于高頻低頻的獲取方式，我們可以數(shù)據(jù)埋點(diǎn)、卡片分類(lèi)、問(wèn)卷調(diào)研等多種方式進(jìn)行搜集。

③ 篩選基礎(chǔ)，樣式就不基礎(chǔ)

基礎(chǔ)篩選有著較多的篩選樣式，大家可以結(jié)合自身業(yè)務(wù)進(jìn)行選擇，這里推薦樣式一與二，因?yàn)檎故拘矢摺?/strong>