数字生活小程序-文档中心

数字生活小程序基本适配原则

C端屏幕尺寸相对于移动端具有更大的内容展示空间和展现优势，例如可同时开启多个窗口、窗口可拖动、窗口可切换成不同尺寸等。为了提高屏幕利用率，将屏幕变大带来的体验增值最大化，在适配过程中有如下体验原则：

小程序视图尺寸切换后，要保证新视图下的所有信息均完整可读，不能出现信息形态变化、缺失、分辨率下降等问题变化。

放大小程序视图后，可以展示更多信息；视图切换过程应流畅友好，可采用适当手段对小程序布局进行优化

适配设计规则：页面固定显示高度，宽度非固定值；当显示尺寸发生变化时，元素的显示宽度随之改变。

页面布局特点：页面内元素水平拉伸至屏幕尺寸合适的区域。常用于结构简单的页面，例如文本列表等。

开发适配规则：布局区域的横向宽度若能容纳若干元素就使用左右排布，否则使用上下排布。

页面布局特点：将页面元素根据布局宽度来选择由上下、左右排布。常用于信息架构层级较少的内容呈现型页面，例如内容详情页等。

开发适配规则：保持页面元素尺寸或间距其中之一不变的前提下，基于布局区域的横向宽度，在横向增加更多元素。

页面布局特点：将页面元素重复延伸至相对屏幕尺寸合适的区域。常用于模块结构固定，且模块内布局简单有序的页面，例如卡片瀑布流等。

开发适配规则：可定义单个组件的宽度规则，随布局区域横向宽度的变化，自动计算可重复的元素个数。

页面布局特点：利用屏幕宽度优势，将相同属性的布局组件，横向并列排布。常用于信息架构层级较少的内容呈现型页面，例如歌单、应用列表等。

开发适配规则：设定每栏最小宽度，依据布局区域的横向宽度，判断能容纳层级数量，展现可呈现的栏数

页面布局特点：将页面分为多栏，分区域展示各模块内容。分栏具有明显主从关系，从属部分依赖于主导部分存在。常用于层级结构明确，且分栏展示不影响信息获取的页面，例如工具类应用，左侧为母菜单，中间为子菜单，右侧为内容详情。

开发适配规则：确定主模块显示最大值与固定位置，从属模块随布局区域横向宽度的变化，围绕主模块自动计算可呈现模式。

页面布局特点：将页面分为多个功能模块，确定主模块后，从属模块围绕主模块布局。常用于页面内存在多个功能模块情况，其中有且只有 1 个主模块，例如内容详情页等

开发适配规则：设定页面断点宽度，超过断点尺寸，主模块变化成页面侧边栏，从属模块依据布局区域的宽度自动计算可呈现信息量。

页面布局特点：页面中存在明显主从关系，主模块为导航模块，在大尺寸下主模块可使用侧边栏形式显示，使页面同时能快速浏览或操作主从模块