干货！华为专家解读Mate X折叠屏单页面布局设计

2019-11-06 11:46

2栅格布局系统

栅格设计系统是一套能够适配不同屏幕尺寸和屏幕朝向的响应式布局的基础设计机制，它可以确保跨设备的一致性。

栅格设计系统有 ?Columns，?Gutters，?Margins三个基本属性。

Columns，即栅格，是用来辅助布局的主要定位工具，不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下，根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。

Gutters是用来控制元素和元素之间的距离关系，可以根据设备的不同尺寸，定义不同的Gutters值作为断点系统中的统一规范。为了保证较好的视觉效果，Gutters通常的取值不会大于Margins的取值。

Margins是用来控制元素距离屏幕最边缘的距离关系，可以根据设备的不同尺寸，定义不同的Margin值作为断点系统中的统一规范。

栅格系统定义了不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。栅格系统以水平dp值作为断点依据，不用的设备根据自身当前水平宽度dp值在不同的断点范围内的情况，显示不同数量的栅格数:

0<水平dp<320时：2 Columns栅格；

320<=水平dp<600时：4Columns栅格；

600<=水平dp<840时：8Columns栅格；

840<=水平dp时：12Columns栅格；

总的来说，栅格设计系统具有如下优势：

给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。

给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。

给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。

栅格可以作为辅助布局的一种有效工具，帮助开发者更全面得考虑多设备形态下的屏幕，如果依附栅格制定规则，达到更合理且美观的布局效果。

声明： 本文由入驻维科号的作者撰写，观点仅代表作者本人，不代表OFweek立场。如有侵权或其他问题，请联系举报。

共0条评论，0人参与

登录登录即可访问所有OFweek服务

请输入评论内容...

请输入评论/评论长度6~500个字

暂无评论

图片新闻