Do a flat design-interactive Chapter

Source: Internet
Author: User

Flattening is not only the interface visual flat without three-dimensional sense, but also the interactive experience of the flat, information architecture flattened

What are some of the ways to flatten the interaction?

 1. Structural level reduction-efficient

First of all, to understand the "flattening" of interaction by literal meaning, corresponding to this should be "structure level", where I understand that the interaction steps, the previous also has been emphasizing the streamlining of interactive steps, want users to complete the task with minimal steps, it is obvious that this is required to flatten the hierarchy, so the interaction steps and hierarchies are interrelated.

Web pages pay more attention to deep breadth of balance. Due to the limitations of mobile phone equipment, the breadth of the mobile phone's main interface is greatly weakened and the information depth is more obvious.

How do we reduce the structure level at the mobile end and streamline the interaction steps. The following methods are summarized

1) Coordinate

Display side-by-side information in the same interface, reducing the page's jump.

2) shortcuts

Taking iOS7 as an example, a shortcut menu can be exhaled from the bottom by simply sliding up and down at any interface.

Setting up WiFi and flashlights can be done directly from the menu.

3) Display key information

This is the process of buying tickets for a watercress movie.

The steps are: Select the film = = Choose the Ticket = = Choose the cinema

In the "Select Cinema" interface, in addition to showing the name of the cinema, but also showed the "lowest price" xx yuan, and the rest of the games, and whether you can buy the key information, here combined with scenarios, the user since the point of "choose to buy" that the user's purchase desire should be very strong, so that the key information shown here, You can make the user choose the cinema at the same time can see the lowest price, do not have to go in a theater to see, but also to speed up the purchase efficiency.

4) Reduce the click


iOS7 Close the background program, just use your fingers to slide up and down.

Slide gesture This type of operation must be designed naturally, otherwise the user can not find a point where do not know how to operate will have a sense of frustration and give up use.

From the above example, we can see that the hierarchical structure is reduced, the interaction steps are necessarily reduced, so the user's efficiency is improved.

Mobile end due to the limitations of the device itself, there is not enough space to show the path, if there is no clear hierarchical relationship, this may mean that the user is very likely to lose direction, even to go deep into the information to find what they want, what should be done is to reduce the depth of information.

 2. Explicit presentation-Accurate

The approach can be to reduce the buttons and options to make the use more concise.

Example: Shake a Shake

Shake, the user's instinct reflects, do not need any explanation, even the child knows, as long as the mobile phone shaking can achieve this function.

 3. Intuitive information-orderly

Now the popularity of small screen equipment, resulting in the need to reduce the excessive and complex elements of the interactive interface design, so that information more intuitive display.

If the need for less information, less function, then to do intuitive is very easy, in fact, many products are not doing all-inclusive things, this is a very good trend. But in many cases, the amount of information we face is too large, so how can we make it intuitive?

The internet to organize a large number of information orderly and clear, so that users can be sorted according to your clear classification quickly find what you need.

Here about finishing the topic actually has a lot of, do not specifically unfold, the specific related books "Soto and Super finishing"

Clean and orderly, always more than disorderly and pleasing to the eye, in a timely manner in the information is very large, in order to find in the environment will be more convenient and quick.

4. Consistency

1. Functional Consistency:

2. Seamless experience between platform and platform

Ensuring consistency is also a very important point of flattening, reducing learning costs and increasing the efficiency of use.

5. Other

Response and feedback, I think it should be considered more important in the flat, the interface should remind the user what happened, let the user understand the feedback, when the user is wrong, they can clearly know what to do. Otherwise, users will often choose to leave when they are overwhelmed.


Effective collation of information, reduce the level of structure, the function of the expression is straightforward and so on are all kinds of means to flatten the interaction.

Interactive flat design, in fact, is a concept, is an intrinsic design idea, the purpose is to be able to change the environment needs of a variety of circumstances, still can improve the user experience of a method

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.