Design | 设计

Structure

Tim Wu

Nov 26, 2016 • 19 min read

UI regions

For guidance on arranging elements in z-space to achieve the correct behavior and shadows, see the Environment and Elevations and shadows sections.

有关在 z-space（z 轴方向）中如何排列元素以达到表现正确行为和阴影，可查看环境（Environment）和高度和阴影（Elevations and shadows）部分。

Mobile structure

This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus overlay all other structural elements.

该结构包含常驻 app bar（应用栏）和 floating action button（浮动动作按钮）。可根据附加功能或操作添加 bottom bar（底栏）。Side nav menus（侧边菜单栏）可覆盖其它结构元素。

Mobile structure

Top left to right: Side nav, app bar/primary toolbar, content area (below the app bar/primary toolbar), and right nav

从左到右：Side nav，app bar／primary toolbar，content area（在 app bar／primary toolbar 下方），和 right nav。

On the bottom: bottom bar

底部：bottom bar

layout_structure_regions_mobil

Tablet structure

This structure shows a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. An optional bottom bar can be added for additional functionality or action overflow. A side nav overlays all other structural elements. A right nav menu can be accessed temporarily or pinned for permanent display.

该结构包含具有 floating action button（浮动操作按钮）的 app bar（应用栏）。该 app bar（应用栏）包含了在平板端和移动端 bottom bars（底栏）中的元素。可根据附加功能或操作添加 bottom bar（底栏）。Side nav menus（侧边菜单栏）可覆盖其它结构元素。right nav（右侧导航菜单）可用来访问临时的元素或固定常驻的显示元素。

Tablet structure

Top left to right: Side nav, app bar/primary toolbar, content canvas (below the app bar/primary toolbar), and right nav

从左到右：Side nav，app bar／primary toolbar，content canvas（在 app bar／primary toolbar 的下方），右侧导航菜单

On the bottom: bottom bar

底部：bottom bar

layout_structure_regions_tablet

Desktop structure

The desktop structure contains a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. Where possible, the window controls are absorbed into the app bar.

桌面端结构包含一个具有 floating action button （浮动操作按钮）的常驻 app bar（应用栏）。该应 app bar（应用栏）包含了平板端和移动端的 bottom bars（底栏）中的元素。在可能的情况下，window controls（窗口控件）包含在 app bar（应用栏）中。

Side navigation menus can take up the full height of the screen size (including under the app bar) and be accessed temporarily or pinned for permanent display. Side nav menus, as well as the content canvas, can have their own secondary toolbars for tabs, palettes, or secondary actions.

Side navigation menus（侧边导航菜单）可以占据整个屏幕的大小（包含 app bar 下方），并且可用来访问临时的元素或固定常驻的显示元素。Side nav menus （侧边导航菜单）以及内容区域可以有自己的 secondary toolbars（辅助工具栏），用于标签，工具栏，辅助操作等。

Desktop structure

Top left to right: App bar/primary toolbar

从左到右：App bar／Primary toolbar

Second row from left to right: Toolbar, secondary toolbar, and toolbar

第二行从左到右：Toolbar，secondary toolbar，和 toolbar

Third row from left to right: side nav, content canvas, and right nav

第三行从左到右：side nav，content canvas，和 right nav

On the bottom: floating action button

底部：floating action button

layout_structure_regions_desktop

UI regions

Define a primary horizontal or vertical divider.

定义主水平或垂直 divider（分割区）。

Vertical divider

layout_structure_regions_guidance1

Horizontal divider

layout_structure_regions_guidance2

Avoid slicing up the interface into too many regions which can cause L shapes. Instead, use whitespace to delineate secondary areas.

避免将界面划分成太多类似 “L” 型的区域。相反的，使用空格来描绘辅助区域。

Do. Use whitespace.

这样做。使用空格

layout_structure_regions_guidance3

Don't. Avoid creating too many regions.

不要这样做。避免创建过多区域

layout_structure_regions_guidance4

Break edges with cards and floating action buttons.

使用 cards（卡片）和 floating action buttons（浮动操作按钮）打破边缘。

