Not a good designer--the design of the tag 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 the good design.

Reflection on the case of

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

&http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;

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

1.HIG?

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

Figure 2 System 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 background Lightens and its image is highlighted, the selected tab bar background is lit and the icon is highlighted.

2. What do other applications do?

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

Figure 3 Other microblogging clients

Compared to the other excellent client design, which selected label 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 the complementary color is used to mark the selected state, which means no point, the other is can point, so highlight" "and so you choose of course highlighting, do not need to choose the course of the dark" "" Light and shade ratio of 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? Users 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 Web version module: The active pane is the pane this is currently maximally 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 maximally. An inactive pane becomes of the active pane when it tab control is clicked the selected tab bar, should be active, the contents of the entire page are also subordinate to this tab bar. 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 on a label with bubbles 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 their design level logic unreasonable, and then give themselves mercilessly pat a brick. I know that the criticism of 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, flaws, I hope Tencent Weibo more and more good. Second, the design principle of the label bar design, we should pay attention to the following principles: 1. The tab bar in the selected state is highlighted 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 in the number of labels, not more than 5, otherwise it will not fit. 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 advanced users will never use to solve universal problems. Figure 8 The last two Tweetbot of the tab bar are
that can be customized long after

reference to the tapworthy:designing Apps3. tags are used for module switching, not operation entry

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 images 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 ideographic nature of the icon is not good enough, be sure to use the icon and text to express the label content the iphone has some system icons for the toolbar, for collection, history, bookmarks, more, and so on, if the tag can be expressed using the System icon, as far as possible with the system icon, if you have to design your own can also, But note the ideographic, so that users do not need to think and know 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 to give visual guidance. If you move an item from one tab to another, do not jump directly to the page, doing so, 1 will let the user lose control lever, 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, which is best done by booting the animation. Fig. 10 Every customer prudential products when from the category label, the goods into the shopping cart, there is a guide to animation, 1. Inform the user that the cart has been added successfully, 2. Inform the user that the cart is behind another tab bar. Of course, the position of the animation can be a little better. Third, on the label bar design pattern library to share some about the tab bar design Pattern Library: 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-barhttp:// Www.androidpatterns.com/uap_pattern/change-view-tab-bar

Source: http://elya.cc/blog/2011/08/20/tabbar/