【Interface&navigation】规划多个触摸屏尺寸（57）

最新推荐文章于 2024-06-24 10:32:45 发布

weixin_33674976

最新推荐文章于 2024-06-24 10:32:45 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/4789781/2170486

原
上一课的详尽屏幕地图并不依赖于特定的设备外形，尽管它通常可以在手机或类似尺寸的设备上看起来和工作正常。但Android应用程序需要适应多种不同类型的设备，从3“手机到10”平板电脑再到42“电视。在本课中，我们将探讨从详尽地图将多个屏幕分组在一起的原因和策略。

注意：设计电视机应用程序还需要注意其他因素，包括交互方法（即缺少触摸屏），大阅读距离的文本易读性等。虽然此讨论超出了本课程的范围，但您可以在Google TV文档中找到有关设计电视设计模式的更多信息。

具有多窗格布局的组屏幕

多窗格布局设计

有关设计指南，请阅读Android Design的多窗格布局模式指南。

3到4英寸的屏幕通常仅适合于一次显示单个垂直的内容窗格，无论是项目列表，还是关于项目的详细信息等。因此，在这样的设备上，屏幕通常映射一对一。一个具有信息层次结构中的级别（类别 → 对象列表 → 对象详细信息）。

另一方面，诸如平板电脑和电视上的较大屏幕通常具有更多可用屏幕空间并且能够呈现多个内容窗格。在景观中，窗格通常按从左到右的顺序排列。用户特别习惯于在多年的桌面应用和桌面网站使用的大屏幕上使用多个窗格。许多桌面应用程序和网站提供左侧导航窗格或使用主/明细双窗格布局。

除了满足这些用户期望之外，通常还需要在平板电脑上提供多个窗格信息，以避免留下太多空白或无意中引入尴尬的交互，例如10 x 0.5英寸按钮。

下图说明了将UI（用户界面）设计转换为更大的布局时可能出现的一些问题，以及如何使用多窗格布局解决这些问题：
【Interface&navigation】规划多个触摸屏尺寸（57）
图1.横向大屏幕上的单窗格布局导致笨拙的空白和非常长的行长度。

图2.横向多窗格布局带来更好的视觉平衡，同时提供更多实用性和易读性。

实现注意：在决定在单窗格和多窗格布局之间绘制线的屏幕大小之后，您可以为不同屏幕尺寸存储区（例如large/ xlarge）或不同最小值的设备提供包含一个或多个窗格的不同布局屏幕宽度（例如sw600dp）。

实现注意：虽然单个屏幕是作为Activity子类实现的，但是单个内容窗格可以实现为Fragment子类。这最大化了跨不同形状因子和共享内容的屏幕之间的代码重用。

设计多个平板电脑方向

虽然我们还没有开始在屏幕上安排用户界面元素，但现在是考虑多窗格屏幕如何适应不同设备方向的好时机。由于大量可用的水平空间，景观中的多窗格布局工作得很好。但是，在纵向方向上，您的水平空间更受限制，因此您可能需要为此方向设计单独的布局。

以下是创建纵向平板电脑布局的一些常用策略。

【Interface&navigation】规划多个触摸屏尺寸（57）
伸展
最直接的策略是简单地拉伸每个窗格的宽度，以最佳地呈现纵向方向中每个窗格中的内容。窗格可以具有固定宽度或占用可用屏幕宽度的一定百分比。

【Interface&navigation】规划多个触摸屏尺寸（57）
展开/收起展开/折叠策略
拉伸策略的一个变体是在纵向时折叠左窗格的内容。这适用于主/细节窗格，其中左（主）窗格包含易于折叠的列表项。一个例子是实时聊天应用程序。在横向中，左侧列表可以包含聊天联系人照片，姓名和在线状态。在纵向中，可以通过隐藏联系人姓名并仅显示照片和在线状态指示器图标来折叠水平空间。可选地还提供扩展控件，允许用户将左窗格内容扩展到其更大的宽度，反之亦然。

【Interface&navigation】规划多个触摸屏尺寸（57）
显示隐藏显示/隐藏策略
在这种情况下，左窗格完全隐藏在纵向模式下。但是，为了确保屏幕在纵向和横向上的功能奇偶校验，左窗格应通过屏幕显示功能（例如按钮）提供。通常使用操作栏中的“ 向上”按钮（Android设计中的模式文档）来显示左侧窗格，如后面的课程中所述。