Card breaking an edge

layout_structure_regions_guidance5

Floating action button breaking an edge

layout_structure_regions_guidance6

Use cards to organize content when specific behaviors are needed or if groupings of information need more separation than what whitespace or dividers can provide.

当有特殊的行为被需要时，或一组内容需要使用更多的空格和分割时，可以使用 cards（卡片）来组织内容。

Cards

layout_structure_regions_guidance7

Cards

layout_structure_regions_guidance8

Toolbars

Toolbars are versatile and can be used in many different ways.

Toolbars（工具栏）是通用的，并且可以以许多不同的方式使用。

Full-width, default height app bar

全屏宽度，默认高度的 app bar

layout_structure_toolbars1

Full-width, extended height app bar

全屏宽度，扩展高度 app bar

layout_structure_toolbars2

Column-width toolbars at multiple levels of hierarchy

多个层次列宽工具栏，

layout_structure_toolbars3

Flexible toolbar and card toolbar

伸缩的 toolbar 和 card（卡片）工具栏

layout_structure_toolbars4

Floating toolbar

浮动工具栏

layout_structure_toolbars5

Detached toolbar palette

分离工具栏

layout_structure_toolbars6

Bottom toolbar that launches to a shelf and clings to the top of the keyboard or other bottom component

底部工具栏，启动后贴在键盘或其他底部组件的顶部

layout_structure_toolbars7

Bottom toolbar shelf

底部工具层

layout_structure_toolbars8

App bar

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

app bar （应用栏），（以前称为Android中的 action bar（操作栏））是一种特殊类型的工具栏，用于制作品牌，导航，搜索和操作。

The nav icon at the left side of the app bar can be:

app bar（应用栏）左侧的导航图标可以为：

A control to open a navigation drawer.
打开导航栏的控件
An up arrow for navigating upward through your app’s hierarchy.
一个向上的箭头，用于向上浏览应用程序的层次结构
Omitted entirely if no navigation is required from this screen.
完全省略，如果不需要从此屏幕进行导航

The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

应用栏中的标题反映了当前页面。它可以是应用标题，网页标题或网页过滤器。

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.

app bar（应用栏）右侧的图标是与应用相关的操作。菜单图标打开溢出菜单，其中包含辅助操作和菜单项，如帮助，设置和反馈。

App bar structure

On the left: Nav icon, title, and filter icon

左侧：Nav icon，title，filter icon

On the right: Action and menu icons

右侧：action（操作）和 menu icons（菜单图标）

layout_structure_appbar_structure1

Light

layout_structure_appbar_structure2

Dark

layout_structure_appbar_structure3

Colored

layout_structure_appbar_structure4

Transparent

layout_structure_appbar_structure5

Title color

In an app bar, all icons should be the same color.

在 app bar（应用栏）中，所有的图标都应该是一个颜色。

The title can have a distinct color from the icons if increased visual hierarchy is needed. Distinct title colors work best on backgrounds with enough contrast for both white and black glyphs.

如果需要增加可视层次结构，标题可以使用与图标不同的颜色。不同的标题需要在具有足够的白和黑对比度呈现较好的背景上显示效果最好。

Single color (default)

layout_structure_appbar_structure6

Distinct title color

layout_structure_appbar_structure7

Metrics

Default heights:

默认高度

Mobile Landscape: 48dp
Mobile Portrait: 56dp
Tablet/Desktop: 64dp

For extended app bars, the height is equal to the default height plus content increment(s).

对于扩展 app bar（应用栏），高度等于默认高度加上内容增量。

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

layout_structure_appbar_metrics1

The app bar with significantly increased height for prominence

明显增加高度的 app bar（应用栏）

App bar height: 128dp

layout_structure_appbar_metrics3

Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp

layout_structure_appbar_metrics5

Incremental keyline is set by the app bar height, with a height of 64dp, which determines the keyline increment.

Incremental（增量）的关键线设置一般为 app bar（应用栏）的高度，这个应用栏 64dp，就决定着 increment（增量）的关键线也是64dp

