The iPhone Tab Bar Lessons From Reality

Instacall

Over the last couple of years, the iPhone has greatly popularized the tab bar navigational model for mobile handsets. Apple has put together a design rationale for the tab bar in their Human Interface Guidelines (HIG) along with lots and lots of other information — they do however leave some question unanswered. Having worked with interaction and graphical design for iPhone applications during the last couple of years I’ve managed to pick up some lessons the hard way, and in this post I would like to share my thoughts on a couple of do’s and don’ts.

在过去的几年中,iPhone成功的使得Tab Bar标签栏导航方式在移动设备上流行起来。Apple将tab bar和其它许多的设计原则整合到了他们的人机交互指南(HIG)中——但有些疑问他们从来没有回答。在过去的几年中我一直从事交互与图形设计,在这篇文章中我将分享一些我的想法有关什么是该做的,什么是不该做的。

Lesson 1: The magic number is five魔法数字是5

This hardly is news to anyone with a bit of insight into iPhone design. Since the screen width of an iPhone is 320 dots (1 dots = 1 or 2 pixels), Apple designed the standard tab bar to contain no more then five tabs to be able to maintain visible iconography and readable copy.

这对从事iPhone设计的人来说不是新鲜事。自从iPhone的屏幕宽度为320点(dots)开始(1点=2象素),Apple设计了标准的tab bar不能超过5个tab,每个tab包含其图标与可读的文字。

What happens after five? Well, there is of course a way to work around this by resorting to the “More” functionality built into the standard tab bar. But, I would suggest avoiding the “More” tab as far as you can. Why? Well…

5个之后会如何呢?当然,我们可以采用使用"More"标签的方式放进标准的tab bar。但是我还是推荐尽可能的去避免"More"标签。为什么呢?

  • First of all, you constantly lose an extra tab
    首先,你自然会损失掉一个tab
  • You put the burden on the users to remember what is hidden beneath the “More” tab. This becomes especially troublesome if the number of items in the “More” view exceeds 5, since the cognitive load can become to overwhelming for a user to handle (more on cognitive load)
    你将记录"More"标签下功能的这个重担交给了用户。如果你的"More"下面的内容达到5个时,问题更加突出,这些加重了用户的认知负荷能力
  • Testing has revealed that most users don’t know about or the meaning of the “More” feature, and simply doesn’t bother using it (Source: Tapworthy — Designing Great iPhone Apps by Josh Clark)
    一些测试表明用户根本不知道"More"功能的用途,而且根本不会影响用户

However, when you are working with perspectives, data sorting and categorization (e.g. like in the iPod), the “More” tab makes more sense then it otherwise should as long as you let the user edit the preferred tabs. Just remember that editing the preferred tabs is the behavior of a somewhat advanced user.

当然,当你在各种视图下工作、数据排序以及分类时(例如iPod),使用"More"标签的方式来替代让用户自定义标签会更合理一些。因为自定义标签的这种行为在某些情况下只适用于高级用户。

Lesson 2: Ask the users询问用户的意见

This should hopefully be covered much earlier in your design process, but the categorization and classification of the activities that the tabs represent should cohere to at least the overall perception of your targeted audience. While doing this kind of research and testing, keep in mind “Lesson 1″ and explore if the activities could be categorized into five segments. If not? Ask yourself if you really should use the tab bar as the navigational model.

这种方式在你的设计过程中会非常有帮助,但标签的分类和级别应该更接近于你目标用户群的想法。当我们做这种研究测试时,记得事实1中提到的内容,不断思考所有的内容是否能分类到五个标签之中。如果不行,请问自己是不是非得用tab bar作为导航方式呢?

Lesson 3: Put a lot of time on icons and copy花多的时间在图标和文字上

