Shulou(Shulou.com)06/03 Report--

Preface

Big data industry is booming at a speed beyond our imagination. With the advent of the big data era, more and more companies begin to realize the management and use of data resources. Big data visual large screen display is favored by more enterprises. As UI designers, we should also keep up with the pace of the times to learn this aspect of design.

Today, I would like to share with you my experience and views on designing big data's visual large screen for more than a year. I will share it from three aspects: UI design, interaction design and dynamic effect design.

UI design

The design of a large screen should also be based on the display of data as the core, and any cool performance should be based on an effective display that does not affect the data!

The following picture is Tmall visual screen design, the picture is a very cool 3D earth around the particle effect, this article will teach you how to achieve, and is the presentation of data visualization, not dynamic effects or video!

Cdn.xitu.io/2018/9/11/165c93cc003c80da?imageView2/0/w/1280/h/960/format/webp/ignore-error/1 ">

Tmall's large visual screen for Singles Day holiday

Splicing large screen: almost all the spliced screen, UI design does not need to consider the screen gap affects the presentation of content, the content will not be lost, but may affect the visual performance, such as a large figure image is the gap in the middle of the "split" in two, or "split" in the eyes, looks very uncomfortable, so the design can establish a gap position reference line to avoid similar situation. (at present, there are no gaps, 1.7mm gaps, 3.5mm gaps and three kinds of spliced screens commonly used in enterprises. The smaller the gap is, the more expensive it is.)

Design size: each small spliced screen is usually a 16:9 HD screen, the design size can be set to the upper and lower height of 1080px, the length according to the proportion of the number of spliced screens to get the design size of the length. For example, a large screen of 3 times 5, the height of 3 screens is set to 1080, and each height is 360360 divided by 9 times 16. 640640 is the length of a screen. 640640 times 5 screens = 3200, and the final design size is: high 1080px multiplied by width 3200px.

Graphic design dimension of splicing screen

Visual design: first of all, understand the requirements, integrate the data, analyze the primary data secondary data, total data subdivision data, the dimensions of each data, etc., by understanding these can first design a layout template, can also be drawn on paper, the layout can be adjusted at any time in the design process.

The design style, the background color generally uses the dark tone, the dark tone tension feeling is strong, lets the vision better focus, the big screen dark tone looks softer comfortable does not dazzle, also can save electricity.

The large screen design is different from the web page, the page can not have scroll bar, the length and width of the large screen are fixed.

The font size is no less than 12 characters like the web design, which can be used to mark the chart. The data information is recommended to be more than 14 characters, so the large screen viewer can see the whole content from a long distance, so the font size can be a little larger. Fonts do not necessarily use only one, you can use some strong sense of technology fonts, it is important to pay attention here, remember to develop a font.

After the completion of the design, go to the big screen to take a look at the effect, the quality of the big screen is not the same and the hue will be very different, so you should make adjustments according to your own big screen presentation effect.

Let's share an open source jquery plug-in library website, which has a lot of great dynamic effects!

One of the effects of the plug-in library

Large screen design will give designers a lot of room to imagine the design, give full play to your ability!

Interaction design

I divided big data's visual screen into two types, one is "pure display" and the other is "display + function". How to distinguish it?

There is almost no interaction in the pure display type, just enter the data in the background and display it on the big screen.

Display + function, such as real-time monitoring data, data collection, data comparison function, cloud computing data, analysis and early warning and so on.

Here we focus on the structural layer (information architecture) of large screen products with functional features. All the functional structures should be structured around the main page of the core data, because the core of the large screen display is to display some business key indicator data in a data visual way.

Functional big data visualization large screen structure layer (information architecture)

Large screen interaction is different from web pages and app. First of all, it should be clear that large screen users may be a few people within the company, rather than for a large number of users. From this dimension, interaction can weaken some guiding elements, such as a clickable data component, without adding the "Click to enter" button.

You can also design hidden interactions, such as moving the mouse left, moving up, and coming out of the control panel (such as the Mac computer). The console is a touch screen and can also be combined with gestures to design interaction.

In order to make the user feel that he has been staying on the main page, the interactive jump page can use the "close" button instead of the "back" button!

Dynamic effect design

Big data visual large screen design can not do without dynamic effect, dynamic effect is an important part of visualization, the increase of dynamic effect can make the big screen look alive and increase the visual experience. However, excessive dynamic effects are extremely easy to dominate the subject, so that the viewer's eyes do not know where to focus, but weaken the display of the data.

What is excessive dynamic design? How to grasp this degree?

Take a look at the following example of excessive dynamic design. When you try to look at the contents of the chart, your eyeball is grabbed by the flashing frame again and again. This is excessive dynamic design!

Picture source network

In fact, it is not difficult to grasp the degree of dynamic effect design, as long as the comfort of watching does not affect the clear display of the data. The most active parts of the pages with data display are not easy to be too many. If you want more, several animations have to change rhythmically. For example, the visual performance of one animation is strong, the other is slightly weakened, strong and weak, primary and secondary rhythm will be comfortable, at the same time, dynamic performance is best combined with changes in data. In this way, it is not easy to see the data content being caught by animation.

How to achieve the dynamic effect?

I am used to using the AE plug-in Bodymovin to generate json files, and I wrote a tutorial on how to do it: "here comes the UI designer!" Programmers fall in love with the strong skills of designers! "Click to learn more here.

Json file

Bodymovin this tool in AE some preset effects and perspective functions are not supported, so teach you another method, is to render the animation into video, convert the format to ogg or webm web page video format, web format video load is very fast, and then the following files to the development of it.

Html5 web page video format

How to achieve 3D dynamic effect?

3D animation

Let's talk about the software C4D+AE+PS used first.

Step 1: find a model that can also use the model that comes with C4D, and you can also model by yourself. with the model, turn the model into a lattice in C4D, do a 360-degree animation, and render png sequence frames.

Step 2: import the visual manuscripts and sequence frames designed by ps into AE. If you want to use the Bodymovin plug-in, you must import all the sequence frames separately, otherwise Bodymovin can not recognize the sequence frames and can only use the web video format!

This is probably the process, what may be said is not very detailed, please forgive me, if you don't understand, you can ask me at any time!

3D Earth Visualization

The beginning leaves a suspense for everyone, how to design 3D earth animation, the following will teach you.

Tmall's 3D Earth of Singles Day Ali is designed by professionals, and Ali also has a component library in this area. We can use similar components of the open source website to achieve, big data page uses almost all the charts of this site, and free.

Echarts component effect

The final effect is achieved by combining the two components, and the code is on the left. The background input information can make the particle effect match the data, and finally realize the visualization of the data.

Echarts website

Highcharts website

Many of the same chart components can be used on both sites. Here are the advantages and disadvantages of the two sites.

Echarts:

Advantages: free, open source, cool effect, native all-Chinese.

Disadvantages: poor compatibility, frequent errors, insufficient documentation.

Highcharts:

Advantages: the document example is very detailed, easy to understand and easy to learn, and is compatible with IE6.

Disadvantages: charge.

Summary

Large screen design is a long-term follow-up process, and many problems can only be found on the big screen when the data really comes in, so we should actively follow up and improve the design when the product hits the ground.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.