Suddenly be Cue…
Demand side: Hi~ there are still a few days left for D2 opening, can you help complete an AntV line H5 pit?
Designer:??
Demand side: simple, the cost should not be too high, hope to show AntV muscle, make a popular style easy to spread ~
Demander: The chart will be displayed here, and you can design it casually, just like the one I drew below
Designer:… I’ll do it…
Designer & Developer Front End Technology Forum, or D2 for short, provides an opportunity for front-end developers and web designers in China to share the fun of Technology and discuss the development of the industry. D2 is open to all people in China who are interested in front-end technology, aiming to create a relaxed and free communication atmosphere and promote the development of the domestic front-end industry.
Due to the impact of the epidemic, this YEAR’s D2 conference will be held online at 2020-12-18-20. The original offline booth becomes an online pit, so the gameplay can be more diversified and the form can be more novel. The final effect is shown below (scan code for online experience). Here’s a look at how we built a lightweight, interactive visual game in seven days. Go straight to this pointThe game is the address.
How to design a great game in 7 days?
The biggest challenge facing the project is the tight schedule. It only takes a little more than a week to produce the concept, design and launch the development. Excluding the development time, UED needs to provide the prototype of the scheme within 2 days and confirm the visual draft within 5 days, so we adopt the multi-line parallel research and development method.
Day 1: Confirm the configuration
UED and the r&d team quickly focused, came up with several solutions and discussed the feasibility of the design. Finally, we believe that the H5 page should meet three elements:
- Simple and lightweight interaction: according to the carrier of content transmission, choose interactive ways that are easy for users to understand and intuitive;
- Sense of participation: lower the threshold of reading copywriting, and enhance the sense of participation by creating relevance or interest between content and users in the process of interaction.
- Create communication: If the content is just an exposition of the nature of science popularization, it is difficult to arouse the desire of users to share, so that users feel that “this content is related to me/my friends”, which is easier to spread.
Based on the above three considerations, we decided to adopt an interactive game format, which is easier to spread.
Day 2: Construct a questionnaire
Since the D2 forum was mostly attended by front-end developers, we ended up with a measurement mini-game called “Test which siege you are 🦁️”. The q&A solution includes seven interesting questions that are relevant to the daily life of front-end engineers, and the results of the questions are presented visually.
They were asked about their favorite type of mechanical keyboard, the most common front-end framework, the most common development editor, the most productive hours and the type of music they listen to at work.
Day 3-4: Design + Prepare data
It took us two days to design the overall interactive framework and refine each topic. Each topic was associated with data. UED prepared mock data synchronously, laying a foundation for the next step of visual development.
Problem of mapping
Each time a participant answers a question, there are corresponding visual elements on the process and results pages.
| Question list | The corresponding | Result page element | The sample | |
|---|---|---|---|---|
| Visual style | Favorite type of mechanical keyboard? | – | Answer page action button color |  |
| What is the most common development editor? | – | Result page color scheme |  |
|
| Everyday work dress style? | – | Fashion sticker types |  |
|
| Favorite symbol to type.” | – | Decorative elements for the result page |  |
|
| Visual result | Peak productivity time | – | Color loop frequency distribution |  |
| The type of music you listen to at work | – | Circular polyline shape |  |
|
| The most commonly used front-end framework | – | Central droplet size |  |
The visual design
As we mentioned earlier, each answer that the user participates in is presented as a visual element. Taking “mechanical keyboard”, “label” and “editor” as examples, we made the following design.
Mechanical keyboard:The touch and feedback of a mechanical keyboard is fatal to many technical students. So the first question in the game is the user’s favorite type of mechanical keyboard, and after the user selects it, the answer button for each subsequent question will correspond to it.
Tags:What programmers wear is often a hot topic of discussion. For example, the Internet company’s T-shirt, the programmer’s classic plaid shirt. For wearing, we designed four tags, and there will be tags matching the corresponding options on the final result page.
Editor:The editor is the one that the front-end developer works with the most, so the color palette of the editor determines the color palette of the final result page. Common code symbols will also appear as embellishments in the upper right corner of the page.
Visual design & Data preparation
Visualization goes hand in hand with data preparation, but it is impossible to collect real data from every user with just a few clicks, and most H5 interactions should not be overly intrusive. So how do you present users with data that is reliable enough to look “real”? We mock the data with reasonable speculation to make it easy for a smart woman to make bricks without rice.
In view of the three questions in the questionnaire, “work efficiency time”, “favorite music type”, “favorite front-end framework”, we proposed multi-layer visualization with polar axis.
Time of high efficiency:The day is divided into five sections, and the iridescent continuous gradient ring similar to the sky is used to represent different periods of time.
Divide 24 hours a day into 15 minutes and combine them into three mock efficiency segments of eight hours. The mock efficiency segments are very active, normal, and inactive. In this way, if the user chooses the early morning as the highest work efficiency, the peak of the user’s 24-hour efficiency can be simulated in the early morning interval, which is adjacent to the normal interval and the inactive interval. Then, according to the mock visualization results, the mock data can be scaled appropriately to scale the interpolation, and the graph density of the histogram can be enhanced to enhance the sense of delicacy.
Favorite music type: Based on the favorite music type selected by the user, we present mock lines based on music style and synthesizer options, as shown below.
- Line style: lines with soft music style are smooth curves, and lines with strong music style are straight lines.
- Number of lines: according to the composition of each music, it can be divided into 4 to 7 lines.
- Data point density: 48 data points were used for classical music and pop music with slow rhythm; Heavy metal and rock fast tempo, using x2 data points.
Favorite front-end framework: Users can see a droplet of fan blades in polar coordinates. Fan colors map popular front-end framework logo colors like React→ blue, Vue→ green, Angular→ red, neutral gray, and self-written libraries. For the front-end library type selected by the user, the corresponding water drop will be enlarged to emphasize.
The center text is randomly generated AntV products, such as G6 is AntV’s graph visualization solution.
Day 5: Development phase
Design and engineering are not separated from each other. From the very beginning, UED has maintained close communication with the front end students.
UED: “Can it be done? Do YOU need D3?”
Siege Lion: “Of course it can be done ~ G2 (Graphical syntax visualization engine) will definitely be done”
Siege of the lion:
A few hours later, the POC version came out
UED: Can I change the shape of the front frame to water drop 💧?
Siege of the lionB: No problem. Ten minutes
10 minutes later…
UED: Wow, 🤩 why so fast?
Siege Of the City: Hee hee 😝, because G2 is based on the graph syntax, it has a high degree of ease of use and scalability, without the developer to pay attention to all kinds of complicated graphics implementation details, just change the shape mapping shape, like the piont shape mapping from ○ seconds to △, □, ◇, etc.
The specific ideas are as follows: determine the geometric marks corresponding to each visual element, disassemble them, and then combine them in the way of multi-view to form the final infographic.
- Editor: Theme style
- Daily routine – Time period: ring chart
- Daily Routine – Productivity: Dense histogram
- Music: line chart
- Front frame: rose in the shape of water droplets
- Recommended product: Chart annotation (central text)
Here, take a look at G2Plot’s open extension mechanism. G2Plot is a simple, easy-to-use, extensible and combinable statistical chart library based on graph syntax theory. The overall architecture is easy to understand, and charts are encapsulated based on G2 using Schema + Adaptor’s schema. Meanwhile, the Adaptor mode for developing charts is directly open, and we can use G2 packaging to customize charts based on this mode. After direct distribution, it can be used by more people in G2Plot mode.
Here is an open D2-Infographic based on the G2Plot open extension mechanism. Want to see the full implementation? Check it out and welcome star and fork ~ if you find it helpful
/** * adapter *@param params* /
export function adaptor(params: Params<ChartOptions>) {
// The flow mode handles all configurations to the G2 API
return flow(
chartAdaptor,
theme,
dailySchedule,
music,
waterdrop,
centralText
)(params);
}
Copy the codeDay 6-7: Test modification
After the success of the first version, we collected a wave of feedback from the team in a small area and made some adjustments.
Simple style: We removed the light background that was not visually striking and kept the dark theme that was popular with technical students. Increase dynamic effect: make the line chart and water droplets on the result page show flashing effect, enhance the visual infection of the page. Optimize details: Adjust the visual style of graphs such as histograms to be more consistent with the overall style of the result page.
Take a look at the final result
Written in the end
If you find this article interesting, please like it. For more visual design, check out the comprehensive AntV design language, design strategies, and guidelines.
AntV products are being systematically upgraded. If you are interested in visual design, beauty and details, please send your resume + portfolio to [email protected]. Bonus points for relevant front-end experience.
Data visualization designer: responsible for AntV related design work, mainly including visual design system building, visual product interface style design, output high-quality design schemes and specifications.
