UI大牛教你產(chǎn)品信息統(tǒng)計(jì)實(shí)踐

做To B產(chǎn)品的交互設(shè)計(jì)，難免會(huì)遇到數(shù)據(jù)統(tǒng)計(jì)相關(guān)的設(shè)計(jì)工作，畢竟B端的需求包含了管理者對(duì)網(wǎng)站、對(duì)人員的管理，需要通過(guò)數(shù)據(jù)來(lái)了解整個(gè)網(wǎng)站的運(yùn)營(yíng)狀況。前段時(shí)間由于客戶需求的緊迫，連續(xù)做了好幾個(gè)統(tǒng)計(jì)信息模塊的設(shè)計(jì)迭代，正好可以來(lái)說(shuō)說(shuō)這類信息該如何進(jìn)行規(guī)劃和設(shè)計(jì)。

Web端是統(tǒng)計(jì)信息最合適的載體

雖然已經(jīng)全面跨入移動(dòng)互聯(lián)網(wǎng)時(shí)代，但web端仍然有其存在的必要性（PC客戶端在產(chǎn)品升級(jí)迭代方面的較差表現(xiàn)，使得其逐漸被web端取代，本文暫不提及）。手機(jī)的便攜性特點(diǎn)決定了其屏幕大小勢(shì)必走不出方寸之間，一旦一個(gè)頁(yè)面所需要承載的信息量較大，移動(dòng)端就直接可以被拋棄，或者僅作為輔助終端了。

統(tǒng)計(jì)信息的展示就是其中一種大信息量需求類型，在移動(dòng)端當(dāng)然也可以針對(duì)性地設(shè)計(jì)圖和表，但圖表除了查看具體每條信息的作用之外，還承載著整體性觀察和信息間對(duì)比的使用場(chǎng)景，小屏幕無(wú)法達(dá)到這樣“一目了然”的查看效果，因此web端是統(tǒng)計(jì)信息最適合的載體。

To B產(chǎn)品的受眾是企業(yè)／商家，在客戶對(duì)產(chǎn)品的需求中，很重要的一塊內(nèi)容就是網(wǎng)站管理和運(yùn)營(yíng)，比如電商類網(wǎng)站的賣家端、社交類網(wǎng)站的內(nèi)容輸出端（大V端）等，他們需要通過(guò)統(tǒng)計(jì)數(shù)據(jù)來(lái)了解運(yùn)營(yíng)狀況，從而進(jìn)行總結(jié)和改善，那么，對(duì)統(tǒng)計(jì)圖表的高需求度必然使得web端成為To B產(chǎn)品很重要的一個(gè)內(nèi)容承載終端。

那么，在web端，我們應(yīng)該怎么來(lái)規(guī)劃和設(shè)計(jì)大量數(shù)據(jù)報(bào)表的展示呢？

分析和確定信息層次

首先，我們需要確定的是，在頁(yè)面上呈現(xiàn)的數(shù)據(jù)種類有多少，數(shù)據(jù)的量有多大。但往往對(duì)于功能復(fù)雜的To B產(chǎn)品來(lái)說(shuō)，統(tǒng)計(jì)數(shù)據(jù)的種類和量級(jí)是非常龐大的，客戶對(duì)于數(shù)據(jù)的要求是“全量”獲取。

為了讓頁(yè)面看上去盡量簡(jiǎn)潔、重點(diǎn)突出、直觀易讀，就需要對(duì)這“全量”的大數(shù)據(jù)做分模塊、分層次的規(guī)劃。

1. 分模塊

分模塊是我們最常用的手段，根據(jù)信息的不同類型，來(lái)分頁(yè)面展示。通俗一點(diǎn)說(shuō)，就是盡量將不同類信息放在不同Tab下展示，以減少單頁(yè)面的信息承載量，同時(shí)，Tab也為使用者提供了快速的內(nèi)容導(dǎo)航。

我們?cè)谠普n堂企業(yè)版的統(tǒng)計(jì)報(bào)表模塊，就分了課程學(xué)習(xí)統(tǒng)計(jì)、課程資源統(tǒng)計(jì)、項(xiàng)目學(xué)習(xí)統(tǒng)計(jì)等不同的報(bào)表頁(yè)面，如果單個(gè)頁(yè)面的信息量還是過(guò)于龐大，可以相應(yīng)地增加模塊中的子級(jí)導(dǎo)航。

2. 分層次

放在同一個(gè)頁(yè)面展示的數(shù)據(jù)信息，我們也應(yīng)該根據(jù)其屬性、重要程度來(lái)確定展示的層次。

