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

《系统设计规范(表单、表格)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、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.简单：单输入框，或加上标签筛选

2、；ii.复杂：多输入框，一般只展示一个最常用的输入框，其余的输入框隐藏。2.筛选a.单选框：对于数据筛选没有交叉的情况，同时筛选项少于5项时，我们可以采用展开的形式（单选框，标签的形式，顶部tab等形式）来进行筛选；b.下拉菜单：对于超过5项少于25项的情况，我们可以采用下拉菜单的形式；c.下拉菜单加上模糊搜索，采用实时搜索：对于超过25项的内容，我们可以在下拉菜单加上模糊搜索，采用实时搜索。1.2功能性按钮1.增删改查：要注意区分主次。2.自定义显示列：适用于列较多时，一屏无法显示所有列。1.3表头1.固定行：适用于行较多时，滚动隐藏了表头。2.表头标题尽量简约，表头的UI

3、表现区别于正文，表头标题与数据对齐，完整显示标题。3.表头类别：a.纯文本表头-仅起到解释数据属性的作用、b.多功能表头-可以筛选、排序、搜索相关数据、c.多级表头-信息分类层级较多的情况下使用。1.4表体1.行：a.斑马纹、悬停高亮。b.行高：行高通过数据的密度和一屏显示的行数，来影响用户提取数据的效率。考虑表格的行高时，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑，文字行高可以设定为字号的1.2-1.8倍，文字与分割线间距离可以设定为字号的1-1.5倍。行高因为用户习惯和用户设备的不同，无法满足所有用户的需求，

4、所以对于行高我们可以让用户去选择合适的行高。2.列：a.根据7±2原理，建议最多展示9条列数据，同时少量的列数据也方便用户浏览。建议将重要的列数据居左放置，表格只显示重要的数据，对于次要的数据可以放入详情页。b.列宽：1.数据长度固定时，一般显示完整数据，具有固定的列宽，比如手机号可以设置150px；2.数据长度不固定时，首先我们应该了解用户的输入内容的情况，比如用户个性签名，我们设置了200字符，但是经过数据分析，发现大多用户的签名长度少于20，那我们可以设置列宽为20，从而保证大多数数据的完整；3.较少情况下，我们设置的数据不能完整的显示数据，但是数据对于用户有比较的重要

5、。那我们可以让用户手动拖拽调整列宽（不影响别的列宽，可能会出现横向滑动的情况）。3.布局：a.垂直布局—弱化了行，强化了列，用于行与行之间的数据对比，一般用于数据统计；b.水平布局—强化了行，弱化了列，符合阅读从左往右的顺序，强调信息的连贯性，多用于多数据的情况，使用较为广泛；c.矩形布局—每个数据被分割，适用于数据过多，没有足够的空间来区分数据的情况。4.对齐：表头数据对齐，文字左对齐，金额右对齐，固定操作按钮居中。5.显示：a.在一个单元格数据显示不完整时，我们可以截断数据以…暗示数据的不完整。对于截断数据的展示，我们可以使用气泡弹窗的形式（查看灵活，操作成本低，但是影响

6、查看其他内容）或者是下拉查看（适合查看较多的内容，不会影响查看其他内容，操作成本高）。b.告警显示1.5底栏分页器或加载更多。2表单规范1.1标签对齐方式（左对齐、右对齐、顶部对齐）。可以考虑不用*表示是否必选和可选字段。1.2输入框默认值”和“输入提醒”。如果少于6个，那么显示出所有的选择项。1.3动作主次分明。使用号召性用语（CTA）作为描述。1.4帮助文字短文字直接显示，长文字设置气泡隐藏。1.5错误与提示①错误位置与原因提示，②屏幕外多条错误，错误信息顶部提示1.6信息的组相关几条建议1、文字慎用红色，红色寓意出错、报警、失败、超额等状况。一般提示、说明、帮助信息建议

7、不要使用红色字体。