B端产品的信息框架设计

摘要：大可：“这一章，我们会把B端产品的所有页面组件，按照功能形态归类，逐一介绍，一次讲清楚B端产品设计背后的典型页面！”

引言：

B端产品都有哪些经典的界面和组件？

B端产品的工作台该如何设计？

为什么说好的工作台能大幅度提升用户体验？

B端产品该不该做搜索功能？

B端交互设计应该追求创新么？

自研系统和商业化产品在人机界面设计上的区别是什么？

土豆：“终于来到了交互设计部分！”

大可：“是不是都有点迫不及待了？”

土豆：“是啊！”

大可：“这一章，我们会把B端产品的所有页面组件，按照功能形态归类，逐一介绍，一次讲清楚B端产品设计背后的典型页面！”

土豆：“那会不会很多啊！”

大可：“并不算多。B端产品的核心界面，是围绕着数据的增删改查来设计的，顺着着这个思路，就可以把经典界面分门别类梳理清楚，只要理解了这些界面设计的特点，在自己的产品设计工作中，就会游刃有余！”

土豆：“那让我们快开始吧！”

01 B端产品的整体界面组成

软件产品设计的核心架构是MVC模型，M是数据底层，C是业务逻辑，V是视图层，界面设计，探讨的就是视图层的内容。

视图层包括了软件图形界面设计（GUI，Graphic User Interface）中的页面、组件和控件。

页面：是组件与控件的容器，例如列表页、报表业；

组件：实现了一定颗粒度的能力封装，可复用的控件组合，例如消息组件、公告组件；

控件：人机界面中的基本元素和对象，例如文本框、按钮、单选框。

从软件工程的角度来讲，B端产品的本质，就是对数据的增删改查操作，围绕增删改查，一个B端产品的经典的组成结构是类似的。图7-1从软件功能组件的角度，呈现了MVC架构下一款业务型B端软件的经典构成。

图71 一个B端产品典型的功能组件构成

模型层包括了数据对象编辑器，对于商业软件，一般要具备动态调整自定义数据对象的能力；

业务逻辑层包括了流程编辑器以及预置的标准版业务逻辑，同样，商业软件需要具备灵活的业务流程定制能力，而自研系统的业务流程一般是写死的代码逻辑。

除此以外标准B端软件还要有配制管理、API接口与管理的能力。

针对这套软件组成结构的具体讲解，大家可以参考《决胜B端》，本书中，具体关注视图层的梳理和设计。

一款典型的B端产品，在视图层，或者叫应用层，需要具备以下经典页面与组件。

菜单导航布局

菜单编排和导航结构，是一款产品进行GUI设计时首先要考虑的问题。

首页和工作台

首页和工作台，是用户登录系统后看到的第一个页面，也是B端产品中最重要的页面，设计好坏，直接决定了产品的易用性。

全局组件

全局组件，是现代软件设计，经过多年实践积累后的沉淀下来的经典组件，具体包括：日程、待办、消息、公告、全局搜索等。

数据对象处理页面

围绕数据的增删改查，涉及到以下典型界面：表单页（增数据、改数据）、列表页（查多条数据、删数据）、详情页（查单条数据）。

数据统计分析页面

数据经过处理后，需要做各种统计分析，经典的数据统计呈现方式有二维表、汇总表、各种柱状图、饼图等，这也是报表引擎和BI两类产品关心的页面功能。

本章将分别介绍以上页面、组件的经典设计。

02 导航布局设计

在产品从无到有的建设中，首先要确定导航方式和框架结构，其中有两个基本要素很重要，第一个是关于内置多标签页，第二个是导航菜单的排版方式。

所谓内置多标签页，是指在系统内部具备多标签页的交互形态，即打开新的页面和菜单时，会在系统框架内部打开一个新页签。如图7-2所示，某云ERP采用了内置多标签页的横排导航方式。

图72 内置多标签页的横排导航

虽然现在的浏览器本身都支持浏览器级别的多标签页，但在某些场景下，例如需要并行同时处理多个工作任务的时候，系统级别的多标签页设计是很有必要的，比如类似于客服业务的作业场景，操作人员有可能需要在多个页面来回切换进行操作和处理，并且由于其工作本身也容易被打断，因此系统默认提供多标签页就很有必要。

