UI布局和指导

本节主要介绍我们的应用结构，包括移动端应用和桌面端应用的架构，涵盖了下面的几点指导。

应用有很多种，分别满足不同的需求：

• 只有一个界面、围绕一个主要需求而构建的应用（如计算器，相机和一些游戏）
• 主要功能是在不同的界面中切换，但是没有深度导航功能（如电话拨号记录，最近联系人，和收藏的联系人）
• 结合了一系列数据视图和深层次导航的应用（如邮件应用的不同文件夹，购物应用的不同文件夹）

自上而下

开始界面的布局需要花更多的心思。这是用户打开应用看到的第一个画面，需要能够满足新用户，兼顾老用户。

问自己这样一个问题：“一般用户最想用我的应用来干什么？”，据此构建开始界面的用户体验。

内容优先

很多优秀的应用都关注内容的呈现。尽量避免纯导航界面，，在开始界面就以内容为核心，让用户立即与内容交互，获取核心体验。选择适合数据呈现和屏幕尺寸的布局。

锚链接导航和按钮

跟工具栏一样，在应用的操作栏上可以组织排列一些重要操作的按钮。理想的导航放置区域是屏幕的顶端，包括标签的切换、左侧侧拉导航，都可以放在屏幕顶端。如果你的内容是可以搜索的，在应用操作栏中要包含搜索按钮，用户可以快速搜索，直达内容。

注重功能

当你的应用有大量的功能和操作时，关键点在于：要适度指引用户，将用户的注意力焦点转移到你想要的地方。在内容区域，要凸显重要的导航。一些特色功能可以用悬浮按钮来表示。在你的应用中不要强调那些不常用的操作路径。

顶层视图的设计策略

最顶层的界面向用户传递应用最主要的功能和内容。有些应用功能会专注内容，简化导航。而另外一些应用中，顶层界面可能会包含多个视图，务必确保这种情况下，用户可以在多视图之间高效地导航。

选择最适合您应用需求的导航的方式。

单一视图中的嵌入导航

将所有必要导航元素内联到内容中，能极大提高导航的可见性。当应用的导航架构非常简单时，可以采用这种方法。然而，当导航系统过于庞大时，大量的导航路径会占据内容的空间，且导航路径可能会全屏散布，而不是集中在某个位置，方便用户导航。

在这些情况下使用内容内部导航

• 您的应用程序的主视图非常重要大，其他视图无可替代。
• 用户可以在主视图中轻松完成常见任务。
• 你认为用户会较少使用你的应用，因为不熟悉，所以需要非常明显的导航路径。

一小部分同等重要的视图界面，可采用标签选项卡来进行导航切换。

如果你应用中功能区域很少，且层级较浅，可使用在顶层界面中使用标签选项卡，只需轻轻点击或滑动便可切换界面。。然而，使用标签选项卡会占据大量空间，不过当标签选项较少时，这种导航设计模式较为高效。

在这些情况下使用标签选项卡:

• 你希望用户在应用中频繁切换界面。
• 顶层界面中所展现的标签选项卡数量有限。
• 你希望用户能够充分了解其他界面。

通过左侧的侧拉抽屉来管理更复杂的结构

左侧导航面板可以同时显示大量的导航目标。当你的应用功能围绕主界面而构建时，这种导航模式极为有效，然后将抽屉可以作为一个不经常访问的链接索引。如果你的应用程序需要从较低级别的层级跨越信息架构层级直达另一个页面时，这种快捷导航方式让用户可以更灵活操作。然而，这种导航模式并不明显，需要一定的学习成本，让用户熟悉这种导航模式。

在这些情况下使用抽屉:

• 你的应用程序有大量的顶层视图
• 你希望在不直接关联的内容之间快速切换.
• 你有特别深的导航分支结构，并希望可以快速返回到应用的最顶层.
• 你想减少界面中导航元素的比重、想减少用户不常用链接，便可把他们放入到侧拉抽屉中。

