Application of zebra pattern in Web page user interface design

Source: Internet
Author: User

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



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.