This article is from netease Cloud community

Author: Ma Bao


What is FUI? You can Google it yourself. Students who like science fiction can feel the charm of FUI by looking at a picture.

This is a wysiwying-as-you-go, original tutorial. The summary of the whole paper is a sentence, “Let the structure and performance separate, bottom-up design presentation”.

I will continue to update where I think, where I write, and any knowledge is verifiable, actionable, and traceable. Theory related wiki (warm tips below many pictures)

The final result will be shared in Figma. Here is the iframe, this is dynamically updatable, if you see it change in real time, don’t be surprised, this is not a pre-animation, I am modifying the effect in real time. Tip, the following image can be interactive, mouse up click on the top right corner of the full screen mode, zoom in and out, move around and so on.

Be sure to order it.

I. Analysis of the whole process

This part is mainly about “how to do”, the design method of direct landing, explaining the whole process of design.

Key words: modular design, component set element, element set element; A SET of UI is broken down into a number of small parts, each part is flexible, like “cells” can constantly grow, can replicate changes and interact with each other; Speaking in Plain English: This article uses “Symbol” of Sketch and “Components” of Figma; It’s all component based design

If you’ve ever tried Photoshop, you can’t say for sure that it’s better than Photoshop in terms of modern UI. Especially useful are figma’s vector tools, which are powerful and infinitely close to AI in terms of modeling, faster and cheaper than AI. My main design tool is Sketch, and Figma is my modeling aid. Ps occasionally repairs pictures, and basically says no to AI.

Preparation

Preparation: Open Chrome, click the url, and sign up for super fast. You can synchronize with figma with your Google account (it will be better if he accesses netease Pass. Students with Netease pass can discuss cooperation with Figma, they will be rich!) www.figma.com/file/0wHxpt…

Set the default font size for the browser, because chrome's default minimum font size is 12, and the font icon display that affects figma is 6.Copy the code

Those of you who have Sketch open up Sketch, those of you who don’t. All operations in this paper are carried out in Figma. Because the principle is the same.

Principle: Let structure and performance separate, bottom-up design presentation

The point, line and plane in visual language is this concept, but I take this concept to an abstract level, design works are like people

“Skeleton + flesh + clothes”, disassembled from the inside out. The first step we need to take is to create structures that are as stringy as a skeleton. Then to design the style and expression, just like putting different “clothes” on different bodies. They say you don’t care what you wear when you’re growing up; Structure to structure, style to style.

The "separation of structure and presentation", semantic structure optimization and style presentation, the so-called scientific and reasonable HTML structure plus a set of elegant CSS style sheets, has formed the vast majority of web design works we see.Copy the code

The whole design process is to do components first, and then combined into a structure, and finally to adjust the style; From left to right it’s like an assembly line in a factory.

Step 1 Set up the component library (Structure)

  • I dare say that all graphic design starts with “points”, “lines” and “surfaces”;

  • The common points, lines and planes are designed as independent reusable components

  • Components are all “20 by 20px”, and sorting components by size helps with library management

Select define object and click 4 rhomb ICONS to define component library reuse

Select the circle and set the stroke style: “Dash Pattern: 4800, 1300, 80, 7300”

Align: CenterWidth: 10px
Dash Pattern: 4800, 1300, 80, 7300Copy the code

Step 2 Black and white line drawing > Effect drawing (modify style)



Step 3: Target state

  1. Line drawing. You don’t have to draw your own line drawing with components, you can “build Lego”

  2. Modify sample color; (Gradient is very important, this debugging process, I will open a separate article)

  3. Modify in the component, mirror component preview;

rendering

The DEMO is a reference image, and here is what it looks like.

conclusion

(Structure and expression separated, unfinished…)


Netease Cloud Free experience pavilion, 0 cost experience 20+ cloud products!

For more information about NETEASE’s r&d, product and operation experience, please visit netease Cloud Community.


Read the smart feeds of Facebook and Sina Weibo