h5如何让页面宽高随着屏幕大小变化_干货！华为专家解读Mate X折叠屏单页面布局设计...

据Adobe公布的统计数据显示，如果App设计或布局没有吸引力，38%的用户将直接退出。这类统计数字在提醒设计师们，用户体验是头等大事。

凭借简洁、干净、方便的框架，单页面布局最近在设计中非常受欢迎。单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时。

上篇介绍了《华为专家解读折叠屏应用基础体验要求UX设计规范》，为开发者详细讲解了应用基础体验要求。今天的文章，一同来聊聊应用迁移到折叠屏设备时，单页面布局设计中应重点关注哪几种拥有持久生命力且表现优秀的布局方式？

一、界面信息架构及布局设计

关于折叠屏手机，我们不妨先提出一个问题：当智能手机在手机和平板两种形态之间来回切换时，它的交互会是怎样的？在折叠态下，基本系统交互信息架构沿袭了普通手机竖屏的定义。在展开态下，由于屏幕的特殊形态，因此产生了如下主要的场景差异：

• 单页面(布局重排)：屏幕宽度变宽产生了版面布局优化的机会，可以在适当的条件下进行页面版式调整(页面内的元素的位置、大小，同类型数量等发生变化)。

• 组合页面(信息架构重构)：将原先两个或多个页面的内容，合并到一个新页面中以分栏或其他形式呈现出来，形成跨页面的交互，从而在适合的场景下构建出新的页面组合样式和新的用户体验。

• 应用内多任务：给予用户可以并行处理多个任务的能力，由于多任务之间没有深度的关联性，因此，在信息架构上是相互独立的分支，每个任务在形态上应该给予用户充分的操作余地，如进入到多任务状态的时机与交互方式、任务之间的切换，窗口的开启关闭和形式切换等，都应该保持统一的规则。同时，由于多个任务在同屏同时运行，跨窗口之间的信息拖拽和传递也成为了可能。

相对而言，折叠屏的大屏优势能够展示更多的内容，充裕的空间也为探索更多交互可能提供了条件。

二、单页面布局设计

折叠屏展开态下屏幕宽度变宽，为用户提供了高效便捷的使用体验。动态布局是一种针对设备宽度变化而进行界面版面优化重排的有效变化方式，能够提供良好的体验。

1动态布局

动态布局可以细分为“自适应动态布局”以及“响应式动态布局”两类。

1)自适应动态布局

随着屏幕设备规格的变化，界面中所呈现的信息量有增加，但信息架构不变。常见的自适应动态布局的表现形式为：相对拉升，相对缩放，延伸效果等。

2)响应式动态布局

随着屏幕设备规格的变化，页面内的信息架构会发生变化，常见的响应式动态布局的变形形式为：挪移效果，重复效果，瀑布效果等。

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

• 相对拉伸

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

• 相对缩放

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

• 延伸效果

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

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

• 挪移效果

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

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

• 重复效果

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

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

• 瀑布效果

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

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

2栅格布局系统

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

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

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

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

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

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

• 0

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

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

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

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

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

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

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

栅格可以作为辅助布局的一种有效工具，帮助开发者更全面得考虑多设备形态下的屏幕，如果依附栅格制定规则，达到更合理且美观的布局效果。案例1:栅格缩进效果说明：根据人因测试结果显示，为了保证舒适的阅读效果，单行文本的字数不应该过多。中文的单行舒适字数是32个字符左右；最多可接受的是42个字符左右。英文的单行舒适字数是66个字符左右；最多可接受的是87个字符左右。为了保证舒适的阅读性，建议利用栅格定位体现缩进效果。规则：4个columns时使用4个columns；8个columns时使用6个columns；12个column时使用8个columns。

场景：纯段落文本/上图下文/卡片的布局结构的场景，在其对应的栅格规格下，缩进的规则占用栅格数量进行布局。

案例2:栅格重复效果说明：对于内容运营类列表信息，适合在大屏上展示更多内容。规则：应用定义单个组件所占用的栅格数，随着设备尺寸和栅格数量的变化，自动计算新的栅格数量，得出可以重复的元素的个数。

场景：内容运营类信息展示元素。例如(应用市场，音乐等模块)

为保证用户在折叠屏不同形态切换时体验的连续性，是需要在系统交互上做很多设计与考量的。或许大家也都发现了，单页面布局设计中的有些经典布局模式是长盛不衰的，是可以用做很多行业和专业领域的准模板。无论折叠屏设备是折叠还是展开，单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。