现在我们已经对导航模式和屏幕分组技术有了深刻的理解，现在是时候将它们应用到我们的屏幕上了。让我们再看一下下面第一课的示例新闻应用程序的详尽屏幕地图。
图1.示例新闻应用程序的详尽屏幕图。
我们的下一步是选择并将之前课程中讨论的导航模式应用于此屏幕地图，最大限度地提高导航速度并最大限度地减少访问数据的触摸次数，同时保持界面直观且与Android最佳实践保持一致。我们还需要针对不同的目标设备外形进行不同的选择。为简单起见，我们将重点放在平板电脑和手机上。
选择模式
首先，我们的二级屏幕（故事类别列表，照片列表和保存的项目列表）可以使用选项卡组合在一起。请注意，我们不一定要使用水平排列的标签; 在某些情况下，下拉列表UI元素可以作为合适的替代品，尤其是在具有窄屏幕的设备（如手机）上。我们还可以使用手机上的标签将已保存的照片列表和已保存的故事列表屏幕组合在一起，或者在平板电脑上使用多个垂直内容窗格。
最后，让我们来看看我们如何呈现新闻故事。简化不同故事类别导航的第一个选项是使用水平分页，在水平滑动表面上方有一组标签，指示当前可见和相邻的类别。在横向平板电脑上，我们可以更进一步，将水平可分页的故事列表屏幕显示为左窗格，将故事视图屏幕显示为右侧的主要内容窗格。
下面是表示应用这些导航模式后手机和平板电脑的新屏幕地图的图表。
图2.手机上示例新闻应用程序的最终屏幕图。
图3.平板电脑上的示例新闻应用程序的最终屏幕地图。
此时，如果您选择的模式在实践中不适用（当您绘制应用程序的屏幕布局时），最好考虑屏幕地图的变化。以下是平板电脑的示例屏幕地图变体，它们并排显示不同类别的故事列表，故事视图屏幕保持独立。
图4.横向平板电脑的备用屏幕映射示例。
草图和线框
线框图是设计过程中您开始布置屏幕的步骤。获得创意并开始想象如何安排UI元素以允许用户浏览您的应用。请记住，在这一点上，像素完美的精度（创建高保真模型）并不重要。
最简单，最快捷的入门方法是用纸和铅笔手工绘制屏幕。一旦开始绘制草图，您可能会发现原始屏幕地图中的实用性问题或决定使用哪种模式。在某些情况下，模式在理论上可能适用于给定的设计问题，但在实践中它们可能会崩溃并导致视觉混乱或交互问题（例如，如果屏幕上有两行标签）。如果发生这种情况，请探索其他导航模式或所选模式的变体，以获得更优化的草图集。
在对初始草图感到满意后，最好使用Adobe®Illustrator，Adobe®Fireworks，OmniGraffle或任何其他矢量插图工具等软件继续使用数字线框图。选择要使用的工具时，请考虑以下功能：
交互式线框是否可行？Adobe®Fireworks等工具提供此功能。
是否有屏幕'主'功能，允许在不同的屏幕上重复使用视觉元素？例如，操作栏应该几乎在应用程序的每个屏幕上都可见。
什么是学习曲线？专业矢量插图工具可能具有陡峭的学习曲线，而设计用于线框图的工具可能提供与任务更相关的较小功能集。
创建数字线框
在草图上绘制布局并选择适合您的数字线框工具后，您可以创建数字线框，作为应用程序视觉设计的起点。下面是我们新闻应用程序的示例线框，与本课程前面的屏幕图一一对应。
图5.示例新闻应用程序线框，用于纵向手机。 （下载SVG
图6.横向平板电脑的新闻应用程序线框示例 还包括用于呈现故事列表的备用布局。 （下载SVG）
（下载设备线框图的SVG）
下一步
现在您已经为应用程序设计了有效且直观的应用内导航，您可以开始花时间为每个屏幕改进用户界面。例如，在显示交互式内容时，您可以选择使用更丰富的小部件来代替简单的文本标签，图像和按钮。您还可以开始定义应用程序的视觉样式，并在此过程中合并品×××视觉语言中的元素。
最后，可能是时候开始实施您的设计并使用Android SDK为应用程序编写代码了。要开始使用，请查看以下资源：
导航架构组件：使用导航编辑器GUI工具实现屏幕线框。
开发人员指南：用户界面：了解如何使用Android SDK实现用户界面设计。
操作栏：实施选项卡，向上导航，屏幕操作等。
片段：实现可重复使用的多窗格布局
支持库：使用实现水平分页（滑动视图）ViewPager
联系我
QQ:94297366
×××打赏：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ
公众号推荐：
