2023年6月27日发(作者：)

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