Do you know the 5 most common modes of interaction?

Source: Internet
Author: User

Today to share an interactive design of the foundation of a good article, focusing on the introduction of 5 popular mobile application interface design mode, it is not exaggerated to say that almost any interface between wood has been able to escape the 5 items, exactly how key, inspection inspection will know.

I'm going to give you a general overview of the common interface design patterns in 5 popular mobile apps for your reference in your own projects. These design patterns help you improve the usability of your design and make the interface more intuitive. This article will focus on the following patterns that can help you design:

Social sharing


Bounce window

Content Update

User interaction (sliding, clicking, etc.)

First, social landing

In this age of social networking, do we really need to submit personal data in such an old-fashioned way? Social landing is a design model that allows users to easily and quickly log in, replacing the hassle of registering and filling out forms.

Users can simply log on to their social network account (Facebook, Twitter, Google, etc.) without having to create a separate account that is unlikely to continue in the future, which can greatly improve registration efficiency. In addition, this design pattern has the following benefits:

Using an existing social network account to log in to users is no longer necessary to remember a username password.

Users do not have to be forced to enter information in applications that they have just downloaded and are unfamiliar with, simplifying the registration process.

Getting users to register through existing social networking accounts may give you some basic information about them. So you can more effectively adjust the application according to the user's actual needs.

Note: At home This design has evolved: You can use the qq/Micro BO cooperation account login, and then to bind you, continue to return to the registration interface--

Second, notice

The notification feature highlights recent activities and operations. We have access to a lot of information every day, but we don't have the time (or the time) to spend on mobile phones in our busy schedule. We all like to do what we have to do in the shortest possible time, and then immediately know whether there are new activities or situations that can arouse our attention. Therefore, it is important to have a thorough understanding and proper implementation of the notification design pattern.

The mobile applications of many well-known companies use the following several different methods to implement their notification design:

LinkedIn places a logo with a number on the label with the updated content.

Twitter places a small point on the top of the timeline icon to indicate a new activity.

Facebook uses a pop-up banner that hangs in the app to display new content notifications in the news push.

You can imitate your favorite solution and try to find out if it is suitable for you and your users.

Notice column how to design, the specific method right stamp learning: "Afraid to disturb the user?" to see how to design a notice bar is not annoying.

Third, window and cascade windows

Pop-up windows (also called Cascade Windows) are a commonly used method of Internet advertising. The window will cover the main content without creating a new window, and cannot intercept with blocking software, so the user is not allowed to see it. In general this situation is very annoying to the user, but in some cases, the window to interrupt the user's use of the user can bring help. For example, a user might want to view some information without losing the current user interface.

Here are some examples of window design patterns that help solve problems:

pops up and displays information/control methods related to a particular action or scenario when a user performs a specific operation in the application or reaches a specific point in time.

The original content or scene in the application is still displayed in the background, but the window allows the user to choose whether to understand what is coming next.

The window can attract the attention of the user and provide important notice when necessary. After the use is complete, the user can click or slide to close the window to return to the previous active state.

Four, down-pull Refresh

After getting used to social networking sites like Facebook, Twitter, or Google, it's natural to use a drop-down gesture to update the content. The first company to use this design pattern was apple, after which the design became widely popular.

The Drop-down refresh mode is available when the user needs to display a list of non-static, but not automatically refreshed, content. When the Drop-down is refreshed, the screen scrolls to the top and the new content is displayed from the top when the refresh is complete. This design pattern saves space (without using buttons) and is easy to understand. This approach is not limited to updating content, it can also be used to load earlier content in a series of text messages, pictures, or data updates.

 V. User interaction (sliding, clicking, etc.)

In addition to pulling down and refreshing gestures, sliding is one of the most commonly used gestures on smartphones. Many applications allow users to slide around the article to understand details or perform other actions. This approach is innovative in comparison with traditional Web applications that rely on a mouse click.

There are a lot of mobile apps on Android and iOS that use sliding, clicking, and other specific user interactions that you can refer to in your own project. Each application has a different meaning and value for its users. You should plan and put into design or development process in the process of drawing wireframes. Take the time to think about the feedback, suggestions and criticisms of the user during the test.


In this article, we looked at 5 mobile-end application interface design patterns, hoping to bring you inspiration.

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.