WIN8 Metro UI 风格下的微软报表开发与设计 - 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
的图标

关于这两个 PPT
文档,需要的朋友可以到 BIWORK 共享 下载。


报表的导航与交互

默认的效果显示所有地区的 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 报表课程案例


时间: 2025-01-05 14:02:42

WIN8 Metro UI 风格下的微软报表开发与设计 - BIWORK的相关文章

HteOS - Win8 Metro UI 风格的Web桌面

HteOS是一款Win8 Metro UI风格的Web桌面应用开发框架 现代的.简约的界面,丰富的组件.功能,全新的Web桌面 全新的Web桌面应用开发框架 全新设计 全新的Web桌面设计,告别古板与生硬 Win8 Metro风格界面,动态磁贴灵动轻巧 二次开发 应用场景广泛,能够适用各种项目兼容IE8+浏览器,快速进行二次开发 应用部署 没有环境限制,可以在任何平台进行部署不需要进行额外的部署设置,即插即用 不拘泥于平庸的Web桌面设计 卡片布局 Metro风格的卡片布局,不再是审美疲劳的树状

【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板

http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html Metro UI 是一种界面展示技术,是 Windows 8 的主要界面显示风格.Metro 界面和 iOS.Android 界面最大的区别在于:后两种都是以应用为主要呈现对象,而 Metro 界面强调的是信息本身,而不是冗余的界面元素.同时在视觉效果方面,这有助于形成一种身临其境的感觉. 如果你的下一个网站项目或 Web 应

Win8 Metro风格的Web桌面HteOS

Checkbox类: 1.实现checkbox的全选功能 <script type="text/javascript"> //全选checkbox:1.当全选checkbox勾选,子checkbox(name为'ids'的checkbox)自动全部勾选 // 2.当全选checkbox取消勾选,子checkbox自动全部取消勾选 function checkAll(){ if($("#checkall")[0].checked){ $("inp

win8 metro 调用摄像头拍摄照片并将照片保存在相应的位置

刚刚做过这类开发,所以就先献丑了,当然所贴上的源码都是经过验证过的,已经运行成功了,希望可以给大家一些借鉴: 下面是metro UI代码: <Page x:Class="Camera.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Win8 Metro动态加载内容框架

制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 2012年10月第一次:因为SVG性能问题,将SVG换为cocos2d-x JSBind,可惜cocos2d-x JSBind不完善,最后换为cocos2d-x html5.11月第二次:cocos2d-x html5性能问题,破产.12月第三次:取消HTML5,转为使用XAML+JS模式. (微软

华为G520联通版刷机包 高仿三星S5 UI风格美化 B老师作品

ROM介绍 基于官方EMUI固件制作,root权限 加入三星框架,TouchWiz启动器 修改默认程序图标为S5风格 默认字体使用更加明晰的微软雅黑 移植三星风格透明时钟插件 移植三星风格新浪天气插件自修改美化版 移植三星计算器.记事本 默认关闭垂直同步,运行更流畅 默认开启USB调试 缩短响应时间提升操作体验 在开发者模式中开启GPU强制渲染可以开启桌面切换3D效果 新浪天气自添加城市字体看不清,输入城市后用手指触摸屏幕区域即可在反色状态下看到并选择 _____________________

Bootstrap看厌了?试试Metro UI CSS吧

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审美疲劳.那么可以试试Metro UI CSS,一个Windows 8风格的前端框架,和Bootstrap类似,功能也更多. Bootstrap虽然很流行,扩展也很多,但是如果你希望实现Windows 8的Metro风格的话,除了去寻找一个Bootstrap的主题外,还可以直接使用Metro UI CSS这套前

使用WPF来创建 Metro UI程序

本文转载:http://www.cnblogs.com/TianFang/p/3184211.html 这个是我以前网上看到的一篇文章,原文地址是:Building a Metro UI with WPF,这篇文章一步步的介绍了如何实现一个Metro样式的窗口,并且效果非常好.今天看到OSChina上有这篇文章的译文:使用WPF来创建 Metro UI,翻译得非常好,这里推荐一下. 值得一提的是,除了这种一步步来的方式外,现在Codeplex中也有不少比较好的metro风格的wpf框架,可以帮助

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通