很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
Halo，这里是设计夹，今天分享的是「b端表格」。
表格作为B端常见且重要的要素之一，能把大量的数据整合起来查看、对比和操作，本篇文章从实际出发，挖掘更多视觉、体验的提升方案。
一个内容丰富的表格通常包含筛选区、标题栏、表格区域和分页栏(图片来、源于ant design5.0组件库的protable)
① 筛选区
主要针对表格数据有条件的查询，常用筛选的方式有搜索框填写、从下拉列表中选择等。
② 标题栏
表明表格的内容主题，比较醒目，一般放在左侧。如有需要可以在右边添加切换table或搜索框作为筛选条件 。
③ 表格区域
包括表头和数据区，用于数据查看，根据需要在末尾列有对应单列的操作。
④ 分页栏
分页展示筛选后总数据量和总页数，也可以选择显示的项目数和每页的跳转页数。样式和内容都比较固定，不是所有的表都有。
以下内容说明：在表格这个大组件中，筛选区域和表格主体有很多变化，本次主要说一下表格区域的各种玩法。
① 作用
表头起到分类的作用，展示这一列的信息主题是什么。
② 视觉样式
大部分地表头相对内容行会偏矮一些，有时为了能突出数据还会缩小表头的文字大小，表头的背景颜色按需选择。
③ 内容分类
当表格表头只有文字时，则只是基础分类作用；
如果想强调标题，特别是信息分类差别不大(如多列都是同一个范围的数字数据)和列数较多的情况，背景色相对于单元格更深一些，文字也会加粗加黑；
如果想弱化标题，则使用白底，文字颜色与单元格一致或更浅，风格简约且更关注内容，内容的样式可以更加丰富，常见于国外的设计中。
需要注意的是，有的标题除了主题文字还会加上单位，尤其是数字数据列，会加上如百分比、万等单位，使数字数据理解更加准确。
解释：在文字的任意一侧有一个感叹号/问号图标，当鼠标移动到相应位置时，会弹出气泡弹窗，解释表头的标题；
排序：一般在左侧或右侧放置一个上下箭头的图标，用于按数字和字母的升序或降序对本栏内的字段进行排序，这也是常见的排序方式。如下图的“创建人”标题是按照英文字母顺序排列的；
筛选：针对比较复杂的情况，添加筛选图标，补充或替换筛选条件，减少筛选条件的空间；对于更复杂的情况两者都有。与筛选一样，使用气泡弹窗承载选项(如下图所示)。由于不是本次的重点，这里不深入讨论。
还有比较少见，在excel表格类型中出现过，用于收集或统计大量数据的趣味表格，让分类更加清晰，也避免视觉疲劳。
④ 特殊情况
如果表格涉及多选操作，在表头最前会有一个全选的按钮，一列都样式一致，点击后则下面所有行最前面的按钮都会点选，即表示选择当前表格页所有行(如上图)；
如果表格最后列是操作按钮，则表头部分可以省略文字或者显示为“操作区” 。
数据区
① 作用
承载着表格数据主体，是需要进行阅读，也是决定下一步的操作的依据，如常见的查看详情(这里主要讨论单组表格的情况)。
② 设计原则
主要是高效阅读，下面将从两个方面进行详述：
减少视觉干扰
a. 表格框线
表格框线的粗细深浅会影响到阅读效率。一般没有竖线，横线则使用更细、浅的线条才不会影响阅读(下图ant design组件中框线设置为1px，#F0F0F0)。
b. 背景颜色
静态通常为白色，只有内容较多的表格才需要斑马线(一行深一行浅的颜色)；
当选择一行时，背景颜色也会变深，这里的背景色可以是浅灰色、浅蓝色或者低透明度的品牌色(上图中ant design组件中选择的背景色是#FAFAFA，比框线稍浅）。
c. 文字 (普通文字)
除表头外，表中普通文本的大小和颜色均相同(采用系统的普通文本格式，参考上图中的ant design为14px，#1F1F1F）；
注意1：如果内容中没有数据则填写0，如果没有内容则使用- ，尽量不要留空，这样会让人误以为还没有加载好；遇到日期、手机号码等时，使用相同的格式，不仅表格最好同一页面的层级保持一致；
注意2：由于表格宽度有限，有可能存在文字换行的情况，根据需要，可以选择固定最大字数+省略号(气泡显示)或采用水平滑动(需要固定操作栏)，尽量不要选择换行的形式，这样会影响阅读效率并且浪费纵向空间 。
加强重点突出
a. 文字 (偏功能)
无操作但使用强调色的文字：通用用于一些需突出文本内容的场景，尤其是和金额相关的数据，如增长和减少数据，注意国内使用红色代表涨、绿色代表跌，国外则相反。
标签文字：以标签的形式出现，通常一个标签是一个词组，常用于有固定文字描述的表格项中。图中的处理中、待开发，颜色选取了不同色相，一目了然。还有一种特殊的情况，为了与列表的常规内容区别，改变了文本内容的颜色并添加了背景色，比如图中最后一列的时间警示。
链接/操作文字：前者是点击跳转到相关文字的详情页，后者是文字按钮进行击相应的操作，比如删除、详情一般使用采用蓝链接(偶尔使用品牌色，特别是品牌颜色也是蓝色)。
b. 图标/按钮
按钮通常以文本、图标、文本+图标形式出现，表格中的图标大部分也以按钮的形式存在。
图标本身也多选用基础常见图形，如说明的问号、警示的感叹号、成功的打勾，颜色也符合普遍认知(红绿灯配色)。
展现方式-外显：适合强调视觉的场景，尤其是高频操作，如图所示，信息质量一栏的图标(符号化强调)、最后一栏的操作(高频操作)；
展现方式-隐藏：只有当鼠标移到相应位置(对应表格项)才出现，一般用作操作按钮，比如图中的编辑图标(库存一列、选中行的数字旁)。
分类：
如果是对整行进行操作，则放在最后一列，如果是对单元格/单项进行操作，一般放在文字后面(参考上图)；
注意当操作项目较多时，根据情况选择方案，如果宽度足够且选项较少，可以直接平铺；如果选项较多，可以选择折叠低频项、全部折叠，或者直接将操作放入根据操作频率点击跳转的详情页中。
c. 图表
属于数据可视化的范畴，也是高效阅读的重要手段。用的较多的是横向环形图、条形图、堆叠条形图等；
特点是直观清晰，用于流程进度、比例等场景，使用时根据图表本身适用场景而定。
③ 案例解析
根据最近的一个实际案例讲解，需求是对展示审批的进度列视觉强化，进度项为：待提交、审批中、审批完成、审批退回，当时完成如下方案并进行思考：
方案(一)小圆点：视觉效果最弱，不容易影响表格整体的阅读，需要使用不同色相的颜色进行区分，需要搭配文字，适合用于表格内容较多的场景；
方案(二)进度环：灵感来源于Xmind里面的任务标记，可以用一个或多个颜色，更直观，适合表格内容较少、有流程的场景；
方案(三)图标+标签：视觉效果最强，属于方案一的加强版，适合表格已有多种强调样式、且此列需强突出的场景。
由于是整体风格比较简约，且表格内容较多，项目中最后用的方案一，简单又明了。但在实际场景中，还需根据各自的项目内容量和风格来决定。
有的同学可能会说平时设计基本很少有花样，是的，B端设计相对C端设计更加克制，对应用户群体的话语权更高，但前提是自己的知识储备足够并了解业务，有理有据去分析和决策，这样才更专业、才能让人信服。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
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 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)