Zebra pattern Design in a generalities interface

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

　

Zebra's got skin disease.

Why would try to do a zebra tattoo to do an understanding, in fact, is recently received such feedback: "Zebra tattoo make my words can not see clearly AH!!! "Ah, there is a color here," "Too uncomfortable" ... I was deeply blamed for my behavior because the result of the design was so exciting for everyone (of course my starting point was never the case). Well, how to do that, adjust the tune, a tune. I believe that the adjustment results will be another part of the people come out and say "ah, so deep ah," Ah, so messy ah, can't see the content. "The views of every user should be respected, of course, in a certain way, we will not have too much objection to the result, perhaps the habit, may be forgotten, perhaps more exciting things, maybe there are other reasons why I do not know, but as a conscientious designer, I decided to make a general understanding of the zebra pattern design.

　

You look so strange, zebra.

I am a pragmatic person, the crux of the problem is the color difference between the two colors of zebra stripes. So the article is just an analysis of this.

Different zebra lines have their own specific meanings in terms of content expression. and from the visual angle of the regular line, zebra pattern and line segmentation is a good choice, if both use, but not, but two fists at the same time exerting force, always look at the laborious, with more complex. Unless the line is used very light, like two punches at the same time, one of the feint, only for confusion, but also as a benefit. But in a row and there are many columns of the situation, the shortcomings of the line form will be exposed, obvious rules and regulations, especially in some of the screen, the content of the user is reluctant to use a few lines, the Chinese side can be seen. Therefore, from the visual simplicity of the zebra pattern looks like the depth of a choice.

In fact, including many designers in the design of zebra lines, the basic is their own feeling, this feeling is the overall tone and the relevant elements of the analysis of the tone after the subjective feelings (including me). At the same time zebra pattern of the two colors are basically two consistent, color similar to two colors. But I think that no matter what color is the basis for the adjustment of zebra stripes, the values between them will be within a certain range of values. The range value is small, then the zebra pattern ambiguity does not have the function, the range value is big, then crosses too big to interfere to the user to the content reading.

　

How to draw the monk's white Horse into a zebra

Looking for zebra texture interface More trouble, first want to find the interface of each system, and then look for representative products, because they have relatively high quality designers, relatively mature design concepts, and relatively perfect design specifications.

found that Microsoft's products are basically not using zebra stripes, generally through the feeling and user God. And the win system of some other software zebra pattern design is basically derived from the reference to Apple, but whether to follow a certain principle, it is unknown. And Apple's interface once the list will definitely use segmentation, but the way the performance is slightly different, large interface with the basic use of Two-color zebra stripes, small screen basic use line segmentation, this and Google design products are the same idea. So the search case is basically focused on the big screen interface under the Apple system.

Zebra pattern of the depth of two colors based on the overall tone and color of the interface with the habitual use of a recommendation:

1. When the main color of the interface is light-colored, the zebra pattern of light-colored basic use of white, zebra pattern of the dark color of the main interface to ensure that the tone of the consistency and adjustment. (Figure eight left)

2. When the main hue of the interface is dark, the color of the zebra pattern is basically the same as that of the main hue, and the zebra's dark colors are consistent and adjusted to the base point of the main hue of the interface. (Figure eight right)

Figure Eight: Zebra pattern color basic style under the influence of main color of the interface

So let's analyze the range values of the zebra shades in the bottom two colors:

Figure nine: Zebra color for Mac system interface

Mac system in its own interface with this kind of shades of color, regardless of the complexity of the content, regardless of whether the height is consistent, in the white as the benchmark, the difference between the two purity, a gap of 7%. At the same time each row is relatively uniform in height and content, but there are multiple columns in each row.

Figure 10: The color of the zebra pattern of the MAC system software light-colored interface

In the Mac system, such as the itunes interface zebra stripes, the color difference is less than the system's own interface, purity difference of 3%, brightness difference of 2%, both at the same time mixing action. At the same time, the height and content of each row is relatively uniform, but each row also has multiple columns of the phenomenon.

