报表的设计与配色技巧

编辑
  • 文档创建者:文档助手1
  • 浏览次数:43107次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-01
  • 1. 取色

    1.1 设计器里选色

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

    222

    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。

    1.2 画图工具取色

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

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

    222

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

    1.3 设计器直接取色

    新版本增加了设计器直接取色的功能,如下:

    222

    1.4 推荐的色彩

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

    2. 表格

    1.表格的线条不要太重,尤其不要用深的竖线,横线的颜色也要稍微淡一些  
    2.表头的颜色要比表体的颜色鲜显眼  
    3.表体用微软雅黑和黑体字体的时候,效果会更好,也可以加粗  
    4.表格的数据要对齐,单元格间距适中。对齐的时候,如果有金额数字的对比,最好用右对齐,一般居中对齐多一些 
    5.灵活用表格的边框,可以得到更好的一些效果,配合突出立体感。(立体感的图表一般用灰色、浅灰、银色)  
    6.标题的位置要注意,居中、居左或居右都会有不同的效果 
    7.欧美风格的报表,一般是灰色、蓝色、深红色搭配,行与行间多以同色调的深浅区分,一般没有框线 
    8.可以在表头添加一些小图标,效果也不错。如果可以,表头和表尾都可以添加背景图片 

    下面是一些表格的例子。

    示例一:

    222
    示例二:

    222

    示例三:

    222

    示例四:

    222

    3. 图表(PC 端)

    3.1 技巧一

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

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

    a)选择灰色:选择 S

    222

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

    222

    3.2 技巧二

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

    3.3 技巧三

    巧用图表区域的圆角边框,可以得到不错的效果;还有图例的位置,一般高的报表,图例放到左边,长的报表,一般放到上边或者下边。

    222

    3.4 技巧四

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

    222
    222

    3.5 技巧五

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

    222

    3.6 技巧六

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

    222

    3.7 技巧七


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


    附件列表


    主题: 设计思路
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]