後臺產品設計指南
將復雜抽象的數據以壹種人們更容易理解的形式直觀地展示出來的壹系列手段稱為數據可視化。數據可視化在後臺產品中的應用主要包括大屏和數據圖表兩部分。本文將向您介紹數據可視化的產品設計規範。
數據圖表壹般出現在後臺產品的首頁和統計模塊。後面說的數據大屏其實是不同數據圖表的組合,因為比較特殊所以單獨介紹。
後臺的首頁可以是簡單的歡迎頁,但是這樣做會浪費首頁的黃金位置。根據用戶的角色和身份設計不同的內容,展示用戶當前的待辦事項、平臺的關鍵數據和數據預警更為合適,以圖表的形式展示會議更為直觀。用戶壹進入首頁就能看到核心內容,能知道當前宏觀形勢,知道下壹步該怎麽做。
至於統計模塊,則是平臺管理層決策的利器。除了展示基礎數據報表和圖表,還需要結合平臺業務、相關政策等信息,給予用戶輔助決策的信息。下面介紹壹下常用的數據圖表類型。
條形圖
直方圖壹般用來表示某個分類下數據的大小,可以是單個的,也可以是多個。比如2021中某地不同月份的最大值。
橫條圖也叫條形圖,類似於條形圖的使用場景。條形圖更適合顯示類別名稱較長的數據,使用條形圖會導致數據顯示不完整。
折線圖
折線圖壹般用於反映壹段時間內數據的變化趨勢。比如近10年考研報名人數。
直方圖和折線圖有些相似。直方圖適用於數據較少的分析,折線圖適用於連續時間內數據較多的分析。
餡餅
餅圖壹般用來表示不同類型數據的比例。比如壹個公司不同部門的業績比。餅狀圖也有壹些特殊的呈現形式,比如玫瑰圖,需要壹定的成本才能看懂。
散點圖
散點圖壹般用來實現兩組數據之間是否存在某種相關性,可能是線性相關、正相關或者其他類型。比如員工工作年限和工資的對應關系。
雷達圖
雷達圖壹般用於比較和分析不同的指標。比如騰訊的產品經理能力雷達圖。
熱力學圖
熱圖以高亮的形式表達數據的集中區域。比如中國國慶假期的遊客分布。
關系圖
關系圖通常用於表示對象之間的相互關系。比如下圖中李白周圍的示意圖。
漏鬥圖
漏鬥圖壹般用來表達不同業務環節的價值轉化。比如電商行業客戶訪問、註冊、下單、支付轉化數據。
其他使用的場景不多,比如k線圖、桑吉圖、盒須圖,這裏就不展開了,有興趣的讀者可以自己研究壹下。
數據大屏是以大屏為主要載體的數據可視化設計。數據大屏是數據的最後壹個應用環節,與如何采集、清洗、處理數據,是否使用數據倉庫技術無關。
數據大屏設計流程
1.了解業務流程
大數據屏壹般用於信息展示、數據分析、監控和預警。不管是哪壹種,都需要對業務有充分的了解,否則設計出來的大屏只能是空中樓閣。
2.細化數據指標
每個行業的數據指標都不壹樣。比如電商消費的核心數據是GMV;;買家數量,訂單數量,最受歡迎的品牌都是次要數據。大屏幕上能顯示的內容由於空間限制有限,所以必須先顯示核心數據。
3.確定分析維度
同壹數據指標有不同的分析維度。比如電商GMV,可以統計平臺累計金額,按月統計新增金額,按商品類型統計數據。
確定圖表類型
這壹步需要使用上面提到的圖表,並根據業務數據選擇合理的圖表類型。在選擇圖表時,不僅要考慮用戶的直觀理解,還要考慮開發和實現的可行性。
5.了解大屏幕參數
在正式輸出設計稿之前,需要提前了解信號源計算機的分辨率和現場環境下大屏幕的相關參數。如果事先不知道效果,很容易出錯,返工會浪費很多成本。
6.頁面設計草稿
設計師按照壹定的規格和要展示的內容輸出設計稿。大屏產品不能貪圖作秀,而忽略了本質,即大屏是為了高效展示信息,提供決策輔助。
7.程序開發和實施
這個過程包括前端樣式的實現和數據訪問,其實數據訪問在前期是可以先行的。有壹些效果很難開發。這時候設計師可以合作提供切圖的實現。開發完成後,需要進行內部驗收測試,除了註重風格,還需要驗證數據的準確性。
大屏幕適配
大數據屏的顯示可以是拼接屏,也可以是完整的大屏幕。數據大屏的本質是通過有線信號把電腦屏幕放到大屏幕上,兩者的內容是壹樣的。
壹般來說,我們需要了解大屏幕的類型和分辨率,選擇合適的設計稿尺寸。如果大屏幕和電腦的比例相同,可以根據大屏幕的分辨率做設計稿,然後開發實現;或者用等比例縮小的分辨率尺寸做設計稿,然後導出2倍圖,進行沖印。如果大屏幕和電腦的比例不壹致,此時就要優先保證大屏幕上的顯示效果,電腦和大屏幕都會有壹定的誤差。
大數據屏實現後,壹定要去現場調試,避免出現意外情況。數據大屏的設計稿和開發改編不需要產品經理過多關註,只需要關註最終的質量。
需要註意的事項
1.大數據屏幕上要有主次,不能貪多,不需要賣弄技巧;
2.數據大屏的字體大小和PC上不壹樣,需要註意;
3.需要根據行業、應用場景等因素選擇合適的配色方案;
4.合理利用動態效果可以提升大屏幕的質感和空間感。
數據可視化廣泛應用於後臺產品。只有了解數據可視化的應用場景和設計規範,才能設計出實用的可視化產品。
在寫作過程中,如有任何意見或想法,歡迎有興趣的讀者添加我的微信,共同交流探討,共同進步。