Article Description: practical experience Sharing: How to make app faster! |
Did the design blink also more than 4 years, from 2011 from the Web designer to mobile phone app designer; The recent work is not very busy, and then calm down to read some of the Internet's development trends to make up for their own shortcomings in this (because most of the work time is to do the design) Before always thought that the user experience aspect work is has the specialized researcher to do, does not have the relation with the design personnel, through these few days study, discovers does the design also can achieve the user experience Ah, below I will give everybody to introduce each other, everybody learns each other ^_^
First, the backstage implementation
core idea: by running the loaded program in the status bar, you can enable the user to do other things
An example is provided:
Instagram
When you click on the "Praise" button, the words of the button immediately become a "praise" of the state; In fact, look at the picture of the red box loading icon, it is only in the background to run silently loading program; The advantage is that the user does not need a second to wait, to avoid when the network is not good when the circle has been turning.
Hair microblogging platform
For example: I have just published a comment the area on the right red box immediately appears in the comments list, but in fact I reply to this comment, the other party can not immediately receive a message to remind; Because in the view of the status bar, I sent that sentence is in the background program silently add the carriage line; So the background performs its task, I can continue to look at other comments and not delay.
Second, display the content before loading
Core idea: let the user feel quickly want to see related product information
An example is provided:
App Store Details page
When the user from the list into the Details page, the top is the red box on the left side of the area, there is no loading state, immediately have the product information display, people feel the content immediately after clicking out.
Third, make full use of the cache.
Core idea: using caching mechanism to improve the opening speed of the page
An example is provided:
Cicada travels "Travels" and the "Add Micro Bo Friends" and other pages, all take advantage of the cache
Caching can store network data locally and there is no need to request the network again next time, reducing traffic and reducing latency. At design time, you can display the cached content, and then pull the new content back into the network, if new content is exchanged immediately or the next time it is accessed.
Four, the interface first, the network then
Core idea: for some small data, and less likely to fail the network interaction, or in the absence of network, users can also use the app
An example is provided:
The "Send Picture" and the Weibo "collection" function of the micro-trust Friends Circle
Circle of friends even in the absence of a network, you can publish pictures, and so have the network automatically upload just released content, this experience to do very good (PS: hope that micro-letter can quickly update iOS7 flat)
Weibo collection, when you do not want to collect the time, click again, to help you can do other things, at this time in the status bar of their own efforts to load.
V. Predicting user behavior and starting tasks in advance
Core idea: predicting what the next step is for users, paving the way for users in advance
An example is provided:
NetEase Cloud Reading
When the user enters the details page from the list page, when you look at a piece of information and then pull down to see the next one, and the content has been loaded out, pull up will go back to the previous one, so it is in line with the public's habit; do this to avoid having to read one and then click Back to see another one from the list.
Android Update alert
It is prompted after the installation package has been automatically downloaded, avoiding the process of letting the user wait for the download.
Six, as little as possible to allow user input, input as much as possible to give a reference
Core idea: The mobile end of the virtual keyboard has its advantages, but also its shortcomings, the main disadvantages are:
The space limit of the virtual keyboard, the click of the finger often causes false press;
Input positioning can not be feedback (for example, I input Tintin, the results of the search list of the adventure of Ding, in fact, I want to search for a good voice in China Tintin ah, hehe)
An example is provided:
Baidu Map
For example: I want to find Wanda International Studios, when the input box search "wand" a few letters will be listed all about the content of Wanda, it is easy to find, so as to avoid the user input more than the situation, very intimate.