(三)高级篇____7、设计高效的导航——规划画面及其之间的关系

原文链接：http://docs.eoeandroid.com/training/design-navigation/screen-planning.html

翻译：androidfresh

 

规划屏幕和屏幕间的关系

大多数应用程序有一个可以表示为一棵树或图形对象类型的固有信息模型。更明确的说，你可以画一个图的不同类型的信息，用来表示用户与您的应用程序交互的信息类型。软件工程师和数据架构师经常使用实体关系图（ERD）来描述应用程序的信息模型。

让我们来考虑一个允许用户通过浏览一组分类的新闻故事和照片的示例应用程序。对于这样一个应用程序的一个可能的模式图如下所示形式的ERD。

图1. 新闻应用程序例子的实体关系图。

 

创建一个屏幕列表

一旦你定义了信息模型，你就可以开始定义应用程序中使用户能够有效地发现、查看和行动必要背景的数据。在实践中，做到这一点的方法之一是确定一套详尽允许用户浏览和交互的数据需要的屏幕。我们实际上显示的屏幕在目标设备上有所不同，这是重要的一点，需要在设计过程中考虑这点，以确保应用程序能够适应其不同设备环境。

我们要在我们的示例应用程序中，使用户能够查看、保存和共享分类的故事和照片。下面是一个包括这些用例的详尽屏幕列表。

• 启动故事和照片的主页或访问的屏幕
• 分类列表
• 一个给定的类的新闻列表
• 故事的细节视图（我们可以保存和共享）
• 分类的列表的照片
• 图片详细视图（我们可以保存和共享）
• 所有已保存的项目清单
• 保存的照片列表
• 保存的故事列表

图屏幕的关系

现在我们可以定义屏幕之间的指向关系，箭头从一个屏幕A到另一个屏幕B意味着，用户通过一些交互可以在屏幕B回到上一个屏幕A。一旦我们定义了屏幕和它们之间的关系，我们可以通过图一致的表达上述关系，其中包括所有的屏幕和它们之间的关系：

图2. 新闻应用程序例子的详尽屏幕关系图。

如果我们希望允许用户提交新闻故事，或者上传照片，我们可以增加额外的屏幕，这个图。

超越一个简单的设计

在这一点上，根据详尽的屏幕关系图，可以设计一个功能完整的应用程序。一个简单的用户界面会由子屏幕的列表和按钮组成：

• 按钮的不同部分（例如，故事，照片，保存的项目）
• 垂直列表集合（例如，故事列表，照片列表等）
• 详细信息（例如，故事来看，全屏幕的照片来看，等）

但是，您可以使用屏幕分组技术和更先进的导航元素，更直观、更敏感的设备的方式来呈现内容。在下一课中，我们将探讨，如提供多窗格布局平板设备的屏幕分组技术。后面，我们将深入到在Android上常见的不同导航模式。