刚带新人的时候我每周要花大量时间审原型图。看得多了以后发现一个规律很多新人画原型图第一件事就是打开工具拉矩形、摆按钮、拖图标一上来就奔着“高保真”去。结果图交上来单看每一页都挺精致可真要往下走流程开发问一句“这个页面从哪进来的点这个按钮跳去哪加载失败怎么办”——就答不上来。问题不在画图速度也不在工具熟练度而在大多数人的习惯里缺了一步动笔画原型之前先画页面流程图。这其实是我自己从踩坑里总结出来的方法。早期我做产品时也喜欢直接画页面觉得流程图是流程图画、原型是原型两码事。后来连着几个版本在评审会上被开发指着原型问“这个分支谁触发”“用户能不能从B页回到A页”我才意识到页面流程图是原型的骨架原型图是骨架上的血肉。今天这篇就围绕这个方法展开把“先画页面流程图、再画页面原型图”的完整路径讲透并且用抖音这个大家都很熟悉的产品作为素材一步步拆给大家看。1. 为什么你画的原型图总被说“逻辑不清”根子出在动笔顺序上先别急着打开 Axure 或 Figma。我们得先把“原型图”这个东西的本质想明白。1.1 页面流程图和页面原型图的分工我见过不少团队把“原型图”当成一个单一的交付物好像画一张图就完事了。但实际上真正支撑一个功能从想法到落地需要两件东西配合页面流程图回答“用户会经过哪些页面、在什么条件下发生跳转、每个分支通向哪里”。它不关心按钮长什么样不关心颜色只关心页面之间的关系。页面原型图回答“单独一个页面上有哪些模块、按什么顺序排列、每个控件放哪、默认展示什么”。它把流程图中的每一个节点展开成一张能看清细节的版面。类比一下更好懂。页面流程图是房子的户型图页面原型图是每个房间的装修效果图。你不先定户型就直接装修很可能出现“客厅没有门”“卫生间正对大门”这种返工问题。原型图同理页面之间跳转关系没定清楚单页画得再漂亮连起来走不通等于白画。1.2 三个常见误区十有八九的新人会踩我不止一次在新人交上来的原型里看到这三种问题而且它们往往同时出现把原型图当 UI 稿。一上来就抠颜色、调阴影、选字体结果页面之间的跳转关系完全没画。原型图的价值是验证交互逻辑不是视觉稿。高保真有专门的视觉设计师去做产品经理画原型的重心应该放在“逻辑正确”上。跳转不闭环。画了一个弹窗弹窗上有“去设置”“取消”两个按钮但点了之后分别发生什么没画画了一个列表页却没说清从哪个入口进入。评审会上开发一问就懵。只画理想态。页面上全是满满当当的数据、顺顺利利的操作结果。空状态长什么样网络请求失败长什么样没有历史记录时怎么展示这些全都没有。这三个误区背后其实是同一个根因没有先把页面流程想清楚就急着画单页。所以我带人的时候特别强调一个固定动作任何页面原型图动笔之前先交一版页面流程图给我看。流程图这关过了再开始画页面。2. 用页面流程图把信息架构和跳转逻辑钉死页面流程图到底怎么画很多人以为要学一堆 UML 规范其实不用那么复杂。我更推荐用一套简单到团队里任何人都能看懂的约定。2.1 一套够用的符号约定我常用的符号不超过五个矩形代表一个页面圆角矩形代表弹窗或半屏面板箭头代表跳转方向箭头上的文字代表“触发动作”和前置条件菱形代表判断分支。如果你愿意可以用不同颜色区分“新增页面”和“已有页面”但核心原则只有一个图要让别人一眼看懂而不是只有你自己看得懂。很多新人容易陷入一个误区就是去学各种复杂的流程图规范画出来的图规范是规范但满屏交叉线正常人根本读不动。产品团队内部的沟通工具关键是清晰不是严谨到可以发布论文。2.2 用抖音拆解一张页面流程图光说理论太虚我们用抖音来走一遍。假设我们想表达新用户首次打开抖音的核心主路径页面流程图大概是这样的结构启动页冷启动展示 logo 和品牌信息指向内容推荐页也就是“推荐信息流”首页。不过要注意首次启动和已登录用户的状态不一样所以这里需要分一个判断分支是否已登录。未登录可以看到推荐内容但想要点赞、评论、关注就必须进入登录页。已登录直接进入首页信息流用户刷到感兴趣的视频点击评论区进入评论面板或者点击作者头像进入个人主页。从个人主页用户可以看到对方的作品、关注列表也可以点击“关注”按钮触发关注逻辑。想自己发视频就点击底部导航栏的加号按钮进入拍摄/发布页。把这条路径画成页面流程图就是下面这样启动页 → 是否已登录 否 → 登录页手机号验证码登录 → 首页信息流 是 → 首页信息流 → 点击视频任意位置/上滑 → 视频播放页/信息流上下滑 → 点击评论图标 → 评论面板半屏弹窗 → 点击评论框 → 输入评论 → 点击作者头像 → 个人主页 → 点击关注按钮 → 关注成功/已关注 → 点击底部加号 → 拍摄/发布页 → 点击底部“我” → 我的主页画这张图的时候不需要画得多好看重点是你要能顺着箭头走下来并且能回答“用户为什么会从 A 页到 B 页”这个问题。每一步跳转我建议都在箭头上写清楚触发条件比如“点击头像”“点击评论区图标”。这样后面画原型图时就不会忘了把入口控件做出来。2.3 画完页面流程图后的三条自查标准每次画完一版流程图别急着往下走。花五分钟对着图问自己三个问题能不能从任意一页出发走完一条完整路径并回到起点如果有页面“有去无回”说明返回路径缺失。每一个分支条件是否都有对应的页面或状态比如登录页要有“登录成功”和“登录失败”两个出口失败后弹提示还是留在原页必须画清楚。信息架构是否和导航结构一致底部导航有几项就应该有几条对应的主要分支。不一致的话先改架构再画图。这三条标准看着简单但每次评审翻车基本都是栽在这几个问题上。3. 页面流程图到页面原型图的“翻译”方法流程图确认了接下来才轮到页面原型图登场。很多新人这一步会突然卡住流程图逻辑明白可一张具体的页面到底怎么排布我从实践里总结了一套“翻译”规则按步骤照做就行。3.1 节点变页面连线变跳转分支变状态的映射先说最核心的对应关系。页面流程图里的每一个矩形节点就是一张页面原型图。如果流程图上某个节点被复用多次——比如抖音的“个人主页”既能从视频播放页点头像进入也能从底部导航“我”进入还可能是别人主页和我的主页两种变体——你需要在原型注里写清楚这个页面有几套状态分别从哪个入口进来。箭头对应的是原型图里的“交互说明”。每一条连线在原型图上都要找到能触发它的控件。比如流程图上画了一条“点击评论图标 → 评论面板”那原型图的视频播放页上就必须有一个评论图标并且图标旁边要有注释“点击弹出评论面板”。如果你在原型图上找不到这个控件那就是漏了。判断分支对应的是原型图上的状态。比如“是否已登录”这个分支落到首页信息流上就体现为未登录时点“点赞”弹登录引导已登录时直接生效。这些在画原型时都要作为独立状态画出来或者用文字在页面旁边标注出来。3.2 从“结构草图”到“低保真原型”的绘制顺序很多新人拿到流程图直接就开始拖控件我建议再加一步先画结构草图。用笔在纸上画出页面骨架或者用画板工具拉几个矩形块就行不用管间距、字体、颜色。结构草图只需要回答三个问题页面从上到下分成几大块比如抖音首页信息流从上到下就是“顶部 Tab 栏 信息流卡片 底部导航栏”。每块里最重要的内容是什么信息流卡片里最重要的是视频展示区、作者信息、点赞/评论/转发按钮。哪一块是用户首要操作的区域抖音首页用户的首要操作是上滑切视频所以手势要明确标注出来。草图确认后再把它落到原型工具里做成低保真原型。这时候可以开始拉具体控件但颜色、圆角、字体一概不纠结能用灰色矩形代表图片用横线代表文字就足够了。3.3 三种精度怎么选低保真、中保真、高保真原型图不是精度越高越好关键看用在什么阶段。我做项目一般分了三种低保真画线框标注页面结构和跳转关系用于方案早期的讨论和走查。特点就是快方便不断推翻重来。中保真加入具体文案、字段、控件状态能看出页面的大致内容但不追求视觉还原。用于评审、给开发看逻辑。高保真接近最终视觉稿甚至做成可点击的 Demo用于向客户演示或做用户测试。对产品经理日常工作来说中保真用得最多。因为高保真成本高、改起来慢反而会让人不敢推翻方案。必要的时候挑核心链路做高保真即可其他页面保持中保真就好。4. 抖音案例实操从一张页面流程图到四张关键原型图理论部分讲完下面进入实操。我们完整走一遍从抖音的信息架构出发把流程图的节点落到原型图上拆解关键页面上画什么、怎么画、注释里写什么。4.1 先画信息架构草图明确抖音的四个核心页面在画任何一张页面原型图之前先把这个产品的信息架构列出来。抖音的信息架构从用户视角看大致是四块首页推荐信息流用户刷视频的沉浸式页面上下滑切换视频。搜索/发现很多用户从搜索进入但我这里用“首页 搜索入口”简化表达。发布/拍摄用户生产内容的主入口。个人主页与我的用户查看自己的内容、管理作品和设置。我建议你把页面流程图和信息架构图对照着看。比如抖音从“首页信息流”点击作者头像就能进入“他人个人主页”而底部导航“我”进入的是“我的主页”。这两个页面长得非常像但数据和操作权限完全不同。如果你是产品经理必须画清楚这一点否则开发就会做错页面逻辑。4.2 推荐视频流首页原型的绘制要点首页是抖音的门面原型图信息密度很高。它的布局从上到下大概是状态栏 顶部区域搜索图标、扫一扫图标、若干 Tab推荐、关注、直播等。中部视频画面占满大部分屏幕右下角有用户头像、点赞、评论、转发、收藏按钮。底部半透明导航栏有首页、朋友、加号、消息、我。画这张原型图的关键不是把视频画面画多漂亮而是把交互区域标清楚。我的做法是用一个大矩形代表视频展示区标注“视频画面支持上滑/下滑切换”右下角一列控件用圆形带图标表示每个图标右侧或下方用灰色小字说明点击行为。这里特别要注明上滑切下一个视频是抖音最核心的手势必须在原型注释里单独写出来。很多新人只画静态控件忽略手势开发做出来才发现交互缺失这就是典型的“流程图和原型图脱节”。另外一个容易漏掉的是底部导航为什么是半透明的因为抖音的产品设计希望用户在沉浸刷视频的同时还能切换功能。你在原型图上可以用一个半透明的矩形压住视频画面并加注释“此处视频内容上滑时透出底部导航”这样开发才明白层级关系。4.3 视频播放页播放控制、评论区、交互反馈在抖音的场景里“视频播放页”和“首页信息流”往往是同一个页面不需要新开一页。但作为原型图你必须把播放区域的各种状态画出来播放中视频正常播放右下角显示点赞数、评论数、转发数。暂停点击视频画面出现暂停按钮和进度条。评论面板从右下角评论图标呼出半屏滑出展示评论列表和输入框。尤其需要注意的是评论面板。抖音的评论面板是典型的“半屏弹窗”上方露出部分视频画面。画原型时我建议底部用圆角矩形表示面板并在面板上方明确标注“可下滑关闭”这类的关闭手势。这里还有一个我在评审中常看到的问题新手把点赞的“已赞”状态画成了一个独立的弹窗这是错的。应该在同一个控件旁边用两套状态表示未点赞是空心图标已点赞是红色实心图标。点击后的反馈是数字 1不需要跳走。4.4 个人主页和发布入口原型的绘制要点个人主页的布局从上到下一般是背景图或头像区域、用户昵称和简介、作品合集、数据粉丝、关注、功能按钮私信然后是 Tab作品、喜欢。画这张图的关键在于区分“我的主页”和“他人主页”我的主页有“编辑资料”“扫一扫”等设置类入口。他人主页有关注/私信按钮没有编辑入口。底部导航“我”和从作者头像进入的主页虽然在页面结构上相似但是一个是自己的一个是别人的。页面流程图如果只画一个“个人主页”节点很容易漏掉这两者的差异。这里我建议流程图上把它们拆成两个节点或者在原型图注释里写清楚。发布入口要画清楚遮罩层。抖音底部中间加号按钮点击后一般弹出半屏菜单或进入拍摄页。我在原型图里会用灰色蒙层覆盖在原页面之上底下露出半透明的视频信息顶部是“拍摄”“直播”等入口。此时要标注这一层是半屏面板点击蒙层区域可返回。4.5 页面流程图与原型图如何配对用于评审评审会上我习惯把两样东西同时投在屏幕上左边是页面流程图右边是对应节点的原型图。这样开发问“这个页面怎么进来的”我指流程图的箭头开发问“这个按钮长什么样”我指原型图上对应的控件。两个文件互为索引逻辑完整评审效率特别高。也正因如此我在命名时会把流程图节点和原型页面用同一套编号关联起来。比如“P01 启动页”“P02 首页信息流”“P03 评论面板”原型图也直接用同一个编号。这个习惯一开始坚持会有点麻烦但到项目后期回溯需求时价值极大。5. 画原型图最容易翻车的几个地方以及我的处理方案带过的人多了翻车的点基本就集中在下面这几类。我把它们整理出来每个问题都给一个我实测有效的处理方案。5.1 跳转关系只在流程图里画原型页面里却找不到入口这是最常见的问题。流程图里明明有一条“点击头像进入个人主页”的连线但原型图上视频播放页右下角只画了点赞、评论、转发三个图标头像没有单独作为一个控件画出来。开发拿到原型并不会去看流程图他只会照着原型图做。原型图上没有的控件开发就默认不需要。处理方案画完原型之后对着页面流程图逐条检查连线。每一条从 A 页到 B 页的箭头都要在 A 页原型图里找出对应的交互控件并在控件旁边写注释。我甚至会花十分钟拿一张纸把流程图和原型图的对应关系逐项打勾确保没有遗漏。5.2 只画理想态不画空态、加载态、异常态很多新人画“消息列表”默认塞满了几十条聊天记录画“我的作品”默认展示满满一屏视频。但真实产品上线第一天的状态往往是空荡荡的。你不画空态开发就不知道空态时展示什么不画加载态开发就随便用个系统自带转圈不画异常态断网页面就永远是一块白屏。处理方案每个核心页面至少画三种状态空态、加载态、正常态。如果有网络请求把异常态也画出来。别觉得这是浪费工作量等上线后运营跑过来找你抱怨页面“什么都没有”你才会知道当初多画一张线框图有多划算。5.3 交互说明写得太多太散反而没人看一个交互点写三行说明十个交互点就是三十行还是零零散散散落在页面的各个角落。开发是没耐心逐个看的他也大概率不会注意到你藏在某个控件旁边的五号小字。处理方案整理一份“交互说明文档”用表格的形式把每个交互点的触发位置、触发动作、跳转目标、页面状态变化列清楚。比如“评论图标点击弹出评论面板视频继续播放”“头像区域点击进入他人个人主页”。一份清清爽爽的表格胜过在原型图里挤几十处注释。5.4 忽略手势、键盘、返回键等系统级细节移动端产品和网页不同需要考虑的手势和系统能力远远不止“点击一下”。抖音最典型的就是上滑切换视频评论框呼出时底部应该弹拼音键盘iOS 左滑返回和 Android 系统返回键的交互逻辑也不一样。这些细节原型图如果完全不提最后做出来的体验一定和你的预期有偏差。处理方案在原型图里固定一个区域专门写“全局交互说明”。把返回键行为、左滑返回、下拉刷新、键盘弹出、横屏处理等规则统一写在里面。页面级的手势则在对应页面用浅色箭头和文字标注。不要指望开发是你肚子里的蛔虫你不写他就只能猜。6. 原型图工具选型与绘图效率的三个实用建议最后说说工具和效率。工具这东西够用就行不用追求大而全。但长期画原型选对工具确实能省不少事。6.1 工具怎么选Axure、Figma、墨刀、即时设计我用过的几个主流工具各有各的适配场景没必要无脑吹某一个。Axure老牌交互能力最强适合做复杂后台和大型 Web 产品。但学习和使用成本高做移动端快速原型有点笨重。Figma目前我主力使用的工具。组件化做得很好多人协作流畅做中保真移动端原型很顺手而且设计团队可以直接接手。墨刀国内产品模板和元件库丰富上手最快适合小白做移动端原型。但复杂交互能力一般。即时设计国产 Figma 平替协作体验不错如果团队访问外网不方便可以考虑。我个人的选型逻辑是看团队协作方式和项目类型。如果和设计师团队紧密配合Figma 系是首选如果只是自己快速画个图丢给开发看墨刀或 Axure 都行。最忌讳的是今天用这个明天换那个元件库换来换去效率全消耗在适应工具上了。6.2 建立自己的可复用元件库把精力留给逻辑思考很多新人画原型慢不是手速慢而是每个页面都在从零开始摆控件。我建议花半天时间把常用的元件攒成一套自己的组件库状态栏、导航栏、银行卡、列表项、弹窗、键盘、图片占位符、头像、按钮、标签。攒好之后画任何一张页面都像拼乐高十分钟就能拼完一个中保真页面。我自己的经验是元件库不要追求多追求“够用”和“统一”。统一的意思是所有页面的间距、圆角、字号风格一致这样原型图看起来专业开发也更容易还原。6.3 交付时命名、分组和标注的规范最后一条是交付习惯。每个页面命名时带上页面编号和版本号比如“P02 首页信息流_v1.3”。命名乱糟糟的文件不仅开发懒得看过两星期你自己回翻也会后悔。画布内用 Frame 分组逻辑相关页面放一组整个项目的首页画布放一个“README”写清楚当前版本改了哪些地方、哪些页面还没画完。这套规范不复杂但对整个团队的协作效率提升非常大。还有一个小技巧每次交付前我自己会把原型从上到下完整走一遍一边走一边用演示模式体验。这个环节能发现一半以上的问题——按钮点了没反应、弹窗关了回不去、注释忘写了。自己先走一遍再拿出去评审你会少挨很多骂。