(三)高级篇____7、设计高效的导航——整合：把范例 App整合到一起
原文链接：http://docs.eoeandroid.com/training/design-navigation/wireframing.html
--Snowxwyo 2013年3月9日 (六) 12:39 (CST)
目录[隐藏] |
组合：为范例应用创建框架
现在，我们对导航的模式和屏幕分组技术有了有深入地理解，是时候把它们组合起来并应用到我们的屏幕上了。让我们再看一眼这个新闻应用范例的完整的屏幕地图。
图 1.新闻应用范例的完整的屏幕地图。
下一步，我们要做的是从前文讨论过的导航模式中选择一种并应用到这个屏幕地图上，使用Anroid最佳实践方式，最大化导航速度，最小化触屏次数，同时保持接口的直观与统一。我们也应该考虑不同设备的屏幕尺寸不一这个因素，做出相应的不同的选择。为了简单起见，让我们专注于平板和手持制备（手机）。
选择模式-Choose Patterns
首先，我们的第二层屏幕（故事分类列表，照片列表，以及保存的项目列表）可以使用标签（tabs）统一分组。注意，我们并不一定需要使用水平排列的标签（tabs）；在一些情况下，下拉列表UI元素可以作为合适的代替使用，特别是当设备的屏幕非常窄时，如一些手机。我们也可以把,保存的图片列表，保存的故事列表组合起来，在手机用使用标签（tabs）显示，或是是平板上使用多个垂直的内容面板显示。
最后，让我们考虑一下怎么呈现新闻故事。为了简化不同故事分类之就的导航，第一个可选方案是使用水平颁页，并在横向滑动面上使用一系列的标签（labels），指示当前可见的页面以及相临地可访问的分类。在平板上，当水平显示时，我们可以多做一步，在屏幕左边添加一个面板显示水平可分页的故事列表，而故事视图则作为主要内容显示在屏幕右边。
下图展示了使用这种导航模式后手机以及平板上新的屏幕地图。
图 2.手机上最终地新闻应用范例的屏幕地图。
图 3.平板水平方向上最终地新闻应用范例的屏幕地图
到目前为止，思考一下屏幕地图的变化是一个很好的主意，这样做是为了防止在实践中（当你草绘应用的屏幕布局时）你的选择不能很好的被应用。下图是一个屏幕地图变化的范例，其展示的是在平板上并排地显示不同分类的故事列表，而故事视力则保持独立。
图 4.平板水平方向上另一种可选的屏幕地图范例。
素描和线框-Sketch and Wireframe
绘制线框图是你开始为你的屏幕布局时的第一步。有创意地开始想象怎么样安排UI元素来允许用户在你的应用种进行导航。请劳记，完美的像素精度（创建高保真模型）并不重要。
最早，也是最快的方法就是拿起你手中的笔在纸上开始画线框图。当你开始绘制时，可能会发现你原来的屏幕地图或是选择使用的模型的一些实用性问题。在一些情况下，某个模式在理论是可能会对某个设计问题很适用，当在实践中，它们可有会因为视觉上的混乱或是互动问题（如，屏幕上有两行标签(tabs)）而无法使用。如果这样的事情发生了，去寻找其它的导航模式，或在选中的模式中变换，直到更加优化了我们的绘制。
当你对初稿满意时，是时候把你的想法移植到数字的线框图上了，使用如Adobe® Illustrator, Adobe® Fireworks, OmniGraffle,或其它矢量图工具。当选择使用什么工具时，请考虑以下几个功能：
- 是否可以绘制交互式的框架？Adobe® Fireworks 等工具提供了这项功能。
- 是否有屏幕“大师(master)”功能，是否可以在不同屏幕之间复用一些可视化元素？例如，动作栏几乎应该在你所有的屏幕上都可见。
- 是什么学习曲线（learning curve）？专业的矢量图工具都有一个陡峭的学习曲线(steep leanrning curve)，而为线框图所设计的工具可以为更多相关的任务提供较小的一组功能。
最后，为Eclipse设计的Android Development Tools(ADT)插件中自带的XML布局编辑器可以用来创建原始模型。然而，在这个时候，你应该更加关注与对高层布局的设计而不是细节上的视觉设计。
创建数字线框-Create Ditital Wireframes
当在纸上绘制好了布局，并选择了一个数字线框图工具后，你可以创建一个数字线框图为作为你应用的视觉设计的第一步。下图是我们这个新闻应用线框图的一个范例，它们与前文中讨论的屏幕地图一一对应。
图 5.为竖屏手机设计的新闻应用线框图示例。
图 6.为平板的水平布局而设计的新闻应用线框图示例。同时也包括了呈现故事列表的可替代布局。
下一步-Next Steps
现在，你已经为你的应用设计了一个有效的，直观的应用间导航。你可以开始花一些时间来为每一个屏幕优化用户接口。如，当呈现交互式内容时，你可以选择使用丰富的窗口小部件来代替简单的文本标签，图片以及按键。你也可以开始为你的应用定义可视化风格，在这个过程中，可以结合你自己品牌的视觉语言元素。
最后，应该是时候开始实现你的设计并使用Android SDK为你的应用编写代码了。在开始之前，可以先看一看以下资源：
- 开始者向导：用户接口（Developer's Guide: UserInterface）：学习怎样使用Android SDK实现你的用户接口的设计。
- 动作栏(Action Bar)：实现标签(tabs),向上导航，屏幕动作(on-screen action)等。
- 片段(Fragments)：实现复用，多面板布局。
- 支持库（Support Library）：使用ViewPager实现水平分页（滑动视图）。
浙公网安备 33010602011771号