Report Development tips: report design and color matching skills

Source: Internet
Author: User

1. Sample Tools

Report Development Tools Finereport

2. Color Extraction

2.1 Color-picker in the designer

Click on the small triangle to the right of the background, click More Colors , click on The Custom tab, here the HSL or RGB values are the exact colors we need to get, as shown in.

RGB is a very friendly color model for machines, but not human enough, because our understanding of color is often "what color?" Bright and not bright? Is it bright or dark? The HSL mode and the HSV (HSB) are RGB-based and are created as a more convenient and friendly method.

HSL is hue, saturation, brightness (hue, saturation, lightness). HSV is hue, saturation, lightness (hue, saturation, Value), also known as HSB, where B is English: brightness.

Hue (H) is the basic attribute of color, which is the name of the color, such as red, yellow, etc.

Saturation (S) refers to the purity of the color, the higher the color purer, the lower is gradually gray, take 0-100% value.

Lightness (V), Brightness (L) take 0-100%.

Note: Microsoft's Office family uses HSL, while Photoshop uses the HSB. Sail soft Designer 7.11 and previous versions are using HSL for the hsb,8.0 version.

2.2 Drawing Tool Take color

If you see a good table and color, you can use the paint tool to get the specific color values, the method is as follows:

You can use the onscreen keys on your keyboard The PRTSC key . To use: Press the PRTSC key to open the attachment in the system with drawing tools (of course another line, this only example), and then press CTRL + V will appear as shown.

Click on the Color picker, choose the location of the color from the picture, then click Edit Color , you can pop up the edit Color menu, to see the specific RGU value is the RGB we need.

2.3 Recommended Colors

Note: The following are the HSB color settings.

3. Forms

1. The form of the line should not be too heavy, especially not with the deep vertical lines, the color of a little bit lighter

2. The color of the table head is more conspicuous than the color of the body

3. Title with Microsoft Ya Black and boldface font, the effect will be better, also can be bold

4. The data in the table is aligned and the cell spacing is moderate. When aligning, if there is a comparison of the amount of numbers, it is best to use the right alignment, the general center alignment more

5. Flexible use of the table border, you can get a better effect, with the prominence of three-dimensional. (The three-dimensional chart is generally grey, light gray, silver)

6. The position of the title should be noted that the center, left or right will have different effects

7. European and American style of the report, generally gray, blue, dark red collocation, row and line more than the tonal depth of the distinction between, generally no box line

8. You can add some small icons to the table header, the effect is also good. If you can, you can add a background picture to the header and footer

Here are some examples of charts.

4. Chart (PC side)

4.1 Tricks One

Finereport the chart for the designer, with the default color (because the hue is darker), so the column and pie charts are best used with the gradient highlight. If you color, you can choose to light some of the color, not too bright too glaring. The colors you can choose from are: Blue, Gray, crimson (not scarlet), orange, green. However, the color must not be lit. Also, the color to match the depth.

From this position, you can get the desired color faster:

A) Select Gray: Select S

b) Select a different color: select L

4.2 Skill Two

in the design of the chart, it is best not to use suspended elements , because many effects do not come out.

4.3 Tips Three

Use the rounded border of the chart area to get a good result. In addition, the style of the axes is best chosen internally. There is also the location of the legend, the general High report, the legend on the left, the long report, generally put on top or bottom.

4.4 Tricks Four

the background color of the chart is very important, clever use, can get different effects. Background color inside, you can also set the gradient, to get a general effect.

4.5 Tricks Five

the layout of the chart is very important, preferably regular, there is a round place, pay attention to use a lower, well also have a circle. All the charts together can't seem too messy.

4.6 Tips Six

now the style of the chart more and more tend to civilian large color block, mainly win8 style, so in the color, you can directly take the color of the Microsoft logo.

4.7 Tricks Seven

Choose the right chart, line chart, area chart, column chart, etc., two-dimensional, three-dimensional can be tried, the weight is complementary. Art design principles, multi-reference, more look, more attention to detail.


Report Development tips: report design and color matching skills

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.