系统设计规范(表单、表格)

1 表格规范1.1 搜索/筛选区域1.2 功能性按钮1.3 表头1.4 表体1.5 底栏2 表单规范1.1 标签1.2 输入框1.3 动作1.4 帮助文字1.5 错误与提示1.6 信息的组相关几条建议1 表格规范1.1 搜索/筛选区域1. 搜索a. 精确 or 模糊搜索i. 精确：适用于内容相似度很高、数据个性化较强；ii. 模糊：常用，可减轻用户记忆负担。b. 实时 or 点击搜索i. 实时：指的时在用户输入数据时便进行数据的搜索，具有搜索快速，搜索结果实时显示的好处，但是仅适用于小数据搜索；ii. 点击：指的是在输入数据后，需要点击按钮才能进行搜索，该搜索方式适用性强。c. 简单 or 复杂搜索i. 简单：单输入框，或加上标签筛选；ii. 复杂：多输入框，一般只展示一个最常用的输入框，其余的输入框隐藏。2. 筛选a. 单选框：对于数据筛选没有交叉的情况，同时筛选项少于5项时，我们可以采用展开的形式（单选框，标签的形式，顶部tab等形式）来进行筛选；b. 下拉菜单：对于超过5项少于25项的情况，我们可以采用下拉菜单的形式；c. 下拉菜单加上模糊搜索，采用实时搜索：对于超过25项的内容，我们可以在下拉菜单加上模糊搜索，采用实时搜索。1.2 功能性按钮1. 增删改查：要注意区分主次。2. 自定义显示列：适用于列较多时，一屏无法显示所有列。1.3 表头1. 固定行：适用于行较多时，滚动隐藏了表头。2. 表头标题尽量简约，表头的UI表现区别于正文，表头标题与数据对齐，完整显示标题。3. 表头类别：a. 纯文本表头-仅起到解释数据属性的作用、b. 多功能表头-可以筛选、排序、搜索相关数据、c. 多级表头-信息分类层级较多的情况下使用。1.4 表体1. 行：a. 斑马纹、悬停高亮。b. 行高：行高通过数据的密度和一屏显示的行数，来影响用户提取数据的效率。考虑表格的行高时，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑，文字行高可以设定为字号的1.2-1.8倍，文字与分割线间距离可以设定为字号的1-1.5倍。行高因为用户习惯和用户设备的不同，无法满足所有用户的需求，所以对于行高我们可以让用户去选择合适的行高。2. 列：a. 根据7±2原理，建议最多展示9条列数据，同时少量的列数据也方便用户浏览。建议将重要的列数据居左放置，表格只显示重要的数据，对于次要的数据可以放入详情页。b. 列宽：1. 数据长度固定时，一般显示完整数据，具有固定的列宽，比如手机号可以设置150px；2. 数据长度不固定时，首先我们应该了解用户的输入内容的情况，比如用户个性签名，我们设置了200字符，但是经过数据分析，发现大多用户的签名长度少于20，那我们可以设置列宽为20，从而保证大多数数据的完整；3. 较少情况下，我们设置的数据不能完整的显示数据，但是数据对于用户有比较的重要。那我们可以让用户手动拖拽调整列宽（不影响别的列宽，可能会出现横向滑动的情况）。3. 布局：a. 垂直布局—弱化了行，强化了列，用于行与行之间的数据对比，一般用于数据统计；b. 水平布局—强化了行，弱化了列，符合阅读从左往右的顺序，强调信息的连贯性，多用于多数据的情况，使用较为广泛；c. 矩形布局—每个数据被分割，适用于数据过多，没有足够的空间来区分数据的情况。4. 对齐：表头数据对齐，文字左对齐，金额右对齐，固定操作按钮居中。5. 显示：a. 在一个单元格数据显示不完整时，我们可以截断数据以…暗示数据的不完整。对于截断数据的展示，我们可以使用气泡弹窗的形式（查看灵活，操作成本低，但是影响查看其他内容）或者是下拉查看（适合查看较多的内容，不会影响查看其他内容，操作成本高）。b. 告警显示1.5 底栏  分页器或加载更多。2 表单规范1.1 标签对齐方式（左对齐、右对齐、顶部对齐）。可以考虑不用*表示是否必选和可选字段。1.2 输入框默认值”和“输入提醒”。如果少于6个，那么显示出所有的选择项。1.3 动作主次分明。使用号召性用语（CTA）作为描述。1.4 帮助文字短文字直接显示，长文字设置气泡隐藏。1.5 错误与提示①错误位置与原因提示，②屏幕外多条错误，错误信息顶部提示1.6 信息的组相关几条建议1、文字慎用红色，红色寓意出错、报警、失败、超额等状况。一般提示、说明、帮助信息建议不要使用红色字体。