【新】PowerBI 報告設計思想 – 結構布局篇

• 2019 年 10 月 6 日
• 筆記

引子

很多戰友問過一個問題，那就是如何設計一個PowerBI報告，對這個問題，需要一個系統化的回答，它足可以形成一個課程，該課程將完全講述如何純純地構造一個PowerBI的報告，不包括對任何可視化元素的專有講解，而是純純的打造一個報告。

要設計 PowerBI 的報告，就要考慮以下各種因素：

• 頁面
• 導航
• 鏈接
• 切片器
• 按鈕
• 顏色
• 主題
• 手機
• …

這也是為什麼這足以構成一門課程的原因，而目前全球範圍的PowerBI課程都沒有完整地講述這個內容，原因很簡單，因為 PowerBI 還沒有完整地支持這些特性，直到 2019.8，現在終於可以解決其中一個最重要的問題：結構與布局。

在正式發佈該課程之前，我們先通過系列文章的形式對大致內容做一個闡述，如果您可以完整地跟隨這個系列的文章，相信也一樣可以學會。

自從 2019.8 PowerBI 更新後，PowerBI的報告設計終於可算是形成了一個閉環，怪不得連PowerBI 之父：Amir Netz 都說：

PowerBI 2019.8 更新的可視化對象編組是本年至今我最喜歡的功能。

至於PowerBI之父為什麼這麼說，截止目前還未發現有任何案例。因此，我們有必要給出這個案例。相信PowerBI之父一定也做了很多PowerBI報告，那麼一定會遇到一個問題：對象重用以及結構重用。

所謂對象重用，尤其是結構重用將是提升PowerBI報告設計效率的最重要特性。尤其是結構重用，它可以直接幫助我們節省大量時間，它在PowerBI報告設計中的表現就是：布局。

誤區

很多人分不清什麼是儀錶板以及什麼是報告。分不清根本沒事，因為儀錶板和報告首先就是邏輯上的概念，儀錶板也可以是報告；報告也可以是儀錶板。不同的BI軟件對它們的界定又有所區別，而對於終端用戶而言，更是無法清晰地界定什麼是報告以及什麼是儀錶板。

因此，我們決定不去糾結這個概念，我們以PowerBI中最基本的內容為基礎來告訴大家構建一個PowerBI 報告的結構布局的最佳實踐。

結構與布局

PowerBI 報告從結構（布局）上大致可以分為這幾個部分：

因此，設計一份 PowerBI 報告，從設計本身而言，只要設計好每個頁面即可。通常，頁面可以分為兩類，首頁與內容頁。這與網站是何其的相似。我們先來看例子吧。

結構與布局-首頁

以下展示一個PowerBI報告的首頁：

該首頁與PPT的目錄頁以及章節頁有些類似，主要是標題以及導航按鈕。

結構與布局-內容頁

以下展示一個PowerBI報告的內容頁：

由於內容頁比首頁更加複雜頁具有代表性，我們隨後將只研究內容頁，首頁與之類似。現在我們提供的可以認為是一種模板，或者是通用結構，那麼這個結構應該包括一些穩定的設計。

動態視頻如下：

頁面布局結構

通過經驗的積累，我們大致可以發現一個常見的內容頁包括以下板塊：

這些板塊包括：

• 頁頭板塊
  • 標題
  • LOGO
• 導航板塊
  • 導航按鈕
  • 當前頁指示器
• 切片器板塊
  • 多個切片器
• 內容板塊
  • 多個圖錶板塊
• 頁腳板塊
  • 頁腳文本 PowerBI 中實現界面布局結構 目前 PowerBI 以及支持可以將這些內容完全進行結構性的劃分，如下：

  

  這充分利用了PowerBI的元素編組功能，來形成不同的板塊。 元素的顯示與隱藏 在一個編組中，可以放置多個元素，實際只是使用顯示的元素，其他的元素可以隱藏，例如：對於不同風格的LOGO就可以編成一組，在不同的場景使用不同的LOGO風格。如下：

  

  實際使用中，我們隱藏了一個LOGO而使用真正需要的LOGO。 無懈可擊的圓角矩形 為了做到對元素的優雅以及精細的控制，我們使用圓角矩形，如下：

  

  可以看出，當鼠標懸停時，呈現精細的圓角矩形，其圓角的大小恰好是一個點位。 像素精準級對齊 我們的設計按照非常嚴格的標準打造，滿足像素精準級，如下：

  

  實施像素精準級的標準步驟如下：

• 將視圖調整為按實際大小顯示。
• 任何可視化元素的尺寸大小必須是8像素的整倍數。
• 任何可視化元素的尺寸大小必須不小於40像素。 按鈕的妙用 在目前的PowerBI中，考察一個人是否是真正的專家，看得就是細節，在製作很多精細的地方，需要例如：文本框，背景形狀等。然而，實際使用中，最佳實踐卻是：
• 用按鈕代替文本框
• 用按鈕代替形狀

原因如下：

• 文本框的文字尺寸計算方式與可視化元素的不同，而按鈕是一致的。
• 文本框的文字無法水平居中對齊，而按鈕可以。
• 形狀的邊框以及背景會隨着形狀的大小變化而改變導致無法實施像素精準級對齊。

因此，本來是無法做到的問題，使用按鈕卻可以繞過這些問題，雖然這並不是很自然的做法，但卻是最佳的做法。（截至：2019.8）

圖表元素的通用構成

為了本文的整體性，這裡簡單介紹圖表元素的通用構成，在後續的文章中，我們還會更加精細地說明這個問題。先來看一個模型：

一個真正的圖表元素會包括：

• 圖標
• 圖表標題
• 內邊距
• 按圖顯示
• 按表顯示
• 按其他顯示
• 圖表元素

在本文中，我們先僅考慮圖表的簡化版本，如下:

對應於此，在PowerBI中的實現如下：

形成的分組結構如下：

這樣就形成了不同的圖表元素。

可視化對象頭的處理

作為另一條重要的約定，請關閉任何非圖表元素的視覺對象標頭。如下：

而對於圖表元素，也應該僅僅保留視覺對象標頭中的兩項：

• 更多選項圖標
• 篩選器圖標

至此，就完全打造好了基本的結構和布局。

總結

本文內容並不複雜，但卻並非面向初學者，對於文中的很多概念，請先學習《PowerBI商業智能分析基礎系列》，公眾號所有的文章都默認讀者有這樣的基礎。 將 PowerBI 報表發佈到 PowerBI 服務後，結構與布局彷彿就是網站，例如：

在雲端，我們需要更加精準的設計，因此在 PowerBI Desktop 中進行設計時要考慮到所有細節，截至目前，我所見到的市面的所有 PowerBI 報告（包括微軟自家出品）均沒有達到本文描述的精細標準。

本文還涉及到一個重要議題，但並沒有仔細介紹，且已經拖了1年之久，就是顏色與主題。目前，微軟提供了由設計者編寫json文件來定義主題的方法，很明顯是一個過渡期，我們預測PowerBI 必然會提供一個與 PPT 完全類似的主題定義工具，拭目以待，在此前，我們也將給出我們的方法，在後續的文章中將詳細描述。

如果開啟了主題，我們可以瞬間切換為：

該切換在瞬間完成，界面內可視化元素無需任何調整。

本文涉及源文件獲取條件：

• PowerBI 戰友聯盟訂閱會員星球
• 《PowerBI自助商業智能分析基礎系列》課程星球

PowerBI Desktop 中有哪些和鑽取有關的功能？

例如：向下鑽取。但這裡顯然不是問這個這麼簡單的問題，這裡問的是「哪些」，答對一個沒用。（提示：至少7種）