【Flyme 5】 The design ideas of Flyme 5 - Animation

3722

7

2016-01-26 14:01

Descending
Author
Through a year of honing, Flyme 5 finally makes its public presence like a sword out of a sheath. The brand-new Flyme 5 conveys thoughts of the product managers, the designers and the developers towards the product, and features every single detail that has been decided upon deep consideration.There are so many thoughts and stories that we want to share with you all. Now,as a member of the Flyme team, I would like to show you how Flyme 5 is designed with three stories in system framework, structure and animation concept.

View the threads on system framework: http://forum.flymeos.com/thread-854-1-1.html
Animation
Ever since its release, Flyme 5 has received the most common compliment as to be “running so smoothly”. It is indeed the most instinctive feeling of users towards the system as shown from the data image below.
Such a smooth user experience is derived not only from performance optimization that our engineers have been mining into for one year, but also from a mass of well-designed animations.
Animations are ubiquitous but invisible in Flyme 5 like every piece of bones.  We want our users to feel the ease, the elegance and the smoothness that Flyme offers instead of being distracted by the animation. We stick to the principle of “being supportive not dominating or distracting”. Guided by that, we categorize our animations by a variety of application scenarios listed below:
·                    Smooth transition
·                    Operational feedback
·                    Hierarchical demonstration
·                    State feedback
·                    Entertainment

| Smooth transition
Smooth transition is the most common application scenario for animations in Flyme 5 and one of the most instinctive representations of the system smoothness. The interface just changes lightly and elegantly with the element size, the location and the transparency so that users feel the smooth and seamless transition between interfaces.
   
   

| Operational feedback
We always think of timely and effective operational feedback as the core element of improving the operating experience in human-machine interactions. So every click by users on the screen triggers an obvious feedback animation, which makes users feel that they are getting something from the click and are intrigued to make another one. Either it is ina single task flow or by a single click, users will just get an instinctive andobvious operational feedback to ensure a highly efficiently and smooth operating experience.
           

| Hierarchical demonstration
Jumping between interfaces can be translated into a hierarchical change most of the time. Therefore, we need the animation to show clearly the hierarchy between interfaces to the users so that they can be well-aware of their location. A clear structural hierarchy plays avital role in users’ comprehension and using of the app. Special effects suchas focus zooming, overlaying and sliding out help users develop a space perception.
   


|Status feedback
Status feedback is the feedback of arunning state when users may have to be patient in waiting. Therefore, what weneed here are some vivid and lively animations to relieve the anxiety of the waiting, or inform them of the current running state, so that the users can feel relaxed, assured and reliant.
   


| Entertainment
Animation for entertainment is aimed at creating an easy and funny atmosphere of using. By considering different using scenarios of different products, users are put into a specific scenario such as Favorites on the Music Playing page and Real-time weather page.
   

Conclusion
Flyme 5 is designed to be a moreuser-friendly mobile operating system. It is the hope here that you get a better understanding of our thinking behind the design and have more fun inusing the product after reading this article. Upgrade your mobile phone to Flyme 5 to have more fun!