Visual big screen experience sharing

Recently, I have accumulated some experience in practical projects, and I have also seen many great gods sharing, and I have been constantly learning and enriching the characteristics of large-screen design and the expression of data visualization. The following experience comes from many resources, hoping to help students in need.

Some characteristics of large screen display:

1. The area is huge-users can only see the whole content from a distance (so the words can't be designed small).

2. Dark background-strong sense of tension, making vision better focused and saving electricity.

3. inoperable-the big screen is mainly for users to see. Users generally do not directly operate the big screen.

4. Space constraints-Unlike web pages with scroll bars, large screens have a fixed length and width.

5. An independent theme-each big screen has a specific theme to express to users.

The first step is investigation and study.

Key points to be investigated:

1. the theme of the big screen-what information does the user of this screen want to see (what information to avoid)

2. The authority and accuracy of the data-what are the normal data and historical limit data for checking the specific information to be displayed?

3. Other demand points of users-users say TOP 10, but sometimes only users know that TOP can be expressed, and many tables can also express TOP information.

The second step, visual effect positioning (detailed brainstorming, classification, voting)

Tension: real-time data, dynamic change.

Science and technology: novel charts, novel dynamic effects

Rich: rich data, rich sense of hierarchy, many types of charts, and strong sense of space.

Authority: security element

Step 4: Data Representation Elements

General data representation elements: map, top 10, pie chart, list, numbers, trends, etc.

If you just put these elements on multiple screens, you will lack many ideas in the exhibition, and business differences will not be well reflected. Therefore, it is necessary to re-analyze each requirement.

Step 5: Requirements analysis and data mining.

1. Split Dimension-Split the requirement into the smallest dimension.

2. prioritize-choose the best data to illustrate your point of view.

3. Merge Dimensions-Classify dimension elements and simplify them.

4. Best performance-determine which form of expression to use to represent data.

Give a chestnut:

When making this series of specific images, a business needs the content displayed on the big screen: our business is to protect specific areas and defend against various types of attacks on a global scale in real time. You can see the cumulative value and trend of each attack type on that day.

For this content, let's split the dimensions first. How many dimensions can you see? (Be sure to break it down to the smallest dimension)

Then, determine the priority of these dimensions.

Classify the information according to similarity and simplify it. The dimension with the greatest correlation is represented by the same color, and all relationships are drawn.

The figure above shows that all dimensions are interrelated. We can find that the time dimension is related to all the contents.

But time is invisible. In order to show the tension, the data on the big screen should be displayed in real time. Then this dimension does not need to be represented by specific visual elements when designing, but by dynamic changes at time nodes. So we remove this time axis and adjust the position of the dimension of the staggered relationship.

One of the most common ways to sort out logical relationships is to use mind maps, so that we can understand business requirements and data correlation more clearly.

After the relationship is clear, the next planning and design can be carried out.

Step 6: Planning and Design

In this work, design is mainly about details and feelings.

1. module design-consider the layout design of vertical and horizontal grids of the module.

2. Dimension Representation-Determine what a specific dimension is represented by.

3. Dynamic design-grasp time and control emotions.

4. Quantity control-control of uncontrollable implementation data. Considering the extreme situation of data, the effect is too dense or too sparse, how to avoid it?

Like other display screens, the resolution of the large screen itself is fixed.

Splicing the big screen: the big screen is almost a splicing screen. UI design does not need to consider the influence of screen gaps on content presentation, so the content will not be lost, but it may affect visual performance. For example, a very large character image is split in two by the gap, or the eyes are split and it looks uncomfortable, then a reference line can be established at the gap position during design to avoid similar situations. (At present, there are three kinds of splicing large screens commonly used by enterprises: seamless, 1.7mm gap and 3.5mm gap, and the smaller the gap, the more expensive it is).

Design size: Each small screen spliced is generally a 16:9 HD screen. The design size can be set to 1080px, and the length can be obtained according to the ratio of splicing screens. For example, for a large screen of 3 times 5, the height of three screens is set to 1080, and each screen is 360, and 360 is divided by 9 times 16 and so on. 640,640 times 5 screens = 3200, and the size of the final design draft is: height 1080px times width 3200px.

Step 7: Check and test.

1. Pay attention to the demand-whether the demand can be met after the experience.

2. Field test-put the effect on the big screen to see whether it is easy to read, whether the dynamic effect is in line with expectations and whether the color difference is acceptable.

3. Credibility test-be a commentator yourself and explain the big screen to users. Can you describe the big screen in one sentence, which users can understand?

Designing a big screen must be a long-term follow-up process. There are many problems, which can only be found when real data comes in and is displayed on the big screen.

The flow of the whole project

That makes the big screen look cooler, and briefly summarizes several methods:

1) Layout and typesetting

