产品8868体育原型设计的思考过程

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

　　src=很多新手在刚入门原型设计时，总会花费很多精力在工具的选择和打磨上，却忽略了原型设计的核心。等真正上起手来，只能照猫画虎，没有一个完整且系统的思路。

　　因此，我想聊一聊我在设计产品原型时的思考过程，希望对新上路的小伙伴们有所帮助。

　　我家小区楼下有一家蔬果店，叫 七日农场 ，日常供应果蔬、粮油8868体育、零食、饮料及一些基本的生活用品。

　　小区的老人们每天早上 8 点多就在农场门口排队抢菜，等到年轻的业主下班回家后，大部分菜品不是已经售罄就是被人挑剩了。

　　老板为了照顾这些上班族，随即拉了一个微信群；业主将自己需要的蔬菜清单发到群里，老板提前打包好，等到业主下班的时候直接来付款提货。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　我找老板了解过，他说大部分的顾客还是愿意亲自到店里选购，因为担心老板给配好的菜品质良莠不齐。

　　所以你看，一个产品被设计出来，一定要得到市场的验证，才能说明产品的成功与否。

　　验证可以有很多道环节。原型设计是第一道，高保真设计可以是第二道，最终发布的软件才是第三道。

　　不过作为日常练习的案例，这种看似不一定成功的点子并不妨碍你精进技术，反而会增强你的洞察力。