The design of the label Bar

The tangle of interaction designers is sometimes annoying, a lot of saliva waste in small details, and sometimes I will warn myself, to focus on the overall situation to distinguish between primary and secondary, some small details should not be too tangled, but I also believe that good interaction designers must have a nail on the details of the judgment, do not madness not live, Do not tangle out not to good design.

Reflection on the case of de jure

Here want to talk about Tencent Weibo iphone new version of a design details.

The event originated from one of our designers to provide a new version of the visual design, the overall atmosphere, but there is a strange place, he put the selected tab bar darkened, unselected tab bar highlighted, I said is not the reverse? He said no, Tencent Weibo is like this. So I went to see the new version of Tencent Weibo, unexpectedly really so.

Fig. 1 The label bar of Tencent Weibo

So, let's look at the following three points and do it right:

What about 1.HIG?

So let's compare the style of the tab bar of the iOS system:

Figure 2 The System's Tab bar style

IOS Human Interface Guidline has a description of the behavior of the tab bar "when users select a tab, such as Search in YouTube, the tab ' s Backgrou nd lightens and its image is highlighted, the selected tab bar background is lit and the icon is highlighted.

2. How are other applications made?

Since it is Weibo, compared to other micro-blogging clients, which is the selected state of the label dark off?

Figure 3 Other micro-blogging clients

Compared to the other excellent client design, which of the selected labels is dark?

Figure 4 Other outstanding clients

Compared to the web side of the label mode, which is the selected label dimmed?

Figure 5 The Web version of some of the label design

3. How does the user understand?

So I went to Tencent Weibo feedback on the views, and saw some people like me, including the wheat field teacher, but some people still feel that here can be accepted, for the following reasons:

"Here use the complementary color to mark the selected state, the point is not, the other is can point, so highlight"

"When you choose to highlight, you do not need to choose the dark of course"

"Light and shade ratio 1:4, should be able to distinguish which is selected, as long as not 1:1 on the line, users can understand on the line"

"Who rules it?" The user can understand.

Please note that the light and dark relationships here should not be used to distinguish between points and tabs, but should be used to distinguish whether they are active, and refer to the description of the Web version of module:

The active pane is the pane this is currently being shown; It is paired with the active tab control. The pane is displayed immediately the Web page-A-loads is the default active pane.

Inactive panes (not shown in the illustration) are the panes of that are, not currently being. An inactive pane becomes the active pane as it tab control is clicked

The selected tab bar, should be active, the entire page content, also with this tab bar is subordinate relationship. The default load, which is also the only active tab, will be loaded when you click on the Other tab page. You turn the shades upside down, and it makes people think this tab is inactive.

In addition, this tab is not a state of the point, when there is a new message, the label will be a bubble reminder, this time double-click the label can refresh the content, load new data.

Figure 6 Double-click a bubble label to load new content

Finally, the description of the dark ratio of 1:4, so can guess that is selected friends, guess which is selected is not difficult, but this is not IQ test it, or to the satisfaction of the basis to do the design, and it is best not to think, is not? Even if the user really does not feel strange, I will also feel that the logic of their design level is unreasonable, and then give themselves mercilessly pat a brick.

I know criticize people's design is very bad, after all, the new version of the overall design is very good, the logo is also very good-looking, afterward, hope Tencent Weibo more and more good

Second, the design Guide of the label Bar

The design of the label Bar can refer to some of the following standardized design guidelines:

1. In the selected state of the tab bar to highlight, to identify the active state

When the program starts, the priority load is definitely the content of the tab page in the selected state. The selected state of the label is to be visually active.

2. The number of labels should not be more than 5, if too much on the more

The number of labels, not more than 5, or can not be put down. If your peer information module is too much, consider adding a more tag to the most important 4 tabs, and placing those important labels in more labels.

Figure 7 The last more tag

However, the proposal or try not to have more this label, when more content in more than 5, it is necessary to consider the user to bring the cognitive burden. It is said that the test shows that most users do not know or pay attention to what is there, do not open it.

Of course, you can also allow users to edit preferred tags, but know that user customizations are always an advanced feature that is used by advanced users and cannot be used to solve universal problems.

Figure 8 The last two of the tab bar in Tweetbot can be customized after a long press

Refer to "tapworthy:designing great IPhone Apps"

3. Tags are used to do module switching, not the operation of the portal

If you want to provide action on the current page element, you can use the toolbar instead of the tab bar, which is a lateral switch to the content module. Of course, now more popular to put important operations in the label bar a certain position, such as a series of photo applications, have taken photos in the middle of the tag bar, made a differentiated style design, but also can be referred to.

4. You can use red bubbles or other forms to identify new messages on the tab bar

When a new message arrives, you can use a digital bubble or some other form to give a reminder on the tab bar.

Figure 9 New Message reminders on the tab bar

5. If the table of the icon is not good enough, be sure to use the icon and text to express the content of the label

The iphone has some system icons available, for the toolbar, for collection, history, bookmarks, more, and so on, if the tag can be expressed with the system icon, as far as possible with the system icon, if you have to design your own can also, but please pay attention to the ideographic, so that users do not need to think about what is. If the table of the icon does not reach the requirements, please be sure to help the text to explain that the text can not be too long to prevent the folding line display.

6. If your operation produces a label switch, do not jump directly, but give visual guidance

If you move an item from a tab to another tab, do not jump directly to the page, so that 1 will let the user lose the joystick, 2 if the user accidentally Liuhao, will be lost in your program. However, you have to tell the user that the content has already produced a state change, and this is a good time to use guided animation.

Fig. 10 Every customer sincerity product

Where customer prudential products when from the category label, the product into the shopping cart, there is a guide animation, 1. Inform the user that the cart has been added successfully, 2. Inform the user that the shopping cart is behind another tab bar. Of course, the position of the animation can be a little better.

Three, about the label bar design Pattern Library

Share some of the design pattern libraries on the tab bar:

Iphone:

Http://pttrns.com/tabbars (need to flip wall)

Http://mobile-patterns.com/custom-tab-navigation (need to flip wall)

Android:

Http://www.androidpatterns.com/uap_pattern/tab-bar

Http://www.androidpatterns.com/uap_pattern/change-view-tab-bar

Article Source: elya.cc reprint Please indicate the source link.