B端产品设计之原型Demo设计

B端产品设计之原型Demo设计

产品经理的核心价值是能够准确发现和满足用户需求，把用户需求转化为产品功能，并协调资源推动落地，创造商业价值释放双眼，带上耳机，听听看~！

产品原型对于每一个产品经理而言，都有着至关重要的作用。作者结合实际经验，将从原型设计角度出发，主要阐述如何设计产品原型图，产品原型图包括哪些部分以及设计组件库搭建这几个方面阐述，希望对你有所帮助。

前几篇文章从B端产品的业务梳理、业务及流程设计角度出发，为大家分析了在设计产品之前的一些基础工作，这些准备做好后我们原型设计也会相对来说更加顺畅与清晰。本篇文章将从原型设计角度出发，主要阐述如何设计产品原型图，产品原型图包括哪些部分以及设计组件库搭建这几个方面阐述。

如何设计产品原型图

1.将需求转化为原型图在这部分我们需要把文字转化成图像，更直观的让用户感受到需求的实现，以来确定需求设计的正确性。这一环节也是大部分产品经理的核心工作。当我们根据某个需求进行原型设计的时候，首先要考虑的是基于前期的流程设计，需要拆分几个页面去完成这个需求，每个页面实现什么样的功能。这部分不再赘述，可以看上一篇文章《B端产品设计之业务设计》。简单来说到这一步，就是将每个页面的需求通过各组件及交互设计进行实现。如果前面的信息足够多和详细，那原型设计是非常快的。当然，不是到这就结束了。在原型设计过程中，需要考虑功能设计合理性，比如这里我是用弹窗承载信息还是用页面承载信息？别看这么一个小的设计，都会影响开发团队的工作量，所以产品经理在原型设计环节要思考每一步设计，为什么要这样设计，这样设计的好处是在哪儿？多反问下自己，多思考。这样在原型评审环节，才会有理有据，而不是简单的抛出一句“xxx产品也是这样设计的”。

2.二八法则设计结合上一篇文章《B端产品之业务设计》，基于流程与功能的设计，就能完成80%原型，功能为页面布局设计提供基础，流程为交互设计提供基础。同样的是二八法则，产品经理根据自己前期的调研结果，比如功能架构、流程图等进行原型设计，完成80%的原型设计以及PRD，剩下20%是需要和团队一块头脑风暴，补充或调整原型，输出最终100%的原型设计。当然也有可能存在返工，比如UI设计发现这里布局紧凑调整，开发发现原先的交互方式无法实现，或实现出来与预计的结果要差，都会导致原型调整，调整不可怕，可怕的是推到重新设计，所以提到80%的原型设计输出后就要和团队进行沟通与澄清，降低返工率，保证产品业务设计核心不偏离。切记，产品经理最忌讳闭门造车，埋头苦干设计了很久的原型，有可能在评审阶段就当头一棒。我们同样要在设计上预留备选方案，这样在调整的时候才不会觉得全都重新设计，如果有组件库那么会更快的完成调整。

3.原型设计包含的内容

• 全局说明：原型部分的全局说明主要是指页面设计规范与逻辑设计规范，保持全局统一，该部分贯穿原型设计-UI/UE设计-开发-测试整条线。考验的是各阶段负责人的提炼能力，因为需要站在更高维度去审视自己所负责的部分。产品经理和设计师需要全局把握页面与交互设计规范，产品经理和开发团队需要把握逻辑设计规范。
• 功能流程设计：将前期整理的功能流程设计一并放入到原型中，便于功能原型/交互设计的时候对照流程进行设计，也便于开发团队看原型与流程一起。
• 原型图设计：我们只需要通过图形设计实现需求表达即可，不必追求完美。留给产品经理的时间不多，即使时间较为充裕的情况，我们也会因为需求变动或其他情况导致原型设计时间紧张，常见的就是甲乙方，甲方最开始表达的确实是A，当看了原型后，可能会变成A+1，所以最终我们输出的可能是A+N或者是A-N，其实变动都不可怕，我们只要掌握好自己的节奏即可。

与PRD的结合

在产品前3年，我的原型设计稿和PRD是分开的，在一次次和开发团队确认需求实现的时候，发现他们大多时候要么只看设计稿，要么只看PRD，二者都看的人少之又少。对于每一个个体来说，他们优先都会选择更节省时间或利己的方式，但是往往PRD和设计图是不可单独阅读的，需要结合起来阅读。采用将重要交互或说明贴在原型设计中的方式，能够更快速的去沟通，包括复杂交互的说明也更加容易的沟通。图文结合也往往是人们最容易阅读和接受信息的方式。

关于组件库的搭建

现在有很多成熟的开放设计平台供我们参考，这些会提供基础的组件样式，但大部分没包括交互设计，但对于我们原型基础功能的应用还是有很大的帮助的。我们搭建个人组件库，是更好的帮助我们去完成原型的输出和调整原型。我们有自己的组件库后，可以把自己每一次大的改动或新设计的组件放在一起，不要为了节省时间放在一个画布里面，还是要分类，框架设计、表单设计、按钮设计等等。我们搭建个人组件库，是更好的帮助我们去完成原型的输出和调整原型。