第一集文章，译者将从五个关键步骤讲诉怎样做商品蓝本结构设计——以QQ小程序为例。而做两个商品，不单单是仅考量商品的本身，还需考量生活日常生活、市场环境等因素。接下来，让我们跟着译者，一起了解商品结构设计的业务流程吧~

产品原型设计的思考过程据说每隔100年，就会出现一个一模一样的自己，科学都难以解释

许多初学者在刚进阶蓝本结构设计时，协进会花费许多心力在工具的选择和雕琢上，却忽视了蓝本结构设计的核心。等真正中其手来，只能舒圣祥，没两个完整且系统的思路。

因此，我想聊聊聊我在结构设计商品蓝本时的思索操作过程，希望对新放行的小伙伴们有所协助。

这是两个关于住宅小区大门口蔬果店的故事…

我家住宅小区楼上有一家蔬果店，叫“五日农庄”，日常生活供应蔬果、副食品、饮品、饮料及许多基本的日用品。

老板娘夫妇是安徽人，为人直率，性格内向，平日里的营生常常供不应求。

然而年青的物业公司们却很多困惑。

住宅小区的老人们每天早上8点多就在农庄大门口排队等候抢菜，要到年青的物业公司上班回家后，绝大部分菜谱不是已经销售一空就是被人挑剩了。

老板娘为了照顾这些白领，随即拉了两个QQ群；物业公司将自己需要的蔬菜目录寄送朋友圈，老板娘提早装箱好，要到物业公司上班的这时候间接来退款取货。

可这又遇到了许多捷伊问题：

很多物业公司常常忘记他们预约了菜谱，未能去取货。绝大部分人卖菜时并没明确的目标，而是甚么美味、甚么折扣就买甚么。但从QQ群原订的这时候，没菜谱目录，也不晓得价格和美味程度，物业公司也不晓得该原订些甚么。原订的菜谱经常没库存量，老板娘也来不及一一通知大家。老板娘每星期要处理的QQ消息太多太杂，总容易陈述。

后来，我与老板娘交流：假如有位线上网络平台，他们每星期可以在上面更新店大门口的商品和库存量；并且将新机或当日折扣重点公之于众，物业公司们可以在网络平台上动态查看菜谱信息，并间接退款购买；老板娘按照订单和取货时间提早装箱；要到物业公司方便快捷的这时候去店大门口取货，这样就能做到线上架下相结合。既方便快捷了物业公司，也能协助老板娘操持营生。

倘若老板娘委托我来结构设计此款线上蔬果交付网络平台，我将怎样进行蓝本结构设计呢？

首先，要考量选择甚么样的网络平台。

为了便于物业公司随时随地查看和预约商品，很显然，移动端应用更符合使用场景。而小程序则更加轻量级，无需安装，绑定QQ即可使用。

于是，我打算结构设计两个小程序版的蔬果在线交付网络平台，名字就叫“五日农庄”。

接着，可以开始着手小程序蓝本的设计了。

我的思索操作过程可以用这五步来概括：

一、梳理业务业务流程

回想一下，你平日里去蔬果店卖菜是怎样一种场景：

场景一：家里没余粮了，你要去购置2-3天的家常菜。但具体买些甚么，你也没想好。于是，你进入菜店，来到货架跟前，大致浏览一遍货架。咦，芹菜还挺美味的，你顺手拿起来看了看，再瞅了一眼价格，然后装到他们的购物袋里。就这样，你挑选了好一大袋比较美味的蔬菜，拎着袋子去大门口收银台，老板娘称重，计算价格，你退款结算，高兴地离开了。场景二：今天你想吃个清蒸鲈鱼。于是你径直来到菜店，让老板娘帮你现杀一条鲈鱼，并询问老板娘葱、姜、分别在哪里，然后抓取适量，结账，走人。场景三：老板娘最近天天搞活动，今天土豆、明天西红柿，折扣力度还挺大，何不趁机多囤许多。于是，你来到菜店，询问老板娘今日的特价商品，老板娘让你看货架上的特价标签，于是你挑选了若干他们认为划算的商品，心满意足地结了账。

实际上，无论你面临哪种场景，都要经过四个操作过程：从两个入口进入菜店、经过两个导购的操作过程、决策是否购买和完成交易。

1. 入口

要能包容以上三种购物场景：

没明确目的，从货架中挑选美味的蔬菜。有明确的购买目的，只买特定商品。有模糊的购买目的，以省钱为目标，愿意购买特惠商品。2. 导购

从入口到两个具体的商品详情，都可以视为广义的导购操作过程。

只不过，对于这三种购物场景，其导购形式有所差异。

对于没明确目的顾客，老板娘需要提供类目导航，也就是店大门口的货架。对于有明确购买目的的顾客，需要搜索功能。在店大门口，通常通过顾客喊话老板娘回答的方式来完成。对于有模糊购买目的顾客，老板娘可以提供各种特惠促销活动，薄利多销。在店大门口，通常以特惠专区和特惠价签的形式存在。3. 决策

浏览完商品的美味程度、价钱等详细情况之后。你就会做出购买决策：要么放弃购买，原封不动的放回货架；要么将商品放进购物袋。

