WIN8 Metro UI 風格下的微軟報表開發與設計 Metro UI SSRS - BIWORK


開篇介紹

作為 BI 系統前端展現的報表,其重要性不言而喻,我們對於一個好的報表的要求也無非主要包含以下幾點:

1. 數據完整和正確,數據質量沒有問題

2. 友好的清晰的界面,整潔美觀,有得體的格式

3. 有很好的交互性和用戶體驗感,用戶能夠很容易找到需要的重要的數據

但是在微軟體系下的 BI 開發人員,特別是 SSRS 報表開發人員對於報表的設計我想都有一個共同的感受:"報表設計出來了,很難看!交互性差!"。

也就是說,在上面提到的 3 點中,微軟 SSRS 報表的非常直觀的缺陷就是第二和第三點。

的確如此,微軟的 SSRS 報表的界面一直不太好看,或者說功能提供的不夠友好,所默認展示的圖表等非常重要的組件看上去也不那么高大上。

改變

而我在這里想闡述的是,我們可以通過一些設計和報表技巧讓我們的報表好看,並且生動起來。

我曾作為 Vendor 參與過一些微軟的 BI 項目,其中就有對 UI 界面比較挑剔的客戶。於是,純粹是為了滿足客戶的需要,通過一些設計上的改變與技巧上的處理突破了一些固有的觀念,徹底顛覆了他們對之前看到的所有 SSRS 報表的印象 。雖然仍然沒有其它報表那么高大上,那么炫,但是作為我來說,已經是一種突破,因為對比自己之前所做的報表,終於能區分美與丑的感覺。

我相信下面我設計的幾個原型案例,可以讓部分 BI 開發人員改變一下對於微軟  SSRS 報表的看法,希望能帶給大家一些設計上的參考或者思路上的改變。

WIN 8 Metro UI  

第一個例子,設計的思路參照了 METRO UI - WIN 8 風格。

它有幾個特點:

1. 字體普遍采用獨特的 Segoe UI / Segoe UI Light,通常情況下大標題或者單獨的字體可以采用 Segoe UI Light,非標題類的可以采用 Segoe UI。

下面是采用了 Segoe UI 和 Segoe UI Light 之后的字體案例。

2. 這種 WIN 8 Metro UI 的設計只適合做 Dashboard,通常首頁突出展示最重要的,最 High level 的數據。

    比如上圖中 WIN 8 魔術貼的數據就大致說明了:

    總共有 27659 個訂單,有 60398 個訂單明細,3 個產品大分類和 130 種產品銷往了 6 個國家的 269 個城市。

    還包括其它的圖表等等,均是最重要的數據信息,是用戶第一時間希望得到的統計信息。

3. WIN 8 風格的報表,要注意到通常情況下它的背景以深色,暗色為主,比如這里我選用了黑色。

    同時,其它重要的數據信息方面采用亮色,彩色來突出這些信息。

    在彩色之上,采用白色字體形成反差突出信息標簽和數據。

其實這個從 Office 365 上就可以看的出來,都是這種類似的設計風格。

在顏色的選擇上,可以參考以下顏色。

 

 當然還可以使用一些 METRO UI 的圖標

 

報表的導航與交互

默認的效果顯示所有地區的 Internet Sales Amount 和 Reseller Sales Amount。

 

當點擊圖標上的柱狀圖 或者 左側各個國家標簽的時候,就可以鑽取/跳轉到各個國家對應的銷售信息。

比如這里選擇的是 United States,注意到 United States 被選中的時候它的背景色也發生了相應的改變,同時數據圖表中的信息也發生了改變。

通常情況下,在 SSRS 報表開發中,像這樣的需求可能會被分解成多個報表,讓其在多個報表之間進行跳轉。

或者,設置參數,讓用戶選擇下拉框來選擇相應的國家,然后才能看到各個國家的信息。

而這里的思路是考慮到不需要讓用戶選擇參數改變國家,通過表圖的重疊與控制顯示和隱藏來實現的,並且合理的利用 ACTION 動作使得報表的跳轉仍然停留在同一個報表中,自刷新的效果。當然參數的控制是特別需要注意的,容易出錯,但是在設計思路上我想大家可以借鑒類似於這樣的案例。

像這種導航的效果,我在實際的報表開發中使用的非常多,用戶基本上就能在界面上點擊,鑽取到他所需要的所有數據。在用戶體驗和交互上,用戶使用起來非常的順手和舒服,這就是一個好的報表應該達到的目的。

我在我的這篇博客上提到了設計的思路與全過程,大家可以參看這篇文章 - http://www.cnblogs.com/biwork/p/3520064.html

總結

本人做過3年 JAVA 開發,跟着項目稀里糊塗的轉入到微軟 BI 開發,4年的 BI 開發中大致向不同的客戶交付過 100 多個以上的 SSRS 報表。不同的需求,不同的客戶,不同的規則與數據,深感每一個報表的開發都很難讓客戶百分之一百滿意。

但是我們能做的就是盡自己最大可能,在數據質量上,界面設計上,用戶體驗與交互性上盡力的挖掘 SSRS 報表的潛力,做到“盡心盡責”四個字,我相信做出的報表一定是有生命力的。

更多 BI 文章請參看 BI 系列隨筆列表 (SSIS, SSRS, SSAS, MDX, SQL Server) 如果覺得這篇文章看了對您有幫助,請幫助推薦,以方便他人在 BIWORK 博客推薦欄中快速看到這些文章。

BIWORK 在天善學院推出了 微軟 2012 SSRS 報表開發培訓課程,可以瀏覽課程的全部培訓案例 - Microsoft Reporting Service 2012 報表課程案例



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM