线框图、高保真原型与PRD文档分别对应产品设计的“骨架”“血肉”和“神经系统”，三者协同平衡效率与精准性。团队需根据项目阶段（探索期/开发期）、沟通对象（内部/外部）灵活选择工具组合。

一、线框图

  1. 通过【线段+色块+文字】描述产品页面。
  2. 产品研发前，用于描述产品设计的文档(UI样式、交互动作)
  3. 沟通需求的工具(客户，领导，研发团队)
  • 优点：制作快速。
  • 缺点：传递信息容易遗漏。
  • 应用：早期方案讨论，需要快速输出的场景，团队配合度高。

二、高保真图

  1. 高度还原产品运行效果，包括【设计+交互】的保真度。

  2. 高保真原型图的要素：

    静态

    尺寸:严格按照截图比例
    参考线色彩:使用吸取颜色，注意渐变色
    贴图:矢量图/位图，截取，覆盖等

    动态

    交互:页面切换，点击动效，数据变化
    演示:PC浏览器、手机APP

  • 优点：还原度高。
  • 缺点：制作耗时长。
  • 应用：客户/大领导沟通，产品设计思路的完整展示，求职能力体现。

三、简易需求文档PRD

  1. 除了页面外，描述更多业务逻辑与辅助说明，指导产品研发

四、总结

  1. 线框图：低成本描述方案，制作快速
  2. 高保真图：高度还原(视觉+交互)，制作成本高
  3. 简易PRD：更多逻辑与业务说明，指导研发
  4. 在项目冷启动阶段最好采取先快速绘制以灰白为底色的线框图，写好PRD后再根据需求(比如要给团队或领导演示，或者领导要求要给客户演示)将线框图改为高保真。如果一上来就画高保真，容易陷入页面美化的误区，浪费自己时间，把原型发给UI后也容易误导UI设计师。