A couple of points to keep in mind regarding the iconography and copywriting:一些用于图标设计及文案设计的点子:

  • Make sure that the iconography and copy actually depicts the underlying activities of the tabs. Nothing is more frustrating than remembering that an application contains a certain functionality, but not being able to determine under what tab you will find it.
    确定图标和文案能真实的标签这些标签下所要进行的行为。最让人闹火的事情莫过于明明知道程序中有一个功能,但却不知道在哪个tab下面
  • Avoid creating distracting stimulus through semantic interference, e.g. by having a paintbrush icon with the copy “Reports” underneath it. This is also known as picture-word interference
    避免一些语义上无关的设计,例如一个笔刷的图标但下面却写着“报表”。可参见 picture word interference
  • If you are creating yet another “Favorites” tab, don’t try to reinvent the star icon or the word “Favorites”. Since recognition is less expensive than recall, you should help your users minimize their cognitive load (Jacob Nielsens Ten Usability Heuristics).
    如果你要创建另一个“我的收藏”的标签,不用试着重新设计星形图标或改变文字“我的收藏”(Favorites)。虽然重新识别一个事物的成本低于回忆事物,但是我们应该帮助用户减少认知负荷(Jacob Nielsens Ten Usability Heuristics)
  • Avoid recurring words in your copy. For example, imagine that you create a tab bar containing three tabs where the labels read “My Books”, “My Magazines” and “My CDs”. According to the Stroop Effect the meaning of the words is extracted even when participants try not to processes them (i.e. it will be almost impossible for your users to help themselves from reading “My” on every single tab).
    避免出现重复的文字。例如,想象你需要创建“我的图书”“我的杂志”“我的CD”这样的情况。根据Stroop effect(斯特鲁普效应)的解释用户会主动忽略掉这些文字。
  • Visually and metaphorically distinguish the iconography so that users immediately knows which tab to tap, instead of having to waste precious time over thinking “Do I find settings beneath the wrench or the cog wheel?”.
    让图标设计得有含义及易于识别这样用户能立即知道该点哪个tab,避免让用户考虑例如“到底是扳手呢?还是在齿轮表示设置呢?”
  • If you have a hard time creating an icon depicting the underlying functionality of a tab, try looking at the content layout of the view it represents for inspiration to create visual cues for your users.
    如果你在设计图标的时候遇到一些问题,不妨进这一层下面的内容去看看下面的布局以及内容是否能激发你的灵感。
  • Again, this is a matter of both heuristics and field-testing. Ask the users to get to know their way of reasoning! “What do you think this face icon represent?” “What do you expect to find beneath a tab called ‘Finder’?” “Does it make sense to you that the icon is a face, and the copy is ‘Finder’?”

重申,实地测试和探索非常重要。问问用户他们的理解方式!“你们认为这个脸部图标表示什么?”“你们觉得应该在什么样tab下可以找到Finder”“你觉得图标是脸,而文字写着Finder,这样说得通吗?”

 

Figure 1Figure 1 — Left: NUUS 24 uses similar icons, Middle: Spotify uses a house icon with the copy “What’s new”, Right: Vimeo uses a copy containing “My Videos” and “My Stuff”

左: NUUS 24 使用了相似的图标, 中: Spotify 使用了房子图标和 “What’s new”的文字, Right: Vimeo 重复使用文字 “My Videos” 和 “My Stuff”

Lesson 4: Avoid changing tabs automatically避免自动改变tab

This is a big re-occurring discussion in many of the app projects I have been involved in. In my opinion, you should never change tab from a non-tab-bar navigational action! I know that you might find yourself in a situation where this seems to be the only way to solve some weird information architectural corner case, but try your best to avoid it! Why?

这是在我从事的很多项目中经常争论的问题。我的想法是,如果不是用户主动直接的在Tab上发生交互行为,永远不要改变Tab!我知道你们有可能在一些情况上发现这是唯一能解决一些奇怪的信息架构问题的方式,但是请还是主动去避免!为什么呢?

  • You are breaking the users sense of control by doing something that to them is unexpected. When a user taps on a table view item they are in 9 out of 10 cases expecting the outcome to be: a) a right to left view transition or b) a bottom to top modal view transition.
    你在尝试打断用户所期望的控制行为。举例当用户点击一个表视图(Table View)的时候,他们永远期待二种结果:a)新视图从右向左滑进,b)新视图从下向上滑进。他们同样不希望在Tab Bar上发生他们预想不到的变化
  • You break the natural back tracing that users are most accustomed to on an iPhone. If they have not noticed the subtle change of tab in the tab bar, you will have a situation of momentary confusion once they start looking for the back button in the navigation bar.
    你在扰乱用户早已习惯的iPhone“返回”交互习惯。如果他们没有注意到Tab已经改变,他们有可能以为到了下一级,试图找“返回”按钮
