Application of zebra pattern in Web page user interface design

Web page Production WEBJX article introduction: the application of zebra in web design.

Displays the contents of the list using two identical styles but with different colors. Look at the current many interfaces and their usual design, found that the actual use of zebra pattern in the original based on the processing of the vision through the expansion, not only a deep and simple color matching use.

Hello, my name is zebra pattern.

Displays the contents of the list using two identical styles but with different colors.
Of course, this interpretation I borrowed from the "Designing Interfaces" came, slightly different. I definitely admit that this is a god, but look at the current many interfaces and the design of their own peacetime, found that the actual use of zebra pattern on the original basis through the processing of the vision has expanded, not only a deep and simple color matching use.


Figure I: The most authentic zebra pattern application

Figure II: The extension of zebra stripes-the application of highly inconsistent content

Figure Three: Zebra pattern extension-Increase line segmentation

Figure Four: The zebra pattern extension – use only split lines

Figure V: Zebra Pattern extension – scattered segmentation of a single color gradient formation

Figure VI: Zebra pattern extension-only use left blank to divide (with a sense of God)

When should you put me on:

The use of zebra stripes is when in the list, the contents of each row (there are more than one row in each row) even more than one column of data is difficult to distinguish visually, play a regular role. This allows users to connect to each row of individual and even multiple columns of content.

Sometimes in the content with the title of the same use of shades of color as a distinction to form the effect of zebra stripes. For example, Picasa's content area design. Of course this is a special case, but careful attention, but also in the popular.

Figure VII: Picasa Special use of zebra stripes

[1] [2] [3] [4] Next page