今天就給大家帶來一套全新的儀錶盤美化教程，其中我們將與大家分享乙個【藍紫色卡片樣式】儀錶盤樣式，充分利用了Finebi 60.版本 15 中的新元件分組功能巧妙地適配了 PC 和移動效果，為美化儀表板提供了強大的支援。
PC效果：
移動效果：
下面，我們將從以下方面開始：元件布局、樣式元素的使用和圖表的應用三個方面詳細說明了如何優化和美化儀表板。
文章和圖片都是由 Finesoft 的明星產品 Finebi 製作的！
關注Finefine，我們將持續為您講解企業數位化轉型的資料分析方法和工具及解決方案“>>
原始布局分析
在原始演示的基礎上，整體演示可以分為以下幾個方面：
整體運營資料。
銷售與區域指標。
分析操作的細節。
怎麼了？
雖然整體業務資料放在了正確的位置，但其風格不夠突出，導致地圖和條形圖從頁面中竊取了檢視。
2和3的資訊穿插，違反了人眼觀看資訊的規律，即：上下; 左，右。
第二個重要資訊放置得太高，導致乙個螢幕上顯示不完整，整體瀏覽步驟被打亂。
優化布局問題
根據上面分析的問題，我們將進行有針對性的優化：
突出顯示第乙個重要資料的樣式：重點放在背景中的大色塊上，以便在整個儀表板上一目了然地看到整體業務資料。
用三維圖示吸引眼球。
以上色塊和圖表只是吸引眼球的一種手段，統一的版面調整應根據自身資料來決定有必要使資料以圖形方式完整，吸引有真實的資料去看。
根據資料總分的結構，組織好讀取資料的過程和視線，從而引導使用者從上到下讀取資料。
3.其他布局樣式適用
將每個區域巢狀在兩個圖層內，以避免破壞整體布局和過於複雜的樣式。
在每個區域中，確保存在整體顏色或圖形視覺重量和視覺重量是有區別的、紅色、黃色、綠色。
對原始風格進行整體分析
原始演示中的整個空白螢幕是單調的，沒有很好地利用圖形來呈現資料。 特別是，應避免紅框內的空白空間。
由於資料關係，組織文化、鏈管理等元件存在許多空白區域。
由於選擇的圖表型別不合適，品牌管理、產品管理等類別的圖形不夠飽滿，導致出現空白。
每個元素都是單獨獨立放電的，缺乏分組的概念，但實際上，一些相鄰的圖之間存在相關性。
直方圖和地圖中過多的藍色區域會竊取重要資訊的視覺焦點，導致重要資訊無法突出顯示。
優化整體風格問題
改變使螢幕變薄並使儀表板更豐富的因素。
通過調整組織文化、鏈管理等元件顯示資料的最小值和最大值，或調整元件的位置和大小，可以使圖形盡可能地填充元件區域。
將不合適的圖表替換為內容豐富且滿足業務需求的圖表，並考慮對小區域資料使用合適的型別，例如雷達圖，而雷達圖可能顯得薄弱且不足以處理大面積資料。
將一些關聯的圖表分組排列或堆疊，以提高整體資料檢視的流暢度和一致性。
使用顏色清晰的背景色來突出顯示重要資訊，並使用淺色來突出顯示詳細資訊分析圖表的其餘部分。 需要注意的一點：整個儀表板只能有乙個亮點其他區域的視覺重量不應超過它。
使用不同的顏色來顯示對比柱形圖的兩側，以獲得明顯的對比度。
文體元素
注意：所有元素中必須包含以下樣式元素，以體現整體通透、精緻、乾淨、豐富的風格。 在視覺重量方面，只有一件作品可以使用厚重的色彩並採取漸進的層次。
1） 儀表板
預設樣式：預設亮白色。
背景顏色：f7f6f9;
元件間隙 0;
自適應：固定尺寸（通用桌面（1366*768）;
儀錶盤整體強調色：（使用零星的小色塊，突出整體儀錶盤中強調色，避免大規模使用）。
2） 元件
圓角 6px;
標題背景：白色;
邊框：無; 標題文字：預設自動;
3） 元件組區域劃分
利用元件的分組功能將每個區域塊繫結在一起，以幫助更快地調整大小和定位;
20px 間距在元件組中統一使用。
4） 文字
儀錶盤整體文字以12px為主;
標題：龐門正道標題字型，34px，粗體;
元件標題：Dashboard 預設預設樣式;
指示卡文字大小：
5） 圖表
為了製作精美的圖表，以下細節是必不可少的：
避免使用笨重的條形圖，而應使用較細的條形寬度;
為了避免竊取重要資訊的視線，我們選擇使用淺色調的圖表。 但是，這可能會導致缺乏認可。 為了提高識別度，我們可以考慮通過向列新增邊框來新增顏色細節。
對於面積較大的圓形圖表，建議使用透明度，以保持整體的透明度。 如果沒有透明度，它可能會顯得笨拙並破壞整體效果（例如，優化的點貼圖）。
對於較小的圓形圖表，您可以在不破壞整體感覺的情況下使顏色變暗（例如，散點圖）。
圖表配色方案：6） 選項卡元件
選項卡元件的巢狀使用規範：
此模板使用多個輔助選項卡;
如果您有更高階別的選項卡，則可以使用第一級選項卡樣式;
避免使用更多分層選項卡;
只能有乙個一級選項卡：
7） 其他視覺元素
圖例放置在圖形區域的空白處，以合理利用空間由於雷達圖的整體呈方形，當放置在矩形元件內部時，兩側都有空白。 因此，我們建議將圖例放在圖表的右側。
其他矩形圖表可以充分填充整個元件，因此為避免圖例占用額外空間，我們建議將圖例放在圖表的上方或下方。
讓一切變得簡單如果您有軸標題和圖例，則它是重複資訊。 統一取消軸標題。
如果移除軸沒有識別效果，則出於美學原因應移除軸。
除了此儀表板上已有的圖表型別外，下面還有一些相同樣式的更常見的圖示型別。
1.餅圖
甜甜圈餅圖保留了透明感; 實心餅圖可以增加圖表的面積，因此您可以根據需要進行選擇。
用雙色三色漸變填充圓環餅圖。
餅圖的 6 個類別已達到限制，當型別較多時，應更改圖表型別。
*樣式應整合到整體儀表板中，可以使用以下樣式引數。
行高
標題：40 正文：30
樣式主題
風格： Style 1.
主題色： f2f3f7
資料條顏色：
#d8dbfd
#c8e6f8
整體應用效果：
希望本文能幫助您和您的企業製作出更美觀的儀表板！