Lesson 5: Don’t make tabs exclusive不要在Tab上做限制

Don’t make tabs restricted to a certain type of users (e.g. registered members) if you don’t provide an easy way for the users to get access to it. You will probably create a lot of unnecessary frustration since every first time use of the app will produce x number of frustrating taps (where x represents the number of tabs you chose restrict). This is likely not in line with the overall experience you are trying to design for.

如果你没有提供更好的方式让用户访问某些内容,不用让Tab设计具备限制性(如只针对注册用户)。让用户点击后才发现这些内容不可用时,这会让他们非常苦恼。

Figure 2

Figure 2 — Hemnet (a popular Swedish application for finding real estates) restricts the two middle tabs for registered members. First it tells you that you need to register, but no information is given where to do so.

Hemnet 应用中当你点击某个Tab时,提示你必须登录

Lesson 6: Customize, but beware小心使用自定义Tab

After a couple of iPhone projects where the information architecture has nailed the tab bar as the most fitting navigational model again and again, designers tend to get bored. Speaking as a designer myself: when designers get bored, shit will happen. One way of fixing this urge for change is sometimes to walk down the path of customizing the tab bar.

当越来越多的iPhone应用使用Tab Bar来展示信息架构的时候,设计师已经开始觉得无趣。设计师自己都知道,当设计师自己觉得无趣时,坏情况可能发生。一种方式就是为了避免设计上的无趣,开始自定义Tab Bar。

Now, I’m all for customizing, because it creates personality, memorability, and boosted brand experience. But, along with something that sounds this incredible comes of course a couple of important things to keep in mind.

现在,我也是常常自定义Tab,因为能有个性,好记忆,而且有更好的品牌体验。但是有一些重要的事情必须牢记于心。

  • It takes time, and sometimes it takes a lot of time. From a developers perspective, customizing the tab bar (the one thing that manages the whole navigational stack of your application) means completely re-writing code that otherwise comes for free.
    需花时候,而且有时候要花大量的时间。从开发人员角度来说,自定义Tab Bar 意味着完全重写代码。
  • There is actually a really good reason why Apple picked the hues for the background of the tab bar and the tool bar; it distinctly separates the visual appearance between levels of navigation. Keep this in mind while creating your own color schemas.
    Apple设计Tab Bar和Tool Bar的颜色色调时是有一定理由的;它能很好的区别外观和导航的级别。将这种思想带到你的色彩设计之中。
  • Sometimes developers and designers forget the fact that if you tap an active tab in a tab bar, you should automatically be taken to the top of the navigation stack or that when you have an ongoing phone call you have to accommodate for the double height status bar. Don’t forget to implement all the functionality that is expected from a standard tab bar.
    有时候开发者和设计师总是忘了当点击一个Tab时,顶部的导航条显示了当前位置,同时如果有电话打入,系统的状态栏会变成双倍高度。别忘了设计这些情况。
  • Some applications uses the custom design pattern with a multiple-layered tab bar (e.g. Twitter for iPhone). If you are considering this approach, be humble enough to realize that you are going to confuse a lot of your users.
    有些应用使用一些自定的设计模式来应对具有共享视图的Tab Bar(如Twitter for iPhone)。如果你也考虑这种方式,那注意你有可能让你的用户产生疑惑。

Figure 3

Figure 3 — In Twitter for iPhone, the multiple-layered tab bar easily get confusing since it redefines the back functionality. Tapping on the table cell saying “651 favorites” take the user to the favorites view. But since it’s also a tab, the back button in navigation bar takes you to the previous level of the multiple-layered tab bar.

在Twitter for iPhone中,这种多层Tab很容易让人困惑。当点了第一屏中的"651 favorites"后,进入了"favorites"视图,如中图所示,再点Back按钮,在第三屏中还是处于同一等级下的Tab,这时图标变成了"More"

Summary总结

The tab bar is the one thing that is constantly going to be the face of your application to guide the users as they navigate your application. Don’t underestimate the time you need to put into creating a flawless tab bar experience. These lessons are in no way rules, but hopefully an eye opener!

tab bar是你导航应用的主要方式。不要低估了设计一个完美的tab bar体验所要花的时间。这些总结中并没有绝对的规则,但希望能让你开启思路。

原文出处significantpixels.com翻译 Experience10.com

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: