图：史江鸿

近日，罗永浩 x MasterGo 的合作视频火了。罗老师以诙谐幽默的方式道出了设计师在软件产品设计与交付中的痛点，并突出了MasterGo在协同设计时代的优势。我简单浏览了一下，MasterGo可以帮助产品设计师更高效地完成界面设计、交互原型等。实际上，此类的工具已经有很多，如Sketch、Figma、Adobe XD、Axure、墨刀等等。

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

这是一个关于小区门口蔬果店的故事……

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

小区的老人们每天早上8点多就在农场门口排队抢菜，等到年轻的业主下班回家后，大部分菜品不是已经售罄就是被人挑剩了。老板为了照顾这些上班族，随即拉了一个微信群，业主将自己需要的蔬菜清单发到群里，老板提前打包好，等到业主下班的时候直接来付款提货。可这又遇到了一些新的问题：

• 有些业主总是忘记自己预订了菜品，未能去提货

• 大部分人买菜时并没有明确的目标，而是什么新鲜、什么优惠就买什么。但从微信群预定的时候，没有菜品清单，也不知道价格和新鲜程度，业主也不知道该预定些什么

• 预定的菜品经常没有库存，老板也来不及一一通知大家

• 老板每日要处理的微信消息太多太杂，总容易遗漏

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

倘若老板委托我来设计这款线上果蔬订购平台，我将如何进行原型设计呢？

首先，要考虑选择什么样的平台。为了便于业主随时随地查看和预订商品，很显然，移动端应用更符合使用场景。而小程序则更加轻量级，无需安装，绑定微信即可使用。于是，我打算设计一个小程序版的果蔬在线订购平台，名字就叫“七日农场”。

接着，可以开始着手小程序原型的设计了。我的思考过程可以用这五步来概括：

步骤1：梳理业务流程

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

• 场景一 ：家里没余粮了，你要去购置2-3天的家常菜，但具体买些什么，你也没想好。于是，你进入菜店，来到货架跟前，大致浏览一遍货架。咦，芹菜还挺新鲜的，你顺手拿起来看了看，再瞅了一眼价格，然后装到自己的购物袋里。就这样，你挑选了好一大袋比较新鲜的蔬菜，拎着袋子去门口收银台，老板称重，计算价格，你付款结算，高兴地离开了。

• 场景二 ：今天你想吃个清蒸鲈鱼，于是你径直来到菜店，让老板帮你现杀一条鲈鱼，并询问老板葱、姜、分别在哪里，然后抓取适量，结账，走人。

• 场景三 ：老板最近天天搞活动，今天土豆、明天西红柿，优惠力度还挺大，何不趁机多囤一些。于是，你来到菜店，询问老板今日的特价商品，老板让你看货架上的特价标签，于是你挑选了若干自己认为划算的商品，心满意足地结了账。

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

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

  • 没有明确目的，从货架中挑选新鲜的蔬菜

  • 有明确的购买目的，只买特定商品

  • 有模糊的购买目的，以省钱为目标，愿意购买特惠商品

• 导购 ：从入口到一个具体的商品详情，都可以视为广义的导购过程。只不过，对于这三种购物场景，其导购形式有所差异

  • 对于没有明确目的顾客，老板需要提供类目导航，也就是店里的货架

  • 对于有明确购买目的的顾客，需要搜索功能。在店里，通常通过顾客喊话老板回答的方式来完成

  • 对于有模糊购买目的顾客，老板可以提供各种特惠促销活动，薄利多销。在店里，通常以特惠专区和特惠价签的形式存在

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

• 交易 ：决定购买并选完所有商品之后，将进入交易过程，你需要去收银台找老板称重、支付、并完成提货。当然在这个过程中，你也可能因为队伍太长等突发情况临时决定放弃购买。对于已经完成结账的顾客，老板通常不予退货。

步骤2：拆分核心页面

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

• 入口 ：即 首页 。首页相当于蔬果店的大厅，要向顾客展示店铺中最重要的信息。因此需要包含三个部分：导航专区、搜索专区、特惠专区

• 导购 ：从首页的三个专区进入，分别需要独立的 导航&商品列表页 、 搜索&搜索结果页 、 商品详情页 。由于店铺每日的特惠活动一般在10个以内，特惠促销形式也比较单一，因此不必设计单独的促销活动页面，首页的特惠专区就可以展示全部信息

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

• 交易 ：

  • 顾客从购物车中选择商品并结算，需要先确认订单的中的商品、数量等信息，因此需要一个 确认订单页

  • 提交订单后，需要核对订单信息是否正确无误，因此需要查看 订单详情页

  • 订单信息无误，顾客就可以放心支付啦，因此需要 支付页

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

就这样，我们得到了10个核心页面。需要注意的是，由于篇幅关系，我们只设计了面向顾客的一端，商家管理商品和库存的部分并不在其列。

步骤3：梳理每个页面的信息结构

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

步骤4：绘制原型界面

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

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

很遗憾，关于“原型”，我并没有找到一个权威的解释。在软件开发过程中，不同的角色对“原型”的理解也有所不同，比如：

• 有些开发人员可能认为原型必须以代码形式生成，并且最终将用作产品代码；

• 设计师可能会认为原型需要在Figma或Sketch等设计工具中创建，可以是静态原型，也可以是交互原型；

• 业务人员可能会认为原型是概念验证（POC），功能完备，可以模拟产品的行为或体验，可用于客户演示；

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

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

绘制原型的工具很多、方法很多、保真度也有很多，你可以综合自己的时间、工具的熟练程度、画图的功底来选择。

