最近接到官网改版的需求，采用响应式设计（界面布局可随着屏幕宽度变化作出相应调整），于是在Material Design的官方文档中，找到Reponsive UI这一节，原文共分4个部分：断点、栅格、表面行为与模式。前3部分正在消化中。。。先将比较容易理解的第4部分-模式翻译出来，与大家分享。
模式
随着屏幕空间增加，可采用以下响应式模式
1、显示
2、变换
3、分离
4、回流（重构）
译者注：响应式设计采用流式布局，回流的意思猜测是重构
5、扩张
6、位置
1、显示
随着屏幕空间的增加，在小屏幕上被隐藏的UI可以显示出来
例1：小屏幕上侧边导航里面的菜单，可以直接显示出来
例2：小屏幕上简单的操作选项，可以更强大而复杂
例3：小屏幕上点击后才能显示的内容，可以在第一层级默认显示
2、变换
UI元素的样式可变换
例1：侧边导航变换成tab
例2：列表变换成网格
例3：菜单项变换成工具栏中的图标
3、分离
层叠的UI可分离并平铺到新的屏幕空间中
例1：侧边导航、列表内容和详情内容分离，在一张视图中显示。译者注：大视图中左侧部分显示侧边导航展开的内容，中间部分的列表显示列表内容，右侧部分显示原先点击才能看到的详情内容。
例2：左侧面板、列表内容与右侧面板分离，在一张视图中显示
例3：tab与tab的内容分离，在一张视图中显示
4、回流（重构）
UI可在大屏幕中重构
例1：单独一列的内容，通过不同的组合形式重构，填充大屏幕中的内容区域
例2：水平形式的tab可重构成垂直形式的列表
例3：基于新的屏幕比例或设备方向，对组件自身进行重构
5、扩张
UI可在大屏幕中扩张
例1：内容卡片可扩张，以填充新的屏幕空间
例2：对话框可按比例扩张或者以具体的增量扩张
6、位置
UI可移动到更合适的位置
例1：小屏幕上的底部动作条可作为一个菜单重新放置
例2：浮动按钮可移动到一个相对其他UI元素更显眼的位置
由于简书不允许放置外链，感兴趣的同学可以在Material Design中的Layout中找到Responsive UI，看了之后如发现翻译欠妥之处，欢迎吐槽，谢谢！
微信公众号：产品小匠
