产品交付物反思总结：好文档（图表），会说话

工欲善其事，必先利其器，在产物工作中，我所理解的具象的“器”即是原型、需求文档、各类图表等，固然这些交付物只是辅助、起着最根基的感化，但需要的总结和思虑可以把这几把“器”磨的更尖锐，在战（ping）场（shen）上（hui）高效取胜、削减伤（si）亡（bi）。

原型图首要交付对象：开辟、测试、UI设计师

绘制留意点：

中、低保真的原型，配色以黑灰白为主。超链接、按钮、其他需侧重凸起的元素可恰当用红或蓝色。以避免色彩过量干扰UI设计师阐扬，给其他人员演示原型时也不会因色块过而显得重点分离，减轻查看者的理解本钱。控件规范利用。该用甚么控件就用甚么，避免UI曲解，便于开辟和测试理解，下降理解本钱。例如按钮习习用圆角长方形，若忽然换成直角，则在非凡场景下，UI可能会曲解为标签；单选应当用Radio button，多选利用checkbox，乱花二者可能致使功能点被开辟错。触及页面都显示出来，尽可能不消动态面板埋没弹层及页面。我今朝是连提示弹框城市零丁开一个页面（允悲脸），其实不是由于懒或不精晓动效，而是如许开辟、UI、测试查看时才不会漏页面。固然页面增多了，动效也不炫酷了，但疏漏少了。究竟技术要分场景利用才能锦上添花（好比你要演示给boss看时……）页面之间加跳转链接。上一条说的是页面内动效尽可能少，为的是下降犯错率。这一条说的是页面间的跳转链接必然要加上，为的是削减沟通本钱。页面上尽可能摹拟真实场景下的字段和数据。例如，我在做产物早期就出过如许的乌龙，因为在设计原型时很不外脑的用“xxx企业”当占位字段，由于字数少，那时在有限的宽度内放置了三个也摆列的很清新。UI那关也没拦住，直接按我原型摆列了。成果可想而知，一般企业名十几个字都很常见，一行放不下三个企业名，前端哥哥很负责任的主动折行显示了，致使产物验收的时辰才丑拒提了bug，假如那时画原型时把本身置入现实场景，就会少了后面这些没必要要的改动。

原型举例（顺手YY的）:

*功能设计碎碎念：这条其实算不上留意点，而是本身画原型时的小套路。在设计功能时，一般我会遵守画纵向构成闭环+横向尽可能延长。

纵向操作闭环指的是除斟酌某一操作自己的设计（操作肇端点——操作竣事点间各个节点），还要斟酌改操作会辐射到的其他元素。好比某toB产物新增了附件上传需求，那末除在相干页面加好上传功能、上传成功／掉败的显示、删除／重传的交互等根基点之外，还要斟酌上传完，其他协感化户（非上传者）是不是也能够看到，要在页面哪一个位置看到。

横向尽可能延长指的是对纵向梳理的每一个节点进行穷举。例如上传功能这个节点，还要斟酌上传附件的格局划定、上传附件的数目划定、上传完文件名称显示是要直接提取文件名，仍是同一显示成某个字段、上传成功／掉败的显示、删除／重传的交互；查看附件这个节点，是要预览查看，仍是下载查看等等。

流程图

在工作中，我一般用流程图来说明系统逻辑或功能操作逻辑。此中又因描写粒度的分歧，而分为系统流程图和功能操作流程图。

1. 主流程图

（1）首要交付对象

开辟／测试／运营／营业／UI

（2）特点

侧重描写年夜逻辑，不需要拘小细节，一般用于初度系统讲授或次相干人员培训。

粒度很粗，侧重描写年夜逻辑，不需要拘小细节，此中年夜大都节点可细化出一个功能流程图。下面以某外卖从选择商家到下单完成的流程来举个栗子：

例如：

只描写最首要的步调，将系统中某个环节概述清晰便可。

2. 操作流程图

（1）首要交付对象

开辟／测试

（2）特点

粒度细，最少描写完全实现功能所需的每步操作，按照需要也可细化到异常状况处置操作。

以上图中对应功能操作流程图为例：

因未从事过外卖产物，而且为了便利举例，粒度也没有特殊细，只包括了根基操作，按照公司文档交付习惯分歧，若粒度需更细，也可插手操作异常或掉败（eg：收集中止反馈；下载掉败处置；未保留输入内容里开页面等）流程。

绘制tip：可在流程图节点旁边恰当添加注解，特别是系统流程图，如许有助于查看者理解。

小我感受，查看流程图时比查看原型图更轻易在脑中成立整体回路，而在主要节点旁加上注释或其他信息，就更便利查看者联系前后节点场景进行理解，也加倍会留下印象。

泳道图

特点：

流程中触及2个及以上脚色；多个系统阶段；多用于描写营业流程

在流程图中划分用户脚色或系统阶段时，会插手泳道，即绘制成泳道图。

