后台产品之表格页面设计

        现在说一下内容区域，分几块来说说，首先想说表格页面的设计。一个后台产品，特别是后台管理系统，肯定是有大量的数据的，那么数据我们通常用表格的形式来呈现。通过筛选，我们可以找到想要的数据。肯定有人会说这么弱逼的表格也能写文字出来，是啊，就算是弱逼的表格要做好也不容易，更何况不弱逼。

1.表格类型

        对数据进行操作就依据表格数据的类型来进行判断了，因为表格有两种类型，一种是纯记录型表格，就只能查看，一种是设置型表格，可以进行增删改查和业务处理的相关操作。

2.表格组成部分

表格的组成部分

3.如何设置／选择表格元素

        关于表头的选择，我们需要站在用户的角度上思考，去辨别哪些是用户觉得重要的、关心的元素，以简洁文字作为表头，进行展示。在做好之后，跟用户进行确认，基本上也是八九不离十的，这个就是所谓的以用户为中心吧（说这句话特没底气，原理就是这样的，哈哈）。

4.表格的基本布局

布局类型 水平布局 垂直布局 矩阵布局

5.视觉优化

可以参看xmind上面的内容，我只是对于以下的几点有感触

视觉优化

5-1分割线处理

        如果我们正确的使用好分割线，就可以实现表格行与列的强调。邮箱产品就是强调行的表格设计的典范，像Gmail、Yahoo Mail、126邮箱，这些表格没有纵向的线条，用横线构架出行的视觉，数据信息均匀分布，更强调每一行内的信息连续性，不强调行与行的数据对比情况.

5-2对齐规则

        虽然也有居中对齐和右对齐等方式，但现在最常用的还是左对齐，比较符合阅读从左到右的习惯，而且单元格的对齐理应保持一致，不能文本左对齐，而数字是居中对齐，这样表格给人的整体感觉很混乱。

5-3空白格的处理

空白单元格会造成用户的困惑，可用短横线代替

5-4不使用斑马线

        之前我们系统的表格就是使用的斑马线，其实从视觉上反而容易让人花眼，至少我是这么觉得。鼠标悬停在某一行时，可以有一个背景色进行区分，其他的就真的多余了。

6.筛选设计

        现在来谈谈表格外部元素的一些设计了，其中关键字搜索和条件筛选是比较常用的。

6-1关键字搜索

        肯定是模糊匹配哈，否则加大用户的记忆成本。并且建议告知用户搜索的内容，比如订单ID、商品名称等等，不会让用户摸不着头脑。可以实时搜索，也可以点击触发搜索结果。这里我想说的是在这个项目中，我们的表格上面都是筛选，然后有一个按钮叫做搜索，每次用户输入关键字或者是选择了条件，点击搜索，才能出现搜索结果。后来觉得点击按钮在某种场景下没有直接敲回车方便，比如在只输入了关键字之后，用户还要把手从键盘上挪开，再去点鼠标，一次还好，次次都这样，你说你会不会被骂。

6-2条件筛选

通过tab来切换表格，以表格的状态为单位的比较常见，不宜太多。下拉选择在选项数量上没有那么受制约，通常默认情况下都是全部。

结束语：目前就感受了这么多，后面如果有更多的经验以及看到相关的干货会陆续更新，奉上完整的脑图

整篇文章的知识点