【Column】 What's trending at Flyme China? (Vol 3.0)- The design ideas of Flyme 5

2199

4

2016-01-16 17:54

Descending
Author
After one year of careful development, the new Flyme 5 finally comes out. It embodies the painstaking efforts of product managers, designers, and engineers. Each detail of the Flyme 5 has been repeatedly deliberated. Here I will share the design ideas of Flyme 5 in terms of system framework, application structure, and animation ideas.

System Framework

The system framework of Flyme 5 is divided to six parts: shopping apps, media apps, efficiency apps, tool apps, public controls, and system-level modules  (home screen, lock screen, multi-task, and notification system).

| Shopping apps （this part only available in China now，but we are working on it in global/Indian versions）



The shopping apps emphasis on creating a lively atmosphere like the hypermarkets. The shopping apps are just like the shopping windows, displaying diversified goods, making the consumers be eager for everything. In addition, we strive to strengthen the content operations, maximize the multi-dimensional display of content, such as Editor's Choice, hot items, and different styles of topics.

 
· Rich content is displayed in diversified styles (full size, medium size, and small size) in turn. Users feel fresh and view different topics during the browsing. For example, in the app center, various apps are recommended such as Editor Recommendation, Weekly Hot Content, and special app for Mid-autumn Festival. During the pleasant browsing, there is definitely an app loved by the users.
· The navigation tab on the top is placed together with the search box. The users can browse all content in the store at a glance and search apps rapidly. This design can greatly satisfy the retrieval and search requirements of the users.

| Media apps
 

In most of the time, the users use the media apps to listen to music, watch videos, and browse images. The content is the absolute subject of the media apps, while the operations are relative weak. Therefore, we focus on creating an immersive experience, so that the users only focus on the content and ignore other unrelated elements on the screen. In addition, a large area of the content uses the subject color of the app, making the users immersed in the content.

 
· Highlight the content, select colors according to the content, and create a deep immersive atmosphere.
· Try to weaken the buttons, to maximum the display space for the contents.

| Efficiency apps
 

Generally, the users have clear purposes when using the efficiency apps. Therefore, the function ingress must be clear and easy to find. According to the task traffic of the users, we properly arrange the core functions on the home page, so that the users can easily find the corresponding functions.

 

· To improve the function retrieval efficiency, the information hierarchy of the efficiency apps is flat, ensuring that the users can learn all functions at a glance. The sidebar structure used for many years is cut for the document and setting apps. All functions are tiled on the screen, so that the users can directly learn the functions after opening the app.

· All system settings in the settings are re-sorted again, to help the users to rapidly locate the required setting items. The search function is added, to improve the retrieval efficiency.
· To improve the retrieval efficiency, we also put the navigation of the phone and message apps in the top tab. The users are clear about the apps at a glance and easily flick to switch. All content can be obtained by a touch.

| Tool apps

 

The application scenarios of the tool apps are relative simple. For example, the recorder app has only the recording function; the calculator app is only used for calculation; and the weather app is only used to show the temperature information. The tool apps are simple. Therefore, for these apps, we try to simplify the app screen and remove redundant screen elements. Only the core functions are reserved, which restores the simple and easy-to-use nature of the tool apps.

  

· You can see that the screen of most tool apps is simple and elegant and highlights the major functions. For example, the calculator only has the calculation function. Therefore, the display is designed in full screen, allowing the users to immerse in the calculation atmosphere. The weather app also highlights the core information, that is, the weather. The users can learn the major weather information at a glance.
· Behind the simple screen design, it is the deep consideration and organization of complex function requirements. The user requirements for the tool apps are complex. We have to differentiate the functions and provide excellent products only by deducting the user requirements. Using the browser as an example, the core user requirements are website navigation and searching. Therefore, we focus on the search and navigation. The browser shown in the above figure does not have excessive functions. It has only the search box and home page of the website. It is simple and easy to use, satisfying the core needs of the users.

| Public control

 

The public control of the Flyme 5 has a great change. The design team has done a lot of survey on human-machine interaction. Through repeated discusses on the public control of Flyme 4 and brainstorming, the design team obtains a set of optimal schemes. Due to the complexity of the public control standards, here we describe only several public controls, as shown in the following figure.

· The prompt box is displayed at the bottom instead of the middle part. Therefore, the prompt box becomes more stable visually (compared with displaying in the middle part). In addition, the option layout is more elegant and simple.
· Guiding by the sight and cooperated by the animation, the prompt box displayed at the bottom is more regular and complies with the user's sight change rules. However, due to different quantity of options, the height of the prompt box displayed in the middle part varies, and the appearance time is abrupt.
· The prompt box displayed at the bottom is close to the delete button on the bottom. It is convenient for the users to confirm the deletion.
· The descr iption of the displayed information is changed from "deleting photo 1" to "deleting 1 photo", which is more in line with the user's reading habits.
· The light weight incoming call notification does not interrupt the current tasks and is more user-friendly.
· The reply to a new message is more light weight. Users can simple reply to a new message without skipping to the app.

| Home screen, lock screen, multi-task, and notification system

 

The key point of the design of these modules is "coherent". These modules function as links in the system. They can link each task of the users. We have re-designed the notification system, so that the user can smoothly process the new notifications in various scenarios. The user can rapidly start a new task and also naturally switch to the next task. The lock screen, home screen, notification, and multi-task process closely cooperate with each other, making the user imperceptible to feel the pause. The entire process is smooth.

Home screen: The first screen before the home screen is removed. Currently, only the home screen, and screens A, B, and C are available. The layout is more reasonable, and the user's understanding is simplified.

Lock screen: The function of displaying notifications on the lock screen is added. The album cover of the currently played music is also displayed on the lock screen. The notification preview is flatter and the lock screen is more beautiful.

Multi-task: It inherits the interaction manner of calling out multiple tasks by flicking up on the screen in Flyme 4 and displays the latest multiple tasks in card mode. The  content preview and task switchover are supported, and the efficiency is significantly improved.

New message notification: The floating window for new messages and lock screen notification are provided. So far, the breathing light, lock screen notification, and new message floating window make the notification dimension more comprehensive. Therefore, the user will not miss any new messages regardless of whether the mobile phone is in standby state, the screen is on, or an app is being used. In addition, the screen split function is added because the user's fragment time becomes longer. As introduced at the press conference, the user can grab the AliPay lucky money and WeChat lucky money simultaneously.

Therefore, the inter-app operation efficiency is improved.