导航菜单的排版方式是另一个框架层面的关键要素。一般来讲，典型的排版方式包括横排排版、竖排排版，以及横竖混合排版。横排排版常见于官网、企业办公门户，除此之外已经很少见了，竖排排版已经成为主流选择。如图7-3所示的某电商商城后台的截图就展示了无标签页的竖排导航。

图73 无标签页的竖排导航

多标签页和无标签页，以及横竖排导航之间究竟有什么优劣势呢？我们在表7-1中做了一个对比，以便大家直观地理解。

表71 几种排版特征的对比

以上探讨的是PC版本的框架交互方案，对于移动端场景，UI框架一般采取底部导航菜单的方式，我们不再赘述。

03 菜单界面的设计

功能模块是软件能力的抽象描述，但用户不容易理解和应用；菜单是对功能模块的二次编排，通过某种更易于用户理解的分类方式，将功能结构重新展现。在第五章我们介绍了菜单分组的几种方法，也讲到了菜单本质，是帮助用户按照一个熟悉的逻辑寻找功能的路径，在设计了菜单分类的信息架构之后，我们要设计菜单的视觉呈现方案。

不论是横排导航，还是竖排导航，都要考虑一级菜单展开后的菜单呈现方式，一般有两种典型方案。

层叠式菜单（Cascading Menu）

层叠菜单将子菜单收拢，需要用户进行互动，例如指向或点击父菜单，才会展开子菜单。这种交互方式曾经是主流方案，在CS架构的窗口程序中也很常见，例如Office软件套件。

层叠菜单需要用户进行多次交互，略显麻烦，在企业软件领域，已经慢慢被弃用；然而这种交互方式也有适合应用的场景，例如针对微交互比较多的工具型软件，Word、Powerpoint，依然保留了需要点击才能展开菜单的特性（尤其是下拉菜单，Drop Down Menu），这样做可以避免用户频繁交互中的误触误碰带来的干扰。

图7-4是一个典型的层叠菜单设计，鼠标指向父级菜单后，会展开子菜单。

图74 需要交互的层叠式菜单

平铺菜单（Flat Menu）

平铺菜单，是将所有菜单项平铺在菜单页面中，让用户一眼看清所有内容。平铺菜单的好处是减少用户交互，直观方便；缺点是内容过多，可能会对用户检索信息时带来干扰。通过良好的视觉设计可以一定程度解决这个问题。

平铺菜单已经成为大多数企业软件PC版本设计的首选。图7-5和图7-6，是两款ERP软件PC版本的平铺菜单设计效果。

图75 某ERP的平铺式菜单1

图76 某ERP的平铺式菜单2

平铺模式的菜单，可以进行创意设计，提高易用性。如图7-7是某WMS软件，在“出库”一级菜单下，将相关的二级菜单，按照简易流程图的方式进行分类呈现，让人一目了然，很容易找到流程中相关功能的位置。

图77 用流程图的方式呈现平铺式二级菜单

04 首页的设计

首页是用户登录系统后看到的第一个页面，如果设计得当，能极大地优化用户体验。例如，传统B端软件典型的问题是操作复杂，需要来回在不同页面跳转，对于不熟悉系统的新手，很容易被搞崩溃。但是，这些问题都可以通过设计优雅的首页来解决，因为作为一线作业人员，工作的重点无非是处理各种待处理事务，如果在首页中能够把所有需要处理的工作合理呈现，实际上并不需要用户自己去跳转各个页面做操作。

我们设计首页，可以从两类场景出发进行分别设计，一类是管理人员的系统首页，一类是执行人员的系统首页。

针对管理人员的首页设计

管理人员每天的工作是什么？最重要的就是盯紧并跟踪当天的关键数据指标，及时发现运作中出现的异常，排查问题，产生管理动作，执行并跟踪。

对于管理人员，首页中一般包括快捷菜单、公告、消息、待办，以及大量的实时数据仪表盘。相比其他类型的用户，管理人员使用系统的时间更少，因此一个能够快速、直接解决问题的首页就显得非常重要，如图7-8。