Android应用UI设计模式——1.2　操作栏与信息架构

一般而言，操作栏及其功能图标是应用的神经中枢，在整个设计中的地位举足轻重。可惜，AutoTrader应用的当前设计在这方面存在很大的改进空间。正因为如此，这个案例研究才令人着迷。 1.2.1　重新设计前 请看默认主屏幕Car Search，其中最显眼的菜单功能是Settings，它位于右上角，显得很突兀，如图1-3所示。在移动UI中，右上角无疑是第二重要而显眼的位置（最显眼的屏幕位置是左上角，被一个巨大的徽标占据）。 图1-3　AutoTrader应用在主屏幕设计中突显无用的Settings功能 虽然提供Settings功能没有错，但可惜，我想不出有哪个重要用例会用到这项功能。更糟糕的是，Settings只提供一些毫无价值的法律信息（如隐私条款、访客协议），以及一个通过电子邮件提供反馈的按钮。这些都不是这个应用的重要功能，没有必要如此突出！ 与过度突出的Settings按钮形成鲜明对比的是，重要功能（如Find Cars、Find Dealers、Scan & Find和My AutoTrader）却隐藏在老式Android 2.3导航栏菜单中，如图1-4所示。 图1-4　AutoTrader应用将重要功能放在老式导航栏菜单中，这是个反模式 下面介绍如何根据Android 4.0指南重新设计这个应用，从而有效地利用操作栏，让最重要功能更突出。 1.2.2　重新设计后 首先，需要调整按钮的样式，将圆角和斜边删除。在操作栏中，用文本表示的功能也必须删除。在Android 4.0中，操作栏中的操作用图标表示，而溢出菜单（overflow menu）中的操作用文本表示。根据这种方案，第一个修改建议是将原来的导航栏菜单直接移到操作栏中，结果可能类似于图1-5。 图1-5　第1版直接移植到Android 4.0，将设置和操作放在溢出菜单中 在这个版本中，Settings按钮变成了由锤子和扳手组成的图标，底部的导航菜单移到了操作栏的溢出菜单中，而庞大的公司徽标被Android 4.0风格的操作栏图标（与启动图标一致）和屏幕标题取代。请注意，根据Android设计指南，屏幕标题的长度不能超过屏幕宽度的50%。就这个应用而言，这不是什么问题，但你必须牢记这一点。 可惜，根据1.2.2节的讨论，仅做这些修改还不够。这些修改只是将原来的信息架构（Information Architecture，IA）移植到Android 4.0，并没有消除其缺点。Find Dealers和My AutoTrader等重要功能仍被隐藏，而Settings显然不能将用户带到有帮助的地方。更糟糕的是，将Settings放在操作栏中实际上会导致用户不去查看溢出菜单：如果用户发现Settings基本上毫无用处，那很可能会认为隐藏在溢出菜单中的功能更无用。这个设计还需改进。 一种改进方案是，将选项Find Dealers和My AutoTrader移到操作栏中，将Settings移到溢出菜单中。 图1-6是修改后的设计。 图1-6　第2版将更有用的功能放在操作栏中，而将Settings移到溢出菜单中 这种信息组织方式令人满意，也遵循了谷歌为Android 4.0和Android 4.1制定的最新设计指南。然而，当前操作栏的布局也提出了一些挑战。例如，在大多数设备上，为确保占用的空间不超过屏幕宽度的50%，操作栏可包含的操作图标很有限，而如果将多出的操作放在额外的操作栏中，又会抢占应用急需的垂直空间，还会增加视觉干扰和复杂度。这可不是小问题，绝不能置之不理。 主要的挑战在认知方面：并非每项操作都可轻松地用一个图标表示。例如，在图1-6中，我使用了原来的Find Dealers和My AutoTrader图标，虽然这两个图标都不错，但都可能被用户误读，表示复杂或不寻常操作的图标也大多如此。可将所有图标都删除，并将所有操作都放在溢出菜单中，但这种解决方案也远不够理想，因为这样所有菜单项都只能用文本表示。只使用文本时，将丧失图标给移动计算带来的趣味性，而这种趣味性正是移动导航的核心所在——至少在我看来是这样。经过再三观察我发现，图标和文本结合可让导航最有效。刚开始使用应用时，用户依赖于导航的这两个方面；但使用一段时间后，图标通常提供了足够的信息，让用户能够识别它背后的操作。那么，Android提供了结合使用图标和文本的途径吗？ 所幸，Google Plus的最新设计为结合使用图标和文本指明了方向，那就是使用抽屉式（Drawer）菜单，如图1-7所示。抽屉式菜单和瑞士军刀导航模式将在第13章讨论，但这里需要指出的是，使用抽屉式菜单这种用户界面（UI）元素，就能够鱼和熊掌兼得，既使用图标又使用文本。 图1-7　Google Plus应用使用了一个包含文本和图标的抽屉式菜单 如果应用包含大量彼此没有直接关系的视图，Android UI规范提倡将抽屉式菜单用于顶级导航。AutoTrader正是这样，其中的Car Search视图与Find Dealer视图和My AutoTrader视图不同，因此将这些导航元素放在抽屉式菜单中合乎情理，如图1-8的第3版所示。Scan & Find是一项汽车搜索功能，因此合理的做法是将它作为Car Search视图的一个上下文选项放在操作栏中，让用户只需轻按一次就能访问它。这样，只有一个选项隐藏在溢出菜单中，那就是毫无用处的Settings（但律师说它必不可少）。没有必要让用户只需轻按一次就能访问该选项，因此将它隐藏起来是最佳策略。 图1-8　AutoTrader应用的第3版：将抽屉式菜单用于顶级导航 第3版是最佳设计。它找到了良好的平衡点，既显示了图标和文本，又让用户能够从右往左轻扫或轻按“向上”图标（左箭头）来导航。它还在顶级操作栏中腾出了空间，以显示大而清晰的屏幕标题。Android设计指南推荐的一种修改方式是在屏幕左边缘放置一条细线，告诉用户可通过从右往左轻扫（或轻按“向上”图标）来打开抽屉式菜单。 Android UI设计指南指出，抽屉式菜单只能用于顶级导航，这意味着用户在Car Search视图中执行一些操作后，可能需要多个步骤才能切换到其他视图。好消息是，在不能使用全局导航的情况下，可在操作栏中包含与当前页面相关的上下文选项，这是Android设计指南推荐的做法。