Your location:Tech News>Tips>Desgin tool>You know from the headband breadcrumbs Past and Present!Course

Latest News

You know from the headband breadcrumbs Past and Present!Course



  Breadcrumbs, a once popular martial arts, it has inadvertently obscure ancient controls.Many interaction designers just heard its name when it retired the rivers and lakes.However, on certain types of sites, it is essential to navigation.Interaction designers today @ US group net Tokugawa bright specially re-sort the data, you know from the beginning with breadcrumbs Past and Present.

  What is the breadcrumbs

  Allowing users to perceive the hierarchy location of the current page is located on a web page, or control the relationship between the properties of the product.The general pattern is to use bread crumbs link text with ">", horizontal arrangement, there are some other styles.

  从头带你认识面包屑导航的前世今生! 三联 涨姿势!从头带你认识面包屑导航的前世今生! 涨姿势!从头带你认识面包屑导航的前世今生!

  This uses "perception", that will not be the breadcrumbs page in the most conspicuous place, it just helps the user to understand the structure and properties of affiliation to some extent on the website.

  Classification breadcrumbs

  1. Used to indicate the position of the hierarchical relationship between pages and the current page is located.This hierarchical relationship between pages may be no linear relationship between your jump and contain several pages long relationship itself exist.

  2. For the show belongs to the relationship between product attributes and position of the current page is located, the presence of these attributes is owned and included relationship


  3. It used to display the user''s path with history (some articles abroad have said so, but I do not have a corresponding website to find .)

  Effect bread crumbs

  1. Indicates that the current page position is located, belongs to the perception of the relationship between product attributes

  2. Easy to jump to the previous page

  3. On the whole, as a supplement to the main navigation

  Use bread crumbs

  Not all sites require the use of:

  1. Very flat hierarchy information.This is the bread crumbs in mobile products was scrapped one of the reasons;

  2. Pages that there is no linear relationship;

  3. There are other things replace breadcrumbs functions such as: progress indicator;

  Below it was seen in the top left of the page, the main navigation


  Bread crumbs "variant"

  Progress indicator.For indicating page position in the job step, and the area of the head is generally not jump clicks, only for indicating the role of.


  Composite of bread crumbs with navigation, screening items (facets search) and search box.

  This "variety" of the advantages of crumbs is easy to jump on a page level, making it easy to filter and search at the current level.


  Application Status of bread crumbs

  Mobile products and social products could barely see the bread crumbs

  Reason 1: The current trend is to design the flat hierarchy information, the various modules as tile, so that an increase in the breadth of the information structure, to reduce the depth of the longitudinal

  Reason 2: Social class station, relative to large electricity providers and content type website, its relatively low level of complexity

  Reason 3: small-screen mobile devices, high cost of land, it is the role of lower value, put it excluded

  Electricity business class and content websites only appears in the section of the page

  Of course, it will not appear on the first page, it will appear in the general level of a secondary channel page page

  For example, after the Jingdong home page, click into the [Home appliances] channel page, click on the channel page purifier, you can see the bread crumbs


  For example, after the iQIYI, click into the [animation] channel page, click on the channel page in "Tom and Jerry", you can see the bread crumbs.


  Bread crumbs guess

  Mobile end without bread crumbs, more complex site is also completely not use bread crumbs?

  Bread crumbs and page title in duplicate content, whether you can eliminate redundant information here, so use the information to get the perfect?


  These techniques + methods can learn from scratch!

  Design Forum

Recommend article

Relate article