奥驰厂滨奥驰骋创作中的响应模式
此功能可通过提前访问计划使用。 要请求访问，请将包含您的GitHub组织名称和存储库名称的电子邮件(从您的官方地址发送到aem-forms-ea@adobe.com)。 例如，如果存储库URL为https://github.com/adobe/abc，则组织名称为adobe，存储库名称为abc。
响应式贵辞谤尘蝉介绍
在当今的多设备世界中，从台式机显示器到智能手机，各种大小的屏幕都需要您的表单外观美观且功能良好。 通用编辑器中的响应模式允许您在创作过程中预览和测试跨不同设备大小的表单，从而帮助您实现此目标。
通用编辑器使您能够创建自动适应不同屏幕大小的表单，从而提供最佳用户体验，而不管使用的是什么设备。
在不同设备的响应模式下预览贵辞谤尘蝉
通用编辑器在屏幕的右上角提供了? 模拟器 ?图标，允许您预览不同设备大小的页面，并测试响应式设计的行为，以获得更好的用户体验。
要在响应模式下预览表单，请执行以下操作：
-
在通用编辑器中打开窗体以进行编辑。
-
单击工具栏中显示设备预览符号
-
选择设备格式：
- 桌面（默认）
- 平板电脑
- 移动设备
- 自定义（指定宽度和高度）
在平板电脑或移动设备上预览时，您还可以使用? 屏幕旋转器 ?图标在纵向和横向之间切换。
通用编辑器提供了不同的模拟器来预览各种设备上的表单。 下表列出了可用的模拟器类型及其相应的设备表示形式：
布局功能
通用编辑器允许您创建易于使用的表单，为最终用户提供动态体验。 表单布局控制项或组件在表单中的显示方式。
通用编辑器支持以下类型的表单布局：
面板布局
面板布局有助于以更便于导航和查找相应内容的方式组织相关字段。 面板布局将表单组件排列在表单的不同部分或面板中。
示例： ?工作申请表单可能使用面板将“个人信息”、“教育”、“工作体验”和“引用”分隔为不同的部分。
响应式行为： ?在较小的屏幕上，面板通常垂直栈迭，在调整到较窄的宽度时保持其不同的分组。
您可以使用面板组件在表单中添加面板布局。 有关如何配置面板组件的各种属性的详细说明，请参阅面板组件文章。
向导布局
向导布局可将复杂表单划分为不同的步骤，从而帮助简化该表单。 每个步骤代表流程的不同部分，用户按顺序浏览这些步骤，通常使用? 下一步 ?和? 上一步 ?按钮。 您可以使用向导布局创建包含多个部分或步骤的表单。
示例： ?保险索赔表单可能使用向导引导用户提供事件详细信息、上传证据、输入个人信息和查看提交。
响应行为： ?在移动设备上，向导会保持其分步方式，但会调整每个步骤中的内容以适合较窄的屏幕，通常是将并排显示在较大屏幕上的元素栈迭在一起。
可折迭项布局
折叠布局在自适应表单中以可折叠部分或面板显示内容。 展开某个部分时，会在其中显示内容，而其他部分仍保持折叠状态。 此布局非常适用于以紧凑形式显示大量信息。
示例： ?产物配置表单可能使用“基本选项”、“高级功能”、“附件”和“付款计划”的可折迭项部分，使用户一次只能关注一个方面。
响应式行为： ?折迭面板在移动设备上效果特别好，因为它们仅显示扩展的内容部分，自然会节省垂直空间，非常适合较小的屏幕。
您可以使用折迭组件在表单中添加折叠布局。 有关如何配置折迭组件的各种属性的详细说明，请参阅折迭组件文章。
如何选择正确的布局？
选择正确的布局以优化用户体验和表单功能很重要。 该表可帮助您了解可用的各种布局选项，并指导您根据特定需求和用例选择最合适的布局：
— 后退：“后退”按钮
— 可选跳过步骤
针对响应式贵辞谤尘蝉的最佳实践
要确保您的表单在所有设备上提供最佳体验，请遵循以下最佳实践：
-
首先针对移动设备进行设计： ?首先针对移动设备设计表单，然后针对更大的屏幕进行增强。 此方法可确保核心功能在最小的屏幕上正常工作。
-
使用适当的字段类型： ?选择在触控设备上运行良好的字段类型：
- 当有许多选项时，请使用下拉菜单而不是单选按钮
- 使用为触摸输入而设计的日期选取器
- 确保按钮和触摸目标至少为44px x 44px
-
简化小屏幕：
- 在移动设备上每行显示的字段较少
- 考虑在“显示更多”选项后面隐藏可选字段
- 在移动设备上将复杂表单划分为更多步骤
-
彻底测试： ?始终在实际设备上测试表单，或使用通用编辑器中的模拟器模式测试表单，以确保它们在屏幕大小之间正常运行。
-
考虑加载时间： ?优化图像大小并最小化所需资源，尤其是对于连接速度较慢的移动用户。