4. 交易

决定购买并选完所有商品之后，将进入交易操作过程，你需要去收银台找老板娘称重、支付、并完成取货。

当然在这个操作过程中，你也可能因为队伍太长等突发情况临时决定放弃购买。

对于已经完成结账的顾客，老板娘通常不予退货。

二、拆分核心页面

暂且不考量常规的注册和登录，从上面的业务业务流程中，我们很容易拆分出商品的核心页面。

1. 入口

即首页。首页相当于蔬果店的大厅，要向顾客展示店铺中最重要的信息。

因此需要包含三个部分：导航专区、搜索专区、特惠专区。

2. 导购

从首页的三个专区进入，分别需要独立的导航 & 商品列表页、搜索 & 搜索结果页、商品详情页。

由于店铺每星期的特惠活动一般在10个以内，特惠促销形式也比较单一。因此不必结构设计单独的促销活动页面，首页的特惠专区就可以展示全部信息。

3. 决策

顾客需要从导航 & 商品列表页或商品详情页将商品添加至购物车，并在购物车中统一结算，因此需要单独的购物车页面。

4. 交易

具体有以下四步：

顾客从购物车中选择商品并结算，需要先确认订单的中的商品、数量等信息，因此需要一个确认订单页。提交订单后，需要核对订单信息是否正确无误，因此需要查看订单详情页。订单信息无误，顾客就可以放心支付，因此需要支付页。为了便于顾客查看往期订单，我们还可以结构设计两个全部订单列表页面。对于顾客放弃购买的场景，我们可以设置用户主动取消未支付的订单，或者为未支付订单设置两个时间，超过时间则自动取消，这样用户就不需要任何操作了。而这些均可以在全部订单列表页面完成。

就这样，我们得到了10个核心页面。

需要注意的是，由于篇幅关系，我们只结构设计了面向顾客的一端。商家管理商品和库存量的部分并不在其列。

三、梳理每个页面的信息结构

接下来，我们需要梳理每个页面的信息结构，即页面的全部元素及元素之间的逻辑关系。

以首页为例，它是这样的：

四、绘制蓝本界面

根据首页的信息结构，我们绘制出首页的蓝本图：

使用同样的方法，我们绘制出其余的页面：

很遗憾，关于“蓝本”，我并没找到两个权威的解释。

在软件开发操作过程中，不同的角色对“蓝本”的理解也有所不同。

比如：

很多开发人员可能认为蓝本必须以代码形式生成，并且最终将用作商品代码。结构设计师可能会认为蓝本需要在Figma或Sketch等结构设计工具中创建，可以是静态蓝本，也可以是交互蓝本。业务人员可能会认为蓝本是概念验证（POC），功能完备，可以模拟商品的行为或体验，可用于客户演示。

在这里，我所指的蓝本是软件开发中的常见形式：

“在软件开发的方案结构设计阶段，将商品需求通过可视化的界面传递给团队及用户的一种形式。简单来说，就是将商品页面的模块、元素、人机交互形式通过线框图的方式生动地表达出来。它可以是纸面蓝本，也可以是用专业商品结构设计工具中的可交互蓝本”。

绘制蓝本的工具许多、方法许多、保真度也有许多，可以综合他们的时间、工具的熟练程度、画图的功底来选择。

假如你是一位手绘很厉害的大神，不妨先用草稿纸绘制出界面的基本结构。手绘的速度很快，但精细程度不够，适用于快速展示他们对商品的构想。假如你有比较充裕的时间，且对结构设计软件有一定的基础，建议间接使用软件，这对日后升级保真度大有裨益。当然，如果你尚不具备视觉结构设计师一样的软件结构设计能力，大可使用线框图，只要能表达清楚页面、页面元素、及元素间的逻辑关系即可。操作过程中，如果你不晓得怎样图形化地表达许多具体的元素（比如时间选择器），可以参考ant design上的组件库，它会为您提供多种思路。假如你本人就是一位视觉结构设计师。那么，使用结构设计软件，一次完成低保真或中保真将是绝佳选择。

五、添加交互，完成蓝本结构设计

实际上，如果你有机会与客户面对面讲解结构设计方案，那么到第四步，完成静态蓝本页面就足够了。

不过很多这时候，我们的客户并不懂得结构设计知识，他们希望我们的蓝本结构设计能够像两个可工作的软件一样，不仅体现出APP的基本框架，还能体现出其外观和运作方式。以便他们的销售人员能够去向他们的客户展示，用以验证方案的可用性。

如此一来，我们就需要完成最后一步，为蓝本界面添加交互。

绝大部分软件都支持为蓝本添加交互的功能。

以MasterGo为例，它支持三种模式：

结构设计模式：你可以在其中绘制蓝本界面。蓝本模式：为蓝本界面中的组件添加交互事件，如点击、拖拽、悬停等。以此来使你的蓝本更加接近真实的软件。标注模式：可以协助开发人员测试元素与元素之间的距离，复制元素的属性值或者间接生成代码。这个功能大多在进入开发阶段后，使用高保真结构设计时才会用到。

在这里，我们使用“蓝本模式”为其添加了两个交互业务流程。

如图中蓝色线条所示：