页面框架指的是承载着整个表单页的页面框架

这里得页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。[2]

• 整页式：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。
• 弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。
• 侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

以上这些就是常见的表单页面框架，我们在考虑采用何种样式时需要综合以下几个因素考虑：

• 内容多少 —— 内容较多不适合使用弹窗式
• 与原页面关系强度 —— 需与原页面保留强关联建议使用弹窗式、侧边栏式
• 表单内容区复杂程度 —— 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。

2. 确定【表单内容区布局】

如上图所示，一个正常的表单内容区主要有：标题区、二级导航区、主内容区

1）其中标题区是必须要有的，标题区可以让用户快速明白该表单是需要收集什么内容

2）二级导航可以根据业务需要进行配置

3）主内容区则是表单填写的主区域，通常我们直接将这个区域称之为“表单内容区”，该区域布局样式可以分为三种：

1. 通栏式，即：在页面中居中显示，从上到下直接平铺控件颗粒。
2. 左右式，即：在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏（如：流程节点展示）。
3. 左中右式，即：分别在表单域内容区左侧放置导航栏，右侧放置辅助信息栏。

以上三种样式就是常见的表单内容区的布局，采用哪种布局，可以综合以下几个因素考虑：

• 内容多少——如果内容很多导致页面很长，则可以考虑将内容分类，作为左侧导航栏，采用左右式布局。
• 内容类型——导航作用内容必须放置左侧（有些分步骤的表单也会将步骤条放置左侧），而辅助信息的内容建议放在右侧（因为人眼浏览习惯都是从 左 > 右，所以信息重要度建议按照该视线路径放置）

3. 确定【表单内容排列方式】

在该步骤中，主要确定表单内容区控件颗粒的排列方式：单列布局 or 多列布局

• 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上>下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。
• 多列布局的表单会导致用户的视觉路径变长，用户需以 Z 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。
• 但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件颗粒来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

so 根据单列布局、多列布局的优劣势，结合实际业务需要来选择：

【单列布局】

• 优：视觉路径清晰，填写效率高，体验好；
• 劣：占用纵向空间。

【多列布局】

• 优：省空间，能够放置更多的控件颗粒；
• 劣：视觉路径模糊，填写成本高，填写易出错。

在这个环节中，除了需要考虑单列式布局还是多列式布局，还有一个也是需要全盘考虑的——【标签的对齐方式】

在设计时，到底是采用左对齐、右对齐还是顶部对齐呢？