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

2000

4

2016-01-19 20:11

Descending
Author

According to the introduction to the framework of Meizu mobile phones, the app structure of Flyme 5 is classified into the following types: T-type structure, two-section structure, full-screenstructure, grid structure, and list structure.

|T-type Structure
An intuitive advantage of the T-type structure is the large space of the screen,which can display a wide range of content. Therefore, it is suitable for theapp center, video, and theme apps.
 
In addition to the advantages mentioned above, an important principle for adopting the T-type structure is the "Gutenberg rule."
The Gutenberg rule refers to a fact that when users browse a page, the visual action is from top to bottom and from left to right. The upper left corner isthe first sight placement area, while the lower right corner is the final sight placement. Therefore, arranging screen elements according to this rule can better help users to acquire the content and take the corresponding actions.

 

According to the Gutenberg rule, sight hotspot of the users on the screen is as follows:
 

Therefore, the bottom navigation bar is removed tosimplify the structure. According to the user's sight browsing rules, the Flyme5 adopts the following structure:
 

The T-type structure hasthe following benefits to the apps:
  • Under the T-type structure, the sight shift of the users is more natural. The users do not need to look up and down to capture the content on two navigation bars.
  • According to the Gutenberg rule, the sight of the user after opening an app is placed in the upper left corner. Therefore, the user can learn the overall structure of the app at the first glance. In addition, the page logic is clear. The tab on the top leads the content displayed on the lower page.
  • The category navigation is changed from the original abstract icon on the bottom to the     text form on the top, making the ideographic clearer.
  • Flicking on to switch the tab makes the operation more convenient. The users can perform blind operations on the screen. The inconvenience of touching and holding operations performed after the screen is zoomed in is overcome.

| Two-section structure
The two-section structure is applicable to a page with key information+supplementary information.  

|Full-screen structure
The full-screen structure is applicable to simple tool apps, such as Calculator, Weather, and Recorder.
 

|Grid structure
The grid structure is applicable to tool apps with multiple functional ingresses, such as document, and toolkit. This type of apps has more ingresses.The grid structure can fully use the horizontal space to accommodate more ingresses. In addition, the display is more intuitive and clear.
 


|List structure (including the sidebar)
The list structure is applicable to apps with simple content type, for example, mailbox and notes.The main list displays the core content of the app, and the sidebar includesthe content that is less frequently used, making the main screen simple and efficient.


In addition, various apps in the list structure have introduced the Smart Touch.With the Smart Touch, we do not need to use a bottom bar to accommodate buttons, which occupies more space and makes users feel pressure about two bars on the screen. The screen is more refreshing. The Smart Touch can be used to highlight the core functions, for example, the dial pad, or new note functions,thereby reducing the thinking process of the users.










8.png (211.43 KB, Downloads: 106)

8.png