1. 程式人生 > >報表開發小技巧:報表的設計與配色技巧

報表開發小技巧:報表的設計與配色技巧

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 技巧七

選擇合適的圖表,折線圖、面積圖、柱形圖等,二維的,三維的都可嘗試,重在是互補。美工設計原則,多參照,多看,多注重細節。