2B产品设计套路二：表格页设计

honghu2

2B产物设计套路二：表格页设计

上一篇《2B产物设计套路一：表单设计》总结了“增编削查显”中的“增”和“改”对应的表单设计，这一篇继续讲讲“查”和“显”。

咱们可以经由过程数据统计、表格、详情页共同挑选、搜刮实现查和显的操作，到达从分歧维度向用户输出的目标。洋葱交友

从数据的归纳综合水平看：数据统计>表格>详情页。数据统计（或叫dashboard、态势展现）对数据的抽象水平最高、最归纳综合，通常为对数据总体环境的概览；其次是表格展示，可以逐条展现数据，显示首要的信息，可是一般受限于屏幕巨细，只能展现10个摆布字段；最具体的是数据详情页，可以具体的展示某一实例相干的所有信息。



数据统计页



数据表格页



数据详情页
1. 表格&表格页
表格是表格页的主体，是展示数据的有用组织情势，可以展示大量的、比力具体的数据。表格自然是布局化的情势，以是在展现布局化数据的时辰，很天然的咱们会想到用表格的情势。

表格页包括了更丰硕的元素，像关键站同样，可以供给通往各个功效的进口，经由过程【新增】按钮可以达到“增”功效的表单，经由过程【点窜】/【编纂】按钮可以额达到“改”功效的表单，经由过程【删除】可以实现“删”功效，其他按钮也能够作为百般各样的营业功效的进口。

以是在表格页中，表格是展现的主体，共同一些按钮便可以实现数据的增编削查显功效，从而实现数据的闭环。


2. 表格页的构成


表格页重要包含表格、搜刮栏、操作栏和分页栏四个部门。



表格重要包含表头和表体，表头除阐明每列数据的内容外，还可以包括挑选、排序功效。

表体按列可以分为多选列、数据列、操作列，若是表格数据必要批量操作，就得通过量选框复选数据，以是必要一列专门展现选择框；数据列则彻底是按照营业展示必要的信息；操作列主如果显示针对单行数据的操作按钮，好比检察详情、编纂信息等。

搜刮栏的感化主如果便利用户在大量的数据中切确地查找到本身想要的数据，是表格好朋友。

一般搜刮对流程是用户输入盘问前提，然后触发搜刮，表格刷新，只显示合适盘问前提的数据。搜刮栏可所以简略的关头词输入框（只能实现单字段搜刮或模胡搜刮），也能够供给多字段结合搜刮功效（包含下拉框选择字段+关头词输入框），也能够是高档搜刮（针对搜刮和挑选夹杂利用），但在这里咱们暂不开展会商搜刮功效。

操作栏通常为多个按钮构成的，好比说常见的【新增】按钮和各类批量操作按钮。经由过程【新增】按钮打开新增表单，实现向表格增长一条数据。批量操作通常为营业功效，按照需求咱们也能够把【删除】作为一种批量操作。

分页是一次只展现少许的数据（十几到几十条），目标是避免数据量大的环境下阅读器相应太慢或阅读器内存溢出，但分页也会造成挑选、排序、多选时辰的一些坑，后边会具体总结。

下边环抱几个主题总结下我在设计表格页时辰碰到的一些问题。
3. 两个操作栏
仔细的小读者会发明，一个表格页实在包含了两个操作区：一个在表非分特别，一个在表格内，那末很天然的咱们会碰到一个问题，一个功效该放在哪呢？


丰景下载网
习气上咱们会认为一行数据是对某一个工具实例的描写，好比在学生信息表格中，一行数据是对某个学生sam的描写，包含他的姓名、春秋、性别、成就等等。以是表格内的操作也是针对某个工具实例的。

一般我会把一次只能针对一个工具操作的功效放在表格内，好比【检察详情】和【编纂】，由于检察详情不太可能一次检察多个工具，编纂点窜信息也是

那末反过来，不属于任何一个工具实例的功效就必要放在表非分特别的操作栏，好比说【新增】。此外一种必要放在表非分特别的功效是批量操作，由于批量操作必要对多行数据举行同时操作，也不是属于单个工具实例的。
一个反例


这个栗子中，就是把原本是只能单个数据操作的功效【点窜】放在了表非分特别，起首会造成功效的操作步调变多（若是放在表内的操作列中该功效的步调是1，放在表外操作步调变成了3），其次还要处置若是用户多选数据后再点击【点窜】的逻辑。
删除功效事实该放在哪？
不晓得大师有无想过这个问题，我刚起头当pm时辰这个问题困扰了我很久。删除可以作为行内操作（咱们临时把这类叫做单个删除）皇冠交友，长处是更便捷。也能够放在表外作为是批量操作（临时叫做批量删除），如许更便利的同时删除多个数据，但若只删除一个数据时就会增长用户的操作步调。或两种方法都供给，固然更机动可是会让页面比力冗余。



单个删除



批量删除



单个删除+批量删除

实在怎样选择仍是要按照详细营业场景来决议，起首果断用户批量删除是否是高频功效，若是是，明显只有单个删除功效就不克不及知足需求；若是删除是低频操作，那末彻底可以只供给单个删除功效。

我一般不会在页面中同时供给单个删除和批量删除，究竟结果相对于营业功效来讲，删除原本就相对于低频，咱们应当把更多的空间留给用户天天都要用到的功效。
4. 挑选和排序
我感觉挑选和排序对表格来讲乃至比搜刮更首要，由于用户对数据的查找可能没有到达搜刮那末切确，挑选和排序可以帮忙他们缩小范畴以找到他们必要的数据。（就像表单输入时选摘要好过输入，给用户几个选项要比让他们本身思虑好一些）

