Ten product details analysis to show you how big manufacturers design!

As UI designers, we are all detail hunters, depicting every requirement with pixel-level details. We can always find excellent design solutions through daily experience accumulation, so as to strengthen our design cognition, improve design thinking and flexibility.

Regularly experiencing products, recording excellent design solutions and reflecting on the ideas behind the design will help improve comprehensive professional capabilities. Dark Horse will also regularly bring you personal experience summaries, hoping to bring you more help. The sensory experience content brought to you in this issue involves gesture interaction, functional area extension design, emotional design, micro-motion effects, floating motion effect design, etc.

Automatically jump using gesture interaction

As gesture interaction continues to mature, it is widely used in product design. The use of gestures can shorten the user's operation path, continuously optimize the user's learning cost, and bring users a more convenient operation experience.

The user can reach the desired destination by pointing to the button, which requires the user to click. In the interactive output of horizontal sliding, gesture interaction is used in the coherent sliding operation, and automatic jump can be achieved with different sliding strengths. For example, in the course module of the Kaiyan English APP, for the recommended course card, when sliding to the left, the prompts "View more" and "Release to view" are displayed according to the degree of sliding, and the detailed content is automatically jumped. For users who need to view more recommended content, the second click step is reduced, which improves the convenience and efficiency of operation.

Song switching experience brought by gesture interaction

Gesture interaction can bring convenience to users, but the gesture gameplay of many products is still waiting for users to explore. Whether the function level is "hidden mystery" requires in-depth experience of users. If the user's usage habits can be cultivated, the convenience and experience brought will be further improved.

The player will be displayed above the tab bar at the bottom of the QQ Music homepage, making it easy for users to operate the songs being played. You can switch songs by sliding left and right, which is very convenient for blindly selecting songs. Gesture interaction is a good choice for adding new functions without changing the current layout structure. Have you noticed this hidden gesture experience?

Drag the progress bar to preview the screen in real time

From short videos to long videos, the rich content can meet the viewing needs of users. For long videos, the progress design can make it easier for users to select the parts they are interested in.

The progress bar design of Tik Tok is also constantly exploring new experiences. In the latest updated version, when dragging the progress bar, other auxiliary functions will be hidden, making the interface more concise. When dragging the progress bar, the video screen will also be previewed in real time to assist users in accurately determining the content and improve user operation efficiency.

Extended design of the bottom functional area

The bottom function area is the best area for gesture operation. In recent years, more and more products have extended the design of this area to meet the purpose of exposing more functions.

Baidu Translate APP extends a function area above the bottom tab bar. It is hidden when you first enter it. Click or swipe up to expand it. The extended function area provides users with more commonly used functions, facilitates frequent operations, and improves the user's operating experience and efficiency.

Emotional function guidance design

When using a product for the first time, guidance will be designed for some key functions to increase the exposure of the functions and reduce the user's learning cost.

Baidu Translate APP uses an emotional IP image to guide users to use functions. The cute image lies on the function area, which is very interesting. Compared with ordinary text floating layers, the integration of emotional design can attract more users' attention.

Carousel page design of recommendation module

Recommendation modules are quite common in product design, and a variety of design solutions are presented. Designing in combination with the content attributes of the module is the key to achieving differentiated design.

Recently, I found a different design expression in the Himalaya APP podcast column, which is designed by combining the album cover with auxiliary explanations. It not only combines the content attributes, but also uses copywriting to make the explanation clearer while strengthening the visual sense. The dynamic effect is also very smooth and natural when switching pages by sliding gestures.

Design to improve the visual sense of graphic layout

When designing for news, information, hot topics and other content, there are usually left-picture-right-text, left-text-right-picture, pure text layout, carousel and other forms. The design expression takes into account reading guidance and layout utilization. If you need to highlight the visual sense, how to design it?

Recently, I found a design with a good sensory experience in the "Highlights" column on the homepage of Mango TV APP. The text information is laid out in a card-style layout, with a large picture as the background to set off the card. There will also be a progress bar-style control prompt when sliding, which has a stronger overall sense of vision and can attract more user attention.

Micro-motion effects enhance the attention of sign-in design

The purpose of sign-in is to increase user stickiness. By signing in, you can earn points, redeem gifts or upgrade functional services, etc. Increasing the exposure of sign-in can attract user participation and achieve the purpose of demand.

In addition to enhancing the visual sense of the sign-in design, micro-motion effects are also a very good choice. The Kuaikan APP uses motion effects to enhance the sign-in icon, which can also attract users' attention and increase the click-through rate and participation of the sign-in.

Auxiliary graphics strengthen brand sense

Designing based on branding, no matter which direction the design is, it needs to be considered from the perspective of the brand, especially UI design. Strengthening the sense of brand through auxiliary graphics is a direction that is gradually being used by designers.

For example, the Kaola Haigou APP incorporates auxiliary graphics into multiple local areas for enhancement and uses the auxiliary graphics as the background. Integrating auxiliary graphics into UI scenes is a direction that UI designers need to gradually explore in the later stage.

Floating dynamic empty state design

Empty state refers to the design of no data state, usually in the form of pure copy prompts, graphic and copy prompts, emotional illustration integration, IP image combination, dynamic expression, etc. In many cases of experience, the expression of dynamic effect is relatively small, but the sensory degree is also good.

In the COVES APP, an animated empty state design is used to express the no-data state. In some modules, a suspended animated expression is also used, which has a good effect in terms of both visual sense and attractiveness. It not only attracts users' attention, but also integrates the product's design style. It is a good design solution.

summary

Every experience, analysis, and summary can absorb new ideas and inspiration, which helps us improve the flexibility of design and the efficiency of solving needs. I hope that this issue's summary can bring you more help, and we can make progress together.