一、功能结构图和信息结构图
“功能”在百度百科上的解释为指事物或方法所发挥的有利作用;效能。
“信息”在百度百科上解释为指音讯、消息、通讯系统传输和处理的对象,泛指人类社会传播的一切内容。
这种解释或许过于文艺,于我而言,于软件而言,“功能”指每个模块界面上点击产生的效果,如点击删除按钮产生的删除数据效果、点击发送按钮将信息发送给对方。“信息”指每个模块界面上展示内容和需要填写的表单内容,比如在一个登录界面上,密码、账号、手机号等需要填写的内容便属于信息。
功能结构图意在分析模块功能组成部分。
信息结构图意在分析页面所展示的信息。
可是当我们玩弄app的时候,偶尔会觉得不知道该从哪里开始分析功能,繁琐的操作容易让我们迷茫,无从下手。
下面我分析淘宝的购物车(木的办法,淘宝过于庞大,我们可以拿小模块练手):
如图1.1是淘宝购物车截图。
首先分析信息,观察当前界面所展示的内容,坚持从上至下,自左往右的原则,如图所示,在淘宝购物车首页中,展示了购物车内商品总数量、默认收货地址、商品所属店铺名称、店铺图标、商品图标、商品名称、商品价格、商品数量、所选商品规格参数、商品对比价、合计价格、所选商品数量。
然后分析功能,我们可以先从按钮入手,显而易见的 结算、管理、全选、增加商品数量、减少商品数量。
点击结算,即前往订单确认页面;
点击全选,即选择购物车内所有商品;
点击增加商品数量,即加购相应商品的数量;
点击减少商品数量,即减少相应商品在购物车中的数量;
上述的四个按钮都有明显产生的效果,而点击管理,仅仅是页面发生了变化,如下图所示:
点击管理后,依旧是购物车模块的首页,结算按钮消失不见了,取而代之的是 移入收藏夹、删除和清理。而展示信息内容并没有变化。虽然合计价格和所选商品数量并没有展示出来,但它们仍然存在这个界面里。
分析功能:
点击移入收藏夹,即将物品加入收藏夹;
点击删除,即将所选的商品从购物车中移除;
而点击清理,跟点击管理那样,页面产生了变化,如下图所示:
如图1.3淘宝购物车截图所示,点击清理后,便弹出了弹窗,显示的按钮有 移入收藏夹和删除,与上述的功能如出一辙,便无需再分析了。而展示的信息内容却大有不同,展示了30天前加入购物车的商品和7天前加入购物车的商品。
这就完了吗?不不不,并没有。
分析软件产品需要不断的玩弄软件,四处点击,看有没有意外的惊喜
当点击图中所选商品的规格参数“S;橘色短袖”,就会展示相应商品的SPU(Standard Product Unit (标准产品单位)SPU是商品信息聚合的最小单位,是一组可复用、易检索的标准化信息的集合,该集合描述了一个产品的特性),供用户选择。
于功能而言,简单来说,规格参数选择。
除了提供规格参数选择外,我们还能看到 查看详情 按钮。
虽然点击查看详情后,跳转到商品详情页,但它也是所谓一个功能存在。
页面分析完后,便开始绘制 信息结构图和功能结构图,如下图所示是信息结构图:
如图下图所示为功能结构图:
当当当~
淘宝购物车的功能结构图和信息结构图完成了,细品细品。
二、产品结构图
在我刚独自设计公司的电商产品的时候,有点不知所措,虽然我的生活早已融入淘宝、京东、当当网等电商系统,但是当真正要独当一面的时候,才发现他们功能很多,信息很杂。虽说照虎画猫,就算知道从画头开始,也不知道是先画耳朵还是先画眼睛。此时便需要产品结构图,梳理我们的设计思路。
产品结构图是功能结构图和信息结构图的组合,在原型图设计未开始,产品结构图便可以帮助我们梳理信息和逻辑,是原型图的简易表达方式。除此之外,也是产品和研发沟通的桥梁,便于研发初期评估开发计划。
将上述中的功能结构图和信息结构图结合起来,便是下图所示的产品结构图: