Why do you like to use App in card design?

A Jun guidance: before AppSo (micro signal appsolution) through the   5 design principles and practical cases, share the “card type design”, how to make the user have a good experience. Some readers expressed a desire to learn more about this design style.

Today, this article will give you a comprehensive introduction to “card design”, and you’ll see why app loves to use such a design.

Web pages and mobile app gradually abandon the traditional single page design, to fully personalized user experience development. This development is also based on the popularity of a large number of independent content modules. Among them, the card is the latest a unique innovative concept.

No matter how you look at it, cards don’t go out of date in the short term.

First, what is a card?

A card is a small rectangular module containing pictures and words. It is the “entrance” for users to know more details. To balance the aesthetics and usability of the interface, the card is basically a default choice. Because cards are very easy to use, they can also show the contents of different elements.

Card example. Photo source: Material Design

1. perfect imitation

Adding cards to the user interface is the perfect thing to do, because they look like cards that are real in everyday life. In fact, before the advent of mobile devices, cards already exist, such as business cards, baseball cards, poker cards and so on. Nowadays, cards are widely used as an interactive model. So, for users, it’s more intuitive to recognize that these cards represent something in real life.

In addition, for small story promotion, the card is also a very good choice, baseball card is a typical example. The basic information you need to know about an athlete is displayed on the opposite side of the card.

Each card represents a baseball player. Photograph: liveauctiongroup

2. content architecture

The card divides the content into several meaningful parts, which saves a certain amount of screen space. Similar to the form of “sentence, sentence and paragraph”, the card is also composed of the smallest information unit, and forms a coherent whole content.

Example of card composition. Photo source: Material Design

For large companies like Facebook, when card driven interfaces are used for desktop desktops, mobile web pages and app clients, card layout is recognized as the core of the design process. Facebook makes full use of the design of the box style, that is, to categorize the information, even on the page where it is not moving to the bottom.

3. visual enjoyment

Card based designs usually rely mainly on visual design, and the use of large amounts of pictures is one of the highlights of card design. Studies have shown that pictures can improve the overall design of web pages or app, because pictures can quickly and effectively attract the attention of users. So adding pictures also makes card based designs more attractive.

For example, Dribble, a creative crowd for designers and other works, provide online services for the work, for users to view the exchange of web sites. To show this kind of content, the card based design is the right choice.

Two. How to design cards

In the same page layout, the width of the card should remain the same, but the height can be adjusted accordingly. The maximum height of the card is limited to the height of the available space of the platform, but it can also be extended temporarily. For example, when the comment box is displayed.

The height of the card can be fixed and adjusted. Photograph: Intercom

From the design point of view, the corners of the card are preferably rounded, and preferably a little shade. Rounded corners make the cards look more like a piece of content, and shadows reflect the depth.

Rounded corners and shadows. Photo source: Material Design

These elements can bring some visual highlights to the design without distracting the users. In addition, it can give people a card, like the feeling of jumping out of the page.

In addition, you can also add animation and dynamic effects.

Photograph: Behance

Three. Advantages of cards

Properly designed, cards can enhance the user experience of app. Because of their functionality and appearance, they become a value-added element of the user interface, and more intuitive to the user.

1. easy to understand form

Before AppSo (micro signal appsolution) inspired reading column, shared the principle of content first. A card is a design box that can be loaded into any content. Placing different content in the cards can be easily understood by users.

In this way, users can easily understand the most concerned content. This allows users to interact in a variety of ways.

Card sets containing different content forms. Photo source: Material Design

2. responsive design and mobile interface design

The most important thing about cards is that they are extremely easy to control. Whether in desktop or mobile client, the effect of adding card design is very good, because the content can be presented to the user through a more understandable card. In response to design, it’s a good choice, because the cards presented in the content box can be easily extended or contracted.

Finally, by adding cards, the design of a unified aesthetic across the platform will not step by step. That’s why cards can easily design the same user experience on different devices.

3. don’t forget the “thumb” in the design

The cards are designed for the thumb. It sounds like the card was designed for app. Mobile phone app design can be used as a core part of card popularity. Digital cards are just like solid cards, and they can also give users a comfortable experience.

Users don’t have to be too focused on how they do it. They like the simplicity of the card, and intuitively understand the relevant physics, such as how to flip cards to get more information, or slip to get other card information.

When designing, you have to think about how the user interacts with his thumb on the interface. So, the size of the interface must not let the user feel uncomfortable when interacting. Translator’s note

Left and right slide. Photograph: Dribble

Card gestures should also be considered and placed in the card set. Minimize the number of sliding gestures on the same page, which reduces the likelihood of overlap.

For example, a slide card should not contain a sliding scrolling picture, which ensures that only one interaction occurs at the slide card.

Downward sliding. Photograph: Dribble

Four, when to use the card?

1. information flow

The cards are presented in the form of information flow, creating a natural event timeline. Think about how Facebook prevents the user from scanning the latest events in the news dynamically, and misses the point.

Facebook Feed (News) is an endless stream of information, while the card is an independent collection of information flows. The function of cards is to disperse information flow, which separates events from endless information flow, packs them, and then shares them.

Leave a Reply