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

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

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

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

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

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

那么，在web端，我們應該怎么來規(guī)劃和設計大量數(shù)據(jù)報表的展示呢？

分析和確定信息層次

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

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

1. 分模塊

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

我們在云課堂企業(yè)版的統(tǒng)計報表模塊，就分了課程學習統(tǒng)計、課程資源統(tǒng)計、項目學習統(tǒng)計等不同的報表頁面，如果單個頁面的信息量還是過于龐大，可以相應地增加模塊中的子級導航。

2. 分層次

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

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

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

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

3. 確定指標重要程度的考慮因素：

• 功能頁面主要針對的使用人群
• 使用目的
• 概率最高的使用場景

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

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

再次是出于這種使用目的，模擬他們進入功能頁面后的場景、關注點、使用路徑等，從而做出指標最重要性的決策。

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

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

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

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

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

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

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

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

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

如何才能使死板的表格在使用時更加易讀呢？我們可以對表格增加一些必要的擴展功能，來進行靈活控制。

1. 時間范圍的控制

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

• 默認值的設置

我們需要對查看表格的用戶進行使用情境分析，來確定這個時間范圍的默認值設置為多少最為合適。

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

• 增加幾個快捷選項

時間范圍的選擇，在交互流程上來說肯定是操作步驟較多的，需要選擇開始時間、結束時間，還包括選擇時間時在日歷上的翻頁操作等，因此，快捷選項的存在就非常必要了。

比如，可以列出1天、7天、30天等用戶最有可能選擇的時間長度，作為快捷選項放在最容易點擊操作的位置，以避免過多的操作步驟帶來的體驗下降。

• 使用戶了解時間的可選范圍

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

2. 條件篩選的控制

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

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

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

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

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

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

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

3. 排序功能

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

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

表格信息量的控制

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

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

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

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

為了滿足大部分用戶的需求，字段可以無限制地增加，但是對于個體用戶來說，系統(tǒng)提供的這些字段，并不是都關注都用得上，所以此時提供自定義字段的顯示是最為合理的。

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

2. 行數(shù)的控制

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

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

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

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

4. 表頭固定，避免記憶負擔

上文提到過，對表格的行數(shù)需進行控制，但如果存在特殊情況，如單行的高度無法確定，導致即使行數(shù)進行了控制，也無法保證內(nèi)容能在一屏內(nèi)顯示，那么另外一個相應的做法是，翻屏時，保持頂部的表頭能吸頂固定顯示。

因為人們的記憶負荷是有限的，需要耗費用戶記憶力的頁面設計自然不是好設計。若沒有表頭的提示，用戶在翻屏時很難記住每個數(shù)值具體代表的是什么含義。

同理，當字段較多需要拖動橫向滾動條時，首列的表頭也最好能做固定處理。

總結

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

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

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