(三)高级篇____7、设计高效的导航——规划多种触摸屏的尺寸

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

翻译：androidfresh

 

规划多个触摸屏尺寸

上一节课中已经详尽的说明屏幕地图不依赖于特定设备的外形尺寸。虽然一般情况下，它可以在手机或类似大小的设备正常工作，但是Android应用程序需要适应从3“手机到10~42”电视等一些不同类型的设备。在这一课中，我们将探讨通过详尽的图组合多个屏幕战术及理由。

注：设计应用程序的电视机也需要注意其他因素，包括交互方法（即缺乏触摸屏）、文本的易读性等等。虽然讨论的是本内容的范围之外，但是你可以在谷歌电视的设计模式文档的电视设计找到更多的信息。

屏幕组的多窗格布局

多面板布局设计 关于设计指南请阅读Android设计的多窗格布局模式的指引。

3〜4寸的大屏幕，一般只适合于一个项目清单的一次单一的垂直窗格的“内容”及有关项目的详细信息。也就是这些触摸设备上，屏幕一对一的映射到信息的层次与水平处（类别“ →“ 对象列表“ →“ 对象详细信息）。

更大的屏幕，如平板电脑和电视，另一方面，一般有更多的可用屏幕空间，并能提出多个窗格的内容。景观、窗格通常按照从左至右增加细节顺序。特别是基于用户多年的多个窗格大屏幕桌面应用程序和桌面网站使用习惯，许多桌面应用程序和网站提供了左侧的导航窗格或使用主/详细信息窗格中布局。

除了满足这些用户的期望，通常需要提供多个窗格的资料片，以避免留下太多的空白或无意地引入尴尬的相互作用，例如10 x 0.5英寸的按钮。

下面的图展示了一些当移动到一个更大的布局时可能出现的问题，以及如何解决这些问题的多窗格布局的UI（用户界面）设计：

图1。单窗格布局，在大屏幕上导致尴尬的空白和极长的线路长度图示。

图2。多窗格布局，更好的视觉平衡，同时提供更多的实用性和可读性。

实现注意事项：决定在屏幕尺寸上绘制线之间的单窗口和多窗格布局后，可以在不同的屏幕大小桶的设备（如大 / XLARGE）或不同的最低的屏幕宽度（如sw600dp），提供不同的布局包含一个或多个窗格

实现注意事项：虽然一个屏幕作为活动的子类，但实现个人内容窗格可以作为片段的子类来实现。这样最大限度地提高在不同的形式因素和跨屏幕共享内容的代码重复使用。

多个平板取向的设计

虽然我们还没有开始安排我们的屏幕上的用户界面元素，但是，这是一个很好的考虑如何多窗格屏幕将适应不同的设备取向的时间。多窗格布局，因为有大量的可用的水平空间，页面的布局工作效果相当好。然而，在纵向、横向的空间是比较有限的，所以你可能需要在这个方向设计一个单独的布局。

下面是几个常见的肖像平板电脑布局策略。

• 伸展 

最简单的策略是简单地将每个窗格的宽度最好在每个窗格中的内容呈现在纵向延伸。窗格可以有固定的宽度，或拿出一定百分比的可用屏幕宽度。

• 展开/折叠 

在舒展策略的一个变化是折叠在肖像左侧窗格中的内容。主/详细信息窗格中左（主）“窗格中包含容易可折叠的列表项，这样设计工作得很好。一个例子是一个实时的聊天应用程序。页面中，在左边的列表可以包含聊天联系人的照片，姓名和在线状态。纵向和横向空间可以折叠隐藏只显示联系人姓名和照片和在线状态指示器图标。还提供其他某个已展开的控制，它允许用户以展开左窗格中的较大宽度的内容，反之亦然。

• 显示/隐藏 

在这种情况下，左窗格是完全隐藏在肖像模式的。但是，为了确保你的屏幕在纵向和横向的功能完整，应在左窗格中可通过屏幕提示，（如按钮）。它通常是适当使用最多的操作栏按钮（在Android的设计模式文档），以显示在左窗格中，在后面的课程中进行了讨论。

• 堆 

最后的策略是在纵向垂直堆叠的正常水平排列窗格。此策略，当你的窗格为不是简单的基于文本的列表，或有多个数据块时，则在主要内容窗格中运行内容。一旦使用这种策略，要小心避免上面所讨论的尴尬空白的问题。

屏幕图内的屏幕组

现在，我们能够通过大屏幕设备提供多的窗格的布局组织起屏幕组。依照以前的教训，为了更好地了解我们的应用程序在这些设备上的层次结构，让我们在详尽的屏幕关系图中应用此技术：

图3.更新的新闻应用程序的例子屏幕上关系图。

在下一课中，我们将讨论子级和横向的导航，并探索更多分组屏幕和访问应用程序的用户界面的直观性和速度最大化的方法。