The big screen first serves the business, so that business indicators and data can be reasonably displayed. Because it often represents the overall business of an enterprise, it is generally divided into two levels: primary indicators and secondary indicators. The main indicators reflect the core business, and the secondary indicators are used for further elaboration. So give different emphasis when making.

2) color

The background color is divided into the whole background and the background of a single element. Either way, two basic principles are followed: dark tone & dark tone; Consistency.

The overall background is dark, and there are still many choices, but what makes most people feel good together is mainly dark blue. The following pictures are several recommended color schemes. According to the actual project experience, it is strongly recommended that you match a single component element with some transparent colors, and the transparency is set to 10%, depending on the actual effect.

3) Decorative effect

Details affect the sensory experience, and in large-screen display, details will also greatly affect the overall effect. By appropriately adding some decorative effects such as borders and pictures to elements, titles and numbers, it is helpful to improve the overall aesthetics. The top title is decorated with two symmetrical lines, and the subdivision title of each component is decorated with irregular gradient pictures. In addition, each component uses a simple border to enhance the layering.

4) Dynamic effect

The increase of dynamic effects can make the big screen look vivid and increase the visual experience.

Here are a few cases:

Ali is quite advanced in data visualization. As early as 20 1 1 sales data in 2005, the DataV data visualization engine was used to build a big data screen.

The above-mentioned big screen uses the DataV data visualization engine, based on the daily chart component library d.chart and the geographic related component library d.map, and the professional data visualization template is designed as a visualization framework, which is a web service built on the front-end framework of cube. Through this engine, we can use the existing components to restore the prototype drawings made by designers at low cost, and quickly complete the binding of various data sources. Through the final visual configuration adjustment system, the visual debugging of what you see is what you get is completed, and finally the data screen is generated.

Working mode: from the previous "design->; Development "to" design->; Development-> Design->; Development ",to achieve a high degree of reduction design effect.

Many visualization tools in the market, such as Sailsoft and Tableau, are data processing and analysis software, both of which have their own characteristics.

You can choose tools to display your big screen according to your business needs.

Open the finereport designer below, drag the corresponding chart elements from the component bar to the specified area according to the layout style, and bind the data.

Click the preview button, and the effect of the browser is shown in the figure below.

The next step is color matching, embellishment, dynamic effect, and the interface effect can be adjusted as needed.

There are many visualization tools worth recommending. Here are a few for you to learn:

Raw、Infogram、ChartBlocks、Visualize Free、Visual.ly、iCharts

Chart.js、D3.js、FusionCharts、JavaScript InfoVis Toolkit、jQuery Visualize、ZingChart、Flot、Gephi

Map data visualization tool

CartoDB, InstantAtlas, Polymaps, OpenLayers, flyers.

Pure visual chart generation/chart plug-in-suitable for developers and engineers

echarts(echarts.baidu.com)、AntV(antv.alipay.com)、high charts(www.hcharts.cn)

Visual report class-suitable for report development and BI engineers.

fine report(www.finereport.com)

Business intelligence analysis-suitable for BI engineers and data analysts

tableau(www.tableau.com)

Finebi (www.finebi.com)

Power bi (powerbi.microsoft.com/zh-cn/)

Visual large screen class

Ali Dattaf (data.aliyun.com/visual/datav)

Digital Hail (www.digihail.com)

This is some learning about data big screen in recent days, so I will share it here.

If you find it helpful, please like it, thank you ~ ~