APP UI of the structure of the series of articles have not updated for a period of time, because recently are learning something new and see some new books, appropriate to recharge my batteries are also in order to better output, get to the point, want to chat with you today and some of the home page related content, may be some friend have recently updated content, believe everybody also saw, Such as the classification of the navigation, and the classification of loading, written feeling is very good, I also in these content also don’t hesitate to write, but think again, decided to write it, after all it is APP UI structure is an indispensable part of the series, as a virgo perfectionist, decided to finish.
Home Related (1)
About the content of the home page or quite a lot, I gave into two parts, the article is a little bit long, but also hope you come up with a little patience to finish, I believe that you will gain, also do not waste my hard code word, OK, old rules, or take a look at the overall structure:
(The following picture is from the app screenshot, only for learning exchange)
1. The authorization dialog box is displayed
Before users log in to the home page of the product for the first time, it is inevitable that some pop-ups will pop up, including authorization pop-ups or promotion pop-ups. There is nothing wrong with these authorization pop-ups. Users can operate and use a certain function only through authorized products. Authorization popup window is also a part of the operating system security mechanism, to the user’s security and privacy, Facebook users information leakage incidents occurred frequently recently, believes that many users of privacy protection will only become more and more strong feeling, just imagine the user haven’t use the product, at this time of the product of trust is low, so we need to user authorization popup window had better be the higher authority, Also necessary authorization, such as common: network authorization, message notification authorization, access to positioning, camera/album authorization… It is best to pop up unnecessary authorization (low permission) when the user is using a certain function, do not pop up all at once for the user to authorize, will cause unnecessary confusion to the user, the experience will be poor, I believe we all know this, such as: microphone, calendar, Bluetooth, address book… You can pop it up again when the feature is used.
Because the system is different, the authorization popup will also be a little different. IOS is relatively respectful of users. Message notification authorization and network authorization require users’ permission, while Android does not, so iOS is a little better than iOS. When it comes to network authorization, a friend of mine discussed this problem with me before, that is, some products have network authorization, and some products don’t. I didn’t deliberately notice it before, but later I checked it on the Internet: Due to the relevant provisions of the state, apple since iOS 10 for mainland China provides users need authorization to allow “wlan and cellular mobile network” pop-up window, its location should be first opened the application, the user log in before, should pass rate is pretty high, because there is no network here without doing anything.
Authorized popup window design can directly use the system modal popup window style, the iOS and android play the style of the window there is something different, iOS besides system fixed words can also match with the necessary instructions, inform the importance of the authorization and the consequences of not authorized, and android is only system fixed text, by contrast is a little better iOS. Now most users are familiar with the importance of this kind of popup, and the one-time permission authorization pass rate is also very high. It should also be mentioned here: iOS can only have one authorization popup, while Android is special, the authorization popup will also pop up when you log in next time, you can also click not to remind.
If iOS users in rejected the authorization for the first time, the product also is to have the opportunity of secondary authorization, the authorization of electricity product alerts, for example, I do not authorized, because they don’t like being disturbed by promotional message (this is only my personal habits, so also don’t know if it is), but such authorization is very important for electricity products, login products again, The second authorization pop-up window will pop up to remind the user to open the message notification, but the difference here is that clicking authorization directly jumps to the system Settings to open the corresponding authorization by using the deep link, which will be more complicated. There is also a case where the page is bootstrapped to open permissions, and the content of the irrelevant authorization popup is not discussed here. Of course, some products are smart enough to use the pre-permission mechanism before the authorization popup. They first test whether the user will authorize. For example, the popup with beautiful design will pop up first (with enticing text or illustration), and then the system authorization popup will pop up after you click the button. Doing so can avoid the tedious of secondary authorization, the operation cost will be relatively high, can do so the product is relatively rare.
The contents of promotional pop-ups are not mentioned here. They have been mentioned in previous articles and can be viewed by clicking the link at the bottom of the article.
2. Drop-down refresh
Pull-down refresh is a common feature in almost every product. This interactive feature was pioneered on Twitter and has since become popular. Pull-down refresh is not just on the home page, but on many product pages.
Pull-down refresh process: the whole page is pulled down, and a text message “Release to refresh” appears at the top – rotation dynamic effect is displayed after release + “refreshing” – dynamic effect disappears after successful refresh (if toast prompts data refresh), and the page is automatically topped or toast prompts if the refresh fails. In the whole process, the dynamic effect should be kept visible, and the dynamic effect can be hidden after the data appears at the end of the refresh. In addition, users can continue to operate during the refresh process, not to say that nothing can be done during the refresh process. Refresh results are sorted by time, that is, the latest data is at the top; If the user does multiple drop-down refreshes in a short period of time, a TOAST alert (such as “you are doing this too often”) is needed to prevent the page from getting stuck or the server request from failing.
Drop-down refreshes the dynamic effect of the design trend is more and more diversified, now already is no longer limited to the early refreshes the style of the system, and the products are designed with its own characteristics to refresh the dynamic effect, will own brand gene fusion, and interesting and lively copywriting, give a person a kind of surprise feeling, can deepen the impression of the product users, this approach is fully staffed.
There is also a need to mention the automatic refresh. A friend talked with me before, why can’t the product automatically refresh? It is so convenient, and automatic refresh is not unknown. Then there are products that are common to data, such as automatic refreshes that are necessary to see how the data is growing in real time. But why common products in the process of using or use the drop-down to refresh automatically refresh, rather than just think you brush in the circle of friends, weibo, zhihu case, the system automatically refresh in setting time, you are dynamic, with relish looking at a data refresh automatically suddenly, dynamic reading may be pushed to the following, Believe that this experience is a disaster for users.
3. Continue to pull down to the second floor of the product
What is mentioned above is drop-down refresh. What is said here is that the page that will be entered after continuous drop-down on the home page is the active page on the second floor or other functional pages. This is a subversion on the basis of drop-down refresh, and I believe that the appearance of this function will make users’ eyes shine. Taobao was the first one to do so in my memory. It seems that JINGdong also did so when they were engaged in activities. I can’t remember clearly. At present, the continuous drop down of taobao home page is the “Arabian Nights” activity, which is a way of short video + related products +UGC, giving users a complete shopping experience, which is the same as the marketing in the advertising industry. I have a look, each short video is played millions of times, the video experience is very good, basically tell a story first, after playing or click pause will appear related products, you can click into the details of the product to promote the purchase; But products alone are not enough, the user’s evaluation is also very important, just like our daily shopping, we will certainly pay attention to people’s evaluation; In addition, users will be encouraged to subscribe and share, and users are also expected to produce more UGC content. Generally speaking, the overall approach is more convincing and more acceptable to users.
After the early update of wechat version 6.6.1, the shortcut entrance of small program appears in the drop-down of the home page, which can find the recently used small program more quickly, saving a lot of steps. If you continue to scroll down the whole page, you will see a text saying “this is not the entrance”, which is also a good experience. I remember the earlier text was a little bit more playful, but it should be changed now.
Another thing worth mentioning is that the second floor of Hema is the business of “Hermon”, which is specialized in selling adult products. When I first knew about this module, I was a little surprised. After all, Hema is an e-commerce company specializing in fresh products. There may be a large demand for adult products in the market. After all, most adult products are purchased online. After all, many people will inevitably feel a little embarrassed when buying offline products, and their privacy can not be guaranteed, and the price is relatively high. Hermon’s three major competitiveness are: quality assurance, 30 minutes of delivery, privacy packaging, I believe that only “30 minutes of delivery” this is enough to be competitive, seems to be a bit far… Why does Hema sell the products on the second floor? After all, hema’s main business is still fresh, so it will inevitably be a little strange if fresh and adult products are mixed together to sell. Placing them on the second floor can ensure the independence of the two modules, so that they can not disturb each other.
There may be some products home page also has the second floor this function, I will not give an example, you are interested in their own research.
4. Location of city/address
The positioning function is believed to be well known. After obtaining the user’s positioning authorization, the product can provide corresponding services according to the positioning range. The functions are very common, such as e-commerce, group buying and social networking (doing community). Each time the user enters the product home page will refresh the positioning, generally very accurate, users will not think of clicking it unless they need to change the positioning. Positioning function is common in search box on the left side of the home page, but the development of the home page is a treasure land for certain products, such as electric business class and social products, users tend to add more than one shipping address in personal data, to order it is good to choose address directly, don’t need the user to change position often, so now the home page orientation flat entrance hidden; For group purchase products or products that need to provide timely delivery services, it is convenient for users to view and change the positioning, so the positioning function of such products will be reserved on the home page. Here are two examples:
A. At the top of the homepage of Meituan, there is a positioning function entrance. Considering the user’s usage scenario, users can view and locate all group purchase services around the city through the product. Click location to enter the location page, composition structure: direct search city (convenient to quickly select new city)+ Domestic/overseas TAB + current city + Switch city + hot city + all cities (alphabetical index, according to the city alphabetical order, you can quickly find all cities under the selected letter).
B. The positioning at the top of meituan takeout’s home page is accurate to the specific address, because the platform needs to recommend food within X kilometers of the user’s positioning range. Click the address to enter the receiving address page, which consists of: City switch (such as order to other cities in your family and friends) + search shipping address (in view of the current selected cities searching for a particular address) + the + to + my receiving address (address labels) + near (convenient quick select new address) + new address (it is necessary that the function, can quick links to the new address page). This page structure is often seen in the need for timely delivery of the platform, because the need to consider the timeliness of the goods, the need to reach the same day /1 hour, etc., but also such as: Ele. me, daily youxian, Hema…
Different products have different demands for the positioning function: there is no positioning function entrance at the top of the e-commerce home page; Group purchase products home page positioning to district/county/city, etc.; The home page of takeaway/timely delivery products needs to be located to a specific address; Specific application can be based on product requirements.
5. Search module
Search function for almost all the standard of products, also is one of indispensable functions, convenient because search can help users to find content, want to also can through the user’s search history in big data analysis, in the “guess you like” module can recommend users might be interested in goods, guide the user to buy.
There are generally two forms of search entry, one is the search box, and the other is to click the search icon to enter the search page. First, let’s talk about search box, this form is the most common, because the search box is an intuitive form, most products are in this way, because users can see the home page, the purpose is relatively strong, e-commerce products this form is more common, form: Search icon search box + + hot search keywords (+ scan/camera scanning recognition), hot search keywords is according to the operation need to be replaced or data recommended timing, if hot search word just is of interest to the user, you can click on the search box into the search page, just click search, minus the keyword cumbersome steps; Of course, there are many ways for products to use the second search icon, which is commonly seen in vertical e-commerce or reading products. Such products weaken the search function, and the search content may not be the main demand of users, who just want to have a look and browse.
After entering the search page, the main components are as follows: Search box + search icon+ hot search keywords (+ scan/camera scan recognition)+ keyword association + clear keywords button+ return/cancel/search button(+ classification TAB)+ history search + clear search record (+ hot search)(+ voice input)+ input keyboard (search button); Details are as follows:
A. Scan/camera scan recognition: identify products by scanning bar codes or products to obtain search results and similar products;
B. Keywords Association: this function is very important, can reduce user input, each input a field will be loaded once, the results of association will be displayed, convenient for users to quickly find the target search object;
C. Button: One key click to quickly clear the wrong keywords or replace the new keywords;
D. Return/cancel/search button: If no button is returned on the left side of the search box, cancel button will be displayed on the right side; If there is a return button on the left, cancel button on the right can be changed to search button;
E. Classification TAB: Search keywords according to the current classification, faster and more accurate;
F. Historical search + clearing search records: Reserving historical search records can facilitate users to search again with one click, which can avoid repeated operations. Of course, deleting search records is also necessary, which can reduce the proportion of useless information on the page and effectively protect users’ search privacy;
G. Hot search: may be the hot keywords; Key words that operation needs to be promoted; Big data recommendation guess the keywords you are interested in;
H. Voice input: users can directly say keywords through voice, without input steps, which is convenient for the elderly/disabled or special scenes can also use the search function;
I. Keyboard: Enter the search page. The keyboard is displayed by default. Button search is best set on the keyboard, it is more convenient; The keyboard should be automatically folded up when the user slides up and down to view the search results after the keyword input.
There are a lot of product details differences on the function and the content of the search results page will not expand to say, have the opportunity to talk about in detail.
6. Scan
Believe that scan function is almost every day use function, qr code payment has been filled with every aspect of our life, WeChat/alipay scan function used believe that everybody is every day, and this is becoming more and more powerful, more than scan qr code can even identify the qr code on the photo in mobile phone photo albums; Here are a few representative products to analyze the function of scanning:
A. Wechat: Scan code recognition + photo album QR code recognition + book /CD cover recognition + Street View recognition (positioning function)+ text photo translation + operating text prompt + flashlight (appear when the ambient light is dim, guide the user’s experience is very good);
B. Alipay: the page layout and interaction are similar to wechat, the difference is AR TAB at the bottom of the page; AR scanning I believe we should have experienced, during the Spring Festival AR scanning fu and red envelope is also hot;
C. Taobao: bottom AR/ scan code/photo recognition TAB (TAB switching will have dynamic effect)+ recognition history + photo album QR code recognition + flashlight + help + operation text prompt + advertisement;
D. JINGdong: Top scan code recognition/photo recognition /AR TAB + recognition history + Transaction record + input barcode + operating text prompt + flashlight + bottom payment code/payment offer/photo album QR code recognition/membership code; I don’t see the purpose of placing payment code/payment discount/membership code at the bottom of the page. Is it a little unnecessary to click “jump to the next page”? The qr code recognition function of album photos should not be interspersed among them. Personal experience is not very good.
Compared to the above four scan function, it can be seen that the core of the user demands or scan the qr code, which can identify some of the other functions can be used as their own characteristics and product difference, completes the core appeal of interaction experience is one of the most important, so enter the page of scan, scan the qr code must be the default page, should be as a primary function; Text prompt guidance in the operation process is also very important, timely inform users how to use, to avoid the frustration caused by failure to recognize and time-consuming; In addition, it is also necessary to prompt users to turn on the flashlight in the case of poor environmental light, because users are likely to ignore it, which is achieved by wechat, Alipay and Jingdong.
Home Related (ii)
(The pictures are from the network and app screenshots, only used for learning and communication)
1. Form of navigation
When it comes to navigation, we should be very familiar with it. Navigation is a tool to switch between various functional scenarios and is the big framework of the whole product function. It connects the function of the product in an orderly way, so that the function appears in a reasonable position; If there is no navigation, users will be at a loss when using the product, and they will not be able to find a function quickly if they want to use it. Therefore, it is of great significance. There are many articles on the Internet about navigation, detailed introduction of the differences between the forms of navigation and advantages and disadvantages, it is estimated that more write is also repeated, I am here to say it simply, want to see detailed articles can go online to search.
The categories of navigation are:
Bottom TAB navigation: the most common, most commonly used, most customizable style, the preferred style in navigation. According to the thumb hot zone map, the best operation area of the thumb is only one third of the page, so the TAB navigation is usually located at the bottom of the page, generally used as global navigation; The navigation content is the most intuitive, will not be hidden, and the selected TAB will be highlighted, clearly tell the user the current location, users can easily click the TAB to switch pages;
Top TAB navigation: this kind of navigation form is also very common, often with the bottom TAB navigation collocation, as a secondary auxiliary navigation style, the general TAB number of more than 3, and can be swiped around switch; Of course, there are also used as a level of navigation, such as android design specifications, the top TAB navigation as a level of navigation; Another example is QQ Music. Due to the core function of the product, the shortcut entrance of the music playing page is always placed at the bottom of the page, so the top TAB navigation is used for the main navigation.
Rudder navigation: also called point clustering navigation, in fact, I feel can be categorized into the bottom label navigation, because when the two are used together, it is often placed in the middle as a core function entrance, forming a symmetry, so it is called rudder navigation; The design will be clearly distinguished from other tags and highlight themselves, which is easy to attract users’ attention and encourage users to use this function, but it will weaken other functions because it is too obvious; For example, products with social attributes will expect users to post more UGC content, often using this form of navigation. This kind of navigation often places the most used functions or the most important functions of the product, and the number of expanded functions should not be too much;
Drawer navigation: also called burger or sidebar navigation, is also a very common navigation style, mostly used for reading products, because can give the user immersive reading experience, can hide a lot of low-frequency functions in the drawer navigation, save screen space, naturally can make the page look simple and beautiful; There are some products because the function is more complex, drawer navigation is often used as auxiliary navigation, such as QQ both bottom label navigation and drawer navigation; There are also products with strong purpose, such as bike-sharing or taxi-hailing software, which all adopt this kind of navigation and put the core functions most needed by users on the home page, while other functions are hidden so as not to disturb users’ attention. Of course, this kind of navigation also has many disadvantages, such as hidden functions users may not remember to expand; Users need to operate to enter other pages;
Palace format navigation: the use of this navigation style is the most representative of the United States picture xiu xiu, this kind of navigation in the visual more neat and intuitive, convenient for users to find quickly, the same level of function between the sense of fragmentation is relatively large or there is no great association between the functions can be used in this form of navigation; Although the number of functions of this form of navigation can be a lot, it is still recommended to use this form of navigation as an auxiliary navigation. On the one hand, users are relatively unfamiliar with this form of navigation and its acceptance is not necessarily high. On the other hand, due to the great sense of fragmentation between functions, users may have trouble switching to other functions. For example, the entry of categories under the banner of wechat wallet page, e-commerce and group purchase products home page also belongs to the palace format navigation, which is used as auxiliary navigation;
Navigation list type: this type of navigation is common, may be common to our usual didn’t detect this kind of navigation are, on the vision and tidy and beautiful, almost all products will be used, list type navigation and navigation similar to the palace format, just in different forms of expression, list type navigation there are a lot of forms of expression, such as pure text/icon + words/text + pictures, etc.; The number can also be a lot, and there is no limitation, because the user is the way to swipe up and down to view; Often used as secondary navigation with other navigation, because it is not convenient for users to switch functions, and too far down the list may not be click-through rate;
Floating navigation: this form of navigation is also more common, now the mobile phone screen is larger, with this way of navigation is also more and more, often used as secondary auxiliary navigation, in reading or tool products is more common,; Click navigation is often accompanied by dynamic effects and several functions, which are aggregated in the floating navigation, saving screen space, but will interfere with the user’s vision.
Summary: navigation form for the product is not the existence of a single, particularly in the product function structure are increasingly tend to be complex huge today, combination between navigation is normal, also is a kind of trend, so when carries on the product design needs to combined with the analysis of needs, using suitable for their own form of navigation, suits own is the best after all.
2. Banner advertising space at the top
Banner advertising is almost inevitable for all products, and it is also one of the ways for products to operate or make profits. The number of banners is generally 3-8, which can be slid around to view, and click to enter the relevant topics or details page. The banner of e-commerce products is generated according to the user’s preferences. The system recommends the content that the user may be interested in, and the click rate can be imagined.
Common banner design ratio is 2:1 and 16:9, of course, this is not fixed, the height can be determined according to the needs of the product, such as e-commerce products home page space is precious, banner height will be relatively compact, in order to save page space. When we design the banner, it is best to use the largest width size of the screen for design, that is: Android (@4x) – width 1440px (each company may upload background size is not the same, just for reference), although this will take up more resources, but in the adaptation of the following screen can avoid possible ambiguous situation.
Since the launch of the iPhone X, more and more products have removed the transparent effect of the status bar and navigation bar and placed the banner under the navigation bar to avoid interference from the bangs. At present, JINGdong still retains its original style in e-commerce, which needs to be noted as follows:
The top danger area is set aside: the danger area is under the status bar and navigation bar, and important contents such as text should not appear in the danger area.
Black transparent mask at the top: Because the color of the banner is not controllable, in order to highlight the status bar, the development will set a black mask at the top from top to bottom with a value of 70%-0%;
Display the background color of the status bar and navigation bar when sliding up: The development will set a number, such as the total height of the status bar and navigation bar, which is 128px(@2x). When sliding 128px across the page, the status bar and navigation bar will change from fully transparent to opaque to show the background/gradient color.
3. Classification module entry
The entry of classification module is generally located under the banner of the home page, which is a very common form in e-commerce, group purchase and other products. Many users may not know what keywords to search or have a strong purpose to find a certain product, so this fast classification entry will be very convenient.
Classification modules are usually 1-2 pages long and vary in number from 4-20; Because the click rate of the first page is generally higher, please put the most important categories on the first page, so that users can reach, and the second page put the relatively minor categories; You can also set the last category on the first page to “More categories”. This can save a page, but the click-through rate of the category may not be high.
In the design of icon, it is common to use face icon or face icon + round/square background color (gradient color), because this will make the icon appear fuller visually. The design of the surface icon is not only anti-white effect, but also can add some design details contrast, will appear more hierarchical; It is not recommended to use a linear icon because it will be too weak and not stand out.
4. “Information/News/Bulletins/Headlines” entry
For operation needs or some brand related publicity, or some information about the product, this kind of entrance is usually under the home page classification module, in the center of the page, although the position is prominent, but the space is not very large, so the user’s attention to it may not be very high;
Font: The font here will not use the system default font, usually designed, will have brand font relevance; For example, the font “JINGdong Express” is associated with the Logo of JINGdong.
Content: Generally using the way of rotation, about 3 seconds to change once, some is one line, some is two lines, click will enter the relevant topic page;
5. Bottom label bar
The TAB bar has already been mentioned in the navigation mode above, here is a specific description:
Design: The height of the TAB bar is 98px(@2x), and the font inside the TAB bar is used as a hint with a font size of 20px; The number of labels is usually 3-5. In terms of icon design, it is necessary to keep simple and accurately convey meanings. It is also possible to integrate brand genes to highlight tonality and differentiation of other products. Commonly used are linear and plane two, generally used in combination to indicate the selected state; IOS 11 after the popular icon, with brand color to distinguish; In addition, the design of the icon should be unified, such as the thickness of the linear icon, the size of the rounded corner and the size of the opening should be consistent, so that users will look more pleasant.
Feedback: can be divided into visual and auditory aspects; Visually, the current selected state should be clearly distinguished from other ICONS, such as linear and planar distinction, color distinction, etc., to indicate the current page position; In addition, the icon is accompanied by a dynamic effect when clicked, which can increase the interest and is a common way of feedback now. Auditory feedback refers to clicking on an icon accompanied by clicking sound effects, such as Facebook;
Hidden function: Click the icon top page function again. The top page function that users are familiar with is to click the status bar or click the top button, which may not be found or used by many users. Clicking the icon on the TAB bar of the current page again can lead to the top of the page. Many products may have this function, but they do not provide good guidance to users. Taobao and MONO will guide the top page in the TAB bar when sliding on the top, and the experience is better; In addition, taopiao uses the double click TAB bar icon to top the page, should be in order to avoid user misoperation, leading to the user is browsing the content moved up, need to slide again for a long time to find, but many users may not know this interaction;
In order to achieve an immersive experience, the TAB bar can be hidden when the user is browsing, such as sliding up, sliding down to show;
6. Loading mode
Loading is not limited to the home page, but throughout the product. Loading is when the user performs an operation, and the server processes the data and feeds it back to the user. The user does not know what the time spent in this process is used for, so the loading method is needed to feedback and reduce the anxiety of the user. There are many articles about loading on the Internet, I will simply say it here, we want to know more about you can go to search.
Pull-down refresh loading: This type of loading was explained in point 2 of the previous article, “Pull-down refresh”, but I won’t go into more details.
Progress bar loading: Mostly used on the Web side. This loading method does not know the specific loading time. It can be loaded quickly at the beginning and slowly at the end, so that users are willing to wait, but can not be stuck during the loading. There are not many mobile terminals using this method, most of which are H5 pages, because this loading method will attract the user’s attention too much, and the progress bar may not be displayed in the case of fast loading speed.
Full screen loading: refers to the loading method when users enter a new page. Before loading all the content at one time, they cannot see any content, so they cannot operate naturally. Therefore, it is best to use emotional loading dynamic effect design, because interesting dynamic effect feedback can avoid users’ anxiety; However, in the case of poor network, too long loading time will make people feel impatient, so this loading mode has a relatively large miss rate.
Segmented loading: This type of loading can also be described as pull-up refresh loading, which is generally used when the user reaches the bottom of the feed stream and continues to swipe up or click to load the data. When doing interactive document should indicate how much one-time loading data, this need to be decided according to the product’s own needs, such as: light load content can be one-time loading 50, and with the content of the image data can be loaded in a single article 25, experience the WeChat friends dynamic data is one-time loading article 20 (counted, not necessarily accurate);
Step by step loading: As the name implies, it is a step by step loading, preferentially load the content that occupies relatively small resources; There are two cases: the first is to load text first and then load pictures, the sudden appearance of pictures will disturb users, this kind of experience is not good, has been gradually abandoned; The second is to load the frame of the page first and then load the content of the page, for example, load the image placeholder first, which can be gray or the main color of the product (+ LOGO or icon)/color (background setting color, random appearance), then load the page text, and finally load the image on the placeholder position; The advantage of this loading method is that users can quickly the overall structure of the page, better experience;
Lazy loading: it is loaded when the user is using it, so as to avoid the waste of traffic and resources. For example, when the user is swiping the feed stream, the image content is loaded when the user is seen, and the text and frame may only be loaded when the user is invisible below.
Preloading: Used in reading products, it preloads the content of the next page in advance to reduce the loading time when users enter lower-level pages. It can be used with the intelligent loading described below. For example, preloading can be used in the case of wifi, but not in the case of 4G to save traffic, so that the experience will be better.
Intelligent loading: Load different contents on different networks. Under 4 g networks, for example, in order to save user traffic, the page is loaded text content and PuQing picture, not video for loading or loading only standard definition video, but consider part of a user’s flow is more, so now also can provide users with your choice of rights, such as pop-up window to remind the user whether to use traffic load or switch hd mode; On the other hand, with wifi, it can automatically load hd pictures or videos.
Summary: There are various loading modes. There may be multiple loading modes for the same page. The purpose is to save time and improve user experience. In addition, emotional design can be used more in the way of loading dynamic effects, which can make users forget the current waiting and deepen brand memory. It is also a big design trend; The best place to load dynamic effect can reasonably use the location of the page, to reduce the interference to the user; In the case of load failure, feedback should be given, and users can be reloaded;
conclusion
Said so much about the content of the home page is right, the homepage seemingly ordinary, actually involves the function is more, some features are more subtle point, different product page function layout is different also, I am here is the product of general features, also does not have the very deep to speak, I hope in a future article have a chance to say it in detail.
Author: EasonZhangUED
Source: UI China homepage