美文网首页
Responsive UI

Responsive UI

作者: 一枚设计 | 来源:发表于2017-04-22 00:06 被阅读0次

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

MD中的响应式布局适应任何屏幕尺寸。这份UI指南包括了三方面,保证布局一致的固定网格,在不同的屏幕上保证内容重排的临界点,以及一款APP从小屏幕放大至大屏幕的说明。

Breakpoints(临界点)

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

为了最佳的用户体验,MD用户界面采用了以下宽度的临界点来适应布局设计: 480, 600, 840, 960, 1280, 1440, and 1600dp。

1. Summary and detail view content in layouts(布局中的概要和详情)

Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both).

Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content).

600dp以下宽度只能填充单列内容层级(概要和详情二选一)

600dp以上宽度可以放置两列内容层级(概要或详情皆可)

下面是对比图

2. Max screen widths(最大屏幕尺寸)

Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of the following:

• Become center aligned with increased margins

• Remain left aligned while the right margin grows

• Continue to grow while revealing additional content

超过1600dp宽度可以让布局一直增长至最大宽度。网格可以采取以下操作

• 居中对齐,边距增加。

• 左对齐,右边距增加。

• 保持增长,让额外的内容重现。

• Breakpoint system

These breakpoints describe column and width specifications for different screens, devices, and orientations.

临界点描述了不同屏幕,设备和方向上的分栏和宽度规格。

For some measurements, the values remain the same even if a device is rotated. For that reason the smallest width in either orientation is the defining value.

在有些情况下,设备旋转了,值还是保持一致,因为即使旋转了,规定值还是最小值。

* 16dp when the smallest width of the device is <600(设备最小宽度小于600dp时,采用16dp)

** Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.(  为了适应chrome 浏览器的变更,桌面临界点比列出值小16dp。)

相关文章

  • Material design - Layout - Respo

    Responsive UI - 响应UI Responsive layouts in material desig...

  • Responsive UI

    Responsive layouts in material design adapt to any possib...

  • SAP UI5 SimpleForm M 和 L 型表单的 la

    本文介绍 SAP UI5 Responsive Grid Layout 布局原理。 默认情况下,表单和简单表单的大...

  • GitHub资源汇集(2014.10.07整理)

    js Responsive-Dashboard Bloat free responsive dashboard -...

  • HTML-Responsive Web Design

    responsive[https://www.w3schools.com/html/html_responsive...

  • SAP UI5 Responsive Grid Layout 里

    对于 SAP UI5 SimpleForm 的每种尺寸,我们可以定义用于标签(labelSpanXL、labelS...

  • Responsive测试

    Responsive测试 如何使用Galen进行响应式测试 使用Javascript编写测试代码 完整代码:htt...

  • Responsive设计

    什么是响应式设计呢?维基百科是这样对响应式做的描述:"Responsive设计简单的称为RWD,是精心提供各种设备...

  • Tailwind Responsive

    关键词:响应式设计 首先需要区分下响应式与自适应之间的区别 自适应:一套模板适应所有终端,每种设备上看到的版式都是...

  • Responsive设计

    移动设备正在爆炸性地增长,成为我们日常访问互联网的终端。于是网页设计师不得不面对一个难题:如何才能在大小相同的设备...

网友评论

      本文标题:Responsive UI

      本文链接:https://www.haomeiwen.com/subject/ymqjzttx.html