之前公开课的案例中，我有总结产品地图和功能地图，来分析对象的产品内容和具体结构。但是地图的应用中还有个比较重要的类型，就是信息地图，这在我们过去的分享中也有提及。因为产品和功能地图做过不少演示，所以今天主要的对象就是被广泛忽略的信息地图了。这无论对产品经理还是设计师都是非常重要的工具，决定了最终客户端展示的具体信息。![]()
对于绝大多数B端产品，就是一个对数据实现增、删、改、查的平台。只是数据的业务要求不同，需要使用的页面样式、交互就会有差异。
比如常见的 CRM、HRM、ERP等，都是对指定数据进行收集，然后在系统中进行查看、检索、修改、删除的数据管理系统。除了业务、产品分析以外，最重要的就是对数据进行数据库的建表和字段整理。比如用户包含的字段信息，商品包含的字段信息，使用表格将它们整理出来。专业的B端产品规划的过程，就是应该是数据字段都定义完，才进入到页面的规划和原型设计。因为页面本身的目标就是管理和展示数据，数据都没确定页面要怎么构建？就像烹饪的过程，食材都没确定写的菜谱别名就叫 “离谱”。换句话说，前端显示的所有字段，都是从数据库的池子中直接或间接应用的（数据二次处理），比如设计页面原型，用户有年龄这个数据就可以加，没有的情况下加了也没东西显示。所以限制本身就存在，要在页面上放哪些信息就需要有一个单独的工作流程来确定，而不是一边画原型一边想页面要放什么，这么做效率非常低下（C端还好B端完全不行）。所以这就是信息地图的来源，在具体完成界面原型或设计之前，用思维导图把里面要放的信息罗列一遍。同时，信息地图还有个作用，就是要做信息的归类和整理。虽然部分页面中包含的数据量很多，但不是一口气列出来的，而是要根据模块、类型对它们做出区分。尤其是在详情、表单等类型的页面，比如一个用户详情，可以包含了百八十个字段的展示，那么这些字段平铺堆积起来肯定非常乱，所以要归类分组。比如个人信息、职业信息、登录信息、访问记录的分类等等，如果分类太大还可以进一步拆分，比如职业信息还能包含实习经历、过去经历、当前就职的子分类，每个分类中再囊括相应的字段。这个整理的过程可以非常好的加深对信息字段的理解，这是我们之前很多改版案例中对字段布局做调整，权重做出对比的来源。在缺乏足够经验的情况下，就建议初级设计师，能培养针对复杂页面创建信息地图的习惯。![]()
信息地图的创建首先要整理出页面包含哪些字段信息，然后再对它们进行归类。以之前改版案例中的千牛表单页面举例。
我是用字段表格来梳理页面的信息内容，虽然我自己经验比较丰富用起来没有问题，但是对一般人看起来一定很蛋疼，因为层级和归类非常的不直观。所以我们可以再用信息地图的方式先对字端做一遍整理：但是光把信息字段做好归类还不够，可以进一步整理对应的类型、要求，所以可以再在每个字端后补充一个对应的字端类型和要求进去。格式怎么放不重要，确保自己能看懂就行。比如：字段类型，字数限制，可选内容……这个操作过程是非常容易理解的，画好的结果也很直观，可以导出后贴进设计文件内，作为页面设计中的参照对象。如果还包含更多的逻辑，比如一些字段有关联、继承、不兼容的问题，可以单独将这些逻辑用文本的形式在画布中另做补充，无需强行写到思维导图中去。虽然我们使用的是逆推的方法整理出来的，但对于专业的设计师应该怎么完成相应页面的布局和设计已经完事具备了。这也是前一篇分享提的，做完有效的需求分析以后 —— 忘记原版设计什么样的，按你理解的正确的做法做出来。![]()
最后就是根据信息地图进行具体表单页面设计的过程了。信息地图除了表示页面要放什么外，还有两个和设计强相关的内容，就是层级和字段说明。
字段说明为什么重要就不用多解释了，因为它是每个字段要使用哪种输入类型的指示，比如输入框、多选、下拉单选、上传按钮等。而层级分类就是这些字段怎么归类的解释，它的重要性一直被忽略。因为要完成整个复杂表单页面的设计，并不是把页面从上到下依次设计过去，而是先把整体的页面结构、层级表现确定好，再开始填充下级的内容。在本案例中，信息就包含了两个级别，出现第二级的主要是图问描述中的 “基础素材” 和 “导购素材”。而基础信息中的 “类目属性” 我并没有把它当成一个正式的二级分类，原因就是正式的二级分类是不应该和基础字段出现在同一级的。所以，通过对分类的理解，就可以将表单页面的基本框架设计出来。框架的设计，就是用于兼容字段的展示要求，能让用户轻易的识别这些信息和分类，提升理解和操作的效率。而要表现出对应的层级和结构，样式绝对不是只有一种，所以在没有确定设计规范之前，就可以做出不同的样式。搭建完框架以后，就可以根据信息地图进一步设计下级的字段内容。而字段同样也要分析和理解其中的共性，搭建相应的布局框架，比如下面这些通用类型。只要分析的过程合理，再加上界面设计的基本常识，就足够输出合理的设计稿，而不需要花大量时间四处找参考，在缺乏设计目标的情况下找参考没有意义，而且也很难找到和每次项目使用场景一致的参考图。这就是针对新手表单的建议，如果想要巩固这些知识的话，可以针对下图的案例，重新制作一份信息地图，然后根据信息地图（不看原图）完成表单页面的设计，看看对比原图会有哪些提升。
结尾
B端设计有很多细节的能力掌握是需要通过这样的专项练习来提升的，真想进步，这些刻意练习就要做，持续进行积累，才能在短期内快速提升。新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～一起变强！