第一步：需求梳理与业务建模（画原型前最重要的30分钟）

大家好，我是灵雀。今天我们不聊花哨的动效，也不谈复杂的用户增长模型，而是回归原点——为那些刚踏入企业服务领域的产品经理和创业者，分享一套从0到1设计SaaS或B端原型的方法。

企业服务产品（以下简称B端产品）与C端产品最大的不同在于：它解决的是工作场景下的“效率问题”与“协作问题”。用户往往是被动使用，决策链长，且对数据准确性、操作效率有极高要求。很多新手PM一上来就画界面，结果画完发现逻辑不通、流程断裂。今天我们就从需求验证开始，按步骤走完原型设计的全流程。

第一步：需求梳理与业务建模（画原型前最重要的30分钟）

任何B端原型都始于对“业务流程”的深刻理解。不要急着打开Axure或Figma，先拿出纸笔或流程工具，完成以下动作：

• 明确“谁在用”：列出所有角色（如管理员、普通员工、财务、审批人），并画出角色-用例图。例如：请假审批中，员工发起、主管审批、HR归档——每个角色的操作权限必须不同。
• 画出核心“泳道��”：用泳道图展示端到端的业务流程。比如“从员工提交报销单到财务打款”，涉及多少个状态节点（待审批、审批中、已通过、已打款）？每个节点谁负责？异常情况（驳回、撤回）如何处理？
• 定义数据实体：列出关键字段。以“客户管理”为例：公司名称、联系人、电话、上次跟进时间、客户状态（线索-跟进中-已成交-流失）。这些字段决定了你原型中的表单和列表。

这一步产出物：一张清晰的业务流程图 + 一份角色权限矩阵表。有了这个基础，后续原型才不会跑偏。

第二步：从“核心路径”开始搭建低保真原型

B端产品功能往往庞杂（报表、设置、权限、审批流……），新手最容易犯的错误是试图一次性把所有页面画全。正确做法是：先画一条“黄金路径”，即用户完成一个核心任务所需的最少页面。

2.1 设计“列表页”与“详情页”

几乎所有B端产品都遵循“列表→详情→操作”的范式。例如“订单管理”：

• 列表页：展示订单编号、状态、金额、操作按钮（查看/编辑/删除）。注意：要预留搜索框、筛选条件、分页器。这是高频操作区域，务必放在顶部。
• 详情页：展示完整的订单信息，包括商品明细、物流、支付记录等。通常采用“左侧导航+右侧内容”的布局，或使用Tab切换不同信息模块。

2.2 设计“表单页”与“审批流”

表单是B端产品的核心交互。设计时牢记三点：

• 分组与引导：将相关字段分组（如“基本信息”“财务信息”），每组加标题。必填项用星号标出，并设置输入校验（如手机号格式）。
• 错误状态：当用户输入不合法时，表单下方显示红色提示文字，而非弹窗。减少用户中断感。
• 审批流可视化：如果涉及多人审批，建议在提交后显示“审批进度条”（如待一级审批→待二级审批→已完成），让用户感知到当前卡在哪一步。

第三步：高保真原型与交互细节打磨

低保真原型验证了业务逻辑后，进入高保真阶段。此时重点在于“信息层级”与“操作效率”：

• 导航设计：B端通���采用侧边栏导航（可收起），顶部放置全局搜索、通知、用户头像。侧边栏最多三层，超过三层建议用“面包屑+子页面”结构。
• 表格设计：表格列不宜超过8列，超过则启用“横向滚动”或“显示/隐藏列”功能。关键操作（如编辑、删除）使用图标按钮，避免文字按钮占空间。
• 批量操作：勾选多行后，顶部出现“批量删除”“批量导出”按钮。这是一个容易被忽视但能极大提升效率的功能。
• 空状态：当数据为空时，不要只显示“暂无数据”。应给出引导：如“还未添加客户？点击这里新建”或提供“导入模板下载”。

另外，善用组件库（如Ant Design、Element Plus）来快速搭建高保真原型。但注意：不要为了炫技添加复杂动效，B端用户更关注“能快速完成工作”。

结语：原型只是桥梁，业务才是根本

企业服务原型设计本质上是一场“业务流程的数字化翻译”。今天我们从需求建模、核心路径搭建到交互细节，走完了一个完整流程。但请记住：原型只是沟通工具，真正的价值在于你能否通过原型，让开发、业务方、老板都准确理解“系统如何帮用户解决问题”。

希望这篇教程能帮你迈出第一步。如果你在画原型时遇到具体问题（比如权限设计、复杂表单逻辑），欢迎留言交流。最后，所有好的设计都源于对业务的敬畏——多和你的目标用户聊聊天，往往比看一百篇教程更有效。

更多优质原型模板，欢迎访问灵池免费原型站 7app.cn