前端产品经理为什么难，有两方面原因文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
第一，狭义的前端产品经理定义已经非常接近交互设计师、UI设计师。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
第二，产品经理的工作室围绕业务需求、产品功能性需求开展，需求的流转前后台都需要联动，难以剖离。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 前端产品经理工作案例 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
比在账户登录上，前端产品经理除了表面的账户输入、密码输入外，还要考虑到第三方登录、注册的账户数据字段，和现有的注册需求是否匹配。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
不仅是狭义上只关心页面的交互操作、文档的交互描述工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
交互设计工作输出的交互说明稿子包含项目说明、设计思路、交互设计细节描述3方面。和产品经理的需求文档一样，做一个前端产品经理仍然要站在阅读者的角度，提前告知项目背景、和要这样设计的理由。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品经理自查表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品的设计原则文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
用提前分享的需求分享确定，通常可用容错性、易学性、扩展性等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
竞品分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
从功能、页面设计、交互的竞品对比，筛选出结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
交互设计稿
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
从页面注释、页面流程图、功能等分类开始。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 交互设计稿 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品经理还可以通过这张自查表，确认需求和交互设计的完成度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 前端产品经理自查表 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
你可以从上面这张表从信息架构、交互过程与反馈、界面呈现、特殊情形、流程5个维度做自查。熟悉了每个维度的自查后，将有助于前端产品经理在体验上的完整度设计，避免犯一些常见错误。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品经理的PRD文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
和中后台产品经理不同的是，页面、功能的入口描述会在前端产品经理中更多一些，下面我罗列了一个原型PRD模板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
从控件、页面的入口、切换逻辑、展示信息上做注释。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 单独页面的PRD 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
页面间的PRD撰写
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
单个页面之间组成了功能，所以要对页面的前置条件、后置条件、页面区域说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 页面间PRD 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
如果是在WEB端的话，则要注意同一个页面因为面积较大会有多个区域，写明多个区域的跳转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
注意每个区域加上圆点注释，增加对应关系。不重要的元素和非功能入口就避免加入了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
如上是一个商品页面的原型PRD，尽可能的还原交互尺寸、信息逻辑范围、和页面展示框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
交互页面自查表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
为了方便前端产品经理展示页面路径和表达交互关系，通常我会在客户端需求撰写做页面路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
中后台以业务为主，前台产品经理以页面和页面路径为主。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
所以很快的遍历出每个功能模块下的页面情况，方便后期迭代。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
如下是一款APP所有的页面注释。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
页面路径，由页面组成。从用户操作行为为起点，事件结束状态为最终页面。如下是一个用户在OA系统上的页面操作流程。不同颜色块状表达了事件的前后置条件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品经理的原型布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
为了方便需求还原到真实的场景和平台端。所以我们会要求前端产品经理制作固定尺寸的原型页面作为母版（axure工具）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
如果有时间，前端产品经理最好也清晰不同手机型号下的尺寸、像素区别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 原型底部 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端由于包含了大量的交互操作，以平板、手机、网页端3个平台决定了下面的手势规范、按钮大小、表达尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
建议前端产品经理时刻准备好自己的一个素材库，增加需求设计进度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 交互大小按钮 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
根据平台不同，键盘、选项框、按钮都最做上标注。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 交互基础控件 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
加载状态可能是前端产品经理最头痛的，不同平台的加载状态设计、同一个产品下的第三方和自营模块交互设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
▲ 加载状态 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
前端产品经理还是交互设计师文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
为经历较多的前端产品经理，难免会被产品设计师、产品经理、交互设计师职业所混淆。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
太过于关注“用户体验”，反而忘了后台的承载能力、业务匹配度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html
过多的做前端产品设计，甚至和互联网的MVP、敏捷研发有倍道而行的说法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/29004.html