绘制tip：一般我在绘制时用横向划分脚色，纵向按时候挨次划分营业或操作阶段。若泳道长度较长，可给分歧脚色利用分歧色彩，以便于下拉至看不到泳道标头的时辰快速辨别对象。

例如：（下图中对触及贸易信息的字段恍惚描写）

 产物设计仿单1、交付对象

开辟、测试

2、特点

产物讲授从粗到细，快速成立产物概念

其实日常平凡工作中不常写产物仿单，之前接触过的的产物仿单更像是先于PRD交付给开辟人员查看的的产物讲授物。拿我们的2B产物设计仿单为例，一般包括：

文档概述营业场景描写：场景图、文字系统流程描写：系统流程图、流程节点表系统逻辑描写：改动逻辑清算表（如有）、新增逻辑清算表及描写、其他弥补逻辑产物法则：编码法则（例如合同编码法则、定单编码法则）+费用计较法则+其他法则主界面设计申明：首要界面原型图、对应原型界面描写

小我感觉产物设计仿单就像是各类产物申明的年夜杂烩，用于先为查看者（特殊是初度接触该产物者）成立产物概念，以后由粗（营业场景）到细（界面申明）慢慢推动，使查看者可以快速进入产物状况，仿单中要放甚么内容，则要视部分合作习惯等身分而定。

系统操作手册交付对象：运营人员、营业人员、用户

在toB产物中，因为流程复杂、介入脚色浩繁，编写分歧脚色对应的系统操作手册可以或许帮忙其快速把握操作流程。下面是笔者习用的编写步调：

1、编写文档概述（非必写）

文档概述一般包罗网站布景、系统简介、手册利用对象、专业名词及缩写注释、软硬件情况、版权声明等。

2、 撰写操作申明

（1）拆分流程

依照主流程进行挨次，顺次划分出若干个子模块。例如注册登录流程、认证开户流程、资产挂号流程等等，至于异常环境处置可零丁汇总为一个模块，益处是便利查找，也可视环境散布在其他流程中，融会到现实操作场景里。

（2）分化功能点

对子模块依照操作挨次拆分出首要功能点。

（3）配图及文字申明

配图：截取流程中顺次会跳转到的页面（主要的提醒弹框也能够截取），将该页需操作的区域或元件用红框框出。在统一页面分歧位置进行持续操作，可用箭头指引。截取的图最好进行图注，一是可让利用者查找时快速定位，而是便利理解当前页面用处。文字申明：写清晰当前处于哪一个页面，需要进行哪一个（些）操作（若需更具体也可对该操作要求进行讲授，例如必填／非必填等），操作完成后相干流程会进入甚么状况，接下来会进入哪一个页面。主要提醒可用夺目的红字标出。

例如：

UI验收图交付对象：开辟、测试

凡是UI设计师们依照产物原型给出结果图后，产物要进行验收，验收后才能交付给开辟及测试人员。

验收留意事项

小我总结UI验收首要需留意以下几点：

元素是不是画全，字段是不是准确元素间“组”的关系是不是保存：相干的元素要附近，有时UI为了整体结构美不雅会将某些元素平均散布，但疏忽了它们间的相干性。页面中重点是不是凸起：或弱化的元素是不是到达结果：页面中第一眼望上去应当被存眷的模块或元素是不是在视觉上被凸起了？有无发生鹊巢鸠占的欠安环境？页面中需弱化的元素是不是到达结果：不但愿用户留意到或利用率很低的元素（例如举报按钮）是不是被弱化？设计是不是合适用户操作习惯：这里指的首要是B端用户，由于对年夜部门此类用户，习惯性的操作可让效力更高，或线下的相干操作持久遵守某一模式，线上用一样体例可以下降理解本钱，便于快速上手。此时在审查UI图时，美不雅就不是放在第一名的，而应更偏重于用户习惯。好比合同的相干信息展现就最好依照纸质合同来结构。

为了不验收呈现上述问题，可以在交付给UI原型中加以特殊标注，或UI设计的进程中紧急盯人、加以提示（微笑），固然最好的体例是在产物UI设计前期培训设计师们，为其讲清晰场景或营业需求，如许设计师童鞋们在设计的进程中天然会更佳切近需求。

其他交付物

固然按照产物类型、公司规程、合作习惯的分歧，还存在着很多其他交付物。例如营业节点表（合适汇总对照营业各阶段的状况、相干要素的增减环境）、字段勘误表（金融等相干产物页面上的字段都需要风控过审）、场景演示图（用人-人／人-物等模子演示产物场景，合适做产物低级培训）……不外所有交付物的感化其实都是更好的转达本身的设法或需求，所以交付物的情势也没必要拘泥于情势，究竟黑喵白喵，抓到老鼠的就是好喵～～～

最后，以上仅为小我工作中对交付物的小总结，未斟酌周全的处所但愿大师指点沟通，本文也应当会在将来有所更新。

文章作者系 @ 晴暻 未经许可，制止转载。

注：相干网站扶植技能浏览请移步到建站教程频道。