原型的功能和意义是:它是最终的施工图纸。将对于产品功能结构、底层结构、用户体验、业务场景的思考,转化为用户界面,并将实现方式从表层到底层地向开发人员和项目人员进行说明。
好的原型,需要做到:

  1. 使得开发人员能够快速、准确地找到目标页面和功能点,并且知道哪些部分需要注意或做过更新
  2. 清楚地反映业务流程和交互流程,无论项目人员、开发人员还是市场人员都可以很快理解

原型可以按照完整度简单划分为高保真原型(包含所有页面细节和交互内容,并在文档中辅以必要的文字说明)和一般原型(白模、线框或使用组件做出页面,并辅以说明文字)。按照产品类型和项目类型选择合适的即可:

  1. toC的,交互要求高的,选择高保真,以求完整传达想要的效果
  2. 定制的,交互上没有特别要求的,选择一般原型,并保证页面逻辑清晰,参与方能快速找到功能即可

动工前准备

页面风格选型:配色、字体字号规范、图标风格、表格风格。针对客户和用户,选择易接受的设计语言,如果同时有其他产品,应保持设计风格一致。
管理组件库:图标组件、表格组件、页面控件、tips框等

原型的内容和组织方式

  1. 分页
    1. 分页应按照“使用平台-模块-子模块”进行拆分。若存在不同版本,应考虑是否需要拆分原型文档。
  2. 分区
    1. 分区指单页原型中对于原型内容的组织方式
    2. 单页原型中一般包括 需求文档链接、标题框、页面原型、说明文字
      1. 标题框:一般以功能点命名,同时一般包括原型进度和编辑时间
      2. 页面原型:该功能点所涉及的所有页面,一般包括列表页、表单页、反馈弹窗
      3. 说明文字:对功能点的说明,一般包括展示字段说明、功能操作说明、业务逻辑说明、交互说明
        1. 展示字段说明:列表和表单应展示哪些字段,有什么特殊处理,数据内容有怎样的权限要求或条件判断
        2. 功能操作说明:页面有哪些操作,分别有怎样的权限要求或条件判断
        3. 业务逻辑说明:业务场景中如果有较长的或特殊的处理流程,建议另行说明,例如,如果涉及流程或数据状态变更,需要将状态流说明清楚
        4. 交互说明:按钮点击效果、表单提交反馈、空数据结果反馈等
    3. 所有的材料应按照一致的方式组织(相对位置)
    4. 只有一个准则:让参与方能快速、准确地找到要找的页面,看到并看懂所有应当看到的说明文字

插:关于需求文档

刚开始产品工作时,需求文档由于其“整理”属性,经常会被作为需求梳理工作的起点。新手时期,会格外注意文档模块、内容的“标准格式”。而实际工作中,一份优秀的需求文档,除了“为了版本跟踪、需求变更跟踪或者全新需求的说明”而有一些固定模块之外,文档的体系结构应按照需求本身进行计划,没有必要一板一眼。能够清楚讲清楚背景、方案框架、方案细节、业务流程,并将需求拆解成任务,就基本可以称为是一份好的需求文档了。
工作中的某个阶段会认为文档比原型重要,依然是因为文档的“整理”属性,分章节分点地列出,总让人觉得比原型里的图看起来更有条理。然而事实上,两者都得有,原型的价值在于直观,无论使用者是谁,都应当可以流畅地知道产品的主要功能和业务流转,如果是高保真原型则更能获得接近实际产品的交互体验,原型应始终保留最新的版本(如果想存档,可以另存在特别标明的页面);需求文档的价值在于完整,对于一个需求,从其背景、实现细节、业务逻辑、上线要求、关联配置、变更记录等等,都能够在文档中找到。

永远要尽力以最合适的方式,把想要传达的内容传达给想要传达的对象。产品的工作重心应当时刻放在做正确的事和正确地做事上。不落窠臼。