在设计iPhone应用程序标签栏时的一些经验

 

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

　　第一课：魔法数字是5

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

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

　　首先，你自然会损失掉一个tab

　　你将记录"More"标签下功能的这个重担交给了用户。如果你的"More"下面的内容达到5个时，问题更加突出，这些加重了用户的认知负荷能力(cognitive load) yixieshi

　　一些测试表明用户根本不知道"More"功能的用途，而且根本不会影响用户(来源：Tapworthy - Designing Great iPhone Apps by Josh Clark)

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

　　第二课：询问用户的意见

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

　　第三课：花多的时间在图标和文字上

　　一些用于图标设计及文案设计的点子：

　　确定图标和文案能真实的标签这些标签下所要进行的行为。最让人闹火的事情莫过于明明知道程序中有一个功能，但却不知道在哪个tab下面

　　避免一些语义上无关的设计，例如一个笔刷的图标但下面却写着“报表”。可参见 picture word interference

　　如果你要创建另一个“我的收藏”的标签，不用试着重新设计星形图标或改变文字“我的收藏”(Favorites)。虽然重新识别一个事物的成本低于回忆事物，但是我们应该帮助用户减少认知负荷(Jacob Nielsens Ten Usability Heuristics) yixieshi

　　避免出现重复的文字。例如，想象你需要创建“我的图书”“我的杂志”“我的CD”这样的情况。根据Stroop effect(斯特鲁普效应)的解释用户会主动忽略掉这些文字。

　　让图标设计得有含义及易于识别这样用户能立即知道该点哪个tab，避免让用户考虑例如“到底是扳手呢?还是在齿轮表示设置呢?”

　　如果你在设计图标的时候遇到一些问题，不妨进这一层下面的内容去看看下面的布局以及内容是否能激发你的灵感。

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

　　 yixieshi

 

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

　　第四课：避免自动改变tab 互联网的一些事

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

　　你在尝试打断用户所期望的控制行为。举例当用户点击一个表视图(Table View)的时候，他们永远期待二种结果：a)新视图从右向左滑进，b)新视图从下向上滑进。他们同样不希望在Tab Bar上发生他们预想不到的变化

　　你在扰乱用户早已习惯的iPhone“返回”交互习惯。如果他们没有注意到Tab已经改变，他们有可能以为到了下一级，试图找“返回”按钮 yixieshi

　　第五课：不要在Tab上做限制 互联网的一些事

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

　　 yixieshi

  互联网的一些事

　　Figure 2 - Hemnet 应用中当你点击某个Tab时，提示你必须登录

　　第六课：小心使用自定义Tab

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

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

　　需花时候，而且有时候要花大量的时间。从开发人员角度来说，自定义Tab Bar 意味着完全重写代码。

　　Apple设计Tab Bar和Tool Bar的颜色色调时是有一定理由的;它能很好的区别外观和导航的级别。将这种思想带到你的色彩设计之中。

　　有时候开发者和设计师总是忘了当点击一个Tab时，顶部的导航条显示了当前位置，同时如果有电话打入，系统的状态栏会变成双倍高度。别忘了设计这些情况。

　　有些应用使用一些自定的设计模式来应对具有共享视图的Tab Bar(如Twitter for iPhone)。如果你也考虑这种方式，那注意你有可能让你的用户产生疑惑。

　　

  互联网的一些事

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

　　总结

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

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

转载连接http://www.yixieshi.com/ucd/6651.html

zzdhu

联网的一些事