那么之前的文章都是对于B端这样一个系统，进行概括性地讲解，系统的讲解。那么从今天开始，我将对B端系统对大家进行一个详细的讲解，包括每个控件的具体使用。这就是我们从大到小，再由小到大的这样一个学习过程，那么目前我们要进行收缩范围，要精确的明白某个控件应该如何使用。今天我所讲解的是表格页的具体使用方法，以及如何分析现有表格页的问题。

       文章句句将会直击重点，拒绝长篇大论。

       那么为了方便大家的理解和查看，我这里去列举一张表格页的图片。以下的讲解都会围绕这个表格页的图片，进行详细的剖析讲解。那么，在看的过程中，我们要时刻的翻到上面这张图片，对照着这张图片来吸收消化今天的知识。

       大家可以看到这是一个关于资产清单的表格页，那么它的构造也符合我们常规的表格页。首先我们对这个表格也进行分析，我们可以看出表格页是由这几部分组成的，它们分别是数据过滤，数据操作和数据查看。

数据过滤部分指的就是我们页面上方的这样一个搜索框，包括。我们表格页内容顶部的资产编码，资产名称，它们后边都有这样一个筛选器，我们可以按照顺序或者是倒序进行筛选。这里我把数据过滤的部分用红色框标注一下。

       那么这个表格页我们可以看出，它的数据过滤其实是非常少的。更多的数据过滤有什么呢？按照资产的新旧程度，我们可以将它分为新的、旧的、淘汰的。那么这三个按钮也可以作为数据过滤放在我们表格内容页的顶端。

       当然，维度有很多个维度，我们不仅可以对资产的新旧程度进行分类，我们也可以对资产的购买时间进行分类，比如2018年、2019年、2020年至今，我们可以对这样一个时间维度进行分类。同样，操作按钮也是放在表格也的顶部，也就是我们搜索框的后边。这样用户在筛选起来会比较的方便，具体需要按照什么维度进行划分，需要我们找到，我们的业务目标是什么？我们要找到我们的这个表格页希望给用户传达出怎样的信息？那么用户最关心的点是什么？找到这些之后我们就可以对用户最关心的点以维度进行划分更多的筛选器，有助于用户更好的去浏览内容。

       此页面我们可以看出他的筛选器过于少。在这里我们并不评价，数据过滤少是好事还是坏事？但是我们要记着，我们时刻要具备分析某个功能模块。究竟应该放在哪里？它应该怎样去划分？这是我们要牢记的点。

       那么刚才也说过，一个表格页分为三部分，分别是数据过滤，数据操作和数据查看。现在我们来讲第二部分，也就是数据操作。那么什么是数据操作？数据操作，顾名思义就是对页面中的某些数据进行操作功能，可以是增，删，改，查等等，它都是属于数据操作。那么数据操作，它一定是一个可点击的一个功能按钮，在页面中，我们如果仔细找一找很容易就会发现数据操作的模块。在这里呢，我同样用蓝颜色的框给大家框起来。

       在这里，蓝色框框起来的部分，就是我们这个表格页中的数据操作部分，也就是第二个部分。

那么很多人可能会有疑问了，说为什么同样都是数据操作，有的数据操作在上面是纯色的一个按钮显示，那么有的数据操作又在表格内容页里，这些究竟有什么区别？

       没错，数据操作。它摆放的位置是多种多样的，但它遵循一个规律，什么规律呢？也就是说在我们执行数据操作的设计这样一个功能模块的时候，我们需要对其进行第1次的划分。数据操作部分我们可以分为单行操作，批量操作和全局操作三个操作点，也就是说所有的操作功能无非就是在这三个类别中的某一个类别。好，下面我来给大家详细讲一下什么是单行操作，什么是批量操作和全局操作。

       我相信大家通过字面意思也能对这三种操作方式有一定的了解，单行操作指的是针对表格内容页的一行数据进行操作，一般就是放在表格页的这一行的尾部。那么批量操作针对的是对多个数据进行操作，他一般放在表格内容的顶部，那么什么是全局操作？全局操作是对整个表格页的页面进行操作，比如说我要导入新的表格，或者说我要替换这个表格，那么根据优先级顺序来说，全局操作大于批量操作，又大于单行操作。这就是数据操作的三个不同点，那么很显然在我们上张图片中。只存在单行操作和批量操作，并没有全局操作。

       接下来我对最后一个部分，也就是数据查看这个部分进行一个讲解。数据查看也就是我们系统所反馈给用户的一些数据，它包括具体的数字，也包括一些汉字，所有的信息都可以被列为数据查看。那么由于这个表格页上的数据查看部分没有去写一些信息，将这些信息打码隐藏了，但是我们不难想象它填入信息后的样子，也就是整个表格的内容页的核心部分就是我们的数据查看，无论是数据操作还是数据过滤，只是进行一些功能上的操作，那么用户最终的视线还是要落在数据查看这个部分，同样我用橙色的框给大家标注出来。

       如果说我们的数据查看部分，其中的数据是混乱不堪的，或者说它的列数是非常的繁琐的，那么对用户的体验非常不好，也不能在第一时间抓住有效信息，所以我们在设计的过程中一定牢记7±2法则进行设计。

       那么有的人有疑问了，说如果我的列数非常多怎么办？如果你的列数非常多，那么你只显示其中的重要信息在表格页这一块，其他信息应该归纳到查看详情，或者是二级页面内，不能在一屏中展示过多的信息，即使你放了这么多信息，你要记着那也是无效的摆放，用户在进来之后根本就不想看一眼，所以在这里我们要一定要记着7±2法则，或者说我们给自己定一个列数的系统规范也是可以的。

       以上，就是今天对表格页的详细讲解，那么要学习更多知识也可以进我的公众号学习。我们要知道再简单、再复杂的表格页也无非就是三块，数据过滤、数据操作和数据查看，当然在页面中也存在我们的导航系统，它们共同组成了一个完整的表格页，表格页所遵循的宗旨是简单高效，信息直观，操作方便快捷。

文章来源：站酷  作者：弧形线


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务