本文来自微信公众号 “SaaS学姐”，作者：公众号：SaaS学姐，纷传经授权发布。
01
怎么设计一个万能的列表页呢
把控好三件事情就可以：确立设计原则，结合设计场景，使用设计技巧。我们一件件来说。
B端产品的设计原则，离不开两个目标：
一是提升效率，二是增加能力。
提升效率要做减法。通过减少操作成本，打破用户的常规操作，让用户先“咦”再“哇”，从惊奇到舒爽。
增加能力要做加法。要提升非高频场景下的需求满足率。
大多数情况下用户用不到这样的能力，但偶尔用到的时候，会由衷赞叹“有这个功能可真好”。
与此同时，这也是能和其他产品拉开差距的点。怎么理解减法和加法呢？先从一些真实的例子开始。
减法，可以设置更浅的入口，来减少操作步骤。
要修改一个字段，最常见的是这样三步：进入详情页，找到字段，完成修改。
现在很多产品，提供了快捷修改入口，在列表页就能直接操作，只需一步，就能完成业务目标。
减法，也可以设置更连续的操作入口。
例如，在创建客户信息的页面，选择创建后不回到列表页，可以直接打开新的窗口。
不需要回到列表页，再点击新建客户，每次能节约 定位按钮+点击按钮的操作成本。
还可以通过减少跳转来做减法。
查看详情，往往会打开新窗口进入新页面。现在更多的设计是使用侧边栏，如图所示，右侧侧边栏不遮挡左侧的表头，可以直接选择和切换对应的信息。
以上几类，都是减少鼠标点击的次数来节约效率，但这样就足够了吗？
菲茨定律告诉我们：预测点击一个目标的时间取决于目标和当前位置的距离+目标的大小。
所以我们还可以通过改变入口的位置，来减少鼠标的滑动距离。
拿最常见的操作按钮来说，惯常做法是放在界面最右侧，但现在不少产品都打破常规，选择在左侧固定按钮。
这样就减少了鼠标从左侧移动到右侧，再反复核对表头，点击操作的时间。
以上案例，统统都是效率的提升，不要小看每一次鼠标点击，鼠标移动，甚至视线移动，每一步都省省力，就能带来顺滑和舒适的体验，让用户感受到愉悦。
特别是高频的使用场景，每提升一点使用效率，都能带来不容忽视的杠杆效应。
说完了减法，再来说说加法。同样举几个例子。搜索场景，常规的是先选择搜索范围，再键入搜索词。
但用加法升级搜索能力后，我们无需先选择搜索哪个字段，系统可以默认搜索所有文本类型的字段，扩大了搜索范围，既减少用户前置操作，又给了用户更多的选择和结果。
筛选场景，最常见的是把多个筛选项并排展示在系统中，每个筛选项可以下拉选择，但这样会带来不少问题：
1非下拉选项类型的字段，应该如何被筛选？
2 有那么多可以筛选的项，我应该怎么排布更合理？谁要显示谁不显示？谁显示在前，谁显示在后？应用了加法来提升能力后，这些问题都不再是问题。
首先，所有类型的字段都可以被筛选，例如可以筛选合同金额大于10万的订单，筛选公司名中包含【科技】的企业，都是可以的。
其次，因为每一个字段都可以在列表中被选择，所以就不存在各种筛选项排排坐的尴尬情况了。
除了筛选，排序也值得被说说。增强排序能力后，不仅仅是金额和时间这类天然有逻辑关系的字段可以排序，文本可以按照首字母排序了。
02
看完了这些，可能你会问：加法是加能力，减法是减操作，这些都知道了，但怎么应用在具体的列表页设计呢？
别着急，加减法只是让方案更靠近万能的设计原则，但原则需要结合具体场景才能落地。
在列表页这个B端系统最常见的形式中，我们可以总结出三个场景。
1 查找，缩小信息的范围。2 查看，获取某些信息。3 操作，变更某些信息。
先说查找。查找是为了找到自己需要的数据，为下一步的查看和操作做好准备。
最好的查找，是让用户进来就能获得想要的数据，无需操作。这就需要设置好默认值，或者提供默认的筛选组合。
例如一个CRM，销售进来查看客户，最大的可能是需要根据拜访客户的计划，依次填写跟进客户的进展，那是不是可以默认是筛选出今日计划跟进的客户？
优等的查找，是提供强大而高效的搜索引擎。按照上文的例子，可以从三个方向按需去升级。
1 筛选的范围。能筛选哪些类型的字段。
2 匹配的条件。例如文本，就有等于，不等于，包含，不包含，为空，不为空等等通配符的逻辑。
3 条件间的关系。
多个筛选条件可以用【且】以及【或】来关联。次等的查找。
这个层次上，能力可以不强大，但需要提供高效的搜索。能够区分好 常用-偶尔用-不常用三类的选项，给予不同的展示方式。
例如常用的选项，除了摆放在更前面，更可以给到更大的区域来选择，甚至直接平铺选项。
举个例子，很多oms系统，就是把订单状态用tab形态来做展示。
再者，可以根据不同的场景，设置不同的预设筛选组合，用户可以按需取用。也可以让用户自定义筛选组，解决个性化常用搜索的问题。
再说查看的诉求查看是为了获取某些信息。
最高效的做法，就是按照轻重缓急，对信息做分组。列表页可以通过增加能力来解决这个问题，允许用户个性化定制列表页。
例如展示哪些字段，例如通过拖拽字段来设置字段的排序。详情页可以把信息分为以下几组，给予不同的权重进行展示。
概括的信息，是最重要的，需要一目了然的信息。
例如客户页，就是客户名称，客户状态，客户标签，往往放置在最顶部。
详细的信息，用来全方位了解的信息。
信息分为直接信息和关联信息。
例如给客户的报价单，客户的合同，客户名下的订单，客户购买的产品等等都是关联信息，在例子中用切tab的形式展示。
而每个tab中可以按照先重要后次要，先高频后低频的方式，对信息进行分组。如果觉得客户有强烈的自定义需求，可以在开放自定义布局的后台。
最新的信息，用来跟踪进展。可以按照时间顺序来展示。最后说操作的诉求。常用的操作，可以参照上文的例子，合理放置入口的位置，让操作可以更加连续。
我们可以自定义按钮，定义每一次点击希望触发的流程。
为了提高操作效率，批量变更，批量导入都是需要考虑的能力。
我们甚至可以不要让用户操作，例如通过设置自动流转的能力，让数据可以自动流转。例如当客户的订单走到终态时，把客户的付费状态改为已付费。
03
最后再聊聊两点设计技巧。第一点是设计角色操作地图。
众所周知，B端设计需要以业务为中心，但很多产品往往拿到需求就着急上马，没有对使用角色做好深入调研，导致页面的操作性质不佳。
无论是内部产品，还是SaaS产品，都可以围绕操作人去设计操作地图。
从大的方向上，了解操作人的岗位存在价值、意义、和痛点。从日常工作上，至少我们要知道。
哪些工作是每日要做的？每周要做的？每月要做的？以及其他非规律性的事物。
对应的这些事情是怎么利用系统结合的？
使用的步骤是怎么样的？其中重复、耗时、困难的工作有哪些？知道了这些信息，接下来怎么办呢？
举个例子，比如知道了销售岗位每天都需要跟进意向客户，可以来画跟进客户这一场景的操作地图。
系统操作：在列表页找到今日计划跟进的客户，进入客户详情页，点击日志。
填写今日跟进情况-操作时间：每日和最后一个客户沟通完成后操作。
操作后续：需要依次填写在系统操作的步骤上，我们可以思考怎么用刚刚的加减法，结合场景去改进，让用户减少操作。
在操作时间上，能否做到自动提示用户，甚至自动跳到应该处理的界面。操作后续上，是否填写完成能跳转到下一个需要处理的页面。
第二点技巧是升维思考。
提效的最高境界，不是提供更简便和强大的能力，让用户操作起来更方便，而是想方设法，让用户不要操作。
使用系统，搜索app时，会结合操作习惯，给予智能推荐。
用美团打车，可以判断当前的时间和位置，猜你想要去的地方，一键带入填写。
同理，我们在B端的设计上也可以融入类似的思路。例如列表页可以通过默认值的合理设置，让用户所见即所要。
例如可以通过用户打开界面的时间和操作习惯，自动跳转到用户需要操作的页面。
例如可以根据合适的场景，通知提醒用户应该完成某些操作。
以上操作，不用用户思考，不用用户设置，就自动融入产品设计中。但所有的设计，都要急于对场景的深入理解和匹配。
万能从来不是无中生有，一切都离不开预判用户的诉求。
而恰恰B端软件，用户的核心诉求离不开：更高效的操作步骤，更强大的能力支持。这是B端设计以不变应万变的法宝。
