B端页面设计之表单字段及控件

首先是表单的布局：

表单一般有三种布局可选择使用，分别为单列、双列、自适应布局，布局中所有区块平分显示区域

【1】单列布局

使用场景：希望用户快速填写表单，完成任务时使用

规则：单列整体需要给出一个最小宽度(设计师根据情况自己设定)，若屏幕小到一列都展示不下，出横向滚动条

【2】双列布局

使用场景：适用于表单个数较多的情

规则：双列整体给出最小宽度，若屏幕小到双列展示不下，需要出横向滚动条

【3】自适应布局

使用场景：适用于表单个数非常多，显示区域较大的情况；最多可自适应至4列

当表单宽度达到最小宽度（设计师自己设定，比如230px），页面宽度过短导致表单自适应折行，剩余的宽度平分给其他表单，当自适应到单列都显示不下，会出横向滚动条

举例：

接下来就是表单中常用到的控件：

【一】单行文本

 

 【1】对齐与间距

  

【2】交互状态

  

【3】校验规则

【二】多行文本

【三】整数、小数

【四】下拉单选

【五】下拉多选

【六】平铺单选/多选

【1】平铺单选

1.平铺单选组件，可配置是否有 默认选中项；
2.交互：平铺单选组件，只有一个选中项，点击其他选项时，原选中项取消选中；
3.选项内容过多一行放不下时，换行显示
4.选项宽度默认根据文字自适应，业务可根据自己场景自定义单个选项宽度

可自定义选项

1.选项可以自定义，点击或鼠标经过（可配置）可以弹出某个组；
2.选中自定义选项，自定项高亮，同时其他项取消选中；
3.选中自定义项，然后切换选中其它项，自定义项内容清空，恢复至初试状态；
4.自定义项 可以是 文字内容 或 图标，选项宽度可以自定义；

【2】平铺多选

1.平铺多选组件，可配置是否有 默认选中项；
2.交互：平铺多选组件，可同时选中多个选项；选项交互，点击一次选中，再次点击取消选中；
3.选项内容过多一行放不下时，可换行显示
4.选项宽度默认根据文字自适应，业务可根据自己场景自定义单个选项宽度

【七】日期时间

【八】图片、文件上传

【九】地区、专业等组件

【1】地区单选

【2】地区多选

【3】专业单选

【4】专业多选

【5】学校单选

【6】学校多选

【十】Lookup 组件

 

【1】单选

【2】多选