Design mode: Pagination (pagination, tagged pages)

Source: Internet
Author: User

Pattern Library

In the Schema Library, I'll list the patterns that all ecommerce sites need. Here's a list of classic patterns, and I'm trying to make these patterns look more interesting and practical. (The Yahoo Model Library also has a definition of pattern.) )

Pattern Attribution Category

In order to facilitate the invocation and maintenance of various patterns in the pattern library, the patterns in the pattern library are first divided into three categories: User requirements, application requirements, and context design. In the user requirements category, there is a type called basic interaction. Here I will explain the pattern one by one involved in the basic interaction from this latitude.

Pagination (pagination, tagged pages)

Summary of issues

The user needs to look at a subset of the data and find that all the data is displayed on one page, and it becomes very difficult to view.

Instance

When to use

  • When a screen cannot host more data.
  • Items of interest can usually be found on the first few pages.
  • You need to delve into the data items rather than the content displayed in a scrolling area.

    Solutions

    Summary: break complete data into smaller items, sequentially displaying these data and individual sequence pages. Provides page-by-page control. Provides links for users to browse the pages of the previous page and the next page of this action. In addition, provide links to the start and end of the data group (first and last). If the dataset is a predictable number, the last page of a link is displayed. If the dataset is unpredictable or appears to be of a different size (for example, results from a search engine), do not worry about displaying the last page linked to.

    Project Paging

  • The split item list becomes a sequence of pages.
  • Provides links to information on previous and next page pages.
  • Provides links to browse the first and last pages.
  • Provides information about what type of object the user is browsing.

  • Provides information about what a user is browsing a set of objects. Use form: "[$ObjectName]s [Displayeditemrange] of [TotalItems]"
  • The order of this link is as follows: first page, previous page, next page, last.
  • Use the graphical arrows to increase the target size of the link.
  • Displays the status of paging in an administrative display that is not available.

    Search for pagination

  • Converts the information into a series of pages sorted by relevance.
  • Provides paging control to provide access to paging content.

    Paging control

  • Displays navigation controls as one-line links.
  • The order of this link is as follows: ' previous page ', Web link, ' next page '.
  • After the label ' previous page ', the left arrow appears.
  • The right arrow appears before the label ' next page '.
  • Use the arrows that you can click with the mouse.
  • Web page link settings contain up to 10 links. If there are fewer pages of results, only the page links provided on the Web page are displayed.
  • When a page is on 1-6 pages, the page link always starts with ' 1 '.
  • On any page with 6 pages (7 pages later), the page link should start minus 5 on the current page. For example, when Page 7th, the first page will be 2 (7-5 = 2) and the last page will be 11 (still show 10 pages).

  • The result of the first page does not have a label or arrow that shows ' previous '.
  • The last page of the result does not display the label or arrow for the ' next page '.
  • The page Number link for the current page does not show hyperlinks.
  • Finally, add a label for the resulting page above the paging control area.

    Basic principle

    Project Paging

  • displaying arrow graphics helps differentiate links and provides larger hit targets.
  • Unlike search paging, pagination controls are visible at all times (even if they are disabled), which prevents users from being distracted when there is an uncontrolled paging.

    Search for pagination

  • Displaying an arrow graphic helps differentiate between contacts and provides a larger hit target.
  • In combination with context background, adding an uncontrollable state to display arrows is of little value because:
    (1) These display arrows, which are often shown to open the folding layer.
    (2) When the results of the first page have been combined into the vast majority of integrated browsing volume. The display does not control the paging with the previous page, which is of no added value.
  • Although the "first page" link is valuable, it also competes with the ability to render links to random access.
  • "Last" links are of little value because the results are sorted by relevance, which is also a problem because the total number of results (therefore, the final result) may not be known.

    Similar mode picture display



  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.