百度統(tǒng)計流量研究院為了將數(shù)據(jù)更好的傳達給用戶，我們采用了動態(tài)數(shù)據(jù)可視化的方式（Interactive Infographic）。希望我們的設(shè)計能將用戶帶入到新鮮、愉悅的氛圍之中。當然，我們在設(shè)計的過程中也體會到了可視化的快樂，并且希望與大家一同分享。

好的流程是成功的一半

預估難度、多部門協(xié)作：好的溝通流程是成功的一半。在設(shè)計最初，首先應當評估的就是項目開發(fā)難度。若開發(fā)難度較大，或者說開發(fā)人員對于可視化產(chǎn)品的制作經(jīng)驗較少，則最好引入多部門協(xié)作的工作方式，盡量避免設(shè)計與實現(xiàn)脫節(jié)的情況出現(xiàn)。

 統(tǒng)籌設(shè)計、紙上文章：統(tǒng)籌設(shè)計是十分重要的，因為它可以保證你的設(shè)計思路是連貫的、有脈絡(luò)的。以我們的經(jīng)驗來見，從最初的設(shè)計想法到低保真的原型都可以通過手繪+貼紙的方式來實現(xiàn)。“紙上文章”最大的好處就是極大的縮短了迭代所學的時間，并且給予了各部門同學更加直觀、簡潔的印象，對于多部門協(xié)作十分有利。

積極參與：UE的工作不僅是把完整的設(shè)計方案呈現(xiàn)出來，還應該保證最終產(chǎn)品高品質(zhì)的上線。舉個例子，在開發(fā)人員開發(fā)操作系統(tǒng)報告時，采取了真實自然光的渲染方式。而實際上在背景色較深的頁面上采用這種渲染方式會使得圖表主體的立體感變差，并且失去質(zhì)感。對于這種情況， UE迅速與開發(fā)人員溝通，由UE來負責flash圖片的繪制工作，實現(xiàn)了高質(zhì)感、立體感強的效果。

設(shè)計詳解

在設(shè)計之初，我們的主要思想確定為用多圖表聯(lián)動交互的方式多維度的展示數(shù)據(jù)，并且確定了在圖表中突出展現(xiàn)給用戶最需要的信息，即信噪比原則。在這個過程中，我們利用了改變圖形指標，引入具象元素，以及將生活情感化總結(jié)等方式，將數(shù)據(jù)可視化展現(xiàn)。同時我們也仔細的研究了數(shù)據(jù)的規(guī)律與趨勢，選擇了合理的展示策略。下面結(jié)合一些圖片來向大家詳細敘說大體的設(shè)計思路：

多圖表聯(lián)動交互：多圖表聯(lián)動交互本身就是一種很有視覺沖擊力的交互方式，也可以讓我們從不同緯度來查看數(shù)據(jù)。用戶的一次操作就可以帶動多圖表的更新，其中的趣味性大家可以去體驗。

信噪比原則：用戶關(guān)注的信息是主流的數(shù)據(jù)的占比與趨勢等信息，而不是末尾的非主流數(shù)據(jù)的信息。因此在設(shè)計過程中盡量的剔除無參考意義的信息是十分重要的，例如在分辨率使用情況報告中的占比很小非標準分辨率就是無參考意義的信息。同時對于數(shù)據(jù)量較多的，比較繁瑣的數(shù)據(jù)，把最重要的數(shù)據(jù)突出展示，同時也提供用戶全集數(shù)據(jù)以供查看。

上圖是我們在設(shè)計過程中的一個被否決的方案，這個方案沒有很好的突出重點的信息，也不方便用戶查看全集的信息。而最終我們希望傳達給用戶的信息應該是第一印象即可大致的了解數(shù)據(jù)的分布，隨后也可對更多的數(shù)據(jù)進行更加詳細的查看分析。

改變圖形指標：仔細探究數(shù)據(jù)與圖形之間的邏輯關(guān)系，找出可以代表數(shù)據(jù)分布的圖形指標（顏色、形狀、面積等）。采用較為新穎的圖形指標，會給用戶帶來新鮮的感受，這里采用了面積指標。

引入具象元素：在設(shè)計中融入具象元素，能夠?qū)⒂脩艨焖俚膸�入到產(chǎn)品之中，讓用戶更直觀的了解內(nèi)容。

將生活情感化總結(jié)：對數(shù)據(jù)的規(guī)律進行總結(jié)，將生活的類似經(jīng)驗進行總結(jié)，運用到設(shè)計之中，賦予設(shè)計以情感。在操作系統(tǒng)市場份額報告中，用星系的概念來表現(xiàn)微軟在操作系統(tǒng)這一領(lǐng)域的統(tǒng)治地位。

將生活情感化總結(jié)：同樣的，越來越多瀏覽器廠家就像切吐司面包一樣在瓜分市場份額，百花齊放。

合理的展示策略：例如在對網(wǎng)民地域分布報告的數(shù)據(jù)進行分析后，我們發(fā)現(xiàn)除廣東省外，其他省的數(shù)據(jù)基本呈線性排列的一個趨勢，并且網(wǎng)民地域分布數(shù)據(jù)波動較小。在各省數(shù)據(jù)差異較小情況下，我們放棄了普遍被采用的固定數(shù)據(jù)對應固定圖形的策略，而是采用了指定數(shù)據(jù)最大值與最小值對應的圖形范圍，期間數(shù)據(jù)按照比例展示圖形的方式。通過這種方式，各省之間的數(shù)據(jù)差異一目了然。除此之外，在設(shè)計的過程中，我們導入了真實的數(shù)據(jù)作為依據(jù)，藉此保證視覺效果的和諧統(tǒng)一。

更多設(shè)計中的細節(jié)與思考，歡迎大家移步百度統(tǒng)計流量研究院細細品味，享受可視化的快樂。

文章來源：百度商業(yè)用戶體驗部

標簽： 百度統(tǒng)計 交互設(shè)計 前段技術(shù) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。