很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
在后台系统、数据类产品、B端产品中，表格作为最常用的一种数据整理的组件，其重要性不用过多赘述。但如何更好的设计表格呢？想必多数刚接触 B 端的设计师都有过这个困扰。
今天，我给大家整理了一份关于表格的攻略，希望能帮到你。
表格是一种数据可视化的一种形式，可以查看和处理大量数据，它主要承载了数据的收集、整理、组织、展示、对比和归纳。
表格的层级一定要划分的非常清晰，层级分明。你要让用户更关注的是数据本身，而不是花里胡哨的样式。
列表以易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息。
表格要用最短的时间告诉用户想要得到的信息。
可以让用户根据自己的习惯及兴趣自定义自己的表格展示，比如排序、筛选、调整表头顺序等功能。
外部区域：标题、操作区、筛选区；
内部区域：表头、表体、表尾。
介绍完表格的构成，我们再来把每一个元素拆解出来详细介绍。
标题是整个表格内容概述的名称，此名称尽量简洁明了，不要太长，能两个字写清楚绝对不用三个字。
如果标题名称难以理解的话，可以加二级提示，有两种常用样式：tooltips（常用）、二级提示语。
标题的位置一般在左上角。
对表格内容的增删改等操作的区域。
使用建议：
4.2.1 有且只有一个主操作
特殊情况下可以没有主操作，但不能有两个主操作。
4.2.2 样式统一
同一个产品中，操作区样式规范要保持一致。
4.2.3 操作的优先级
根据使用的优先级，把常用的操作放到一级展示，不常用的收到二级展示。
4.2.4 不同操作状态区分要明确
不是所有的操作都是可以直接用的，比如有的操作在没有选择内容的时候是 Disable 状态，那这时候就要和其他可操作的有明显的样式区别，否则容易让用户分不清可不可以操作。
4.2.5 刷新按钮
有很多同学对这个操作是不是有些疑惑？有人觉得浏览器都有刷新功能啊，干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的，这个刷新只针对于列表内的内容。
在有的后台管理界面中，因为数据量很大，如果每次刷新都用浏览器自带刷新的话，他会重新加载整个页面的内容，很不好用。很多情况下，用户只想重新加载一下列表的内容，那这个刷新就很好用啦。
同时刷新后要有即时反馈，告诉用你他点完操作后目前处于哪个阶段中。
4.2.6 导出功能
此功能可以把列表内容导出为你想要的格式（一般为 word / pdf）。
数据量较大的列表中，导出功能可以很方便的把自己过滤的内容下载到本地进行其他需求的查看。
导出内容的范围是哪些一定要事先想好，一般下载内容的范围以下几种：
当前页所有列表内容（常用，而且实现难度很低）；
经过二次过滤后，导出所有页上的列表内容；
所有页的列表内容（不常用，而且实现及数据处理难度会非常大，慎重选择）。
4.2.7 导入功能
既然可以导出，就有导入。导入报表对文档会有要求，一般都是固定格式的文档，而且文档与列表中的字段都可以一一对应上，才可以完美导入。导入功能中 word 和 excel 是最常用的格式。需要注意的是，导入文档后最好有二次确认提示，告诉用户上传了哪些内容，同时该内容是否与现有的列表字段有冲突。
5.2.8 自定义内容
自定义分两种：
可以设置某列内容是否展示（需要注意的是：列内容展示数量可以不设置上限，但必须设置下限）；
可以设置每一列内容的左右排序。
如果表格内容比较多的情况下，这两个功能是很有必要的，如果内容少，则可忽略这两个功能。
那怎么区分内容的多与少呢？
我的理解：常用分辨率下，一屏可显示完整内容的话为内容少；反之则内容多。
可以快速切换不同维度下的表格内容。
使用建议：
不同状态区分要明显；
Tab 数量不宜过多，如果不可避免的数量过多的话，一般有两种方案：
最多显示出 5 个 Tab，超过 5 个 Tab 放在“更多里面”；
交互上支持左右滑动 / 切换 Tab。
Tab 只放文本，最多可以放个 icon，尽量避免其他干扰信息；
Tab 信息要精简。
筛选区是对表格数据的主观再处理，用户根据筛选功能可以得到更精准的信息。
4.4.1 搜索功能：
4.4.1.1 模糊搜索 or 精准收缩
搜索首先要确定哪几个字段可以被搜索到，名称？编号？等等...
模糊搜索使用的频率居多，毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的，两者皆可选择，根据产品选择即可。
4.4.1.2 单字段搜索
输入单字段进行搜索，比较常用的方式之一。
4.4.1.3 多字段组合搜索
可以输入多个字段进行组合搜索（取并集），一般交互方式为回车完成书写。此方式比单字段搜索更加精准，数据量过大的时候优势就很明显了。
4.4.1.4 切换类别搜索
可以设置几个常用的类别来快速切换搜索的维度，方便用户使用。
4.4.1.5 多类别组合搜索
多类别组合搜索适合更加复杂的列表内容，并且类别名称会展示出来，可以比较清晰的看到用户用的哪种类别名进行搜索的。
4.4.2 筛选的样式
输入框、下拉选择、日期选择器、单选、多选。
每一列列表的小标题，是对整列内容的描述。
表头区域比较常用的几个功能：排序、过滤、进一步解释/说明、拖拽排序、拖拽增加 / 缩小列宽。
表体承载了表格的主要内容，它的内容形式有很多：文本、icon、进度条、标签等等。表体样式分为两种：斑马线和线条分割。
使用建议：
内容决定表格的高度，一般设置 2~3 种行高就可以满足大部分场景了；
把全局唯一且最重要的字段放在第一列，比如：名称。同时可以把名称固定在列表左侧，就算列表横向内容过多的时候，也可以第一时间看出区别；
要设置最大宽度和最大高度，避免特殊情况下的内容展示；
对齐方式：普通文本左对齐，数字类右对齐（记住就行，这是规范）；
最多支持二级列表，不可再多；
可以把一些常用的操作放出来，放在列表最后一列。
表尾主要是展示表格的统计信息、分页、跳转页面等。每页显示条数常规情况下默认为 10/页，最多 200/页，再多的话加载速度会变慢，影响使用体验。
模态对话框：用户在当前页面弹出一个弹窗，除此弹窗内容外不可操作其他区域内容，产品的主观意识较强。
非模态对话框：也是弹出个弹窗，但是与模态对话框不同的是它不打扰其他用户操作，此弹窗存在的时候，用户同时也可以操作其他区域，产品的主观意识较弱。
抽屉现在使用的频率也是蛮高的，它的好处很明显：在当前页面弹出个抽屉，可展示的内容区域比弹窗多了很多，同时如果区域不够用的话，还可以增加 Tab 来展示更多信息。而且不同资源的抽屉切换也比较方便。
缺点就是：并不能完全让用户的聚焦于某个信息的详情，存在一定程度的信息干扰。
直接跳转个新页面作为详情，好处就是可以展示更多的内容信息以及可以让用户更聚焦于当前内容。
缺点就是：新开页面这种操作本身就比较重，如果在当前页面可解决的事情，切记不要让用户新开页面。
嵌套就是上面提到的二级列表，它一般用于一级列表的内容补充，并且内容不宜过多。
在数据可视化中，表格是最常见的一种，它的知识点有很多，本篇文章只是到目前为止我的一些认知，如果有漏掉的知识点欢迎指教，我们都是学生，都要学习。
如果你有疑惑，欢迎留言叨扰。
-END-
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)