數據大屏設計:企業(yè)客戶服務數據管理大屏
編輯導語:企業(yè)數據大屏主要用于服務企業(yè)整體客服能力體現和監(jiān)控。本文主要分享制作企業(yè)大屏的過程,本次設計使用的是Axure8,其中大屏設計包含了中國熱區(qū)地圖、折線圖、餅圖、雷達圖、列表的輸出展示。希望對你有所幫助。
今天跟大家分享一下,最近制作企業(yè)大屏的過程分享。本次講解的是企業(yè)服務數據大屏,主要功能是企業(yè)整體客服服務能力的體現和監(jiān)控。大屏以黑色背景為主,搭配淺藍色為輔助配色。整體配色比較鮮明對比。其中大屏包含了中國熱區(qū)地圖、折線圖、餅圖、雷達圖、列表的輸出展示。
本次設計使用的是Axure8設計完成(這邊只講Axure設計流程,不會涉及到數據抽取和清洗的過程)。
一、大屏需求
老板想知道客服部,客戶服務的整體情況,包括客服服務范圍情況和反饋的問題統(tǒng)計及客戶年齡分布情況等。需要實時展示。
在線演示地址:https://www.axurebi.com/tem090.html
預覽圖:
二、設計過程講解
大屏設計功能腦圖,在我們收到大屏制作需求時,需要對大屏需要展示的維度和內容進行分析,通常會得出對應的功能腦圖,如下:
大屏整體布局,樣式設計。先看整體布局草圖。
對,上面這圖就是在根據整理好的大屏功能腦圖,后梳理出來的大屏整體布局草圖。接下來我們開始對大屏布局草圖進行上色,圖表的設計等工作。
三、填色過程
從Axure拉取一個矩形做為大屏背景,設計矩形背景尺寸選擇1920x1080px?背景顏色使用#040D2E。這個顏色可以和許多顏色組合。目前大多數顯示器的分辨率都為1920x1080px 。
制作頂部省份選擇區(qū)域,從Axure拉取一個矩形,設置矩形背景顏色#041646。同時Ctrl+鼠標左鍵復制三個相同的矩形。這邊只有三個選項,默認加載全國數據,省份數據按時間需要制作就行。制作大屏兩側區(qū)塊背景層。這邊會使用到2個矩形,還組合完成。先拉取一個矩形,設置矩形背景色為#041646。
同時在拉取一個矩形,放在上一個矩形的下一層。寬度設置與上一層一樣,高度可以按大屏寬度來自行計算。設置矩形背景色為#09153D。
兩個矩形制作完成后,記得將2個矩形組合一起(Ctrl+G),復制幾個出來,放置對應的區(qū)塊位置做細微調試即可。
各個區(qū)塊制作完成后,將對應需要展示的區(qū)塊標題填寫在對應位置,就完成了整個大屏填色的過程了。
效果如下圖:
四、制作圖表
大數據可視化大屏,我們會用到很多數據圖表來展示,我們想要的數據情況。通常一個大屏個人建議圖表不要超過10個。過多的圖表會影響整個演示rp的加載速度。這篇文章,我主要用到了以下幾個圖表做了大屏展示的支撐。數據表格,中國地圖熱力圖,面積折線圖,雷達圖,餅圖。
五、制作過程
1. 訂單配送問題
使用了數據圖表的展示方式。主要展示維度包括:標記符號,類型,數量,占比。我們使用axure的文字組件,就可以完成繪制。最后效果如下圖:
2. 客戶咨詢問題排行
使用了數據圖表的展示方式。主要展示維度包括:熱度,問題內容(5-10字最佳),占比。我們使用axure的文字組件+矩形條#0099FF+矩形ico(svg),就可以完成繪制。最后效果如下圖:
3. 客服行為活動TOP5
使用了數據圖表的展示方式。主要展示維度包括:排名,客服名稱(5-10字最佳),接待時長,接待量。我們使用axure的文字組件+矩形條#FF9966+矩形ico(svg),就可以完成繪制。最后效果如下圖:
4. 客戶排隊趨勢
使用了面積折線圖表的展示方式。主要展示維度包括:排名,客服名稱(5-10字最佳),接待時長,接待量。我們使用axure的文字組件+線條#319FF1+矩形圓#319FF1設置圓邊線1px+面積矩形#199ED8,就可以完成繪制。最后效果如下圖:
5. 客戶滿意人數
使用了面積折線圖表的展示方式。主要展示維度包括:排名,客服名稱(5-10字最佳),接待時長,接待量。我們使用axure的文字組件+線條#B51950+矩形圓#319FF1設置圓邊線1px+面積矩形#B51950,就可以完成繪制。最后效果如下圖:
6. 客戶投訴情況
使用了雷達圖表的展示近6個月的整提客服投訴和處理量方式。主要展示維度包括:月份,投訴量,處理量。我們使用axure的文字組件+多邊矩形#CCCCCC+多邊矩形背景色#CCCCCC、#CCCCCC,就可以完成繪制。最后效果如下圖:
7. 客戶年齡分布
使用了餅圖圖表的展示客戶年齡點比情況。主要展示維度包括:年齡區(qū)間,占比。我們使用axure的圓形矩形#026FD5。制作多個矩形,組合即可。最后效果如下圖:
8. 客服服務指標
使用了餅圖圖表的展示客戶服務情況占比。主要展示維度包括:關閉率,回復超時率,處理超時率。我們使用axure的圓形矩形制作,組合即可。最后效果如下圖:
9. 整體客服服務情況
使用了中國地圖熱區(qū)組件展示,整體客服的服務情況,客戶區(qū)域占比。《Axure教程:可視化中國地圖下鉆交互設計》。最后效果如下圖:
本文由 @Axurebi符號 原創(chuàng)發(fā)布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
本文由@Axurebi符號 原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
大佬 有木有原型原文件分享呀~~
牛的呀,小老板
感謝分享
最近也在做數據大屏