preface
Inspiration comes from daily accumulation, only when you have enough brain storage, you are likely to explode that little universe. Keep experiencing and recording every day, recording the design and interaction forms that move you, analyzing the design performance with the same attributes, and the design solutions for the same functional business. These questions need to be summed up in your daily experience.
MONO APP
In the MONO APP, when you swipe up to browse the recommended content, the recommendation in the bottom TAB bar will switch to the top, so that users can quickly go back to the top.
On an iPhone, you can quickly go to the top of some apps by tapping the status bar.
Keep
In order to prevent users from misoperation, long press is used to end the Keep movement, which greatly improves the fault tolerance rate of users. (Excerpts from Jia Zhen)
Alipay chat interface
In the Alipay chat interface, when the user enters a number, the prompt “transfer 188 yuan to the other party” is automatically prompted. I think many friends will have this experience, want to transfer money to a friend, click into her chat interface, input a number, send, and… Discover that the other party only receives “number” chat messages! Did you suddenly feel stupid and cry?
However, the designers of Alipay found this transfer scenario and designed this prompt 🙂. And the design is so fault-tolerant that the prompt doesn’t appear when you type “0188.” (Animal Kitten excerpt)
Ctrip price details
In Ctrip App, the price details are inserted in the card slot at the lower left corner in the form of a letter when the user returns to the home page after selecting the housing information but not paying, and can be raised from the card slot after clicking.
In this way, the key information in the order can be viewed at any time, and it is also the preservation of the content filled in last time. Both interaction and design are very sophisticated. (Excerpt from The Paper Lady)
Red includes
The form of page turning simulation calendar makes page turning more interesting, attracting users to turn the page, so as to browse more news, probably “just can’t stop”. (Crabapple flowers not excerpted)
Keep
When the user stays on the running page, the App will automatically recommend the route of nearby runners to the user. It not only reduces users’ thinking cost, but also enables them to meet other runners by chance and promote their offline communication (excerpt from Jia Zhen)
ONE, ONE
There is a “previous” illustration at the bottom of the daily post feed list. Click to skip to the previous day’s list of articles. (Excerpts from Jia Zhen)
Facebook’s feed stream
When you like an article, “Related links” appear at the bottom of the article. This is to consider the user like a certain article, it is likely that ta is interested in this aspect of information, so it is very reasonable to give more relevant articles. FB has a lot of practical designs that don’t look flashy. (Animal Kitten excerpt)
Kaola Overseas Shopping APP
When you search for “Nike”, coupons will appear at the bottom of the search results page, which is very consistent with this scenario. The appearance of coupons can help improve the final purchase rate. (Animal Kitten excerpt)
Toutiao APP
Under each news message there will be an “X” that can be blocked, which can be used to block and ridicule unwanted information (keyword). In this way, users can pay more attention to the news they are interested in in a more timely and effective manner. At the same time, enterprises can also make information classification for users according to big data analysis. (Excerpt from The Paper Lady)
Hornet’s nest APP
Hornet’s nest home page is user travel notes appreciation list. Among them, tourism pictures account for the largest proportion, which is very eye-catching. Such a large album can also arouse users’ desire to post photos, so the camera button at the top of the TAB bar on the home page can be clicked to upload travel notes, photos and videos in time, increasing UGC for the application software and improving the conversion rate. When the user swipes down the page, the camera button disappears without affecting the viewing experience. (Excerpt from The Paper Lady)
Immediate APP
Each instant message has a label above it. Users can quickly identify the content of the video and choose the video they want to watch. And the label is not simply “travel”, “funny”. Such labels are often easy to ignore, immediate label text is closer to the user, more down-to-earth. (Excerpt from The Paper Lady)
Hungry?
When the settlement interface of Ele. me slides up, when the delivery address and contact information are blocked by the sliding up, the address and other information will be displayed in the navigation bar in a smaller size, which can reduce the user’s forgetting to modify due to the wrong address. (Pikachu excerpt)
Hornet’s Nest Personal Center
When you do not log in the hornet’s nest, the personal center will have cartoon image shooting effect, not only to enhance the affinity between users with emotional design, but also highlight the fun of travel record life.
Compared with some cold unlogged status, hornet’s nest processing mode makes users willing to take the initiative to register an account for a deeper experience. (Excerpt from Dark Horse Youth)
QQ bottom label bar
There will be some interesting animations in the bottom TAB bar of QQ when switching. For example, when a message is switched to a contact, the icon expression will face the contact.
When there is a new message, the user has to click browse, and the system will default that the message has been read. When there are too many messages, they do not want to read them and want to destroy them at one time. When the message is selected all, it is pulled out to make a sticky ball effect, as if they do not want to be separated, which increases the user’s interest. (TOP excerpt)
Bullet SMS message reply
Bullet SMS can reply a specific message through the button on the right, thus improving the efficiency of communication. (TOP excerpt)
Bullet SMS voice reply
Bullet SMS voice reply, long press and say the message you want to send, you can directly send voice message or translate the words you said through text, greatly expanded in any scenario can quickly reply to the message, so as to improve communication efficiency. (TOP excerpt)
The client QQ
When logging in the client QQ, there will be a small interaction in the Tencent News pop-up window of the boat when the mouse slides. After clicking it, it will enter the time axis, with illustration and introduction of 24 solar terms. (Excerpts from Ah Ho)
Flying Pig APP search bar
The shape design of the search bar on the home page of Feizhu APP integrates the characteristic elements of brand image, which is a small detail temporarily not seen in other apps. The details of product design are often reflected in the local part, and as long as you think a little more, you can be different from others. (Excerpts from Ah Ho)
Website cool version
When browsing designer’s works on the Website page, hover the mouse over the designer’s head picture, and the designer’s related information will appear.
Tell the user the basic information of the designer, residence, occupation, number of works, number of fans; Attention button and private message button, can be convenient for designers to pay attention to and further communication. (Chinese flowering crabapple)
Ping An Bank APP
When I copy a bank account, a prompt box will pop up automatically when I open the app, asking me whether to transfer money to the account. It makes me think that this is an app from the perspective of users, who do not need to open the transfer page and paste the account. (Wheat Excerpt)
Provocative photo album
The hovering button on the right can quickly slide the album through the timeline in the process of page sliding. When there are too many photos, it is often difficult to browse the previous photos because there are too many photos.
This function can instantly move the album to the time range I want, so that I can quickly find the photos I want to find, which solves my pain point. (Fat Sheep excerpt)
Tumblr
In the recommended blogger module under the search page, click “follow” and flip the card to display the list of relevant bloggers. It also supports sliding up and down to display 10 blogger information. Click the back button in the upper right corner or swipe the card to the right to flip it back over again. Putting the recommended associated pages on the same page can reduce the user’s operation cost and improve the user’s conversion rate of attention.
The flip of the card itself has a certain sense of quasi materialized design in it, and the flip effect is smooth and interesting, which is great from the experience. (Fat Sheep excerpt)
Netease Cloud Music APP
Icon shortcut in the navigation bar of netease Cloud Music APP
1. No matter what level of pages netease Cloud enters, the music playing icon will be in the upper right corner of the navigation bar, and will follow the music rhythm with dynamic effect;
2. It is convenient for users to operate the current music in time, saving users’ operating costs.
3. Icon has obvious dynamic feedback to tell whether the current music is in play or pause state. (Excerpt from The King of golden Horns)
Zhihu APP
Text left/right switch tips/next answer fab:
1. In the latest revision of Zhihu, zhihu is changed to swipe up and down to see the answer. When it still slides left and right as before, the prompt “swipe up and down to switch the answer” will appear, which is unexpected and interesting to use, and can remind users at the same time.
2. Added the “Next answer” Fab button to avoid long articles before users can see the next answer, reducing user operations and improving user experience. (Excerpt from The King of golden Horns)
Mint Reading APP
In the mall – Optional book list module, when the user selects a course, there will be a selected state, and then the button “Select” will become “selected”, that is, the user must select a book, without the function of withdrawing.
Personal suggestion: Can the book list be designed to allow multiple selection? Can the button selection be changed from the original “select” to “cancel”? It is predicted that users may mistakenly select or do not want to select, considering the user’s fault tolerance principle. (Wheat Excerpt)
This is the end of sharing, we will meet next time.
This article is compiled and edited by team members and published on the website. It is only for learning and communication, not for other purposes.