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

2019-11-06 11:46

下面请看常见的6个动态布局的变形形式：

相对拉伸

布局特点：相对拉伸的特点是，页面内元素的显示宽度不是固定值，而是通过相对参照物的方式来确定其开始和结束的位置，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。

相对缩放

布局特点：相对缩放的特点是布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。

延伸效果

布局特点：延伸布局的特点是当组件内元素横向布局，元素间的距离是固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。

适应场景：内容呈现型界面，单页面内信息架构扁平，内容元素为单层列表或分组列表结构，如内容门户网站首页面。适配规则：保持页面元素尺寸或间距其中之一不变的情况下，基于屏幕宽度的增加，在横向增加显示更多元素。

挪移效果

布局特点：挪移布局的特点是，布局内的元素根据布局的宽度来选择是上下排布还是左右。

适应场景：应用/页面类型：内容呈现型，单页面内信息架构层级少，如门户网站首页面，内容详情页面等。适配规则：首先判断布局的区域的是否有明显的“宽高特征”，即横纵比是否大于4:3；其次判断横向宽度，是否能容得下若干个元素，如果容得下就左右排布，容不下就上下排布。

重复效果

布局特点：重复布局的特点是，利用屏幕的宽度优势，将相同属性的布局组件（例如：歌单列表，应用列表等），横向并列同时排布。

适应场景：对于内容运营类列表信息，适合在?屏上展示更多内容。适配规则：可以定义单个组件的宽度规则，随着页面宽度的变化，?动计算可以重复的元素的个数。

瀑布效果

布局特点：瀑布布局的特点是，利用屏幕的宽度优势，将原来单列线性纵向排布的布局，拓展变为两列/多列的纵向布局。

适应场景：适合用卡片式呈现内容的场景，通过卡片的横纵扩展在?屏上展示更多内容。适配规则：可以定义单个组件的宽度规则，随着页面宽度的变化，?动计算可以重复的卡片个数。

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

共0条评论，0人参与

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

请输入评论内容...

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

暂无评论

图片新闻