Let me talk about the background first. Before coming to the company, I developed more back-end logic like most back-end developers. Once I met the front-end page, I could only develop simple functions, but not more complicated functions. But with the increase of development time, it is increasingly felt that an excellent developer not only understands the development of the server-side logic interface layer, but also looks at his work from the perspective of the product and the UI. With the help of ant design related content, it is very gratifying to develop one after another stable and practical functions. Take the time to talk about my feelings about front-end development, I hope it will be helpful to everyone.
Let me first talk about the two concepts I read in an article on Zhihu, human-computer interaction and unconscious design:
Human-computer interaction
Speaking of front-end development, let's talk about human-computer interaction first. Human-computer interaction refers to a process in which humans and computers interact with each other through behavioral actions. It mainly involves four aspects: people, computers or systems, action behaviors, and mutual influence results.
The process of interaction goes through these stages:
[Target] is determined by the action initiator.
Make [plan] according to the goal.
[Confirm] The feasibility of the plan.
If feasible, proceed to the actual [execute] trigger button, switch, etc. to act on the system.
The system gives feedback and makes changes, and the action initiator [perceives] this change.
Through a certain method [interpretation] these changes.
[Comparison] If the goal is consistent, it means that the goal is achieved.
Unconscious design
awareness
When we want to do something, if we think about it carefully, we will have many ideas, images, and emotions about it. For example, when you want to drink coffee, think of Starbucks, think of its environment, atmosphere, and feeling of relaxation. This kind of mental activity that one can clearly realize is consciousness. (From the Internet)
unconscious
Hidden in our consciousness, we don't need to think about it, such as sleeping naturally when we are sleepy. Subconscious behavior, that is, habitual, let it go.
From the iceberg chart above, we can see that the unconscious occupies a large part of consciousness. From birth to adulthood, we have undergone countless trainings to gradually turn some conscious behaviors into unconscious behaviors. There is a lot of space in it. Based on this, the well-known contemporary Japanese product designer Naoto Fukasawa advocates "unconscious design": let it go and think about designing products based on people's hidden needs and objective needs .
Above, the theory introduction is over, the following specific product feelings are introduced below:
The above are the two table lamps I bought. I obviously feel that the position of the lamp on the left is not very good. I feel very awkward during the actual operation. There is always a kind of subconscious to touch the bulb and get an electric shock. The design on the right is also the most common table lamp design, obviously the experience is much better, and the experience of turning off the light is also much better.
The front-end UI interaction concepts and requirements are developing towards the right side.
ant design
In order to provide users with a better experience, the experience technology department of Ant Group has gradually polished out a design system that serves enterprise-level products after a large number of project practices and summaries: Ant Design. I have also used ant design in my development in recent years. Starting from my own feelings:
Simple. Compared with the previous native js development, the threshold is lowered. The overall UI logic and data flow thinking is more suitable for the logical thinking of a back-end developer.
It is fast and avoids a lot of style modification. For a backend that is not good at UI, it is very troublesome to adjust the style and make special effects. Before my colleagues wrote a lot of js in order to achieve a complex interaction, I looked like it was strenuous, measured by the industry level, extremely difficult to maintain.
The style is unified, which is also a place I recommend. For a website or a system, it does not need to bloom, but it needs to be uniform. The simple and extended style meets the needs of most backend systems.
Design values
natural
determine
Sense of meaning
Growth
Nature and certainty are the first values proposed. I feel that they were proposed in conjunction with the concept of unconscious design. Naturally ensure smoothness. It is more important to reduce the cost of user cognition and judgment, and focus on helping users choose a concept. The sense of meaning and growth were later proposed. The former is more of existence to carry a certain work mission, and growth is more of an expandability. For more detailed content, please refer to the explanation on the official website.
Design Principles
Some of the design principles of ant design still need to be followed by us: such as intimacy, alignment, repetition, directness, staying at home, simplifying interaction, providing invitations, clever use of transition, instant response, etc.
For a detailed introduction of direct concepts, I will not explain it here.
Only introduce some functions I have done based on the above concepts:
The following is a case comparison of the previous alignment:
Below is the page I used ant design to reconstruct another function, is it much better?
Another example is a function that simplifies interaction and stays at home:
For simple attributes to add and modify pages, I recommend using modal pop-ups, so that you can complete it without entering a new page.
For pages with particularly many attributes, I recommend setting up a separate page to implement this function.
Design pattern-componentization
Quoting from two classic diagrams, the development of front-end components. The above two diagrams all express one meaning. A complex interface is broken down into different blocks, and different blocks are broken down and broken down into The most basic content is called Component.
The component does not care who calls it, and provides the corresponding methods and properties to the caller. When the caller passes in different data content, the content can be displayed according to certain logic.
So far, I briefly introduced some concepts of human-computer interaction, unconscious design and ant design. If you are interested, you can search the Internet on your own. Later, I will introduce some development experience and environment-related content of writing the front-end. Stay tuned~
Note: Some of the above content comes from the Internet. If you have any objections, please contact the author.