一、功能结构图和信息结构图

“功能”在百度百科上的解释为指事物或方法所发挥的有利作用；效能。

“信息”在百度百科上解释为指音讯、消息、通讯系统传输和处理的对象，泛指人类社会传播的一切内容。

这种解释或许过于文艺，于我而言，于软件而言，“功能”指每个模块界面上点击产生的效果，如点击删除按钮产生的删除数据效果、点击发送按钮将信息发送给对方。“信息”指每个模块界面上展示内容和需要填写的表单内容，比如在一个登录界面上，密码、账号、手机号等需要填写的内容便属于信息。

功能结构图意在分析模块功能组成部分。

信息结构图意在分析页面所展示的信息。

可是当我们玩弄app的时候，偶尔会觉得不知道该从哪里开始分析功能，繁琐的操作容易让我们迷茫，无从下手。

下面我分析淘宝的购物车（木的办法，淘宝过于庞大，我们可以拿小模块练手）：

​

如图1.1是淘宝购物车截图。

首先分析信息，观察当前界面所展示的内容，坚持从上至下，自左往右的原则，如图所示，在淘宝购物车首页中，展示了购物车内商品总数量、默认收货地址、商品所属店铺名称、店铺图标、商品图标、商品名称、商品价格、商品数量、所选商品规格参数、商品对比价、合计价格、所选商品数量。

然后分析功能，我们可以先从按钮入手，显而易见的结算、管理、全选、增加商品数量、减少商品数量。

点击结算，即前往订单确认页面；

点击全选，即选择购物车内所有商品；

点击增加商品数量，即加购相应商品的数量；

点击减少商品数量，即减少相应商品在购物车中的数量；

上述的四个按钮都有明显产生的效果，而点击管理，仅仅是页面发生了变化，如下图所示：

​

点击管理后，依旧是购物车模块的首页，结算按钮消失不见了，取而代之的是 移入收藏夹、删除和清理。而展示信息内容并没有变化。虽然合计价格和所选商品数量并没有展示出来，但它们仍然存在这个界面里。

分析功能：

点击移入收藏夹，即将物品加入收藏夹；

点击删除，即将所选的商品从购物车中移除；

而点击清理，跟点击管理那样，页面产生了变化，如下图所示：

​

如图1.3淘宝购物车截图所示，点击清理后，便弹出了弹窗，显示的按钮有 移入收藏夹和删除，与上述的功能如出一辙，便无需再分析了。而展示的信息内容却大有不同，展示了30天前加入购物车的商品和7天前加入购物车的商品。

这就完了吗？不不不，并没有。

分析软件产品需要不断的玩弄软件，四处点击，看有没有意外的惊喜

​

当点击图中所选商品的规格参数“S;橘色短袖”，就会展示相应商品的SPU（Standard Product Unit （标准产品单位）SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性），供用户选择。

于功能而言，简单来说，规格参数选择。

除了提供规格参数选择外，我们还能看到 查看详情 按钮。

虽然点击查看详情后，跳转到商品详情页，但它也是所谓一个功能存在。

页面分析完后，便开始绘制 信息结构图和功能结构图，如下图所示是信息结构图：

​

如图下图所示为功能结构图：

​

当当当~

淘宝购物车的功能结构图和信息结构图完成了，细品细品。

二、产品结构图

在我刚独自设计公司的电商产品的时候，有点不知所措，虽然我的生活早已融入淘宝、京东、当当网等电商系统，但是当真正要独当一面的时候，才发现他们功能很多，信息很杂。虽说照虎画猫，就算知道从画头开始，也不知道是先画耳朵还是先画眼睛。此时便需要产品结构图，梳理我们的设计思路。

产品结构图是功能结构图和信息结构图的组合，在原型图设计未开始，产品结构图便可以帮助我们梳理信息和逻辑，是原型图的简易表达方式。除此之外，也是产品和研发沟通的桥梁，便于研发初期评估开发计划。

将上述中的功能结构图和信息结构图结合起来，便是下图所示的产品结构图：

​