2023年B端产品设计工作流四步法

B端产品设计工作流四步法产品经理的日常工作之一是产品设计，在做原型设计工作中，你是否曾经遇到过下面这些问题：

考虑不周全，常常漏场景漏页面；缺乏设计思路，不知道要怎么画；或者知道怎么画，却不清晰为什么要这么画；好不简单原型demo做好了，给客户演示时，客户却说不是他们想要的消失上面这些问题，除原型工具把握不娴熟外，还有一个更重要的缘由，就是没有形成自己的原型设计基本流程，缺乏思索框架，跟着感觉画原型。

今日我用一个案例模拟如何从一个需求转化成可实施的产品原型设的。

项目背景：

由于疫情形势加剧，某镇级领导接到上级指示，要求全镇做核酸检测，镇级领导的需求比较明确，一是通过登记、报道扫码，让居民补充信息，便利统计做核酸人数；

二是想要通过想通过全员核酸检测，摸查全镇人员底数，补充各个镇街的人员基础信息台账。

简略的功能结构图示例

简略的信息架构图示例

比如移动端扫码登记中，我们描述页面信息结构、信息字段属于信息架构图，比如登录页的「手机号」、「验证码」属于信息架构里面的；描述详细功能属于功能结构，比如登录页面的手机号验证登录功能。

三、规律闭环—页面流程图

通过业务流程和功能结构，就可以进一步明确页面流程了，面流程图是业务流程图和原型图的中间阶段，它能够做到的是关心我们梳理有多少页面，页面之间的关联是什么，能够有效削减规律漏洞和页面遗漏，这个阶段的交付物就是页面流程图了。

页面流程图包含什么？

四方形：业务流程中四方形部分，特别一流程为tip或者弹框。流向：主干流向和帮助流程。重点元素：每个流程中，重点要体现和表达的内容是什么？

简略的页面流程图

以项目为例，比如用户信息扫码登记，第一个页面是用户手机号验证登录；其次个页面是用户信息猎取页面。

这里会有3个分支页面，数据库有用户信息，直接猎取确认登记的页面。

数据库数据有误，重新登记的页面；若数据库无用户信息，补录登记的页面。

登记确认需要有一个结果页，这就是扫码登记页面的页面流程图的思索路径。

四、功能交互—产品原型图

这一步就是使用工具画原型，做交互原型设计了。许多公司功能设计和交互设计都是产品经理一人完成的，大的公司可能有特地的交互设计团队。

关于如何去做产品原型图，我分为四个关键步骤：

（1）选择合适的组件库

这些依据我们要做的产品类型去选择对应的组件，比如我做的是小程序端的，直接应用小程序组件框架，这样只需要设计核心内容元素就可以了。

（2）依据页面流程图，搭建每个页面的元素

以项目为例，比如上面提到的用户信息扫码登记，第一个页面的关键元素：手机号、验证码、猎取验证码、确认登录这些关键元素，组合在一起就搭建成了第一个核心页面。

（3）结合页面之间的关系，建立跳转链接

这块是将我们静态的原型通过链接，可以将其转化成动态交互的demo。

（4）标注说明，补充需求细节

标注留意不同角色关注的内容不一样，开发关注“边界条件”、“页面跳转”；设计最关怀的有页面数量和功能是否遗漏。

简略的原型线框图

一个好的标注有以下几个条件：

标注点的含义，发生的大事；用梳理全部对象和规律关系、状态；模块化区分和标记。每个功能可以做成一个用例，通过用例名、用例编号、角色、简要说明、主流大事、特别和分支大事流、前置条件、后置条件将齐规章细化。

1.B端产品设计的要点

（1）清楚

界面主次分明，对于核心用户，很简单推断自己在当前页面能干什么，核心信息清楚一道，语句简介无歧义，不会让用户感到迷茫和不知所措。

（2）高效

比如，依靠内容或设定的业务规律自动进行关联的操作，比如我们数据能够识别和新用户行为，并在他们操作时赐予对应的推举；尽量削减跳页操作，对于80%的操作或者需要的信息，需要3次点击以内就能够到达。

（3）全都性

1）业务规律的全都性：不同模块或页面的同类功能，你是否有同样的操作？同样的定义是否使用了同样的标题或者文案。

2）结构层框架层的全都性：即各级导航菜单的结构、页面的框架和布局等。比如操作区域是位于页面右侧还是下方；新增是跳转还是弹出框等。

3）表现层的全都性，即核心控件、元素、交互动作是否全都：包括视觉和交互样式。如常用的空间按钮图标弹框、点击效果、滑动效果等。

4.美观。

美观是提升体验、激发愉悦感的重要手段。美观是仁者见仁，智者见智的，很难达到一个统一的标准，但是也存在一些较宽泛的准则：页面信息的易读性；颜色的统一性与协调性；布局的协调性，主次分明等。

五、写在最终

产品设计是产品经理的工作重点，既要考验调研力量、需求识别力量、需求分析转化的力量，也要考验产品场景化思维和规律闭环力量，还要考虑界面设计和交互力