A, first
Motion effects are, as the name implies, animation effects. Why do you need live effects in a web page? Simply put, it’s for fun.
If the relationship between the web page and the user is compared to a couple who are in love, it is obvious that the UI of the web page is the level of appearance, while the dynamic effect is a little romance between the couple in my opinion. Romance may not seem so important compared to the level of appearance, but if romance is not in a relationship, does it feel like something is missing?
When we meet a goddess for the first time, we are always dressed up, but what if we can bring our sense of humor? At the beginning of the site we will pay special attention to the visual, at the same time if can also add a little detailed motion effect will be more attractive.
The visual design of the first version of qidian international login page is very beautiful, and the large picture of the night sky with high definition gives a sense of atmospheric calm. But the boss says it doesn’t directly express that we are a website dealing with books. As the source of domestic IP, we hope that users can know what we are at the first sight, what is our advantage, at this time the continuous cycle of book sealing effect plays a great role here.
Dynamic effect is a kind of romance between web page and user. This kind of romance can not, but there must be in order to let the user more cool. And users will naturally be willing to pay for your product. If my hypothesis is true, then kinetic efficiency becomes a love question. As with all love matters, imitation must be the easiest shortcut. Learn more to the old driver sister skills and dynamic creative effect, next time in their own combat can be used.
Second, the dynamic effect has taste
Some girls like little fresh meat, some girls prefer uncle. As romanticists, we have to figure out what a girl’s taste is in advance. As an international first-line company, Apple has chosen the following dynamic efficiency style.
The first time I saw this effect, I felt like a slow and calm uncle. Uncle usually gives the impression of security. Security also means that Apple’s products are trustworthy and worth buying, which is exactly what Apple does.
To put it simply, the speed of the dynamic effect reflects the temperament and taste of a web page. The fast dynamic effect will be relatively lively and lovely, while the slow dynamic effect will be more stable and atmospheric.
Qidian International is an online reading platform for overseas readers. We hope to bring readers the most comprehensive, accurate, efficient, updated and convenient experience. But Apple and this mature uncle compared, we can only calculate to do a small fresh meat. If a small fresh meat installed mature will inevitably give a person greasy feeling. Therefore, the overall dynamic effect of starting point international feels light and cheerful. You won’t see too many complex effects overall. But move and click and you’ll find the roses we’ve hidden for you.
Three, dynamic effect retains distance
When we first start chasing girls, we often want them to see our sincerity and sincerity. If you send pearls and necklaces to girls on arrival, I believe most girls are easily frightened, and those who are not scared away, what do you send them later?
Therefore, I recommend small and beautiful things in the early stage, which will not be too obtrusive and more acceptable. That’s not to say we can’t do something big. In this fast-paced Internet age, we don’t see monsters and ghosts, but it’s something that can only be challenged if we build enough trust with each other.
It’s like a programmer boyfriend who takes his girlfriend by the hand before dawn and rides her to the top of the mountain, regardless of the girl’s waking up and questions. When the sun comes out I believe the girl will melt. But if the boyfriend turns into a friend he met once before. Probably most people still refuse in their hearts.
That’s why Qidian international didn’t choose to add too many cool motion effects at the beginning. Of course, there was also a reason to save cool effects that would take time and effort to develop for subsequent iterations in order to meet people quickly. After all, first let people see us, we have a chance to show people our other advantages. If you are too eager to show yourself, you will show disrespect to others. Keep the proper distance between people, so that the relationship will last longer. This shows that sexuality is as much a matter of time and thought as romance.
Four, moving effect close
Treat the boys fly everywhere, take the initiative for the girls to move the chair of the handsome boy but few. Since we are all doing the same, the choice for girls is based on the level of appearance. So the details are really important here. Give her a rose when she first meets you, carry a bag of tissues with you when you leave the house, or arrange a dish she likes to eat in an easily accessible place at the table. These are the details that will give you credit.
Qidian international’s page is loaded with very rich content, but it also means that our page is relatively long, and users have to drag the scroll bar when they want to go back to the top, which is obviously more trouble. What we do is we scroll more than one screen and display a back to the top button, then click the back to the top button and disappear. The button appears and disappears, using the same sliding effect as the page scrolling, which not only reminds the user of the function of a button, but also won’t make the button appear too stiff.
Cool motion can certainly be attractive, but it’s easy to fall into the trap of being cool for cool’s sake and lose sight of the details. We usually give a hover effect in the hover button, and we can make it very nice. However, the button is not only a state of “:hover”, “:active”, “:visited”, “:disabled” and “: Focus” are also details we need to consider.
Some may wonder if such extremes are worth considering. When we like someone, we don’t think about whether these things are worth doing, even though we know the other person may not necessarily see them. But what if the other person sees it? What’s this? That’s sweet. Sweet is something that sometimes we don’t feel, but as long as the other person feels it, it magnifies all the other good. This is where the dynamics of the web are important. It is simple enough that the more we think about others, the more they will remember us.
Five, the dynamic effect is special
There are thousands of tricks of the old driver that we can learn from more than one. So here I’m going to take what’s common on the webThe drop-down menuFor example. What we need to do is simply make the dropdown menu invisible (display: None) before the user clicks the button, and display (display:block) when the user moves into the clickable area of the button, thus fulfilling the requirements of our function. But that’s not enough, your girlfriend asks you to get a glass of water, you stupidly pour her a glass of water and put it in front of her. It’s not going to make a girl happy because it’s not romantic.
I’m sorry to tell you, but at this point you should take out the ginger tea you usually prepare and make it for her. When the ginger tea has cooled down a bit, you bring it to her, hold her and feed her. Even pretend that the tea is a little hot, give her a blow, concerned said: “baby, careful hot.” This seemingly dramatic pouring of water may feel a bit tricky, but it’s relatively romantic.
Why can’t our drop-down menu be romantic? Add a little transparency in the display drop down, isn’t it soft? Let the drop down appear when there is an up and down offset, so is not rich? Let’s be a little more adventurous and let the child element come out with a delay in order, wouldn’t that be more hierarchical? If you want to be cool, you can even consider some 3D effects.
The power of CSS is the ability to manipulate almost any DOM property. Time, transparency, size, position, color, speed, and even 3D can be experimented with. Even combining different properties can have unexpected effects.
If you send flowers to someone else, how does that give you an advantage? To make the goddess see herself in her many pursuits, instead of flowers, we send lipstick. Will this make us look special and tasteful?
Of course, this particular attempt needs to be in line with the expectations of the users that follow. Your girlfriend is probably just thirsty, and you’re obviously acting out a romance for her. The goddess might like a girly pink lipstick, but you got an aunt red, which is self-defeating.
Six, the dynamic effect is in line with expectations
You’re walking down a busy street with your girlfriend. Suddenly you turn around and sing Marry Me to her. Then you get down on one knee and pull a nice box out of your chest. By this time you are surrounded by people and your girlfriend’s eyes are moist with excitement. You open the box and there’s nothing inside. “Tada! Happy April Fool’s Day!” I’m sure your girlfriend has 10,000 running alpacas in her head right now.
Turning back to the scene of our website, I believe many people are like me. I originally planned to download a starting point international reading APP, but finally entered a download interface. The huge download button made me see hope and I clicked on it. Thud! An audio full-screen video AD explodes. I turned it off quickly. Then click again to download an installation file. Very not easy to install a good open, XX is a rogue software.
The above two behaviors are not in line with users’ expectations, which can easily cause users’ discomfort or even aversion. Because to put it more seriously, it’s called cheating. It’s hard to like you, but easy to hate you. Once users feel cheated, all of your previous efforts can be wasted.
How do we translate this effect into our web pages? Qidian International in many mouse interaction places, are unified use of the mouse to add shadows when moving, when pressing down. Imagine that there is a QQ candy on the table and we are going to pinch it with our hands. When we move our hand over it, it blocks the light, so we see the shadow, and when we squeeze it down, it squishes because of the force. Is this more in line with what we expect from pressing this action? Cold web pages should try to use dynamic effect to close to our life, reduce the user’s understanding cost, reduce the user’s hesitation on your page effect. And this isquasiphysicalWhy is always the preferred design style to cultivate user habits.
Of course, this is only one of thousands of scenes, depending on the scene we preset, our motion effects need to be adjusted accordingly. You can also imagine that our mouse clicking is like throwing a stone in a calm lake. When the mouse is pressed, the button appears as a gradually spreading shadow to simulate the effect of ripples on the lake. This is also a very good choice.
Seven, the dynamic effect is consistent
This is more like us talking to our girlfriends. One minute you guys were having a great conversation about poetry and philosophy. All of a sudden you’re talking about some annoying relative who came to your house yesterday. It’s a conversation I’m sure few people can handle. There should be a connection between the topic and the topic, so that it is not easy to talk about the death of the day, which is the same reason in our action.
The two actions of clicking a button and popping up a popover are not very related in themselves. Pop-ups are just one of the many events that can be triggered by clicking a button. But so are our needs. Therefore, we suggest that dynamic effects be used to narrow the relationship between them. I repeat your actions in order to get closer to you. The goddess gives you a wink, you naturally want to quickly give the goddess a wink. Passers-by give you a smile, you will naturally smile back. Repetition makes a connection between two people who are unfamiliar, and can make a connection between two unrelated operations.
I explained earlier that the way That Starting International handles this action is that the mouse goes down and the mouse goes out and the mouse goes up and over and we make the popover go up and over the button. Because the popover goes from small to large when it comes out, it naturally goes from large to small when it closes. In this way, there is only an interaction form from large to small and from small to large, and the cognitive cost of users is greatly reduced. And repetition is one thing that can save development costs, so why not kill two birds with one stone?
From the beginning when we barely knew how to do it to the end when we had more and more knowledge, we always wanted to show off a little bit. But our sources of knowledge are often different websites or different gods. We take all their advantages and put them on our website, it is easy to appear in our own webpage. Parts look great, but the whole thing always feels weird. Mash-ups can be stunning but hardly sophisticated.
Repetition can achieve the purpose of unifying the overall style. If repetition cannot be achieved in some places, we should also try to use the same speed or similar style of action to achieve the overall consistency. And the comfort of consistency may be more likely to retain our users than the surprise of cool.
Dynamic effects should not cause trouble
When we go out with our girlfriends, girls usually dress up. “Honey, do you think I should wear this pink dress or this blue one?” Usually this kind of problem is a nightmare for a “programming ape” who doesn’t know how to dress. You said pink. “No, this color is too tender for me.” You said blue, “This color doesn’t go with my skin.” And then you go back and forth on this issue. Eventually your girlfriend will go out with you in an angry compromise, but there’s nothing you can do about it.
The more choices we give users on our web pages at a time, the greater the chance that they won’t choose any of them. Therefore, what we need to do is to minimize the choice in interaction and weaken the panic caused by choice to users in dynamic effect.
By default, the button on the Banner of the starting international home page is not displayed. When the user moves the mouse into the Banner area, we think that the user has the desire to cut the screen, and then our button will be displayed. When the button appears, we use the motion effect to make the right button appear before the left button. In this way, it conforms to the expectations of users mentioned in the sixth point, and avoids the anxiety caused by the simultaneous visual choices to users. Perfect!
together
We spend so much time getting to know each other, getting to know each other, racking our brains in the middle of each other’s routine, the ultimate goal is to make each other feel our heart and be with us. Through the dynamic effect, we hope that users can also feel our sincerity and goodwill, not with users forever, but users can have a romantic journey in our castle of books.
The author: Ziven27
Welcome to reprint but please indicate the author, source and link.