preface
With the rise of front-end careers, there are many back-end or project managers who think that’s what the front-end is all about. Sometimes it even takes a day to do something so simple on the back end? This article will give you an idea of the amount of work required for a reasonably normal phone list page.
The entrance
The first step in analyzing a list page is to look at the entry, because a good list page is bound to be reusable, and entry differences will lead to different data presentation and processing of the list.
I’ve done it more than once from different entries to the same list page, but the presentation is different, maybe because of different business, maybe because of different permissions, maybe because of different history operations. So your entry logic has to differentiate, differentiate between different entrances, differentiate between first and non-first entry.
There is also a special processing, which is when the list page enters the details and then returns to the list, the state of the previous list needs to be remembered. It’s a simple thing for an app maybe, but for the front end you need to record more key points. This might include: the user’s filter selection, keywords, requested paging information, requested cache data, scrolled locations. Yes, it’s clear that the industry has a specific solution, but notice that I’m talking about workload, and there are requirements that need to be implemented, refined, and tested.
return
The list comes in, I don’t want to see it, back to my entry page. There is also an important logical judgment here. Most people think that going back means going back to the previous page. Sometimes you can, but it depends on what your page flow is.
I believe many people know page history, in the PC side you can easily enter any operational business entry through multiple entry, but the mobile phone side can only go back, close and specify the home page or other buttons off the page.
I have made an in-depth study of the playing page of NetEase cloud music APP. It can be a number of pages clicked in, and each entry from a different channel will return to the specified page on the music play page instead of a simple history page. So don’t simply assume that the return on mobile is the same as the return forward on the browser. This return logic can contain different business decisions when your application needs it.
Some logic also works with the help of returns, such as the risk of leaving the page to confirm the action and then leave. Some returns are simply the removal of some display of the current page.
Interactions supported by regular lists
Full list && paged list
Although they are all lists, in fact, in many cases, the total amount of list data may be determined, and there may be less than one screen or two pages at most when the data amount of a certain person or business is involved. In this case, the full list is the most appropriate and friendly for users. For a full list there is no more or no more loading.
Bottom pull up load && infinite scroll load
The bottom pull-up is a common interaction, but now it’s more common to scroll indefinitely until there’s no more data to load.
Drop down refresh && double click on top refresh
A drop-down refresh is a common interaction, but it’s becoming less and less used. Now more is the top double click can quickly return to the top and refresh at the same time, the interaction of wechat circle of friends is like this.
No data && no more data
These two are completely different page presentations, and each has a particular meaning in a particular scenario without data.
For example, in some cases, the product needs to do some guidance, you need to guide the user when there is no data, you can create data to have data, or because you lack some operation, qualification, etc., you don’t have data to look at.
There are also unexpected cases because of your weak network, disconnected environment led to your no data. There are also some abnormal conditions, and whether to make a separate explanation for abnormal conditions is also a point that needs to be confirmed with the product. Such as a server gateway error or a programmer distracted.
Without more data, its presentation is becoming more and more simple, serious copy may be written, there is no more data, naughty will write I have a bottom line.
When there is no more data, from the perspective of performance interaction optimization, it is also necessary to cancel the part of the requested data in the logical judgment, and even cancel the logical operation of the pull itself.
Number of paging pages
As a general logic of paging, you need to clear the exact number of pages per request. I can share my logic briefly. Assuming that the user enters initially, the default pageNo is 1. When triggered to request the second page? No, that’s not true.
When you request data to get the first page, you actually know the total number of items and the total number of pages. Therefore, before each data request, the relationship between pageNo and pageTotal can be compared to determine whether it is necessary to request the data of the next page when loading the triggered operation, and whether there is the next page.
In fact, when our current pageNo == pageTotal is no longer required;
Less than, you need to request, corresponding load animation, request interface, cancel animation. Then add the page number by 1 and re-judge it. If it is found that the page number is equal to 1, it will display no more data below; If it is still smaller, it can still trigger the load operation.
In particular, notice that when you only have one page of data, you’re showing no more data. This situation is generally ignored because it is not likely that the list data in the production environment will be so small that it will not be detected by testing or development.
Loading animation
Loading maps are often referred to as loading maps, and many interactions will think that if you don’t add them, the interaction will be bad. My own view is that it depends on the request time of your interface and whether there is data available in the corresponding operation.
Specific examples: Infinite rolling load such as mentioned above, in fact, most of the time, we can’t see the infinite scroll is loaded trigger animation, because it will define and 50-100 px at the bottom when you for instance, will have to request data, the load interaction in you didn’t see the bottom of the position, fast 1 s, 2 s request and render the following data was set up, This is good for the experience. But it would be awkward if you set it to flash for a second to appear in the loading box and then disappear. So, why is loading the animation central when you start loading it, because you don’t have any data to look at.
Similarly also appeared on the list items to support some of the operation, when you click the request to the server, in fact you concerns is the execution result of function, rather than continue to see the data, also don’t want to lose this part of the operation, in the perspective of product design, also will try to reduce the unnecessary operations, while the other so would have such an interaction, Inform the user that I am processing your request, please wait. One is friendly, and the other is to avoid repeated user clicks, causing unnecessary burden on the server, as well as some back-end logic processing on the problem of how high concurrency bottleneck, there is more than request more than return conflict prompt.
List item operations
Swipe left && swipe right
Items can be swiped to show more actions or information. There are also lists that switch between types in the TAB section by swiping, and lists that switch between lists by page swiping. Over time, this way of toggling lists will become mainstream.
Drag and drop
A lot of times you will have to drag and drop lists to adjust the order, to adjust your priority or like level, etc.
Double click on the
Double-clicking will be less of an action, but will increasingly become a common gesture for mobile phones.
The search function
A search scope
There are many types of search, local search, remote search. Local search refers to keyword filtering in the displayed list without requesting the interface. Remote search is a remote search based on keywords.
Search trigger condition
With the increase of front-end interaction, triggering conditions also increase a lot, which can be simply divided into the following types:
- Dynamic search, whenever the input changes
- Out of focus
- When the input method enters
- Click the search button on the back
- Search icon
Search help
The best products offer a search log prompt for previously searched results, which is personalized and dynamically updated based on history. You can enter part of the lenovo search results provided after the selection so as to search.
Search for and routinely display contradictions
Here is a brief description of the search and regular display of the logical processing, to search page and regular list page as a page to consider.
Search lists and regular list relationships
If your search request interface is the same as your regular list interface, which it usually is, when you do a search, you get a valid keyword, you ask for data, you reset the page number to one, you provide the keyword, and when you get the search result, you need to determine if it has any data, There is a difference between showing no data and a regular list showing no data, where you need to tell the user (1) what the search term is and (2) no results, as opposed to a regular list showing no results.
When you remove the keyword and switch to a regular list, you need to empty the keyword and reset the page count to 1. By extension, if you are switching between TAB lists, your TAB may be a pass-through to a different type value, and this part will need to be reset according to the corresponding part. You may even need to manage memory for several states at once, which is a common requirement.
Whether the search list is on the same page as the regular list
There is a question mark about this kind of interaction. Since the first product clicked on the search box to open a new page, it has become an unwritten habit of app interaction for the search page to open separately.
Lazy loading in the list
Small talk about the picture
The images in the list now have to support some lazy loading, starting with the default image in cloud music and then replacing it with the actual thumbnail.
Thumbnail rules are generally proportionally formatted thumbnails. I don’t know if you have studied wechat thumbnail, it is not simple to display the original size with such a small size as simple. Here are a few of the points involved in thumbnails:
1 Ratio of thumbnails to the list. 2 Thumbnails are generally not original, but have certain conversion relationship. Ali’s picture bed will provide at least 3 sizes of square thumbnails for you to choose according to the picture you wear. 3 the content displayed is generally 100% of the content of the original picture, but if the width ratio of the original picture does not conform to the aspect ratio of the thumbnail, it is very common to take the percentage of the screenshot in the middle of the original picture as the part of the thumbnail display. 4. Control the proportion of the original drawing. Of course, in order to ensure the unity of products, the proportion of the original drawing may be controlled. But if the business itself is not controlled, or not wanted to be controlled, it is not controlled.
Talk about the skeleton screen
The first time I felt the skeleton screen was the user experience of Jane Book. The first time I felt nothing special, and then when I compared it in reverse, I found that the experience was much better. I believe that skeleton screen will be a page lazy loading technology, front-end experience optimization is a necessary technical point.
The core experience is: outline first, then render in detail.
conclusion
Actually here just list a part of the logic of mobile phone list page, also did not complete, here you also feel do a list, it is very simple, but if there is no very mature experience from start, also not so easy, you need to consider more things, after all, a list of pages show form of the carrier is bearing a lot of business.
If you think this article is good, add a like, no main code technology, but full of front-end logic.