如何做产品原型设计：以微信小程序为例

梳理业务流程

本文将从五个步骤讲述如何做产品原型设计——以微信小程序为例。而做一个产品，不单单仅考虑产品的本身，还需考虑生活日常、市场环境等因素。接下来，让我们跟着作者，一起了解产品设计的流程吧~

很多新手在刚入门原型设计时，总会花费很多精力在工具的选择和打磨上，却忽略了原型设计的核心。等真正上起手来，只能照猫画虎，没有一个完整且系统的思路。因此，我想聊一聊我在设计产品原型时的思考过程，希望对新上路的小伙伴们有所帮助。

这是一个关于小区门口蔬果店的故事…我家小区楼下有一家蔬果店，叫“七日农场”，日常供应果蔬、粮油、零食、饮料及一些基本的生活用品。老板夫妇是安徽人，为人直爽，性格开朗，平日里的生意总是供不应求。然而年轻的业主们却有些苦恼。

小区的老人们每天早上8点多就在农场门口排队抢菜，等到年轻的业主下班回家后，大部分菜品不是已经售罄就是被人挑剩了。老板为了照顾这些上班族，随即拉了一个微信群；业主将自己需要的蔬菜清单发到群里，老板提前打包好，等到业主下班的时候直接来付款提货。可这又遇到了一些新的问题：有些业主总是忘记自己预订了菜品，未能去提货。大部分人买菜时并没有明确的目标，而是什么新鲜、什么优惠就买什么。但从微信群预定的时候，没有菜品清单，也不知道价格和新鲜程度，业主也不知道该预定些什么。预定的菜品经常没有库存，老板也来不及一一通知大家。老板每日要处理的微信消息太多太杂，总容易遗漏。

后来，我与老板交流：假如有个线上平台，他们每日可以在上面更新店里的商品和库存；并且将新品或当日优惠重点公布出来，业主们可以在平台上实时查看菜品信息，并直接下单购买；老板按照订单和提货时间提前打包；等到业主方便的时候去店里提货，这样就能做到线上线下相结合。既方便了业主，也能帮助老板打理生意。

倘若老板委托我来设计这款线上果蔬订购平台，我将如何进行原型设计呢？首先，要考虑选择什么样的平台。为了便于业主随时随地查看和预订商品，很显然，移动端应用更符合使用场景。而小程序则更加轻量级，无需安装，绑定微信即可使用。于是，我打算设计一个小程序版的果蔬在线订购平台，名字就叫“七日农场”。接着，可以开始着手小程序原型的设计了。我的思考过程可以用这五步来概括：

1. 梳理业务流程
2. 拆分核心页面
3. 梳理每个页面的信息结构
4. 绘制原型界面
5. 添加交互，完成原型设计

拆分核心页面

从上面的业务流程中，我们很容易拆分出产品的核心页面。

1. 入口即首页。首页相当于蔬果店的大厅，要向顾客展示店铺中最重要的信息。因此需要包含三个部分：导航专区、搜索专区、特惠专区。
2. 导购从首页的三个专区进入，分别需要独立的导航&商品列表页、搜索&搜索结果页、商品详情页。由于店铺每日的特惠活动一般在10个以内，特惠促销形式也比较单一。因此不必设计单独的促销活动页面，首页的特惠专区就可以展示全部信息。
3. 决策顾客需要从导航&商品列表页或商品详情页将商品添加至购物车，并在购物车中统一结算，因此需要单独的购物车页面。
4. 交易具体有以下四步：顾客从购物车中选择商品并结算，需要先确认订单的中的商品、数量等信息，因此需要一个确认订单页。提交订单后，需要核对订单信息是否正确无误，因此需要查看订单详情页。订单信息无误，顾客就可以放心支付，因此需要支付页。为了便于顾客查看往期订单，我们还可以设计一个全部订单列表页面。

对于顾客放弃购买的场景，我们可以设置用户主动取消未支付的订单，或者为未支付订单设置一个时间，超过时间则自动取消，这样用户就不需要任何操作了。而这些均可以在全部订单列表页面完成。

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

梳理每个页面的信息结构

接下来，我们需要梳理每个页面的信息结构，即页面的全部元素及元素之间的逻辑关系。以首页为例，它是这样的：

绘制原型界面

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

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

添加交互，完成原型设计

实际上，如果你有机会与客户面对面讲解设计方案，那么到第四步，完成静态原型页面就足够了。不过有些时候，我们的客户并不懂得设计知识，他们希望我们的原型设计能够像一个可工作的软件一样，不仅体现出APP的基本框架，还能体现出其外观和运作方式。以便他们的销售人员能够去向自己的客户展示，用以验证方案的可用性。如此一来，我们就需要完成最后一步，为原型界面添加交互。

大部分软件都支持为原型添加交互的功能。以MasterGo为例，它支持三种模式：

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

在这里，我们使用“原型模式”为其添加了一个交互流程。如图中蓝色线条所示：

最后，你可以在MasterGo中直接预览交互体验，或者copy链接到网页或设备中体验。