作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

设计开发App的起初步骤之一就是决定用户能够在App上看到什么和做什么，一旦我们知道了用户在App上和哪种内容互动，我们就可以去设计用户在App上的不同内容块之间的切换、进入和回退。

一 多视窗布局

小尺寸屏幕只适合每次展示单个纵向内容视窗，一个列表或列表项的具体信息，这种设备上，界面通常对应于信息层次的某一级上，例如：类别-列表-详情。

大尺寸屏幕通常会有更多的可用界面空间，并且它们能够展示多个内容视窗，我们通常也利用多视窗来避免界面留下过多的空白和一些比较尴尬的交互（例如：为了填补空白，设计了一个很长或很宽的按钮）。

下面来演示一下把UI设计迁移到大尺寸屏幕时经常出现的问题：

举例1

问题描述

大横屏使用单视窗导致空白和过长行

解决方案

采用横屏多视窗布局，这样可以产生更好的视觉平衡、效用和可读性。

当决定好了区分使用单视窗布局和多视窗布局的屏幕大小基准线后，我们就可以为不同屏幕大小区间（例如：large/xlarge ）或最低屏幕宽度（例如：sw600dp）提供不同的布局了。
单一界面被实现为Activity的子类, 单独的内容视窗则可实现为Fragment的子类。这样最大化了跨越不同结构因素和不同屏幕内容的代码复用。

二 为不同平板方向设计

在开始在屏幕上排布UI元件，多视窗布局在横屏时有很好的表现，因为有大量可用的横向空间可用，但是在竖屏时横向空间被限制，因此需要为竖屏单独设置一个布局。

2.1 伸缩

伸缩每个视窗的宽度来适应竖屏下呈现的内容，视窗可以固定宽度或者占可用界面宽度的一定比例，如下图所示：

2.2 展开/折叠

在竖屏中折叠左侧视窗的内容，当遇到总/分视窗中左侧视窗包含易折叠的列表项时，这个策略很有效，如下图所示：

举例

以一个实时聊天应用为例。横屏中，左侧列表包含聊天联系人的照片，名称和在线状态。在竖屏中，将以一个隐藏名称，只显示照片和在线状态的提示图标的方式来折叠横向空间。也可以选择性的提供展开控制，它允许用户展开左侧视窗或相反的操作。

2.3 显示/隐藏

左侧视窗在竖屏模式下完全隐藏，为了保证界面功能的等价性，左侧视窗功能必须可见，例如：在ActionBar中添加一个按钮来展示左侧视窗，

2.4 堆叠

在竖屏时垂直地堆放横向排布的视窗，当视窗不是简单的文本列表或者有多个内容模块与基本内容视窗同时运行时，这个策略很有效。

三 组合界面

3.1 向下导航

显示层级导航是一种查看应用整体画面的方式。

-向下导航：允许用户进入子界面。

横向导航

横向导航允许用户访问同级界面。

同级界面有两种，如下所示：

• 容器关联：界面展示由父界面放入同个容器里的那些条目。
• 区块关联：界面展示父界面不同部分的信息。

Dashboard模式

Dashboard模式是一种一般以Button为主来获取不同应用划分模块的模式。一个Dashboard就是个大图标Button表格，它表示了父界面绝大部分内容。这个表格通常是2、3行或列，取决于App的顶层划分。此模式展示全部区块的视觉效果非常丰富。巨大的触摸控件也让UI特别好使。当每个区块都同等重要时，Dashboard模式最好用。但是，这个模式在大屏上效果不佳，他让用户直接获取 App 内容时多走了一步弯路。

Grid模式

垂直滑动

List模式

水平滑动

Stack模式

卡片

Tab模式

Tab模式允许组合同级界面，该模式可以嵌入原本可能成为另一个界面的子界面内容，Tab模式适合用在小量的区块关联界面。

Tab模式的优点：

• 只有一个既选的活动Tab，用户能立即从界面获取tab的内容。
• 用户可在相关界面内快速导航，不用重新访问父界面。

注意：

• 当选择时Tab被跳过，Tab应该保持原状，只有指定内容区域发生改变，并且Tab任何时候都可用。
• Tab切换不能算作历史。例如：如果用户从Tab A切换到Tab B，按Back按钮不该重选Tab A。Tab通常水平排布，可是有时其他tab展现形式，例如Action Bar的下拉菜单，也是可以的。
• tab应该在界面顶端和内容对应。
• 当切换Tab时，保证立即切换很重要。不要加载时弹个确认对话框来阻塞tab的访问。

Swipe View模式

Swipe View模式即水平分页模式，该模式在容器关联的同级界面上最好用，例如：类别列表技术、金融或新闻等。该模式也允许组合界面，即父界面在布局内嵌入子界面的内容。

在水平分页UI中，一次只展示一个子界面，每个子界面称为页。用户能通过触摸屏幕然后按想要访问相邻页面的方向拖拽导航到同级界面。为补充这种手势交互通常由另一种UI元件提示当前页和可访问页。这样能帮助用户发觉内容并且也提供了更多的上下文环境信息给用户。当为区块关联的同级模块使用这种模式的水平导航时，这个做法很有必要。这些提示元件的方式如下所示：

• Mark
• Scrolling Label
• Tab

时间导航

时间导航，或者说在历史的界面间导航，在Android系统中由来已久。不论其他状态如何，所有Android用户都期望Back按钮能带他们回到之前的界面。历史界面集全都以用户的Launcher应用为基础（电话的 “Home” 键）。也就是说，按下Back键足够多次数后你应该回到 Launcher，之后Back键不做任何事情。

举例

从 Contacts（联系人）App中进入电子邮件 app 然后按 Back 键的行为，如下图所示：

应用自身通常不必考虑去管理Back按钮。系统自己自动处理task和back stack回退栈），或者叫历史界面列表。Back按钮默认反向访问界面列表，然后当按钮被按下时从列表中移除当前界面。

但是总是有一些我们可能需要重写Back行为的例子。比如，屏幕包含一个嵌入的网页浏览器，在这个浏览器中你的用户可和页面元件进行交互来在网页间导航。我们可能希望当用户按下设备的 Back 键时触发嵌入浏览器的默认back操作。当到达了浏览器内部历史的起始点，就应该遵从系统Back按钮的默认行为了。

向上导航

Android 3.0引入了Up记号，点击Up，用户将被带入到结构中的父界面。这个导航操作通常就是进入前一个界面（就像之前 Back 按钮讨论中描述的一样），但是并不是永远都这样。因此，开发者必须保证Up对于每个界面都会导航到某个既定的父亲界面。

某些情况下，Up适合执行某个行为而非导航到一个父亲节点。

以Android 3.0平板上的Gmail应用为例。当查看一封邮件的对话时把设备平放，对话列表和对话详情将并排显示。这是一种之前课程中的父、子界面组合。然而，当竖屏查看邮件对话时，只有对话详情被显示。Up按钮被用来使父视窗滑入屏幕显示。当左侧视窗可见时再按一次Up按钮，单个对话便回到全屏的对话列表中。

举例

从联系人App中进入电子邮件App然后按Up导航的行为，如下所示：