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

3538

7

2016-01-26 14:01

Show all posts
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.
01_01_安全中心_手机加速(1).gif 01_03_便签_新建.gif
01_04_通知栏_下拉.gif 01_06_图库_标题栏.gif

| 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.
02_01_多任务_上拉.gif 02_02_设置_水波纹.gif 02_03_键盘_输入.gif 02_04_时钟_计时器.gif 02_05_桌面_整理图标.gif 02_06_手电筒_开关.gif

| 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.
03_01_多任务_切换.gif 03_02_设置_二级菜单.gif


|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.
04_01_音乐_相似推荐.gif 04_02_电话_来电接听.gif


| 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.
05_01_天气_晴天切换雨天.gif 05_02_多任务_全部清除.gif

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!