Transitional Interfaces
Eye-pleasing, mind-easing
Due to the limitations of conveying information by still-picture, designers are required to add additional explanation designs and oral expression to complete the effect. Still-image design can save plenty of time and budget, and it contribute a lot to achieve the rapid iteration. However, the downside of doing so is that it’s not intuitive enough, and some details in designer’s mind can’t be completely and correctly expressed, also the lengthy design explanation just swallowed our patience.
Therefore, many designers began experimenting dynamic design in order to present their concept more intuitive and in an interesting way.
During an animation design, designers need to have some thoughts about different things, and they need to make some proper decisions, here are some cases I want to share with you all. This article will start with three terms: smooth, appropriate, and surprised.
Smooth
Smooth and clear animation is always welcome. On the contrary, a fuzzy animation makes people feel bored.
How to create and output a clear smooth animation design?
Dribbble designers usually use output methods described below:
- Use After Effects to edit animation effect, and then render output as QuickTime file.
- Upload QuickTime file into Photoshop, Select file Save as Web format GIF, and adjust output setting.
AE source file template in this case:
http://dribbble.com/shots/1089895-UI8-Presentation-Template
Other designers AE source files download here: http://dribbble.com/shots/1187158-iOS-7-animation-ae-giveaway
Share a collection of mobile gesture that can help designers to express their concept intuitively: http://areuswade.com/precomposed-touch-gestures/
Appropriate
There’s an old Chinese saying means don’t go too far. A florid animation is pretty cool, but it’s not the more florid it is, the better. Animated abused can let users feel giddy, loss of focus, and even hate the design.
Design the animation without affecting the performance.
If any animation affects the performance or responsiveness of the original product or service, the design becomes a liability, it not only failed to improve users experience but also become an annoying presence. Sometimes, less is more.
Weight the cost first.
When it comes to the unique animation design, the cost gets greater. You should ask yourself the purpose of this design before you jump into it. If you really need this unique and pricy design to get job done, sure, go for it. The point is weight the cost while you exploring the core idea of your design.
The animation that appear repeatedly should be as simple as possible.
It’s easy to get tired of something you see very often even it’s gorgeous. When it comes to those very frequently used operations, I do not recommended to make it too complex. You can consider some smaller fundamental interference animation. When a long wait period cannot be avoided, you can consider the randomness of the contents.
Except under the special circumstances, animation effects should be kept in a comfort zone, avoid dizziness and interference.
Some flash website are designed to be very dazzling. It looks impressive at first, but it’s difficult to retain its users. There’re too many animation elements, it just too overwhelmed.
You can control the timing of the animation appears, the triggered mode, and influence range. For example, in some web design, you can only trigger a specific content if you scroll to a particular area, once the animation is shown, it can only be triggered if you refresh the page and scroll the same area.
Surprise
Surprise is usually unexpected, that’s make sense. Figuring out the optimum timing, smart animation design can surely enhance the product experience, increase the level of interesting, and at the same time giving users a surprise for using the product. How to motivate users to explore interests, allowing users to generate s sense of accomplishment, providing pleasant experience that beyond their expectations. Those are the questions that designers need to ask themselves.
When we sending out a greeting to friend via WeChat, we can trigger some animation effects on the chatting background, those animation effects are random in some special holiday, users can easily be surprised.
Games tend to set different levels and achievements, some small ones, some big ones. When the players reached those levels, they will get some reward, which satisfied users’ sense of accomplishment. Therefore, when the user to complete their registration, payment, or uploading a file or some process that takes time to complete, you can also find a way to fill your users’ satisfaction by giving them some bonus.
Haze is my personal favorite weather application, its dynamic effects and interaction patterns are simple and innovative which is completely exceeded my expectation as a weather app, and I just totally in love with it. Recently, the production team of Haze released a Thunder space App, which inherits the original design style, and one interested can download it and try.
Path is literally one of the most favorite App of designers.
I am so impressed by it’s sleep mode animation. Click to bed, the screen darkens slowly and a moon rising from the bottom of the screen, also, the color of the moon will produces changes according to the current time.
The App deal in, at the bottom of the screen there is a brown paper bag, you can long press an item that you interested and dragged it into the bag, this operation would make you feel like you put a piece of torn paper into a bag.
Summary:
- Animation needs to be smooth and clear.
- You shouldn’t abuse animation in your design, and the more complex is not necessary the better.
- Figuring the timing, giving users some surprise.
In the design of animation effects, in order to ensure a simple concept will implement to your product, you need also consider some problem with your team: specific animated present, triggered timing and effect present duration. I will share some experiences in the future articles.
Translated by June Chen from FileSq Blog. Original Article from Tencent ISUX.
Email me when FileSquare publishes or recommends stories