Material design - Layout- Struct

2016-12-17 本文已影响0人两个朋友指甲

Structure - 结构

UI regions - UI区域

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

【翻译】
有关在z空间中排列元素以实现正确行为和阴影的指导，请参阅环境和高程和阴影部分。

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.

【翻译】
该结构永久包括应用栏和浮动动作按钮。可以添加可选的底部栏用于附加功能或操作溢出。侧导航菜单覆盖所有其他结构元素。

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.

【翻译】
此结构显示具有浮动操作按钮的永久应用栏。应用栏吸收平板电脑和移动底部栏中的元素。可以添加可选的底部栏用于附加功能或操作溢出。边导航覆盖所有其他结构元素。可以临时访问右侧导航菜单或固定以永久显示。

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

【翻译】
平板电脑结构
从左到右：侧导航，应用栏/主工具栏，内容画布（在应用栏/主工具栏下方）和右导航
在底部：底部栏

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.

【翻译】
桌面结构包含一个具有浮动操作按钮的永久应用栏。应用栏吸收平板电脑和移动底部栏中的元素。在可能的情况下，窗口控件被吸收到应用栏中。

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.

【翻译】
侧边导航菜单可占据屏幕大小的整个高度（包括应用栏下方），可临时访问或固定以便永久显示。侧导航菜单以及内容画布可以有自己的辅助工具栏，用于选项卡，选项板或辅助操作。

Desktop structure
Top left to right: App bar/primary toolbar
Second row from left to right: Toolbar, secondary toolbar, and toolbar
Third row from left to right: side nav, content canvas, and right nav
On the bottom: floating action button

【翻译】
桌面结构
从左到右：应用栏/主工具栏
第二行从左到右：工具栏，辅助工具栏和工具栏
第三行从左到右：侧导航，内容画布和右导航
在底部：浮动操作按钮

**UI regions - UI区域 **

Define a primary horizontal or vertical divider.

【翻译】
定义基本的水平或垂直的分割线。

Vertical divider

【翻译】
垂直分割线

Horizontal divider

【翻译】
水平分割器

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.

【翻译】
正确的示范
使用空格

错误的示范

Don't.
Avoid creating too many regions.

【翻译】
错误的示范
避免创建过多的区域。

Break edges with cards and floating action buttons.

【翻译】
卡和浮动行动按钮会打破边缘。

Card breaking an edge

【翻译】
卡片打破边界

Floating action button breaking an edge

【翻译】
浮动行动按钮会打破边缘

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

【翻译】
卡片

Toolbars - 工具栏

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

【翻译】
工具栏是通用的，可以以许多不同的方式使用。

Full-width, default height app bar

【翻译】
全宽度，默认高度应用栏

Full-width, extended height app bar

【翻译】
全宽度，增加高度应用栏

Column-width toolbars at multiple levels of hierarchy

【翻译】
在多个层次级别的列宽工具栏

Flexible toolbar and card toolbar

【翻译】
灵活的工具栏和卡工具栏

Floating toolbar

【翻译】
浮动工具栏

Detached toolbar palette

【翻译】
分离的工具栏调色板

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

【翻译】
底部工具栏，其启动到上并贴在键盘或其他底部组件的顶部

Bottom toolbar shelf

【翻译】
底部工具栏架

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.

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

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

1、A control to open a navigation drawer.
2、An up arrow for navigating upward through your app’s hierarchy.
3、Omitted entirely if no navigation is required from this screen.

【翻译】
应用栏左侧的导航图标可以是：
1、打开导航栏的控件。
2、向上箭头，用于向上浏览应用程序的层次结构。
3、如果不需要从此屏幕导航可以完全省略。

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 structure
On the left: Nav icon, title, and filter icon
On the right: Action and menu icons

【翻译】
应用栏结构
在左侧：导航图标，标题和过滤器图标
右侧：操作和菜单图标

Light

【翻译】
亮色

Dark

【翻译】
暗色

Colored

【翻译】
彩色

Transparent

【翻译】
透明

Title color - 标题颜色

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

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)

【翻译】
单色

Distinct title color

【翻译】
不同的标题颜色

**Metrics - 指标 **
Default heights: - 默认高度
Mobile Landscape: 48dpMobile Portrait: 56dpTablet/Desktop: 64dp
For extended app bars, the height is equal to the default height plus content increment(s).

【翻译】
移动景观：48dp
移动肖像：56dp
平板电脑/桌面：64dp
对于扩展应用栏，高度等于默认高度加上内容增量。

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

【翻译】
应用栏高度：56dp
应用栏左右填充：16dp
应用栏图标顶部，底部，左填充：16dp
应用程序栏标题左填充：72dp

应用栏标题底部填充：20dp

The app bar with significantly increased height for prominence
App bar height: 128dp

【翻译】
应用栏显着增加高度的突出
应用栏高度：128dp

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

【翻译】
响应区高度：56dp
标题区高度：80dp
标题区域底部填充：8dp
描述区域高度：72dp
描述区域底部填充：16dp

Incremental keyline is set by the app bar height, with a height of 64dp, which determines the keyline increment.
App bar left and right content padding: 24dp
App bar icon top and bottom padding: 20dp

【翻译】
增量关键点由应用栏高度设置，高度为64dp，决定关键点增量。
应用栏左右内容填充：24dp
应用栏图标顶部和底部填充：20dp

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

【翻译】
突出的应用栏高度：128dp
应用栏左右图标填充：24dp
应用栏左内容填充：80dp

**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

【翻译】
桌面上的密集应用栏
应用栏高度：48dp
应用栏左右内容填充：24
应用栏左内容填充：80dp
触摸目标的图标高度：40dp

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

