編輯導語：企業(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é)議。