那末设计功效时就要肯定哪些字段必要被挑选和排序。一个简略粗鲁的解决方案是给所有字段都加之挑选、排序，但如许表头看起来就会很是乱。



有几种改良方案：
一是只保存首要的那些字段的挑选排序功效，但如许很磨练pm对营业的理解，若是一些用户关切的字段没有挑选和排序功效可能会被吐槽。二是在默许模式时辰暗藏挑选和排序的按钮，经由过程表非分特别的按钮触发显示，如许会捐躯一点用户体验，让操作步调+1。

三是若是你的产物刚好设计了“高档搜刮”功效，可以把挑选功效放在高档搜刮里，表头只留排序按钮。

5. 分页酿成的影响
前边咱们讲了分页带来的益处，页面不消一次加载出全数数据，加速了页面的相应速率，这在数据量大时是很是要需要的。但分页也带来了一些坑，由于阅读器前端拿到的数据只是当前页的，而不是全量数据，这便可能会对挑选、排序、多选功效发生影响。

有时挑选和排序是前端来实现的，这时候只能对当前页的数据举行挑选或排序。但咱们或用户想要的结果常常是全局数据的挑选或排序，以是和RD沟通时辰务必向他们阐明你想要的结果。

雷同的，多选时若是用户在第1页选中了一些数据，然后翻到第2页继续选择，咱们要斟酌第1页选择的数据是否是应当被保存（大都环境下我感觉是应当的），若是是，确保RD小哥哥大白这一点，不然成果极可能不是你想要的（别问我怎样晓得的）。
6. 友爱的表格对齐
这里对齐重要指表格的每列数据的对齐，对齐方法有左对齐、右对齐和居中三种，数据类型可以分为文本、数字和标签三种。分歧的数据利用得当的对齐方法可以帮忙用户更便利、快速的理解数据。



一般的对齐处置方法：文本利用左对齐，数字右对齐，标签、按钮、序号等居中。由于咱们的浏览习气是从左到右，文本左对齐可以操纵用户的视觉流提高浏览效力，这和表单标签的对齐原则是同样的。数字右对齐是由于在小数点保留不异位数的环境下，用户可以经由过程数字的是非来果断巨细，加倍直观、效力更高。


缺失数据显示
当页面上没有显示出来一个数据的时辰，有两种环境：一是数据库中没有存储，二是因为各类毛病数据没法加载。若是咱们不加以区别，用户是没法果断是哪种环境造成没稀有据的，以是友爱的表格应当将二者区分隔，咱们凡是会将数据库中没稀有据的字段显示为’-’
固定行列
在数据行、列较多的环境下，表格必要转动才能看到被暗藏的数据。但转动时有一些首要的信息会被暗藏掉，好比表头、名称列、操作列，如许用户便可能会发出我是谁，我在哪，我在看甚么的疑难三连。

作为友爱的表格，咱们必要包管在非论在甚么环境下，用户都能等闲的定位到本身地点的位置，完备本身想做的操作，一个有用的法子就是把首要的信息固定下来，不要让它们跟着表格转动。




新增数据的处置
新增一条数据后，这条数据应当被放在表格的哪里呢？

这是个和表格默许排序有关的问题，表格数据应当默许按添加的时候排序，仍是应当按某个字段的名称排序？

若是咱们默许按某个字段排序，例如说资产名称，当增长一条新数据后它会被插入到表格中响应的位置，好比增长的数据的资产名称叫“饮水机”，它会被插入到首字母y的数据四周，而首字母y的数据极可能不在所稀有据的靠前位置。

这时候就会呈现一个问题，用户要在茫茫数据中找到刚增长的那一条数据，或用户底子不晓得本身增长的数据已被插入在了表格里了，这会让他们感觉本身的操作失败了。解决这个问题的一个法子就是依照数据添加时候默许排序，如许新增的数据会呈现在表格的第一条，用户很轻易就可以发明它。
导入导出
导入导出也是友爱表格的一种常见的辅助功效，焦点是“批量”的思惟。

导入主如果指从excel表格批量导入数据至软件，我感觉导入功效不少环境下是很需要的：

一是由于2B营业中数据量真的很大，有时辰用户必要一下增长几十几百条数据，一条一条录入很快就会让人想砸键盘，从excel导入数据是个可行的解决方案；

二是2B营业触及到汗青数据的导入，若是用户以前没有效信息化软件办理的话，那末他们的数据多半存在excel表格中，若是直接能把汗青数据导入新软件，用户会对产物有个不错的印象。

导出数据主如果为了便利和其他软件、体系的数据交互，和知足用户陈述、存档等需求。导出数据可所以excel文件，也能够是按照需求界说的其他格局。我也碰到过按照数据天生word陈述的需求，固然不是通用需求，可是简直帮用户解决了问题。
尽可能利用已有样式
我想说的最后一点：2B产物应当着眼于营业，对产物的表示层请求并不高，为了晋升开辟效力，咱们在设计产物时最佳尽可能采纳团队正在利用的样式库中已有的样式（常见的elementUI、antDesign组件库中的表格组件已很周全了，可以知足80%的需求），如许可以大大的收缩开辟周期、提高开辟效力。

本文由 @LCC 原创公布于人人都是产物司理，未经允许，制止转载。

题图来自Unsplash，基于CC0协定。