不管选择何种顶层视图设计策略，都推荐内容内联导航，可以迅速的导航至相关内容。例如，推荐同一歌手的其他歌曲， 根据浏览历史推荐相关产品，例如浏览一个用户发布的其他内容。这些关联导航让相关内容可以更自然的进一步呈递。

移动端

该结构包括一个永久的应用栏和悬浮操作按钮。一个附加的底部栏，里面可以添加一些附加功能和操作。提供了用户可以导航的侧拉菜单，同时侧拉菜单会覆盖其他元素结构。

平板端

该结构包括一个永久的应用栏和悬浮操作按钮。应用栏吸收了平板电脑和手机的底部元素。一个附加的底部栏，里面可以添加一些附加功能和操作。左侧为导航菜单，用户如需访问，会覆盖所有其他结构元件。右导航菜单可以暂时访问或固定作为永久陈列。

桌面端

该结构包括一个永久的应用栏和悬浮操作按钮。操作栏吸收从平板电脑和手机的底部元素。窗口控件可被归纳到操作栏中。侧面导航菜单可以暂时访问或固定作永久陈列。侧面导航菜单以及内容可以有自己的二级工具栏，显示标签选项卡，样式，或辅助操作。

UI规范

主要由水平或垂直的分割线来定义。

划分的区域不宜太多，否则会导致L型布局（就是页面分散）。相反，用空白字符语言（WhiteSpace，是一种只用空白字符（空格，TAB和回车）编程的语言：译者注）来描绘中间地带。

卡片和悬浮按钮，打破页面区域。

使用卡片来组织内容，可满足一些特殊的交互行为，也可以组织信息。卡片式布局需要大量的留白空间，也需要分割线来划分清晰。

工具栏

工具栏具有多种用途，适用于应用程序的各个区域。以下是您可以使用工具栏的一些例子。

宽屏、默认高度的应用栏

宽屏,高度扩展的应用栏 跨越多个列宽

单栏宽的工具栏，可以清晰的显示出层次结构

灵活的工具栏和卡片工具栏

悬浮工具栏

分离的工具栏面板

底部的工具栏,,紧挨着键盘或其他底层组件

底部工具

应用栏

应用栏结构

应用栏，前身为Android的操作栏，用于品牌推广，导航，搜索，和操作。

如果你的应用程序使用侧拉抽屉。那么点击Nav Icon（导航图标），便可打开侧拉，同时导航图标变为箭头。标题可以是一个应用程序的标题，页面标题或网页过滤器。

图标应该和应用相关操作有关联。点击Menu Icon（菜单图标）可出现一堆菜单项，其中包含帮助，设置和反馈。

亮色

暗色

有颜色

透明的

参数标准

默认高度：

手机竖屏: 48dp

手机横屏: 56dp

平板电脑/台式机: 64dp

如要扩展应用栏，其高度等于默认高度加上内容增加量。

菜单

菜单是一个临时的卡片,总是覆盖应用栏,而不是作为应用栏的扩展。

侧边导航

左抽屉和右导航可以固定显示，也可以暂时悬空覆盖于主界面中。在左侧侧拉菜单主要用于导航。在右边的侧拉菜单主要展现二级内容相关信息。

结构

侧滑抽屉会临时覆盖的内容。

参数标准:

移动端：侧导航宽度=屏幕宽度 - 应用栏的高度

示例:

Nexus 4: 304 dp

Nexus 5: 288 dp

iPhone: 264 dp

桌面：最大宽度左侧导航是400dp。右测导航可根据内容的不同而不同。

桌面端/平板电脑：固定，宽度应与列对齐。

浮动最大宽度：304dp

 手机侧滑

平板侧滑

网页侧滑

基本框架

Whiteframes提供了各种结构布局的的方法,分层和阴影。（均可以下载）基本框架

15 MB (.ai)

卡片内容的扩大和缩小

在移动设备中，覆盖的内容细节和聚焦的应用栏

移动端，拥有多个工具栏的内容重叠卡片和背景图像

扩展应用程序栏和右侧拉抽屉

左导航抽屉和瀑布流

资源列表

嵌入搜索字段的全屏背景图像 和 卡片式搜索结果

可扩展页脚的抽屉