所见即所得创作中的响应式模式
这是一项通过预发布渠道提供的预发布功能。
响应式表单介绍
在当今的多设备世界中，您的表单需要在各种尺寸的屏幕上（从台式机显示器到智能手机）看起来美观且运行良好。通用编辑器中的响应式模式通过让您在创作过程中预览和测试表单在不同设备尺寸下的表现，从而帮助您实现这一目标。
通用编辑器使您能够创建自动适应不同屏幕尺寸的表单，无论使用何种设备都能提供最佳的用户体验。
在不同设备上以响应式模式预览表单
通用编辑器在屏幕的右上角提供了一个? 模拟器 ?图标，该图标允许您预览不同设备尺寸的页面，并测试您的响应式设计行为，以获得更好的用户体验。
要在响应式模式下预览表单：
-
在通用编辑器中打开表单以进行编辑。
-
单击工具栏中的
-
选择设备格式：
- 桌面（默认）
- 平板电脑
- 移动设备
- 自定义（指定宽度和高度）
您还可以使用? 屏幕旋转器 ?图标在平板电脑或移动设备上进行预览时，在纵向和横向之间进行切换。
通用编辑器提供不同的模拟器，以便在各种设备上预览表单。下表列出了可用的模拟器类型，及其相应的设备表示：
布局能力
通用编辑器允许您创建易于使用的表单，可为最终用户提供动态体验。表单布局控制表单中项目或组件的显示方式。
通用编辑器支持以下类型的表单布局：
面板布局
面板布局对于组织相关字段很有帮助，它使得导航和查找相应内容变得更加容易。面板布局将表单组件排列在表单中的不同部分或面板内。
示例： ?工作申请表可能会使用面板将“个人信息”、“教育”、“工作经验”和“推荐人”分成不同的部分。
响应式行为： ?在较小的屏幕上，面板通常垂直堆迭，保持其独特的分组，同时调整到较窄的宽度。
您可以使用面板组件在表单中添加面板布局。有关如何配置面板组件各种属性的详细说明，请参阅面板组件一文。
向导布局
向导布局通过将复杂的表单分解为不同的步骤来帮助简化表单。每个步骤代表该流程的不同部分，用户按顺序浏览各个步骤，期间通常会使用? 前进 ?和? 后退 ?按钮。您可以使用向导布局来创建涉及多个部分或步骤的表单。
示例： ?保险索赔表可能会使用向导来指导用户提供事故详细信息、上传证据、输入个人信息以及审查提交内容。
响应式行为： ?在移动设备上，向导保持逐步推进的方式，但会调整每个步骤中的内容，以适应较窄的屏幕，并且通常会将原本在大屏幕上并排显示的元素堆迭起来。
折迭布局
折迭布局在自适应表单中以可折叠的部分或面板显示内容。当某个部分展开时，它会显示其中的内容，而其他部分则保持折叠状态。这种布局非常适合以紧凑的形式显示大量信息。
示例： ?产物配置表单可能会使用折迭部分来表示“基本选项”、“高级功能”、“配件”和“付款计划”，以便用户一次关注一个方面。
响应式行为： ?折迭布局在移动设备上特别有效，因为它们通过仅显示展开的内容部分自然地节省了垂直空间，使其非常适合较小的屏幕。
您可以使用折迭组件在表单中添加折迭布局。有关如何配置折迭组件各种属性的详细说明，请参阅折迭组件一文。
如何选择合适的布局？
选择合适的布局来优化用户体验和表单功能非常重要。该表可帮助您了解不同的布局选项，并指导您根据特定需求和用例选择最合适的布局：
- 后退：“返回”按钮
- 跳过步骤（可选）
响应式表单的最佳实践
为了确保您的表单在所有设备上提供最佳体验，请遵循以下最佳实践：
-
首先为移动设备进行设计： ?首先设计适用于移动设备的表单，然后针对更大的屏幕进行增强。这种方法可确保核心功能即使在最小的屏幕上也能运行。
-
使用适当的字段类型： ?选择适合触摸设备的字段类型：
- 当有多个选项时，使用下拉菜单而不是单选按钮
- 使用专为触摸输入设计的日期选择器
- 确保按钮和触摸目标至少为 44px x 44px
-
为较小屏幕简化设计：
- 在移动设备上每行显示更少的字段
- 考虑将可选字段隐藏在“显示更多”选项后面
- 在移动设备上将复杂的表单分解为更多步骤
-
彻底测试： ?务必在实际设备上或使用通用编辑器中的模拟器模式测试您的表单，以确保它们在不同屏幕尺寸下都能正常运行。
-
考虑加载时间： ?优化图像大小并尽量减少所需资源，特别是对于连接速度较慢的移动用户。