(電子商務(wù)研究中心訊) To B產(chǎn)品的需求方是付費(fèi)大客戶，很多情況下，我們無法拒絕客戶所提的需求，他們想要的東西越多，我們的產(chǎn)品就越難做到簡(jiǎn)潔易用。
做To B產(chǎn)品的交互設(shè)計(jì)，難免會(huì)遇到數(shù)據(jù)統(tǒng)計(jì)相關(guān)的設(shè)計(jì)工作，畢竟B端的需求包含了管理者對(duì)網(wǎng)站、對(duì)人員的管理，需要通過數(shù)據(jù)來了解整個(gè)網(wǎng)站的運(yùn)營(yíng)狀況。
前段時(shí)間由于客戶需求的緊迫，連續(xù)做了好幾個(gè)統(tǒng)計(jì)信息模塊的設(shè)計(jì)迭代，正好可以來說說這類信息該如何進(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è)頁面所需要承載的信息量較大，移動(dòng)端就直接可以被拋棄，或者僅作為輔助終端了。
統(tǒng)計(jì)信息的展示就是其中一種大信息量需求類型，在移動(dòng)端當(dāng)然也可以針對(duì)性地設(shè)計(jì)圖和表，但圖表除了查看具體每條信息的作用之外，還承載著整體性觀察和信息間對(duì)比的使用場(chǎng)景，小屏幕無法達(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端)等，他們需要通過統(tǒng)計(jì)數(shù)據(jù)來了解運(yùn)營(yíng)狀況，從而進(jìn)行總結(jié)和改善，那么，對(duì)統(tǒng)計(jì)圖表的高需求度必然使得web端成為To B產(chǎn)品很重要的一個(gè)內(nèi)容承載終端。
那么，在web端，我們應(yīng)該怎么來規(guī)劃和設(shè)計(jì)大量數(shù)據(jù)報(bào)表的展示呢？
分析和確定信息層次
首先，我們需要確定的是，在頁面上呈現(xiàn)的數(shù)據(jù)種類有多少，數(shù)據(jù)的量有多大。但往往對(duì)于功能復(fù)雜的To B產(chǎn)品來說，統(tǒng)計(jì)數(shù)據(jù)的種類和量級(jí)是非常龐大的，客戶對(duì)于數(shù)據(jù)的要求是“全量”獲取。
為了讓頁面看上去盡量簡(jiǎn)潔、重點(diǎn)突出、直觀易讀，就需要對(duì)這“全量”的大數(shù)據(jù)做分模塊、分層次的規(guī)劃。
1.分模塊
分模塊是我們最常用的手段，根據(jù)信息的不同類型，來分頁面展示。通俗一點(diǎn)說，就是盡量將不同類信息放在不同Tab下展示，以減少單頁面的信息承載量，同時(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)表頁面，如果單個(gè)頁面的信息量還是過于龐大，可以相應(yīng)地增加模塊中的子級(jí)導(dǎo)航。
2.分層次
放在同一個(gè)頁面展示的數(shù)據(jù)信息，我們也應(yīng)該根據(jù)其屬性、重要程度來確定展示的層次。
我們接觸得最多的數(shù)據(jù)信息展示形式有：表、圖、大數(shù)字等。其中，“表”所承載的信息密度是最大的，其次是“圖”，而大數(shù)字的形式則只能在一個(gè)特定區(qū)域內(nèi)展示一個(gè)一維指標(biāo)，信息密度是最小的。
從這個(gè)角度來說，信息密度小的數(shù)據(jù)展現(xiàn)形式，往往代表著數(shù)據(jù)指標(biāo)本身的重要性非常高，我們也會(huì)把它放在頁面最顯著的位置，比如頁面頂部。
確定了各類圖表樣式的特點(diǎn)和作用之后，我們就需要開始著手分析各個(gè)指標(biāo)的重要程度了，根據(jù)不同重要程度來決定采用怎樣的圖表樣式，以及放在頁面的什么位置來進(jìn)行展現(xiàn)。
3.確定指標(biāo)重要程度的考慮因素
功能頁面主要針對(duì)的使用人群使用目的概率最高的使用場(chǎng)景首先需要確認(rèn)的是，這個(gè)功能頁面使用率最高的是哪類人群，比如，是公司高層決策者，還是產(chǎn)品經(jīng)理、HR等職能人員。
其次考慮，他們最終的使用目的是什么，比如把握整體公司運(yùn)營(yíng)狀況，還是了解銷售量、短期運(yùn)營(yíng)活動(dòng)情況等細(xì)節(jié)。
再次是出于這種使用目的，模擬他們進(jìn)入功能頁面后的場(chǎng)景、關(guān)注點(diǎn)、使用路徑等，從而做出指標(biāo)最重要性的決策。
比如在云課堂企業(yè)版中，我們通過與企業(yè)用戶的訪談溝通，了解到企業(yè)線上培訓(xùn)的管理者往往是HR，而HR所關(guān)注的是，這個(gè)平臺(tái)有沒有被真正用起來，使用率和效果好不好，這直接能反映HR部門的工作成效。那么我們就大致明白了，其經(jīng)常查看的數(shù)據(jù)往往是員工學(xué)習(xí)時(shí)長(zhǎng)、線上學(xué)習(xí)人數(shù)、選課完課人次等重要指標(biāo)。
使用合適的表現(xiàn)形式
前面我們說，最為重要的指標(biāo)應(yīng)該優(yōu)先用信息密度低的形式來展現(xiàn)，但是考慮到不同指標(biāo)本身的屬性，并不是所有的形式都能夠匹配所有數(shù)據(jù)指標(biāo)，還是需要具體問題具體分析。比如，“活躍度”這樣的指標(biāo)，它除了要看數(shù)值本身，也需要看一個(gè)時(shí)間軸上的變化趨勢(shì)，那么光使用一個(gè)一維的“大數(shù)字”形式，或者使用矩陣表格的形式就很難滿足這樣的指標(biāo)展示要求。
如果確定要用“圖”來表現(xiàn)數(shù)據(jù)，可供我們選擇的數(shù)據(jù)可視化圖形是非常多的，這在以往的相關(guān)文章中都有提到過，在此不再贅述。我們可以大致采用以下策略去初步選擇表現(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)圖、氣泡圖來做不同對(duì)象間的對(duì)比；當(dāng)一個(gè)對(duì)象存在大于3個(gè)維度的指標(biāo)時(shí)，可以嘗試使用雷達(dá)圖來做不同對(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)，可讀性較差，如果只是查看頁面數(shù)據(jù)的話，“數(shù)據(jù)可視化”是體驗(yàn)最好的策略。
但是對(duì)于To B產(chǎn)品來說，企業(yè)有查看和保存全量數(shù)據(jù)的需求，甚至還需要導(dǎo)出全量數(shù)據(jù)，進(jìn)行更進(jìn)一步的數(shù)據(jù)分析，所以表格是必不可少的形式。
如何才能使死板的表格在使用時(shí)更加易讀呢？我們可以對(duì)表格增加一些必要的擴(kuò)展功能，來進(jìn)行靈活控制。
1.時(shí)間范圍的控制
對(duì)時(shí)間范圍的控制，即截取某一段時(shí)間范圍內(nèi)的表格內(nèi)容，進(jìn)行對(duì)比分析，這是一個(gè)常見的篩選需求。時(shí)間段選擇的控件在設(shè)計(jì)時(shí)需要注意哪些細(xì)節(jié)呢？
默認(rèn)值的設(shè)置
我們需要對(duì)查看表格的用戶進(jìn)行使用情境分析，來確定這個(gè)時(shí)間范圍的默認(rèn)值設(shè)置為多少最為合適。
比如，網(wǎng)站的管理員，在查看用戶活躍性時(shí)，往往需要了解的是最近一段時(shí)間的活躍度指標(biāo)，這段時(shí)間不宜過長(zhǎng)，但必須是最為新鮮的數(shù)據(jù)，那么時(shí)間范圍的默認(rèn)值就可以設(shè)置為“最近一周”。
增加幾個(gè)快捷選項(xiàng)
時(shí)間范圍的選擇，在交互流程上來說肯定是操作步驟較多的，需要選擇開始時(shí)間、結(jié)束時(shí)間，還包括選擇時(shí)間時(shí)在日歷上的翻頁操作等，因此，快捷選項(xiàng)的存在就非常必要了。
比如，可以列出1天、7天、30天等用戶最有可能選擇的時(shí)間長(zhǎng)度，作為快捷選項(xiàng)放在最容易點(diǎn)擊操作的位置，以避免過多的操作步驟帶來的體驗(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.條件篩選的控制
條件篩選是最為常見的表格呈現(xiàn)控制手段，尤其在電商類產(chǎ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)擊嘗試。但如果說“部門”字段本身就存在，那么通過查看前幾頁的表格信息，大致能判斷那個(gè)部門值得嘗試點(diǎn)擊查看。
另一方面，篩選之后，每條呈現(xiàn)的信息在這個(gè)字段上“都一樣”，也就時(shí)刻提醒著使用者，你正在查看一張被條件篩選過的表格，而不是“全部表格”。
篩選條件需要進(jìn)行數(shù)量控制
并不是所有的字段都需要設(shè)置成篩選條件，篩選框過多會(huì)導(dǎo)致重點(diǎn)不突出、操作不方便，在設(shè)計(jì)上很難做到好的體驗(yàn)，在開發(fā)層面也造成系統(tǒng)比較復(fù)雜，拉低系統(tǒng)運(yùn)行速度，所以，我們必須設(shè)定好有需求、有使用場(chǎng)景的少數(shù)幾個(gè)重要字段，來匹配相應(yīng)的篩選功能。
3.排序功能
有了排序功能，查看表格時(shí)就可以更加直觀地了解該字段的大致分布情況，以及方便找出在該字段上表現(xiàn)最好和最差的信息條目。
當(dāng)然不是每個(gè)字段都需要有排序功能，字段本身必須是可以用來比較大小的數(shù)字，而且對(duì)于找出最好和最差條目是有需求的。
表格信息量的控制
矩陣型的表格，承載的信息量可以很大，因?yàn)樾泻土械臄?shù)量都沒有嚴(yán)格意義上的上限。即使To B產(chǎn)品免不了要使用這樣的數(shù)據(jù)表格，但是，電腦屏幕的顯示區(qū)域有限，人們一次接受的信息量也有限，在設(shè)計(jì)時(shí)仍然需要盡力控制信息量。
以下列出的一些具體方法可供借鑒：
1.字段太多，如何做到一目了然？
當(dāng)橫向字段太多的時(shí)候，表格就會(huì)出現(xiàn)橫向滾動(dòng)條，那么也就意味著，用戶無法在同一屏中查看一行條目中所有字段的信息。
為了滿足大部分用戶的需求，字段可以無限制地增加，但是對(duì)于個(gè)體用戶來說，系統(tǒng)提供的這些字段，并不是都關(guān)注都用得上，所以此時(shí)提供自定義字段的顯示是最為合理的。
用戶可以將自己最為關(guān)注的字段選出來，隱藏其他不常看的，這樣一來，信息量就被有效控制住了，用戶也更有“為自己量身定制”的掌控感。
2.行數(shù)的控制
大家都知道，表格中橫向的表頭在最上方，如果不控制分頁的行數(shù)，就會(huì)導(dǎo)致表格翻到底部時(shí)，無法對(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í)，需要考慮到這種較為極端的情況。
為了不影響表格整體的視覺和查閱效果，最好能限制最多呈現(xiàn)的字符數(shù)，其余部分做省略處理，但是，仍然需要提供給用戶查看完整字段內(nèi)容的途徑，比如hover時(shí)出現(xiàn)浮層的設(shè)計(jì)。
4.表頭固定，避免記憶負(fù)擔(dān)
上文提到過，對(duì)表格的行數(shù)需進(jìn)行控制，但如果存在特殊情況，如單行的高度無法確定，導(dǎo)致即使行數(shù)進(jìn)行了控制，也無法保證內(nèi)容能在一屏內(nèi)顯示，那么另外一個(gè)相應(yīng)的做法是，翻屏?xí)r，保持頂部的表頭能吸頂固定顯示。
因?yàn)槿藗兊挠洃涁?fù)荷是有限的，需要耗費(fèi)用戶記憶力的頁面設(shè)計(jì)自然不是好設(shè)計(jì)。若沒有表頭的提示，用戶在翻屏?xí)r很難記住每個(gè)數(shù)值具體代表的是什么含義。
同理，當(dāng)字段較多需要拖動(dòng)橫向滾動(dòng)條時(shí)，首列的表頭也最好能做固定處理。
總結(jié)
To B產(chǎn)品的需求方是付費(fèi)大客戶，很多情況下，我們無法拒絕客戶所提的需求，他們想要的東西越多，我們的產(chǎn)品就越難做到簡(jiǎn)潔易用。但無論如何，設(shè)計(jì)本身就是“戴著鐐銬跳舞”的過程，絕不能因此而放棄用戶體驗(yàn)。
相比移動(dòng)端，雖然web端可施展拳腳的區(qū)域大，但仍然應(yīng)該盡量避免多、雜、亂的設(shè)計(jì)，往簡(jiǎn)潔、流暢的方向靠攏，給用戶更好的使用感受。（來源：人人都是產(chǎn)品經(jīng)理 文/網(wǎng)易資深交互設(shè)計(jì)師任瓊瑤 編選：中國(guó)電子商務(wù)研究中心）