App bar left and right content padding: 24dp
App bar icon top and bottom padding: 20dp

layout_structure_appbar_metrics7

Prominent app bar height: 128dp
App bar left and right icon padding: 24dp
App bar left content padding: 80dp

layout_structure_appbar_metrics8

Density

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

当鼠标和键盘是主要输入方法时，测量的单位可以被适当的压缩以适应更密集的布局。

Dense app bar on desktop

App bar height: 48dp
App bar left and right content padding: 24
App bar left content padding: 80dp
Icon height with touch target: 40dp

layout_structure_appbar_metrics7_dense

Dense prominent app bar

密集的突出 app bar（应用栏）

Dense prominent app bar height: 96dp
App bar left and right content padding: 24dp
App bar left content padding: 80dp

layout_structure_appbar_metrics8_dense

Menus

A menu is a temporary sheet of paper that always overlaps the app bar, rather than behaving as an extension of the app bar.

菜单是一张总是与应用栏重叠的临时工作页，而不是作为应用栏的扩展。

Example of an app bar

layout_structure_appbar_menu1

Example of menu in an app bar

layout_structure_appbar_menu2

System bars

Status bar/window bar

On Android, the status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. In a Chrome app, the top bar can disappear, and the window controls are then brought into the app bar.

在 Android 上，状态栏包含通知图标和系统图标。在Chrome上，顶部栏包含窗口控件：最小化，全屏和关闭。在Chrome应用中，顶部栏可以消失，然后窗口控件会进入应用栏。

Android status bar

layout_structure_system_status1

Chrome window bar

layout_structure_system_status2

Metrics:

Android status bar height: 24dp

Chrome window height: 32dp

Android status bar on top of the app bar

layout_structure_system_status3

Chrome window bar on top of the app bar

layout_structure_system_status4

Chrome window controls inside app bar

layout_structure_system_status5

Full screen

Some content is best experienced in full-screen mode, such as videos, games, books, and slides. Full-screen mode increases engagement with content by minimizing visual distraction from controls and protecting users from escaping the app accidentally.

展现某些内容时最好的体验是在全屏模式下，例如视频，游戏，书籍和幻灯片。全屏模式通过最大限度地减少对控件的视觉分散，并保护用户不会意外逃脱应用程序，增加了与内容的互动。

Full-screen mode comes in several types:

全屏模式的几种类型

Lean back
Immersive
Lights Out

Lean back

Lean back mode is best suited to watching content with limited screen interaction, such as a video.

Lean back 模式对与观看在有限的屏幕互动的内容体验最好，例如视频。

Interaction: Touch the screen anywhere to bring back the system bars.

Interaction（互动）：点击屏幕上任意位置，都可以将 system bars（系统菜单）带回来。

Touch the screen anywhere to bring back the system bars

触摸屏幕任何地方显示 system bar（系统栏）

layout_structure_systembars_fullscreen1

Immersive

Immersive mode is best when users need to interact heavily with the screen, such as playing a game or interacting with an image gallery. You may show and hide your app’s controls along with the system bars as needed.

Immersive（沉浸式）模式是当用户需要与屏幕进行大量交互体验最好的，如玩游戏或与图像库交互。您可以根据需要显示和隐藏应用程序的控件以及系统栏。

Interaction: Swipe from any edge of the screen to make the system bars appear. The first time an app goes full-screen, this swipe gesture is explained.

Interaction（互动）：从屏幕的任何边缘滑动，使系统栏出现。首次应用程式全屏幕播放时，系统会说明这个滑动手势。

Edge swipe exception: Apps that use the swipe-from-edge gesture to perform actions should also display the system bars when that gesture is used. For example, a drawing app that uses an edge swipe (such as to draw a line) should also display the system bars semi-transparently for a few seconds any time that gesture occurs.

屏幕边缘滑动异常：使用从边缘滑动手势执行操作的应用时，system bar（系统栏）应该在手势触发的时候显示。例如，在一个绘画应用中使用边缘滑动（例如绘制一条直线）system bar（系统栏）应该在发生手势时半透明地显示几秒钟。

