码迷,mamicode.com
首页 > 其他好文 > 详细

报表开发小技巧:报表的设计与配色技巧

时间:2015-11-03 18:03:20      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

1、示例工具

报表开发工具FineReport

2. 取色

2.1 设计器里取色

点击背景右侧的小三角,点击更多颜色,点击自定义选项卡,这里的HSL或者RGB值,就是我们需要得到的精确的颜色,如下图所示。

技术分享

技术分享

RGB 是对机器很友好的色彩模式,但并不够人性化,因为我们对色彩的认识往往是”什么颜色?鲜艳不鲜艳?亮还是暗?”HSL 模式和 HSV(HSB) 都是基于 RGB 的,是作为一个更方便友好的方法创建出来的。

HSL即色相、饱和度、亮度(Hue, Saturation, Lightness)。HSV即色相、饱和度、明度(Hue, Saturation, Value),又称HSB,其中B即英语:Brightness。

色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。

饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值。

明度(V),亮度(L)取0-100%。

注:微软的Office系列使用的是HSL,而Photoshop等使用的是HSB。帆软设计器7.11及之前的版本都使用的是HSB,8.0版本使用的是HSL。

2.2 画图工具取色

如果你看到很好的表格和配色,可以用画图工具得到具体颜色值,方法如下:

可以用键盘上的屏幕截图键PRTSC键。用法:按了PRTSC键之后打开附件里的系统自带画图工具(当然别的也行,此仅举例),再按ctrl+v就会出现如下图所示。

技术分享

点击颜色选取器,从图片中选取要取色的位置,然后点击编辑颜色,就可以弹出编辑颜色的菜单,看一下具体的RGU值就是我们需要的RGB。

2.3 推荐的色彩

注:以下均为HSB颜色设置。

技术分享

3.表格

1. 表格的线条不要太重,尤其不要用深的竖线,横线的颜色也要稍微淡一些

2. 表头的颜色要比 表体的颜色显眼

3. 标题用微软雅黑和黑体 字体时候,效果会更好,也可以加粗

4. 表格的数据要对齐,单元格间距适中。对齐的时候,如果有金额数字的对比,最好用右对齐,一般居中对齐多一些

5. 灵活用表格的边框,可以得到更好的一些效果,配合突出立体感。(立体感的图表一般用灰色、浅灰、银色)

6. 标题的位置要注意,居中、居左或居右都会有不同的效果

7. 欧美风格的报表,一般是灰色、蓝色、深红色 搭配,行与行间多以同色调的深浅区分,一般没有框线

8. 可以在表头添加一些小图标,效果也不错的。如果可以,表头和表尾都可以添加背景图片的

下面是一些图表的例子。

技术分享

技术分享

技术分享

技术分享

4. 图表(PC端)

4.1 技巧一

FineReport设计器的图表,用默认配色(因为色调比较深),所以柱形图和饼图最好用“渐变高光”。如果自己配色,可以选择 浅淡一些的颜色,不要太亮太扎眼。可以选择的颜色有:蓝色、灰色、深红色(不是鲜红)、橙色、绿色。但是,颜色一定不要亮了。还有,颜色要深浅搭配。

从这个位置,可以更快的得到想要的颜色:

a)选择灰色:选择S

技术分享

b)选择其他颜色:选择 L

技术分享

4.2 技巧二

在设计图表的时候,最好不要用悬浮元素,因为很多效果出不来。

4.3 技巧三

巧用图表区域的圆角边框,可以得到不错的效果。另外,坐标轴的样式,最好选择内部。还有图例的位置,一般高的报表,图例放到左边,长的报表,一般放到上边或者下边。

技术分享技术分享技术分享

4.4 技巧四

图表的背景色很重要,巧妙使用,可以得到不同的效果。背景色里面,也可以设置渐变,得到不一般的效果。

技术分享

 

技术分享

技术分享

4.5 技巧五

图表的布局很重要,最好规整,有圆的地方,注意要用一下方,有方也要有圆。所有的图表,在一起不能显得太凌乱。

技术分享技术分享

技术分享

4.6 技巧六

现在图表的风格越来越趋向于平民化的大色块,主要是win8的风格了,所以在配色的时候,可以直接取微软logo的颜色。

技术分享

4.7 技巧七

选择合适的图表,折线图、面积图、柱形图等,二维的,三维的都可尝试,重在是互补。美工设计原则,多参照,多看,多注重细节。

 


报表开发小技巧:报表的设计与配色技巧

标签:

原文地址:http://my.oschina.net/jiuyuenihao/blog/525344

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!