表单并不是把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了
其实,表单设计远远不止这些,表单本身也是一个小产品,它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型;从表单的产生到表单在页面上如何呈现,再到使用表单时与表单之间的交互,每一步都需要投入大量的思考来做好表单。
后面我会专门有一篇16000 的文章聊聊这个B端产品中比较核心的表单,有兴趣的朋友可以关注一下,大概五月份就会发。
8. 表格
表格在整个B端产品比较常见的,它的地位也是相当重要的,我们在设计表格时需要注意一下几点:
8.1.表格内的文字内容:
一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。(特别注意:金额和操作的标题和内容需要右对齐)
8.2 表格的列数:
默认展示的列数为3-8列,如果需要展示更多列数,则需要优先固定展示重要列,其余的列的内容会以滚动条滑动而展展示出来。
8.3 表格列表的宽度:
宽度的尺寸大小自适应,但需要根据文字的重要性显示,重要文字内容优先完整显示。
8.4 表头每列标题文字字数:
字符不要多,最多可输入8个。如果文字太多,就需要做文字信息精简化。
8.5 滚动条使用场景:
表格内容超过一屏,就需要显示竖向滚动条,注意:表头需要固定,但表格内容可滚动展示。
8.6 表格无内容:
表格的某些单元格无数据内容时,需要用“—”表示,需要区别于“0”。
8.7 表格标题栏和内容栏高度尺寸:
标题栏高度(标准高度为56px);内容栏(标准高度为56px,偏大的标题栏高度为80px),内容区和标题栏水平居中对齐。
8.8 表格内容对齐方式:
列的对齐方式(垂直方向)除了需要始终保持“右对齐”的:金额,最右侧操作列内容外,其他的内容可自行左对齐或右对齐。行的对齐方式(水平方向)
当表格栏的高度尺寸小于80px 时,一般只有一排内容,内容水平需要居中对齐。当表格栏的高度尺寸大于80px时,如果是有两排内容,所有的内容需要顶对齐;但是如果既有一排内容 又有多拍内容的话 ,内容水平则需要居中对齐。
8.9 自适应规则:
表格中的内容,会根据字段的长短定义所占的百分比,完成表格占比,从而达到希望实现的最佳效果。
8.10 滚动条:
滚动条分为横竖两种,当表格内容超过一屏时,就需要显示滚动条。竖向滚动条时, 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时, 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。
9. 反馈
9.1 弱反馈
仅提示用户相关内容,不需要用户做任何交互动作。类似:toast弱提示通知提示等弹窗((一般3-5秒会自动消失:包含普通信息,成功信息,失败信息,警告信息)。