• 假如你是一位手绘很厉害的大神，不妨先用草稿纸绘制出界面的基本结构，手绘的速度很快，但精细程度不够，适用于快速展示自己对产品的构想

• 假如你有比较充裕的时间，且对设计软件有一定的基础，建议直接使用软件，这对日后升级保真度大有裨益。当然，如果你尚不具备视觉设计师一样的软件设计能力，大可使用线框图，只要能表达清楚页面、页面元素、及元素间的逻辑关系即可。过程中，如果你不知道如何图形化地表达一些具体的元素（比如时间选择器），可以参考ant design上的组件库，它会为您提供多种思路

• 假如你本人就是一位视觉设计师，那么，使用设计软件，一次完成低保真或中保真将是绝佳选择

步骤5：添加交互，完成原型设计

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

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

• 设计模式 ：你可以在其中绘制原型界面

• 原型模式 ：为原型界面中的组件添加交互事件，如点击、拖拽、悬停等。以此来使你的原型更加接近真实的软件。

• 标注模式 ：可以帮助开发人员测试元素与元素之间的距离，复制元素的属性值或者直接生成代码。这个功能大多在进入开发阶段后，使用高保真设计时才会用到。

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

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

最后，七日农场小程序的原型设计完了。可实际上，老板并没有委托。

我找老板了解过，他说大部分的顾客还是愿意亲自到店里选购，因为担心老板给配好的菜品质良莠不齐。所以你看，一个产品被设计出来，一定要得到市场的验证，才能说明产品的成功与否。验证可以有很多道环节，原型设计是第一道，高保真设计可以是第二道，最终发布的软件才是第三道。

不过作为日常练习的案例，这种看似不一定成功的点子并不妨碍你精进技术，反而会增强你的洞察力。不妨从现在开始找个点子练起来吧~

该存储库包含一个示例XD插件库，以帮助您进行整个旅程。 您可以使用这些样本来了解有关如何为Adobe XD生成插件的更多信息。 对于每个样本，请务必阅读自述文件和代码注释。 需要注意的是，与起始采样how-to-有伴侣的教程在，这可以在直播上观看我们的开发人员门户： 使用的主要API e2e-adobe-stock UI，网络I / O（获取） 允许用户使用端到端Adobe Stock Photo搜索 e2e-colorize-text UI，Scenegraph，ScenenodeList 提供多个文本颜色实用程序 e2e-create-polygon UI，Scenegraph，ScenenodeList 让用户创建自定义多边形 e2e-customize-banner UI，场景图 　　移动应用开发如火如荼的至今，一个好的APP 原型 设计 理念很容易被糟糕的界面和体验毁于一旦，如今市面有很多的 原型 工具可以帮助我们解决问题，但如何选择 原型 工具却成为 设计 师们最头疼的事情，一方面是由于不懂哪些工具适合自己，另一方面又没有多余的时间去挨个使用。那么今天，我就来为大家介绍以下8种 原型 设计 工具，供大家参考使用。 1.Axure 网站地址：Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool Axure RP是美国Ax 一、 原型 图核心功能：需求可视化 网站 原型 图 设计 是【需求可视化】的一个过程，是让网站的初步构思有一个可视化的展示。 原型 图是网站成型之前的一个简单框架，网页内的重要元素和板块功能将会通过绘制 原型 图，进行简单的布局和排版。 可以在纸上进行手绘 原型 草图、也可以将 原型 图画成一张精美的高保真图稿，只要能够将所有的需求呈现出来，与团队成员快速对接进行协作即可，更为重要的是能够将需求落地，进行测试、验证、优化、确认，最终形成一份完善的网站 原型 。 简而言之， 原型 图是根据需求所 设计 出来的可视化图稿，一个简单实验模型， MasterGo 是蓝湖旗下产品的团队协作的专业 UI/UX 设计 工具，对个人和教育行业永久免费。MasterGo 集成云端实时同步、多人同时编辑、随时在线评审、 设计 图一键交付等强大功能 一、 原型 设计 软件介绍为什么要进行 原型 设计 ？大约66%的软件开发失败或亏损的前三大原因为：       — 缺乏使用者参与      — 需求或规格不完整      — 需求或规格变更是一种高效的以用户为中心的技术，是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。全球>1000家公司使用Axure RP，淘宝、雅虎、腾讯、当当等都在使用二、Axure R... Axure RP是一个专业的快速 原型 设计 工具。链接不提供。 Ant Design Library v2.0.1 蚂蚁金服体验技术部出品，https://ant.design/docs/resource/download 注意ICON的使用： 因为该 原型 图为移动端，所有采用移动端的样式风格，先上图： 上图中，有个需要注意的地方，底部tab有个page切换功能，在此需要用 提起产品经理，我们首先想到的可能就是产品 原型 。虽然画 原型 并不是产品经理最核心的工作，但也算是比较重要的工作。 原型 是沟通的桥梁，也是产品经理输出的一种产品，对 原型 的掌握直接代表了产品经理的能力。所以，作为产品经理，不仅要认真对待产品 原型 ，更要使自己输出的每一份文档或资料都能发挥最大的价值。 一、什么是产品 原型 ？ 产品 原型 是产品 设计 方案的表达，是产品 设计 界面的展示，是功能与交互的示意，也是与其他人... 1、 设计 思维与习惯 首先，我觉得做 原型 设计 时非常重要的一点就是要有好的 设计 思维和习惯。做产品就是做工程，工程就要严谨有序，在大工程量级时，模块化前期不快，但中后期的优势明显，通过不断积累可以形成 原型 复用库。这些 设计 思维和习惯是我在进行 原型 设计 过程工作中的一些小体会，归结起来主要有以下几点： （1）全局意识：就是要在做 原型 ...