在AI/BI中設計美觀的儀表盤

在資料驅動決策的時代，儀表盤是團隊與決策者分享洞察的關鍵工具。一個美觀且專業的儀表盤不僅能提升信任感，還能讓資料更容易被理解。Databricks的AI/BI平臺提供了強大的主題定製功能，幫助使用者快速建立符合品牌風格的儀表盤。本文將以虛擬旅遊公司Wanderbricks為例，逐步介紹設計最佳實踐。

1. 基於使用者需求建立佈局

儀表盤的佈局取決於其目的。AI/BI提供靈活的12列網格，可根據需要分為3、4或6列。密集的技術型儀表盤適合6列布局，以容納更多小部件；而高管儀表盤則更適合3列布局，以減少認知負荷。

人的眼睛在瀏覽儀表盤時，會自然遵循F型或Z型掃描模式。對於視覺化為主的儀表盤，視線通常從左上方開始，沿對角線移動，最後落在右下方的詳細檢視上。對於文本或表格較多的儀表盤，則可能形成F型模式。無論哪種模式，關鍵資訊都應放在視線最先落下的位置。

透過調整小部件的大小來建立視覺層次：最重要的指標和視覺元素應更大，次要元素則相應縮小。例如，Wanderbricks儀表盤的第一頁可以設定為高管概覽，第二頁則提供更密集的技術資料。

2. 選擇字型：兼顧風格與可讀性

字型選擇既是功能決策也是審美決策。技術型受眾可能喜歡Space Grotesk等表現力強的字型，而高管儀表盤則更適合Arial等保守字型。可讀性是首要考慮，建議使用無襯線字型以減少視覺疲勞。AI/BI原生支援Arial、Tahoma和Verdana等網頁安全字型，並允許上傳本地字型以實現內部工具的一致性。

確保字型顏色與背景有足夠對比度。可使用Adobe色彩對比檢查器等工具驗證。淺色模式下，避免純黑(#000000)與純白(#FFFFFF)的搭配，建議使用#08141A與#EBEBEB；深色模式則可使用#EBEBEB與#08141A。

3. 定義UI顏色：60-30-10規則

60-30-10是色彩理論中的基本規則：60%為主色（背景、畫布、小部件邊框），30%為輔助色（字型、資料視覺化調色盤），10%為強調色（互動元素如篩選器、標籤、按鈕）。

背景色應接近中性，避免干擾資料視覺化。淺色模式下，小部件背景可使用#FCFCFD，畫布背景略深為#EBEBEB。邊框顏色與背景一致可減少視覺雜亂。對於需要強調的小部件，可單獨覆蓋主題設定，例如將背景和邊框設定為#1F354B，字型顏色設為#EBEBEB。

選擇色用於高亮互動元素，應易於與文本和背景區分。可使用品牌色在Adobe Color中派生，藍色（如#2272B4）通常是安全選擇，因為它與網頁連結顏色類似。

AI/BI主題支援淺色和深色模式。深色模式下，畫布背景可設為#1E343F，小部件背景為#08141A，字型顏色為#E8EFF1，以確保高對比度。

4. 構建專屬視覺化調色盤

視覺化調色盤應包含5-9種顏色，並考慮色盲友好性（全球約4.5%人口存在色覺障礙）。避免紅綠相鄰，因為這是最常見的色盲型別。

以品牌色#15AFDD為起點，在Adobe Color中使用“方形”色彩和諧派生四個額外顏色：#83DE14、#DE7914、#BE14DE、#3A7689。然後微調色相和亮度，確保相鄰顏色明顯區分。在色盲模擬器（如Deuteranopia、Protanopia、Tritanopia）中測試，並在AI/BI的真實儀表盤中驗證。最終調色盤為#15AFDD、#2375A8、#52A870、#C85070、#C89930。

結語

設計細節雖小，但積累起來影響巨大。一致的字型、有意圖的調色盤、以及為易讀性打造的佈局，這些元素共同將儀表盤轉化為值得信賴的工具。藉助工作區主題，一次設定即可自動應用於所有儀表盤，大幅提升效率。現在就開始在AI/BI中設計屬於你的美麗儀表盤吧。