禁斷密技:如何讓Reporting Services報表「看」起來像Power View

  • 12085
  • 0

禁斷密技:如何讓Reporting Services報表「看」起來像Power View

隨著SQL Server 2012問世,其中商業智慧新功能中最為吸睛的就是Power View了。Power View最具突破性的在於它整合了Silverlight的視覺化效果以及商業智慧語意模型(BISM)的強大計算能力,可以讓分析人員無須撰寫程式,就能夠得到高度互動的報表。在這篇文章中並不是說我有啥錦囊妙計可以讓各位不用升級就能擁有Power View的功能,在此我只是要教各位如何運用既有Reporting Services的技術,來做出"近似"Power View的視覺效果。

這是正版的Power View

image

這是山寨版的Power View

Power View的視覺化效果沿襲了今年起微軟主推的Metro風格,關於Metro風格的說明我將會再擇日撰寫專文介紹,但是大體上視覺化的主要元素包括了大量使用單色調、使用色塊,並且透過文字來取代繁複的圖示,呈現出一種簡潔且俐落的質感。老實說,Metro風格是筆者非常喜歡的一種視覺化概念,也許它不一定適用於所有領域(像我覺得Visual Studio 11 Beta使用Metro風就很失敗,還好2012 RC扳回一城),但是在商業智慧的領域中,我們所追求的不就是簡潔、俐落,不需要過多的裝飾的美感嗎?也因此即使您還沒決定要升級SQL Server 2012,我仍舊非常推薦各位採用新的Metro風格來設計報表(不過還是要附帶一句,我們只能近似視覺化的質感,但是無法近似Power View的完整功能,還是呼籲大家要盡快升級SQL Server 2012,以及支持Cheryl大姊的Windows Server 2012)。

如何山寨…不!…是「臨摹」Power View的視覺化效果呢?我把這些技巧歸納成以下幾點:

  1. 使用具有Metro風格的字型
  2. 簡潔化、俐落化
  3. 使用具有Metro風格的主題色彩
  4. 使用色塊

使用具有Metro風格的字型

甚麼是具有Metro的字型呢?一般來說報表上常用的英文字型是Time New Roman或者是Arial,如果你希望報表可以具有濃濃的Metro風味,那麼建議您英文字體更換為Segoe開頭的字體系列,尤其是Segoe UI Light是我覺得看起來最具俐落質感的字型(標題則建議使用Segeo WP系列字體),以下是我把非Metro字型與Metro字型做了對比:

image

這時您可能會問,那麼中文字體應該要用哪一種呢?比較建議是使用微軟中黑體或者是微軟雅黑體

image

這邊要注意的是,Metro風格很少直接將字體加粗,而是改使用粗體字體

簡潔化、俐落化

Metro設計原則奉行的是「減法美學」,也就是視覺的美觀不在於複雜,而在於簡單。老實說這對我還說是有相當的衝擊。因為在之前我的「SQL Server 2008 R2報表服務」一書中,我曾經教讀者幾個讓報表好看的訣竅,其中一是「不要讓沒有意義的項目佔據過大的空間」,這點與Metro倒是並行不悖。但是第二項「盡量多使用漸層」這個就嚴重的違反了Metro的原則了,那要如何沒有漸層且圖又好看,這就是Metro風格神奇且迷人之處了。

Metro風格是一種「沉浸式」的視覺風格,也就是減少畫面上的邊框的出現,如果要使用邊框則以大塊色塊為主。因此符合Metro風格的圖表包括了以下幾個設計原則:

  1. 不使用漸層,改以單色調的方式取代
  2. 不使用陰影
  3. 不使用透明效果
  4. 圖表與圖表區域不使用外框線,盡量與背景色融為一體
  5. 減少使用次要格線,讓圖表座標軸看起來比較清爽俐落
  6. 長條圖減少使用圓角,而是以銳利直角為主
  7. 圖表內文字數字改用Metro風格字體

各位可以比較一下下圖左右的差異(右圖尚未完全Metro化)。

image

使用具有Metro風格的主題色彩

上圖右側的圖案看起來好像單調許多,這時候就要特別強調Metro魔法的精髓就在於色彩。看似單調的畫面只要套上Metro風格色彩就立刻改頭換面。各位可以同時比較下圖。

image

Metro風格採用大量的單色系,透過把色彩的複雜度降低,以讓瀏覽者的目光可以更具焦在重點之上。相較於傳統配色,Metro風格的亮度較高,而且喜歡使用高對比色,例如Power View中的藍色與紅色就讓人看起來覺得非常舒服,也不至於造成數列間的混淆,更重要的是Metro風格配色不管搭配黑色字與白色字都一樣清楚。所以這些色彩可不是隨便配出來的,而是微軟透過色彩學原理耗費心血找出的最佳視覺組合。

image

在Reporting Services中預設了許多的調色盤,每一個都與Metro風格相差甚遠。因此最好的方法就是設定自訂調色盤(Custom Palette)。若是要設定調色盤,請點選圖表,即可在屬性視窗中找到CustomPaletteColors屬性。點選進去後即可進行色彩設定。

image

那Power View的色彩魔法配方是甚麼呢?我們就幫各位揭密一下

image

  1. #00b7f0
  2. #db3c12
  3. #fe9801
  4. #3bca36
  5. #bba8e8
  6. #dd6952
  7. #7fd5db
  8. #60af89
  9. #91a9d0
  10. #c7f073
  11. #5e69d8
  12. #bd8e29

只要各位依照以上的顏色設定完CustomPaletteColors屬性,接著再將Palette屬性切換為Custom,就可以變成為Metro化的圖表了。

image

使用色塊

在Metro風格的另一項重點在於它是一種具有指向性的排版,所謂的指向性指的是他透過色塊、標線、色彩明暗,巧妙的帶領使用者的目光,以提升使用者體驗。各位可以參考以下的兩張圖,右方圖是我透過Reporting Services的矩形來做為色塊,同時將線條的顏色也改為Metro配色。各位是否覺得右方的趙報表比較吸睛呢?而且是不是你的目光會被垂直的天青色色塊所吸住,很明確地強化了圖片的呈現,也讓本來比較沉悶的報表變得更容易解讀呢?

image     image

以上的技巧能夠讓各位在尚未升級前,也能讓自己的報表Metro一下,但是若是您想要享受強大的互動式報表製作,以及運用動態磚、動態泡泡圖等Silverlight視覺化功能,快快升級才是王道呀…

Allan Yiin

CTO, AsiaMiner