我們接觸得最多的數(shù)據(jù)信息展示形式有：表、圖、大數(shù)字等。其中，“表”所承載的信息密度是最大的，其次是“圖”，而大數(shù)字的形式則只能在一個(gè)特定區(qū)域內(nèi)展示一個(gè)一維指標(biāo)，信息密度是最小的。

從這個(gè)角度來(lái)說(shuō)，信息密度小的數(shù)據(jù)展現(xiàn)形式，往往代表著數(shù)據(jù)指標(biāo)本身的重要性非常高，我們也會(huì)把它放在頁(yè)面最顯著的位置，比如頁(yè)面頂部。

確定了各類圖表樣式的特點(diǎn)和作用之后，我們就需要開(kāi)始著手分析各個(gè)指標(biāo)的重要程度了，根據(jù)不同重要程度來(lái)決定采用怎樣的圖表樣式，以及放在頁(yè)面的什么位置來(lái)進(jìn)行展現(xiàn)。

3. 確定指標(biāo)重要程度的考慮因素：

• 功能頁(yè)面主要針對(duì)的使用人群
• 使用目的
• 概率最高的使用場(chǎng)景

首先需要確認(rèn)的是，這個(gè)功能頁(yè)面使用率最高的是哪類人群，比如，是公司高層決策者，還是產(chǎn)品經(jīng)理、HR等職能人員。

其次考慮，他們最終的使用目的是什么，比如把握整體公司運(yùn)營(yíng)狀況，還是了解銷售量、短期運(yùn)營(yíng)活動(dòng)情況等細(xì)節(jié)。

再次是出于這種使用目的，模擬他們進(jìn)入功能頁(yè)面后的場(chǎng)景、關(guān)注點(diǎn)、使用路徑等，從而做出指標(biāo)最重要性的決策。

比如在云課堂企業(yè)版中，我們通過(guò)與企業(yè)用戶的訪談溝通，了解到企業(yè)線上培訓(xùn)的管理者往往是HR，而HR所關(guān)注的是，這個(gè)平臺(tái)有沒(méi)有被真正用起來(lái)，使用率和效果好不好，這直接能反映HR部門的工作成效。那么我們就大致明白了，其經(jīng)常查看的數(shù)據(jù)往往是員工學(xué)習(xí)時(shí)長(zhǎng)、線上學(xué)習(xí)人數(shù)、選課完課人次等重要指標(biāo)。

使用合適的表現(xiàn)形式

前面我們說(shuō)，最為重要的指標(biāo)應(yīng)該優(yōu)先用信息密度低的形式來(lái)展現(xiàn)，但是考慮到不同指標(biāo)本身的屬性，并不是所有的形式都能夠匹配所有數(shù)據(jù)指標(biāo)，還是需要具體問(wèn)題具體分析。比如，“活躍度”這樣的指標(biāo)，它除了要看數(shù)值本身，也需要看一個(gè)時(shí)間軸上的變化趨勢(shì)，那么光使用一個(gè)一維的“大數(shù)字”形式，或者使用矩陣表格的形式就很難滿足這樣的指標(biāo)展示要求。

如果確定要用“圖”來(lái)表現(xiàn)數(shù)據(jù)，可供我們選擇的數(shù)據(jù)可視化圖形是非常多的，這在以往的相關(guān)文章中都有提到過(guò)，在此不再贅述。我們可以大致采用以下策略去初步選擇表現(xiàn)形式：

• 需要看比例，并且?guī)讉€(gè)指標(biāo)互斥的，適合用餅圖或者圓環(huán)；
• 需要看比例，但是每個(gè)指標(biāo)并不互斥時(shí)，適合使用柱狀圖、條狀圖；
• 需要看趨勢(shì)，適合使用曲線圖；
• 當(dāng)一個(gè)對(duì)象存在2-3個(gè)維度的指標(biāo)時(shí)，可以嘗試使用散點(diǎn)圖、氣泡圖來(lái)做不同對(duì)象間的對(duì)比；
• 當(dāng)一個(gè)對(duì)象存在大于3個(gè)維度的指標(biāo)時(shí)，可以嘗試使用雷達(dá)圖來(lái)做不同對(duì)象間的對(duì)比；

以上這些圖形是最為基礎(chǔ)的數(shù)據(jù)表達(dá)圖形，但在數(shù)據(jù)可視化領(lǐng)域，還有很多不同的表達(dá)方式，值得我們多去尋找和應(yīng)用。

全量統(tǒng)計(jì)表的靈活展示

如果是To C產(chǎn)品 ，我們并不建議在統(tǒng)計(jì)模塊使用承載全量數(shù)據(jù)的矩陣表，畢竟表格的信息量大，缺乏重點(diǎn)，可讀性較差，如果只是查看頁(yè)面數(shù)據(jù)的話，“數(shù)據(jù)可視化”是體驗(yàn)最好的策略。

