【UXRen原创】Adaptive UI——Material Design专题分享（18）

非凡回来了，今天讲：

• Breakpoints
• Grid
• Surface behaviors
• Patterns

Material Design响应式设计适应任何屏幕尺寸。这种自适应UI包含以下内容

1. 灵活适应的网格系统确保整个布局的一致性
2. 通过断点确定不同屏幕之间切换重拍
3. 描述UI如何从小屏幕迁移到大屏幕

接下来一一解析这几项内容吧！

一、Breakpoints 断点

通过最佳的用户体验，得出以下宽度的断点，分别对应不同的屏幕

断点指的是屏幕之间的划分区间。

1、480 dp
2、600 dp

—————-600dp分割线————————————————

3、840 dp
4、960 dp
5 、1280 dp
6、1440 dp
7 、1600 dp

这里有一个需要注意的点。

1. 概述（总结）和细节在界面中的展示
   – 小于600dp的屏幕，在屏幕中的内容层次是单一层级的，可以是总结和概述性的内容，也可以是细节内容描述，但不能同时存在。
   – 大于600dp的屏幕，可以在屏幕上同时存在两个层级的内容。网格模式如下：
2. 大屏幕宽度
   超过1600dp的宽度，可以让内容进行堆叠，直到达到最大宽度。
   – 中心对齐
   – 左对齐，内容向右边缘增长
   – 持续增长内容

断点系统描述了栅格宽度和间距在不同屏幕中规格。

请看下表中的值：

二、Grid 网格

Material Design的自适应UI基于12列的网格系统。

在各种布局的灵活设置中，网格列数值基于断点系统进行判断。

12列网格转换演示：

网格系统由 间距和列宽组成，基础方格为8dp的列阵组成这个网格系统。

间距和列宽可以是 8, 16, 24, 40dp的宽度。

间距和列宽不需要一定相等，如下图使用40dp的间距和24dp的列宽：

• 8dp 间距和列宽
• 16dp间距和列宽
• 24dp间距和列宽
• 48dp间距和列宽
• 40dp间距和 24dp列宽

1. Full-with grids:使用流动列和断点改变界面布局
   简单来说就是自适应挤压界面，来适应布局。
2. Centered grids：使用固定列和流动界面改变界面布局
   简单来说就是不改变网格系统列宽，来使用布局

其中的差异看下图：

永久面板，不受自适应系统的挤压。如侧拉导航。

其中有3种方式

1. 临时覆盖，不挤压内容
   
2. 挤压内容和推动内容变化的方式
   
3. 不影响内容，通过再次触摸内容隐藏

三、Surface behaviors 界面行为

这里是这些模式的定义，不好解释，只能心领神会了。

四、Patterns 模式

1. 显示隐藏UI
   
2. 变换模式
   
3. 分层
   
4. 流动变化
   
5. 扩展
   

总结

1.  断点的应用，只要区分不同屏幕尺寸
2. 网格的定义，栅格大小为8 16 24 40 dp同时可以组合应用。
3. 名词定义解析
4. 自适应变化所采用的模式

作者：邬非凡，现互联网交互设计师，崇尚自然设计并将生活情感与设计相结合，目前死磕Material Design 分享和学习。非凡语录“享受生命的过程”   ======================================================================================= 不知不觉本网站已经一岁半了， 在这里小编要感谢那么一如既往支持本站的油茶人。 同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人，如果有意愿在网站发布原创性的文章也欢迎随时和我们联系！我们收到邮件后会认真的查看和回复。 投稿邮箱：
contact@13tech.com.cn =======================================================================================