摘要：B端产品经理在产品设计的时候，在完成了核心业务流程，产品定义，应用架构，功能模块，业务建模，角色和权限梳理，然后到页面流转梳理的这一个步骤，详细到每个操作需要访问哪些页面，产品一共有多少页面。这个时候就需要为每个页面设计具体的交互功能，也称为界面设计。

B端产品经理在产品设计的时候，在完成了核心业务流程，产品定义，应用架构，功能模块，业务建模，角色和权限梳理，然后到页面流转梳理的这一个步骤，详细到每个操作需要访问哪些页面，产品一共有多少页面。这个时候就需要为每个页面设计具体的交互功能，也称为界面设计。

在进行界面设计之前的步骤很多，经过前期上面那些步骤，我们会发现，现在对整个业务形态和系统构建已经一目了然了。对整个项目和产品的掌控力越来越得心应手。这个时候再来界面设计就非常容易，并且胸有成竹。

1. 界面设计的流程

在公司团队分工明确，人力充足的情况下，设计一套B端的产品时，界面设计的步骤一般如下。

a. 产品经理绘制线框原型图，描述软件中每个页面的设计需求。

b. UE设计师协助产品经理完善和补充交互体验，并制作交互原型。

c. UI设计师基于交互原型进行美工设计，生成切图文件，并给到前端开发工程师。

d.前端开发工程师拿到切图文件，进行前端开发，包含实现交互，动效等功能。

当一套完整的业务系统上线后，如果新增页面交互和流转功能，仍然需要UE和UI设计师的支持。一般前端工程师会把一些常用的按钮，文本框，下拉框，表格等常用控件，设计为组件的方式，便于在后期的产品中进行直接调用。最好B端产品经理也要懂一些UE和UI的知识，这样便于和UE和UI交互设计师进行沟通。

2. 绘制原型图

产品经理需要将每个页面的排版央视，控件设计及交换效果，用通俗易懂的形式表达出来，方便相关人员快速理解。原型图是一种很好的表现形式，绘制原型图的工具很多，一般常用的有Processon, Axure,Figma,墨刀等。

绘制原型图目的在于表达清楚界面上的交互功能设计，而非UI效果。下图展示了通过Axure绘制的人工智能质检SAAS平台的原型图，图中包含的页面和功能信息有：操作界面，参数设定，报表统计，告警事件，图片记录，操作记录，系统设置等功能模块。

关于怎么绘制原型图，在互联网上有很多学习资料，大家可以自己在网上查找并实践，在这里就不详细的讲述了。

来源：鼠meme