第一步：明确业务场景与用户角色

大家好，我是灵雀，专注原型设计分享。今天我们来聊聊企业服务（SaaS/B端）产品的原型设计——很多入门PM和创业者觉得它复杂、枯燥，其实只要掌握方法，从0到1设计一套可用的企业服务原型，比你想的简单。这篇教程会手把手带你走通流程，全是实战干货。

第一步：明确业务场景与用户角色

企业服务产品不是给“所有人”用的，而是为特定岗位、特定流程服务的。设计原型前，先回答三个问题：

• 谁在用？（如财务、HR、销售主管）
• 解决什么问题？（如审批报销、管理客户线索）
• 核心流程是什么？（如从提交申请到审批通过）

建议用一张纸画出“角色-任务-数据”三角图。例如设计一个CRM系统：角色是销售和经理，任务是跟进客户和看报表，数据是客户信息和成交额。这个步骤决定了原型的功能边界，避免后期频繁返工。

第二步：从最核心的流程开始画

2.1 画“关键路径”

不要一上来就做完整页面。先画出用户完成一个核心任务需要的步骤。以“客户管理”为例，关键路径是：

• 销售登录 → 查看客户列表 → 点击某个客户 → 查看详情/编辑 → 添加跟进记录 → 提交给经理审批

用铅笔或axure画5-8个页面线框图，只保留必要的输入框、按钮、表格。这一步的目的是验证流程是否通顺，不纠结视觉。

2.2 添加“异常状态”

企业服务最怕断点。在原型里要画出：空状态（没有数据时显示什么？）、错误状态（输入格式不对的提示）、加载状态（数据刷新时的占位符）。很多新手忽略这点，导致开发后用户体验很差。

第三步：设计清晰的导航与权限

企业服务产品通常有复杂的菜单和权限体系。原型里要体现：

• 左侧导航：按功能模块分组（如首页、客户、订单、设置）
• 顶部操作区：搜索、通知、用户头像
• 角色权限：用不同颜色或标注区分管理员与普通用户可看到的按钮（例如“删除”按钮仅管理员可见）

建议用“全局组件”的方式统一导航样式，后续所有页面复用，减少重复工作。同时在原型里用文字注释：“此页面仅管理员可见”，帮助开发理解。

第四步：输出可交互原型并验证

原型不是静态图。用Axure或Figma做简单的交互：点击按钮跳转页面、弹窗提示、数据筛选效果。然后找2-3个真实用户（或同事）跑一遍流程，记录他们困惑的地方。你会发现：

• 审批流程少了一个分支
• 表格的列太多导致手机端无法显示
• 某个按钮名称太专业看不懂

这个迭代过程比画100个页面更有价值。

第五步：整理规范与交付文档

最后，把原型里的组件（按钮、输入框、表格、弹窗）整理成组件库，标明尺寸、颜色、交互效果。同时写一份简单的说明文档，包括：页面功能、数据来源（如“客户列表数据从CRM接口获取”）、异常处理逻辑。这样开发团队拿到后可以直接开工。

企业服务原型设计的核心不是炫技，而是“降低认知负担”。每个按钮都要有明确目的，每个流程都要有闭环。从第一步的角色分析开始，到最后的交付文档结束，你会发现：原来B端产品也可以很优雅。

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