但是對(duì)于To B產(chǎn)品來(lái)說(shuō)，企業(yè)有查看和保存全量數(shù)據(jù)的需求，甚至還需要導(dǎo)出全量數(shù)據(jù)，進(jìn)行更進(jìn)一步的數(shù)據(jù)分析，所以表格是必不可少的形式。

如何才能使死板的表格在使用時(shí)更加易讀呢？我們可以對(duì)表格增加一些必要的擴(kuò)展功能，來(lái)進(jìn)行靈活控制。

1. 時(shí)間范圍的控制

對(duì)時(shí)間范圍的控制，即截取某一段時(shí)間范圍內(nèi)的表格內(nèi)容，進(jìn)行對(duì)比分析，這是一個(gè)常見(jiàn)的篩選需求。時(shí)間段選擇的控件在設(shè)計(jì)時(shí)需要注意哪些細(xì)節(jié)呢？

• 默認(rèn)值的設(shè)置

我們需要對(duì)查看表格的用戶進(jìn)行使用情境分析，來(lái)確定這個(gè)時(shí)間范圍的默認(rèn)值設(shè)置為多少最為合適。

比如，網(wǎng)站的管理員，在查看用戶活躍性時(shí)，往往需要了解的是最近一段時(shí)間的活躍度指標(biāo)，這段時(shí)間不宜過(guò)長(zhǎng)，但必須是最為新鮮的數(shù)據(jù)，那么時(shí)間范圍的默認(rèn)值就可以設(shè)置為“最近一周”。

• 增加幾個(gè)快捷選項(xiàng)

時(shí)間范圍的選擇，在交互流程上來(lái)說(shuō)肯定是操作步驟較多的，需要選擇開(kāi)始時(shí)間、結(jié)束時(shí)間，還包括選擇時(shí)間時(shí)在日歷上的翻頁(yè)操作等，因此，快捷選項(xiàng)的存在就非常必要了。

比如，可以列出1天、7天、30天等用戶最有可能選擇的時(shí)間長(zhǎng)度，作為快捷選項(xiàng)放在最容易點(diǎn)擊操作的位置，以避免過(guò)多的操作步驟帶來(lái)的體驗(yàn)下降。

• 使用戶了解時(shí)間的可選范圍

比如，不可選擇的時(shí)刻做置灰處理，hover時(shí)鼠標(biāo)手勢(shì)變更為“不可點(diǎn)”狀態(tài)等，都是最基本的提示方式，若設(shè)置了“所有時(shí)間”這樣的快捷選項(xiàng)，那么這個(gè)時(shí)間段就應(yīng)該要有相應(yīng)的提示，究竟是從哪一天到哪一天被定義為了“所有時(shí)間”（很多情況下，會(huì)由于技術(shù)上的限制，導(dǎo)致平臺(tái)與用戶所定義的“所有時(shí)間”不一致，比如當(dāng)天的數(shù)據(jù)拿不到等）

2. 條件篩選的控制

條件篩選是最為常見(jiàn)的表格呈現(xiàn)控制手段，尤其在電商類產(chǎn)品中最為多見(jiàn)。

但針對(duì)產(chǎn)品列表與針對(duì)數(shù)據(jù)表格，條件篩選功能的設(shè)計(jì)是有所區(qū)別的，數(shù)據(jù)表格類的條件篩選，可以參考以下建議：

• 篩選條件必須是表格中存在的字段

當(dāng)你的表格中不存在“部門”這個(gè)字段，而篩選條件卻有“部門”字段，那么當(dāng)用戶想查看一個(gè)學(xué)習(xí)人數(shù)最多的部門具體表現(xiàn)如何時(shí)，就需要一個(gè)一個(gè)部門進(jìn)行點(diǎn)擊嘗試。但如果說(shuō)“部門”字段本身就存在，那么通過(guò)查看前幾頁(yè)的表格信息，大致能判斷那個(gè)部門值得嘗試點(diǎn)擊查看。

另一方面，篩選之后，每條呈現(xiàn)的信息在這個(gè)字段上“都一樣”，也就時(shí)刻提醒著使用者，你正在查看一張被條件篩選過(guò)的表格，而不是“全部表格”。

• 篩選條件需要進(jìn)行數(shù)量控制

并不是所有的字段都需要設(shè)置成篩選條件，篩選框過(guò)多會(huì)導(dǎo)致重點(diǎn)不突出、操作不方便，在設(shè)計(jì)上很難做到好的體驗(yàn)，在開(kāi)發(fā)層面也造成系統(tǒng)比較復(fù)雜，拉低系統(tǒng)運(yùn)行速度，所以，我們必須設(shè)定好有需求、有使用場(chǎng)景的少數(shù)幾個(gè)重要字段，來(lái)匹配相應(yīng)的篩選功能。

