产品经理 - PC端的表单在移动端的展示该怎么设计？

Question

PC布局横向的，放的字段很多。手机是竖向的，展示不了几个字段。如果竖向展示数据，类似卡片式那样，展示的字段多了 一页下来也看不了几条。

Answer 1

在将PC端的表单设计适配到移动端时，需要考虑屏幕尺寸较小的限制以及用户在移动设备上的使用习惯。以下是一些移动端表单设计的常见方法：

响应式设计： 如果可能的话，可以考虑使用响应式设计，即在同一个页面上，根据设备的屏幕尺寸和方向，调整表单的布局和显示方式。这样可以在大屏幕上保持横向布局，而在小屏幕上切换为竖向布局。

步骤式表单： 将表单拆分为多个步骤或多个页面。在移动端上，通过步骤导航，让用户逐步填写表单内容。这样每个步骤或页面只展示少量字段，提高了用户的可视区域。

手风琴式表单： 将表单字段以手风琴（Accordion）的形式展开和收缩。默认情况下，只显示表单的标题或字段概要，用户可以选择展开感兴趣的字段填写。这样可以节省屏幕空间，只显示用户关心的部分。

折叠式表单： 类似手风琴式表单，但是展示方式更灵活，可以根据用户的操作状态自动折叠或展开相关字段。当用户填写一个字段时，相关的字段才会显示出来。

模态框式表单： 在移动端上，可以使用模态框（Modal）或弹出框的形式展示表单内容。当用户需要填写表单时，通过弹出框的方式覆盖在当前页面上，填写完毕后关闭弹窗。

卡片式表单： 将表单字段以卡片的形式排列，并且在水平方向滚动显示。这样可以在有限的屏幕空间内展示更多字段，用户可以左右滑动查看全部字段。

优先级排序： 对表单字段进行优先级排序，将重要的字段放在前面，不太重要的字段放在后面。在移动端上，优先展示重要字段，用户可以选择展开更多字段填写。

默认值和自动填充： 在移动端上，尽可能为表单字段提供默认值或自动填充选项。这样可以减少用户的输入量，提高填写效率。

根据具体的业务需求和表单内容，你可以选择适合的方法或将多种方法组合使用，来优化在移动端上的表单展示和填写体验。重要的是要确保用户能够轻松地在移动设备上完成表单填写，并且不会因为表单的复杂性而感到困扰。