最近接到官网改版的需求，采用响应式设计（界面布局可随着屏幕宽度变化作出相应调整），于是在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，看了之后如发现翻译欠妥之处，欢迎吐槽，谢谢！

微信公众号：产品小匠

关键字：设计, UI设计, 设计文章

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！