Figure 11: The zebra pattern color of the MAC system software Light interface Two

Mac system in the other software interface appears zebra segmentation, both are small interface, are the lightness of change, the left color value of the brightness difference of 6%, and a row has more than one column phenomenon, but the number of columns relatively large interface to less. The value of the color in the figure difference of 2%, only a single column, the content of each row is relatively concentrated. Right figure color value brightness difference 7%, purity difference 1%, each row content comparison content relative unification.

Figure 12: Mac system software Dark interface Zebra pattern color two

The appearance of zebra stripes in the Dark interface of MAC system is the similar software in the system of Imover and itunes. The difference in color between the two is less than the system's own interface, the purity difference of 3%, the brightness difference of 2%, they are the same spacing and itunes exactly the same. Each row is more structured and has more than one column.

Figure 13: Zebra color for Ipad app light interface

ipad on the itunes player interface, in addition to the depth and color of the segmentation, but also increased the use of the split line, the gap between the two colors so the moderate, the purity difference of 1%, brightness difference of 4%. Each row is very content unified, and there are multiple columns, while each row between the bottom of the gap is larger.

Figure 14: Zebra color in Ipad app gray interface

ipad on the NYTimes interface, in addition to the depth and color of the segmentation, also increased the form of the split line, the two color difference is also very moderate, the purity difference of 2%, brightness difference of 2%. Single line, each row has a lot of content, but the content distribution is more uniform.

Figure 15: Color differences in zebra pattern extension

The two special zebra stripes on the iphone are not compared here, and are used for reference only. Subject to a single background gradient form, there will be two content between the line segmentation, the left of each row of the content is more uniform, the two colors only for the difference in the Ming degree of 8%. The content of the right picture and each row height is not absolute unification, the two colors are comparatively gentle, the purity difference 3%, the brightness difference 4%.

　

The above results are summarized in the form of an icon to express this concept:

Figure 16: Zebra Pattern use reference table

According to the description in the chart: Basically, the spacing of zebra shades falls in a moderately different area (green), but there are also areas of difference weakening and differential enhancement (of course the points in the moderate area are also distributed), and if the area of the interface is larger, the more the content of each row, the less unified, At the same time, the height of each row is also more inconsistent, the number of columns in each row more, and without the help of other auxiliary elements, their interface zebra pattern color spacing is greater. Vice versa.

Repeat: The role of zebra pattern is to distinguish the contents of each row in the list, play a regular role. According to the analysis of the above interface, under normal circumstances, only use the "moderate" interval of color to meet this demand, but in the actual situation according to the area of the interface, the complexity and uniformity of each line of content, the height of each row is consistent, the number of spaces between each line, whether there are more than one column of conditions such as the "moderate" The adjustment of inclination. At the same time, many conditions of the interface can not be at the same time, there is mutual reinforcement and mutual cancellation, it is necessary to judge the designer's own ability and the actual situation of the interface itself.

　

Zebra Zebra take out a walk

Finally, the zebra led out, the color of the zebra to do an analysis, the point of the interval between the two fall in the difference between the moderate area, while near the edge of the weakening region.

Figure 17: The position of the zebra pattern of the microblogging client in the reference table

At the same time to look at the interface of the actual situation, the Micro-blog Client interface should be a medium-area interface, each row of more content, although only a single column, but the content is very inconsistent, at the same time, resulting in the height of each row is not uniform. According to the previous conclusion, the color spacing of such zebra stripes is obviously a bit too weak, and the interval should fall in a moderate proximity to the enhanced marginal area.

Look back to see the user's feedback, Marvel Ah, wow, the masses of eyes are really discerning. In fact, the interval of zebra stripes increased by 3% I think we should be able to solve the problem, zebra stripes can also play a role that he should not interfere with the information was successfully obtained.

All right, zebra, let's pull back and adjust.