Some design methods of content-based APP

The display form of content-based APP is nothing more than the combination of list and card. How to design an appropriate display form is the key to design. Below I will focus on summarizing the display of the tourism platform, and take "Meituan Travel" as an example to talk about some design methods of content-based APP.

The homepage of "Meituan Travel" can be divided into five modules: special sale area, travel research institute, where to go on weekends/good places in China/selected overseas, selected destinations and guess what you like. I will benchmark with other applications, analyze their advantages and disadvantages and optimize them.

Foreign exchange sale should be the special service of Meituan, including limited time snap-up and theme discount. I think the American delegation should want to show all the main contents at the fair. It is the three contents shown in the above picture. However, the arrangement of these three contents is a bit confusing.

Imagine that when users see "sale", they should be attracted by pictures at first sight, followed by the words "sale". When they see "two days and one night" and "limited time snapping up", they will be confused about the relationship between the three. Then let's sort out the logical relationship of these three blocks and make a specific design for each block.

On the second page, we can see that "special sale" includes "limited time snapping up" and "theme discount". It is not difficult to guess that "special sale" is inclusive with "limited time snapping up" and "theme discount", and "limited time snapping up" is juxtaposed with "theme discount":

According to the above simple logical analysis, I roughly arranged the structure of the special exchange:

"Meituan Travel" VS "Ctrip", "Tuniu" and "Taobao"

If we want to say that "limited time snapping up" can best catch users' eyes, it may be the countdown. Because people's attention is most easily attracted by dynamic things. Let's compare the design of "limited time buying" of several major platforms:

(1) Although Ctrip made the "limited time" of "limited time snapping" bold, it did not have a psychological impact on users at the first time, which made users feel the urge to click.

(2) Look at Taobao and Tuniu again, and you are well aware of this. Users will notice the countdown at first sight, and out of curiosity, they will definitely click in and have a look.

Based on the above analysis, we can use Tuniu and Taobao to design "limited time buying"-putting time directly on the home page to give users a sense of urgency.

After sorting out the details of logic and design, I redesigned the sales area:

"meituan travel" VS "hornet's nest"

My personal understanding of "Travel Research Institute" is a place to share, eat, drink and have fun, which is similar to the nature of Raiders and mainly focuses on blog articles. You can also optimize the typesetting so that users can understand what the main content of this piece is at a glance. You can compare the raiders typesetting method of hornet's nest:

(1) You can see that the "Daily Bee Head" of the hornet's nest is also divided into two modules, one is the daily article selection that can slide horizontally, and the other is the recommended article. You don't need to click "View More" to clearly know the main content of this piece.

(2) The Travel Research Institute of Meituan Travel Meituan is also divided into two parts, the column "Where to go on weekends" and the recommended articles. When users see "where to go on weekends", they may think that there is only "where to go on weekends" related content in "Tourism Research Institute". If the pictures and titles are not attractive enough, it is easy for users to lose interest in entering the secondary page to see more.

According to the above analysis, we can put several main modules in the "Travel Research Institute" on it to show more content in the form of sliding left and right like a hornet's nest.

Based on the above analysis, I made the following design for this module:

Imagine the usage scenario: when users see the title "20 17, 18, the most suitable place to elope, and have been to 3 places where they can't help but want to get married", they will click after being attracted. Then the user's appeal at this time is to see the specific content of this article. However, I went in and saw a list of many articles, but I couldn't find the article I wanted to read.

"Meituan Travel" VS "Flying Pig Travel"

You can compare how the contents of flying pig travel are done when switching pages:

After clicking on the article, jump to the secondary page and display the displayed article on the first page.

Let's take a look at the American tour:

Click on the article you want to read, and you can't find it after jumping to the secondary page. There is a mistake.

"Meitu Travel" vs "Airbnb"

In terms of dynamic effects, when you click to jump to the secondary page, the page moves out from right to left. Is this the best way to interact?

We can look at Airbnb's design:

When jumping from the first-level page to the second-level page, the user can clearly see the transformation trajectory of the content when switching pages. This kind of interaction is touching. In view of the above analysis, I made the following optimization:

As you can see, this piece is made up of many pieces of content, and the product list is contained under the horizontal tab. Complex operation: users can swipe left and right to view the list of goods under a tab. If users notice the tab above, they need to click it to view the corresponding product list under the tab.

"Meituan" VS "Today's Headlines" and "APP STORE"

We know that the best interaction effect of tab on mobile phone is sliding, not clicking. You can look at the tab switch of "Today's Headlines", and users will feel very convenient as long as they slide.

You can also look at the App store, and the sliding product list is also well displayed on the interface:

Based on the above analysis, I redesigned the "Where to go on weekends" section:

Regarding the selected destination, I changed the photo to a hand-drawn one, which may be better visually:

"Meituan Travel" VS "Ctrip" and "China"

It can be seen that the "guess what you like" of the tour of the US delegation is displayed in the form of a list. List typesetting has many incomparable advantages over cards. However, if all the contents are in tabular form for a long time, will it cause visual fatigue? Therefore, it is necessary to add some changing elements to ease the user's vision.

Let's take a look at Ctrip's arrangement:

It can be seen that Ctrip has added new modules in the "Guess What You Like" module, such as "Beijing Special Gambling". We won't evaluate whether his logic is reasonable for the time being, but this new arrangement can really enhance the experience visually.

Let's take a look at a foreign blog site, Medium. How do they handle all the same types of content?

As you can see, they are interspersed with cards in the form of lists, which are based on lists and combined with cards; After putting a few list contents, put a card content and then put a few list contents. This has many advantages, besides visually reducing the boredom of a single model, it may also have some commercial value.

In view of the above analysis, I made the following optimization:

"Meituan Travel" VS "Taobao" and "Ctrip"

In addition to improving browsing efficiency, lists can display more content on one screen and place more details related to products. So you need to pay attention to the details when designing the list class.

We can compare the details of "Meituan Travel", "Taobao" and "Ctrip":

(1) The product name and price of Meituan travel products are arranged in a good position, but the location of consumers is not uniform, and users will be confused when reading different types of information in the same position.

(2) Ctrip information is in the same position, but the more important "price" is placed in the lower right corner, so users' eyes are circuitous when browsing information, which is not ideal.

(3) Taobao information is very consistent, focused and clear.

According to the above comparison, when we design, we should not only ensure the consistency of information, but also let users pay attention to important information at the first time. Then, when there is more information and the space is narrower, we need to arrange the importance of information:

Product name > price > number of consumers and rating >; Label > distance (applicable to all products except Zhou Bianyou products)

We can arrange this information according to importance:

According to the above structure diagram, I redesigned the details of the list:

Summary: The above are several design methods of content-based APP typesetting, which is basically a comprehensive application of list and card typesetting. As for when and what form to take, it is necessary to analyze specific problems. Product benchmarking, scene decomposition, attention to detail.