前端产品设计难点：原型PRD怎么写？

前端产品经理为什么难，有两方面原因

第一，狭义的前端产品经理定义已经非常接近交互设计师、UI设计师。

第二，产品经理的工作室围绕业务需求、产品功能性需求开展，需求的流转前后台都需要联动，难以剖离。

▲  前端产品经理工作案例 

比在账户登录上，前端产品经理除了表面的账户输入、密码输入外，还要考虑到第三方登录、注册的账户数据字段，和现有的注册需求是否匹配。

不仅是狭义上只关心页面的交互操作、文档的交互描述工作。

交互设计工作输出的交互说明稿子包含项目说明、设计思路、交互设计细节描述3方面。和产品经理的需求文档一样，做一个前端产品经理仍然要站在阅读者的角度，提前告知项目背景、和要这样设计的理由。

前端产品经理自查表

前端产品的设计原则

用提前分享的需求分享确定，通常可用容错性、易学性、扩展性等等。

竞品分析

从功能、页面设计、交互的竞品对比，筛选出结果。

交互设计稿

从页面注释、页面流程图、功能等分类开始。

▲  交互设计稿 

前端产品经理还可以通过这张自查表，确认需求和交互设计的完成度。

▲  前端产品经理自查表 

你可以从上面这张表从信息架构、交互过程与反馈、界面呈现、特殊情形、流程5个维度做自查。熟悉了每个维度的自查后，将有助于前端产品经理在体验上的完整度设计，避免犯一些常见错误。

前端产品经理的PRD

和中后台产品经理不同的是，页面、功能的入口描述会在前端产品经理中更多一些，下面我罗列了一个原型PRD模板。

从控件、页面的入口、切换逻辑、展示信息上做注释。

▲  单独页面的PRD 

页面间的PRD撰写

单个页面之间组成了功能，所以要对页面的前置条件、后置条件、页面区域说明。

▲  页面间PRD 

如果是在WEB端的话，则要注意同一个页面因为面积较大会有多个区域，写明多个区域的跳转。

注意每个区域加上圆点注释，增加对应关系。不重要的元素和非功能入口就避免加入了

如上是一个商品页面的原型PRD，尽可能的还原交互尺寸、信息逻辑范围、和页面展示框架。

交互页面自查表

为了方便前端产品经理展示页面路径和表达交互关系，通常我会在客户端需求撰写做页面路径。

中后台以业务为主，前台产品经理以页面和页面路径为主。

所以很快的遍历出每个功能模块下的页面情况，方便后期迭代。

如下是一款APP所有的页面注释。

页面路径，由页面组成。从用户操作行为为起点，事件结束状态为最终页面。如下是一个用户在OA系统上的页面操作流程。不同颜色块状表达了事件的前后置条件。

前端产品经理的原型布局

为了方便需求还原到真实的场景和平台端。所以我们会要求前端产品经理制作固定尺寸的原型页面作为母版（axure工具）

如果有时间，前端产品经理最好也清晰不同手机型号下的尺寸、像素区别。

▲  原型底部 

前端由于包含了大量的交互操作，以平板、手机、网页端3个平台决定了下面的手势规范、按钮大小、表达尺寸。

建议前端产品经理时刻准备好自己的一个素材库，增加需求设计进度。

▲  交互大小按钮 

根据平台不同，键盘、选项框、按钮都最做上标注。

▲  交互基础控件 

加载状态可能是前端产品经理最头痛的，不同平台的加载状态设计、同一个产品下的第三方和自营模块交互设计。

▲  加载状态 

前端产品经理还是交互设计师

为经历较多的前端产品经理，难免会被产品设计师、产品经理、交互设计师职业所混淆。

太过于关注“用户体验”，反而忘了后台的承载能力、业务匹配度。

过多的做前端产品设计，甚至和互联网的MVP、敏捷研发有倍道而行的说法。