百尺竿头须进步，十方世界是全身。亦余心之所善兮，虽九死其犹未悔。咬住牙诺住蛋、开干、开干
因为表格在B端设计中是非常重要的一部分的内容。所以这一趴我会拆分上中下三部分来写。上篇主要写表格的基础知识。中篇主要写表格的设计与交互部分。下篇写大厂规范的设计表格设计建议和我的一个实战项目
对于我们B端设计师来说，表格那真的是那那都是他。我们做B端里在80%以上的页面里需要、数据浏览、数据操作、数据过滤。而表格则是被公认的展现交个化数据最为清晰、高效的形式。
B端设计中，对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。
结构简单、分隔和归纳明确、可以详细的展示各个维度的数据。但是表格属于形式十分单一的组件，对于没有经验的设计师来说，会认为能够调整的地方实在太少，往往在思考层面就会有所不足。
可以快速筛选和定位所需的数据，使信息之间更易对比。但是组件联动多、对于新手设计师是容易出问题的。
比如在表格中，除了表格本身，还会有搜索、筛选、视图、分页等操作，如果不对多组件的交叉使用进行思考，也会缺少对于这些场景的设计。
更接近用户使用习惯，提升了用户对信息的接收效率和理解程度。但看上去简单的表格、在对不同数据形式的呈现也是不同的。所以是有很多的设计点的。
为了深入的了解表格我们先将表格进行拆分来看。表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中，内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
标题是对表格信息内容的整体概括，可包含数据来源及属性(日期、地区等)，以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题，与其他的设计同等重要。
这里特指位于表头的上方的操作区域，包含筛选，操作按钮等其他操作。筛选区包含模糊搜索和条件筛选，按钮分为增删改和其它业务处理操作，合理设计筛选区可以大大提高用户的效率。
概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂数据。如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。
除了容纳行/列标签之外，表头也可以进行排序、搜索、筛选等。
承载用户的每一条数据，也是整个表格的核心。单元格的大小行高都会直接影响用户使用表格的体验。表体包含数据，分割线，背景，单元格数据可进行点击操作，如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。
底栏在表格最下方，主要展示正文中的数据量或单页数据的概览信息，也常提供统计功能，供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏里还有可能有很多元素、比如我们系统下面就会有选中数据数量的标记。
表格的类型和样式基本上就这么多了。我们可以根据自己的业务去选择适应自己平台设计风格的交互类型和视觉样式。更深入的优化和设计我们下一篇文章在讨论。
我们可以把表格分不同的类型去利用和理解。B端产品的业务多样性使得很多特殊的表格有它独特发挥的空间。了解更多的表格类型也能帮助设计师在做复杂项目时更加得心应手。
基础表格样式，是由行与列的单元格组成，能满足用户多维度查看数据的需求。通常用于横向表格的纵列数据较少时，使页面不需要滑动条也可以展示完全。操作项一般置于页面最右侧，便于用户浏览完成后进行操作。
表格中的数据为包含与被包含的结构时，可采取树形表格。
每一个条目可展开或折叠包含的更详细的信息，也包含嵌套子表格。通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。非常适合大型数据表或者项目管理工具中。
一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细地了解主数据中数据的含义。结合层级表的使用场景，多以查看为主，编辑需求较少。
当一个表格里面有多条数据在同一个小范围的维度进行展示时，或者说表头有很多分组进行区分，它就是交叉表格。它能够通过硬拆分将数据进行切割，能够满足具体业务上的需求。
当一个表格里面有多种图表数据进行展示时，他就是图表表格。用户点击某一数据后，直接跳出数据的统计图，方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决，是目前很多产品最爱做的数据可视化。
除了在单元格中引用图表之外，很多时候都会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式，这时候，表格往往只作为明细放在页面底部。
可以用卡片的形式来展示信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又形成一个整体。
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。
表格有均匀而明显的分割线，边框单元格比较明显。对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。
仅显示水平线可减少整个网格的视觉噪声。它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度；因此对于所有数据集大小，此样式都是最常见的。
隔行交替使用不同底色来区分数据。每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法；对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。
移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。
在写本篇文章时、参考了很多大神的文章。他们写的都很不错。给了我很多启发，也学习到了很多。当然对于我自己之后的设计能力和管理能力的提升帮助很大。
和谁看风景，用什么方式看更重要；经历过，哪怕不能抵达终点或者彼岸，但是只要曾经经历，便会是永远。正是基于此，“带上你”或者“你带上我”去看真的风景。
命友邀宾玩赏，对芳樽浅酌低歌。且酩酊，任他两轮日月，来往如梭。一起努力前行吧。
Powered by Froala Editor
我从山中来，带着兰花草。种...
15
作品
39
粉丝
3
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册