Swipe from the any edge of the screen with a hidden bar to bring back system bars.

从屏幕的任何边缘用隐藏条滑动，显示 system bar（系统栏）。

layout_structure_systembars_fullscreen2

layout_structure_systembars_fullscreen3

Lights Out

In Lights Out mode, the Action Bar and Status Bar fade away and become unavailable after a few seconds of inactivity. The Navigation Bar is still available and responds to touches but appears dimmed.

在 Lights Out 模式下，Action bar（操作栏）和 Status bar（状态栏）会消失，并在几秒钟不活动后变为不可用。navigation bar（导航栏）仍然可用，并响应触摸，但显示为灰色。

Dark status bar

By default, the color of the status or window bar is a darker shade of the app bar color. It can also use color from another element in the layout or be translucent.

默认情况下，Status bar（状态或窗口栏）的颜色是应用栏较深的颜色。它也可以使用布局中另一个元素的颜色或半透明。

Color is based on a sample taken from the content

layout_structure_system_color1

Translucent status bar, 20% Black #000000

layout_structure_system_color2

Dark status bar

layout_structure_system_color3

Status bar color in a darker tone of the app bar color

layout_structure_system_color4

Light status bar

The light status bar, with dark icons, better harmonizes with light content and can be used an alternative to the dark status bar.

Light status bar（较亮状态栏），通常与深色 icon（图标）进行配合，这样显示更佳和谐，但也可以使用深色 status bar（状态栏）代替。

Light status bar color is based on sample taken from content

layout_structure_system_color5

Translucent light status bar, 70% White #FFFFFF

layout_structure_system_color6

Light status bar, default background fill is #E0E0E0

layout_structure_system_color7

Light status bar in darker tone of a light app bar color

layout_structure_system_color8

Android navigation bar

The navigation bar in Android houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier.

Android 中的 navigation bar（导航栏）包含设备导航控件：Back（后退），Home（首页）和 Overview（概述）。它还在 Android 2.3或更早版本的系统上显示应用程序的菜单。

Height: 48dp

高度：48dp

Dark

layout_structure_system_android1

Light

layout_structure_system_android2

Color variants

The navigation bar can be opaque, translucent, or transparent.

The navigation bar（导航栏）可以是不透明的，半透明的或透明的。

Translucent／半透明

layout_structure_system_android3

Translucent over complex image／半透明与复杂的图片结合

layout_structure_system_android4

Transparent／透明

layout_structure_system_android5

Transparent over even-toned image／在色彩均匀上使用透明

layout_structure_system_android6

Chrome OS shelf

The shelf houses the app launcher, application icons, and system settings on Chrome OS.

The shelf（搁架）包含 Chrome操作系统上的应用启动器，应用图标和系统设置。

Height: 56dp

Example of Chrome OS shelf

layout_structure_system_chrome

Side nav

If present, side nav bars can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen.

目前为止，side nav bar（侧导航栏）可以固定为永久显示或临时浮动叠加在其它元素之上显示。侧导航可以位于屏幕的左侧或右侧。

The content appearing in the left nav is ideally navigationor identity-based. Right nav content should be secondary to the main content on a page.

出现在左侧导航中的内容最合适的是显示导航或是关于身份相关的内容。右侧导航一般显示的是主页面上内容的辅助补充。

Structure

Side nav bars may be pinned for permanent display, or they can float temporarily as overlays. Temporary nav drawers overlay the content canvas; whereas pinned nav panels are situated alongside or below the content canvas.

Side nav bar（侧导航栏）可以固定为永久显示，或者它可以作为叠加层临时层进行浮动。Temporary nav drawer（临时导航抽屉）覆盖内容画布; 而固定的导航面板位于内容画布旁边或下面。

Screen size can determine whether a panel is pinned or an overlay. With sufficient space, a panel can be pinned and content adjusted responsively. With insufficient space, a panel has to be an overlay.

屏幕尺寸可以决定面板是否被固定或覆盖。有足够的空间，面板可以固定和内容调整响应。如果空间不足，则面板必须是叠加层。