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

IT之家 中字

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

相对拉伸

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

相对缩放

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

延伸效果

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

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

挪移效果

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

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

重复效果

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

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

瀑布效果

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

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

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

下载OFweek,一手掌握高科技全行业资讯

还不是OFweek会员,马上注册
打开app,查看更多精彩资讯 >
  • 长按识别二维码
  • 进入OFweek阅读全文
长按图片进行保存