上個(gè)月試水了一篇長(zhǎng)文，以小紅書(shū)的個(gè)人數(shù)據(jù)中心為例，拆解了數(shù)據(jù)看板的搭建方法。這篇基于個(gè)例做個(gè)引申總結(jié)，盤(pán)點(diǎn)下我見(jiàn)過(guò)的幾種數(shù)據(jù)看板的樣式，并總結(jié)下各自的利弊。 PC 和移動(dòng)端都有，歡迎檢閱。
「先看看 PC 端」
當(dāng)前大部分指標(biāo)類(lèi)數(shù)據(jù)產(chǎn)品的主陣地，還是 PC 端。PC 端相對(duì)移動(dòng)端，能承載更多內(nèi)容，以及更多復(fù)雜的分析操作，而且頁(yè)面空間較大，所以在布局設(shè)計(jì)上也有更多的類(lèi)型方案。
市面上比較常見(jiàn)的頁(yè)面布局方式就是平鋪樣式，大概就是下圖這個(gè)樣子。在頂部有一個(gè)全局生效的篩選控件區(qū)域，比如時(shí)間控件等；然后下方就是平鋪開(kāi)的一個(gè)個(gè)數(shù)據(jù)模塊，每個(gè)模塊里都有數(shù)據(jù)指標(biāo)和對(duì)應(yīng)的可視化圖表，且每個(gè)模塊自稱(chēng)一體，相互模塊之間大概率沒(méi)什么關(guān)聯(lián)性。隨著 PC 端右側(cè)滾輪的滑動(dòng)，數(shù)據(jù)模塊可以有很多行，信息量較大。
有了大概形象認(rèn)知，咱們?cè)僬f(shuō)下平鋪樣式的優(yōu)缺點(diǎn)：
? 優(yōu)點(diǎn)，平鋪展示的話(huà)信息一目了然，不需要其他交互操作；而且承載的信息足夠多，可以充分利用空間
? 缺點(diǎn)，信息容易雜亂不聚焦；而且單純的指標(biāo)呈現(xiàn)展示，缺乏連貫的業(yè)務(wù)分析思路，容易讓看板淪為純看數(shù)工具；由于交互操作比較簡(jiǎn)單（只有頂部全局篩選控件），無(wú)法支持較復(fù)雜的數(shù)據(jù)下鉆分析等交互操作，導(dǎo)致看板無(wú)法滿(mǎn)足分析需求；數(shù)據(jù)模塊較多，容易影響頁(yè)面前端加載速度，用戶(hù)進(jìn)入界面后可能需要等待 1-2 秒鐘，體驗(yàn)較差
鑒于平鋪樣式的缺點(diǎn)，市面上逐漸也出現(xiàn)了一些升級(jí)改善樣式，比如指標(biāo)-圖表聯(lián)動(dòng)交互的樣式（如下圖）。除了頂部的全局篩選控件外，在下方縮小了數(shù)據(jù)指標(biāo)模塊的大小，而且將指標(biāo)與可視化圖表進(jìn)行了分離。數(shù)據(jù)指標(biāo)放在一行，可以是一個(gè)橫向滑動(dòng)的區(qū)域，選擇想要具體查看的指標(biāo)；選中后，下方的可視化區(qū)域就是聯(lián)動(dòng)對(duì)應(yīng)展示。比如下圖示意的選中數(shù)據(jù)指標(biāo) 1 后，下方可視化圖表區(qū)域展示的就都是指標(biāo) 1 的具體情況，可以有趨勢(shì)波動(dòng)，也可以有多維度下鉆去歸因指標(biāo)異動(dòng)。
這個(gè)聯(lián)動(dòng)的樣式有優(yōu)點(diǎn)，但也有缺點(diǎn)：
? 優(yōu)點(diǎn)，不再像平鋪式那樣信息繁多，重點(diǎn)比較突出聚焦；把指標(biāo)和可視化區(qū)域拆開(kāi)后，總分的分析結(jié)構(gòu)也更清晰
? 缺點(diǎn)，展示的信息有限；而且指標(biāo)-可視化區(qū)域的交互聯(lián)動(dòng)操作，不是所有用戶(hù)都能自動(dòng)習(xí)得的，上線初期可能會(huì)被用戶(hù)抱怨投訴；數(shù)據(jù)指標(biāo)之間依然是相對(duì)割裂的，無(wú)法展示一個(gè)成熟的業(yè)務(wù)流程
我們會(huì)發(fā)現(xiàn)，上面兩個(gè)樣式都是比較普適性質(zhì)的，比較多出現(xiàn)在第三方廠商提供的 BI 平臺(tái)產(chǎn)品中。但普適、通用的問(wèn)題就在于不夠貼近業(yè)務(wù)，很多大公司在建設(shè) BI 看板的時(shí)候都會(huì)考慮自研而非采買(mǎi)，數(shù)據(jù)產(chǎn)品經(jīng)理可發(fā)揮的空間和余地也就更大，可以比上面的指標(biāo)-圖表聯(lián)動(dòng)交互樣式更向前一步的布局方案，比如下圖這種。抽象概括來(lái)看就是把數(shù)據(jù)指標(biāo)和可視化圖表分離，但數(shù)據(jù)指標(biāo)以地圖形式完整的平鋪的界面上，點(diǎn)擊具體數(shù)據(jù)指標(biāo)之后，通過(guò)彈出浮層來(lái)展示對(duì)應(yīng)指標(biāo)的具體分析。
相比前面兩種樣式，這種地圖式的優(yōu)缺點(diǎn)是：
? 優(yōu)點(diǎn)，既能承載較多信息，又能將業(yè)務(wù)指標(biāo)以符合業(yè)務(wù)流程的形式串聯(lián)組織在一起，形成一個(gè)具有業(yè)務(wù)視角的指標(biāo)分析；同時(shí)通過(guò)地圖上的流程順序關(guān)系，可以比較好的突出重點(diǎn)信息；同樣指標(biāo)與可視化圖表分離后，分析的結(jié)構(gòu)也相對(duì)更清晰
? 缺點(diǎn)，定制化程度較高，如果業(yè)務(wù)變更頻繁，指標(biāo)地圖也需要頻繁變更配置開(kāi)發(fā)，成本較高；點(diǎn)擊指標(biāo)后彈出浮層的交互操作，也有一定學(xué)習(xí)適應(yīng)成本
上面就是 PC 端指標(biāo)類(lèi)數(shù)據(jù)產(chǎn)品的 3 種頁(yè)面布局方案，大家可以結(jié)合自己公司和業(yè)務(wù)的實(shí)際情況適當(dāng)選擇。
「再說(shuō)說(shuō)移動(dòng)端」
說(shuō)完 PC 端，再聊聊移動(dòng)端。如果說(shuō) PC 端的定位是承載更多信息、更多復(fù)雜操作分析，那么移動(dòng)端的定位就是更快捷、更方便、更精簡(jiǎn)。移動(dòng)端的數(shù)據(jù)受眾可能往往并不需要復(fù)雜的分析，更多只是需要知道現(xiàn)狀和問(wèn)題，剩下的可以去找別的辦法解決。畢竟 PC 端不是也解決不了提出優(yōu)化建議的問(wèn)題么？所以我們看到了本章研究分析的小紅書(shū)數(shù)據(jù)中心，它在移動(dòng)端數(shù)據(jù)看板里算是頁(yè)面布局設(shè)計(jì)比較精巧用心的，其他案例比如微信的訂閱號(hào)助手里，也有類(lèi)似的看板，具體如下圖所示：
我們把頁(yè)面抽象一下，就會(huì)發(fā)現(xiàn)移動(dòng)端的指標(biāo)類(lèi)數(shù)據(jù)產(chǎn)品，其實(shí)核心還是參考了 PC 端的平鋪式方案，且減少了全局篩選控件，取而代之的是每個(gè)模塊內(nèi)的小 tag 形式篩選切換時(shí)間；同時(shí)涉及到概括與詳情的關(guān)系，會(huì)通過(guò)點(diǎn)擊查看更多這種操作，跳轉(zhuǎn)到二級(jí)頁(yè)面，但頁(yè)面深度不會(huì)更多了，就只到二級(jí)；整體在頂部也是不超過(guò) 3 個(gè)切換選擇的 tab，大概就是下圖這個(gè)樣子：
雖然目前市面上移動(dòng)端的指標(biāo)類(lèi)數(shù)據(jù)產(chǎn)品，普遍采用的都是這種樣式。但我們要問(wèn)，還有沒(méi)有其他可能？尤其是隨著以 ChatGPT 為代表的大模型應(yīng)用驚艷亮相，或許移動(dòng)端可以打破平鋪模式，讓對(duì)話(huà)式登上舞臺(tái)中央？畢竟人機(jī)對(duì)話(huà)是移動(dòng)端最友好的一種交互方式，而且大模型也具備了一定邏輯分析能力，劃定范圍內(nèi)的指標(biāo)多維下鉆分析已經(jīng)不成問(wèn)題。
但我認(rèn)為對(duì)話(huà)式也不是萬(wàn)能解藥，不能在移動(dòng)端只擺個(gè)類(lèi)似微信聊天對(duì)話(huà)窗口的界面，就讓大家自己?jiǎn)枴Ｒ驗(yàn)楹诵牡闹笜?biāo)還是需要一眼就能看到，不能每次我都要重復(fù)去問(wèn)才能給我看；而且對(duì)話(huà)式也有它的局限，就是依然無(wú)法在較小的屏幕空間內(nèi)呈現(xiàn)足夠多的、連續(xù)的、體系化的分析信息。不過(guò)相比已有的移動(dòng)端樣式，已經(jīng)算是一種新的探索嘗試了。一種可能的樣式請(qǐng)參見(jiàn)下圖：
「做個(gè)小結(jié)」
至此，我們盤(pán)點(diǎn)完了PC、移動(dòng)端指標(biāo)類(lèi)數(shù)據(jù)產(chǎn)品的各種頁(yè)面布局樣式，做一個(gè)簡(jiǎn)單匯總?cè)缦卤怼?/p>
okk，本期內(nèi)容至此結(jié)束了。
看完覺(jué)得寫(xiě)得好的，不防打賞一元，以支持藍(lán)海情報(bào)網(wǎng)揭秘更多好的項(xiàng)目。
標(biāo)簽： 指標(biāo) 數(shù)據(jù) 樣式 隨筆
感謝您的支持，我會(huì)繼續(xù)努力的!
打開(kāi)支付寶掃一掃，即可進(jìn)行掃碼打賞哦
手機(jī)直接保存圖片,掃一掃識(shí)別二維碼,即可進(jìn)行掃碼打賞哦