3. 排序功能

有了排序功能，查看表格時(shí)就可以更加直觀地了解該字段的大致分布情況，以及方便找出在該字段上表現(xiàn)最好和最差的信息條目。

當(dāng)然不是每個(gè)字段都需要有排序功能，字段本身必須是可以用來(lái)比較大小的數(shù)字，而且對(duì)于找出最好和最差條目是有需求的。

表格信息量的控制

矩陣型的表格，承載的信息量可以很大，因?yàn)樾泻土械臄?shù)量都沒(méi)有嚴(yán)格意義上的上限。即使To B產(chǎn)品免不了要使用這樣的數(shù)據(jù)表格，但是，電腦屏幕的顯示區(qū)域有限，人們一次接受的信息量也有限，在設(shè)計(jì)時(shí)仍然需要盡力控制信息量。

以下列出的一些具體方法可供借鑒：

1. 字段太多，如何做到一目了然？

當(dāng)橫向字段太多的時(shí)候，表格就會(huì)出現(xiàn)橫向滾動(dòng)條，那么也就意味著，用戶無(wú)法在同一屏中查看一行條目中所有字段的信息。

為了滿足大部分用戶的需求，字段可以無(wú)限制地增加，但是對(duì)于個(gè)體用戶來(lái)說(shuō)，系統(tǒng)提供的這些字段，并不是都關(guān)注都用得上，所以此時(shí)提供自定義字段的顯示是最為合理的。

用戶可以將自己最為關(guān)注的字段選出來(lái)，隱藏其他不?？吹?，這樣一來(lái)，信息量就被有效控制住了，用戶也更有“為自己量身定制”的掌控感。

2. 行數(shù)的控制

大家都知道，表格中橫向的表頭在最上方，如果不控制分頁(yè)的行數(shù)，就會(huì)導(dǎo)致表格翻到底部時(shí)，無(wú)法對(duì)應(yīng)上每個(gè)值的字段名，所以，表格的行數(shù)最好控制在一屏能展示完的量級(jí)上。

3. 字段內(nèi)容（文字）太多，怎樣設(shè)計(jì)呈現(xiàn)？

如果某一個(gè)字段，其對(duì)應(yīng)內(nèi)容勢(shì)必會(huì)有很多文字，或者不排除有很多字符的情況存在（比如課程簡(jiǎn)介、多級(jí)部門等），那么在設(shè)計(jì)表格呈現(xiàn)時(shí)，需要考慮到這種較為極端的情況。

為了不影響表格整體的視覺(jué)和查閱效果，最好能限制最多呈現(xiàn)的字符數(shù)，其余部分做省略處理，但是，仍然需要提供給用戶查看完整字段內(nèi)容的途徑，比如hover時(shí)出現(xiàn)浮層的設(shè)計(jì)。

4. 表頭固定，避免記憶負(fù)擔(dān)

上文提到過(guò)，對(duì)表格的行數(shù)需進(jìn)行控制，但如果存在特殊情況，如單行的高度無(wú)法確定，導(dǎo)致即使行數(shù)進(jìn)行了控制，也無(wú)法保證內(nèi)容能在一屏內(nèi)顯示，那么另外一個(gè)相應(yīng)的做法是，翻屏?xí)r，保持頂部的表頭能吸頂固定顯示。

因?yàn)槿藗兊挠洃涁?fù)荷是有限的，需要耗費(fèi)用戶記憶力的頁(yè)面設(shè)計(jì)自然不是好設(shè)計(jì)。若沒(méi)有表頭的提示，用戶在翻屏?xí)r很難記住每個(gè)數(shù)值具體代表的是什么含義。

同理，當(dāng)字段較多需要拖動(dòng)橫向滾動(dòng)條時(shí)，首列的表頭也最好能做固定處理。

總結(jié)

To B產(chǎn)品的需求方是付費(fèi)大客戶，很多情況下，我們無(wú)法拒絕客戶所提的需求，他們想要的東西越多，我們的產(chǎn)品就越難做到簡(jiǎn)潔易用。但無(wú)論如何，設(shè)計(jì)本身就是“戴著鐐銬跳舞”的過(guò)程，絕不能因此而放棄用戶體驗(yàn)。

相比移動(dòng)端，雖然web端可施展拳腳的區(qū)域大，但仍然應(yīng)該盡量避免多、雜、亂的設(shè)計(jì)，往簡(jiǎn)潔、流暢的方向靠攏，給用戶更好的使用感受。

相關(guān)文章--《產(chǎn)品經(jīng)理了解商業(yè)必讀》