【翻译】
密集突出的应用栏
密集突出的应用栏高度：96dp
应用栏左右内容填充：24dp
应用栏左内容填充：80dp

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

【翻译】
应用栏示例

Example of menu in an app bar

【翻译】
应用栏中的菜单示例

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

【翻译】
安卓状态栏

Chrome window bar

【翻译】
chrome 窗口栏

Metrics:
Android status bar height: 24dp
Chrome window height: 32dp

【翻译】
指标：
Android状态栏高度：24dp
Chrome窗口高度：32dp

Android status bar on top of the app bar

【翻译】
Android状态栏位于应用栏顶部

Chrome window bar on top of the app bar

【翻译】
Chrome窗口栏位于应用栏顶部

Chrome window controls inside app bar

【翻译】
Chrome窗口控件位于应用栏内

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.
**Interaction: **Touch the screen anywhere to bring back the system bars.

【翻译】
精益背部模式最适合观看具有有限屏幕互动的内容，例如视频。
互动：在任何地方触摸屏幕，带回系统栏。

Touch the screen anywhere to bring back the system bars

【翻译】
触摸屏幕任何地方带回系统栏

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.
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.
**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.

【翻译】
沉浸式模式是最好的，当用户需要与屏幕进行大量交互，如玩游戏或与图像库交互。您可以根据需要显示和隐藏应用程序的控件以及系统栏。
互动：从屏幕的任何边缘滑动，使系统栏出现。首次应用程式全萤幕播放时，系统会说明这个滑动手势。
边缘滑动异常：使用从边缘滑动手势执行操作的应用程序也应该在使用该手势时显示系统栏。例如，使用边缘滑动（例如绘制线条）的绘图应用程序也应该在发生手势时半透明地显示系统栏几秒钟。

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

【翻译】
使用隐藏栏从屏幕的任意边缘滑动，以返回系统栏。

**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模式下，操作栏和状态栏会消失，并在几秒钟不活动后变为不可用。导航栏仍然可用，并响应触摸，但显示为灰色。

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.

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

Color is based on a sample taken from the content

【翻译】
颜色基于从内容中提取的样本

Translucent status bar, 20% Black #000000

【翻译】
半透明状态栏，20％黑色＃000000

Dark status bar

【翻译】
暗色状态栏

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

【翻译】
状态栏颜色在应用栏颜色较深的色调

**Light status bar - 亮色状态栏 **

The light status bar, with dark icons, better harmonizes with light content and can be used as an alternative to the dark status bar.
亮色状态栏，带有黑色图标，更好地与光线内容协调，并且可以用作黑暗状态栏的替代。

Light status bar color is based on sample taken from content

【翻译】
亮色状态栏颜色基于从内容中获取的样本

Translucent light status bar, 70% White #FFFFFF

【翻译】
半透明亮色状态栏，70％白色#FFFFFF

Light status bar, default background fill is #E0E0E0

【翻译】
亮色状态栏，默认背景填充为＃E0E0E0

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

【翻译】
亮色状态栏在较浅的应用程序栏颜色的色调

**Android navigation bar - Android导航栏 **

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.

Height: 48dp

【翻译】
Android中的导航栏包含设备导航控件：后退，首页和概述。它还显示为Android 2.3或更早版本编写的应用程序的菜单。
身高：48dp

Dark

【翻译】
暗色

Light

【翻译】
亮色

**Color variants - 颜色变体 **

The navigation bar can be opaque, translucent, or transparent.
导航栏可以是不透明的，半透明的或透明的。

Translucent

【翻译】
半透明

Translucent over complex image

【翻译】
半透明复杂的图像

Transparent

【翻译】
透明

Transparent over even-toned image

【翻译】
透明均匀的图像

Chrome OS shelf - Chrome操作系统架

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

Height: 56dp

【翻译】
该搁架包含Chrome操作系统上的应用启动器，应用图标和系统设置。身高：56dp

Example of Chrome OS shelf

【翻译】
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.
The content appearing in the left nav is ideally navigation- or identity-based. Right nav content should be secondary to the main content on a page.
See also Navigation drawer.

【翻译】
如果存在，侧导航栏可以固定为永久显示或临时浮动作为覆盖。侧导航可以位于屏幕的左侧或右侧。
出现在左侧导航中的内容理想地是基于导航或基于身份的。右侧导航内容应该是网页上主要内容的辅助。
参见导航抽屉。

Mobile screen

【翻译】
移动屏幕

Side nav menu

【翻译】
侧导航菜单

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.

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.

【翻译】
侧导航栏可以固定为永久显示，或者它们可以作为叠加层临时浮动。临时导航抽屉覆盖内容画布; 而固定的导航面板位于内容画布旁边或下面。
屏幕尺寸可以确定面板是否被固定或覆盖。有足够的空间，面板可以固定和内容调整响应。如果空间不足，则面板必须是叠加层。

Left nav on mobile

【翻译】
在移动设备上左导航

Right nav on mobile

【翻译】
在移动设备上右键单击

****Metrics - 指标****
Mobile - 移动设备:
Width = *Screen width *− 56 dp
Maximum width: 320dp
Maximum width applies only when using a left nav. When using a right nav, the panel can cover the full width of the screen.
Desktop: Maximum width for a left nav is 400dp. The right nav can vary depending on content.

【翻译】
宽度=屏幕宽度 - 56 dp
最大宽度：320dp
最大宽度仅适用于使用左导航时。使用右导航时，面板可以覆盖屏幕的整个宽度。
桌面：左侧导航栏的最大宽度为400dp。右侧导航可以根据内容而变化。

Left nav on desktop

【翻译】
在桌面上左导航

Right nav on desktop

【翻译】
桌面上的右导航

Whiteframes - 白框

Whiteframes provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows.
For download and other information about whiteframes, seeResources.