Android应用UI设计模式——1.8　结果详情屏幕

用户进入汽车详情屏幕时，结果如何？结果表明，最后一个屏幕有很多需要针对Android重新设计的地方，包括信息架构、选项卡和按钮。 1.8.1　重新设计前 详情屏幕也包含很多iOS元素，如图1-17所示。前面说过，选项卡显示的是文本，有斜边和圆角。这个屏幕与搜索结果屏幕类似，也有Share按钮，但有两个：一个位于顶级菜单栏中，另一个隐藏在按钮Save/Share中，这容易让用户感到迷惑。 图1-17　重新设计前的AutoTrader结果详情屏幕 其他操作包括给经销商打电话和发邮件，但没有突出重要按钮，不知道这个应用希望用户先做什么。屏幕的其他部分应用了带圆角的容器，这些容器当然必须删除。 最重要的是，要显示列表中的下一辆汽车，必须按“返回”按钮回到搜索结果屏幕，再选择另一辆汽车（这种折腾我们称为上窜下跳，是个导航反模式，将在第13章介绍）。 1.8.2　重新设计后 在重新设计后的版本中，也使用了“向上”导航按钮，并删除了全局导航功能。但操作按钮应放在什么地方呢？对于用户最有可能执行的主要操作，突出它的最佳方式是什么呢？只要看看Android应用Gmail的详情屏幕（如图1-18所示），就可获悉Android 4.0操作系统实现这种解决方案的一种方式。 图1-18　Gmail在结果详情屏幕中使用了“滑动视图”控件 为避免上窜下跳，这个原生邮件应用使用了Android操作系统界面控件“滑动视图”（Swipe View），来提高导航效率。这个控件通过让用户从右往左轻扫来显示下一个详情屏幕。为将这种功能告知用户，在屏幕底部显示了一条黑线和文本“2 of 133”。这虽然可行，但测试表明，用户不容易发现。因此，重新设计AutoTrader时，应使用第5章介绍的覆盖式简明说明或第13章介绍的动画式水印，以突显这种重要功能，让用户更容易发现它。无论采取哪种方式显示说明，等用户知道这种操作后，就不再需要显示说明，因此这里不介绍这些模式。 在有些应用中，轻扫用于在选项卡之间切换。由于要将轻扫用于在详情视图之间切换，因此屏幕顶部的选项卡应只支持轻按，如图1-19所示。 图1-19　重新设计后的AutoTrader详情屏幕 现在，可以将主要和次要的上下文操作放在操作栏中。汽车详情屏幕只包含三个操作，顶级操作栏就能容纳，该操作栏位于选项卡上方和屏幕标题（商品名）旁边。如果设备的屏幕较小，或以后改进时添加了其他功能，可将有些操作移到溢出菜单或次级操作栏（split action bar）中，这将在下一章介绍。最后同样重要的是，删除这个屏幕中的所有容器，用Android 4.0标题取而代之，以遵循第2章将讨论的不受约束原则。注意，重新设计后的屏幕空间利用率更高，能多显示几行文本。对移动屏幕而言，这可了不得！