三种原型方案,帮你理清思路,帮你事半功倍

坦率的讲,大部分产品经理的第一步就是画原型,经过长期实战,对原型的设计都具备自己独特的套路以实现高效,本章显得颇为多余,但是我依然会从我的角度出发,用三种精度的原型,更加结构化,流程化的角度去阐述绘制原型的技巧。
我们将界面设计分为:

低精度产品原型:即页面流程题,展示页面中的关键组件及页面之间的跳转流程.

中精度产品原型:像快照一样,展示包含所有组件的页面,主要展示页面布局。

精度产品原型:星系展示原型中各个组件在不同操作下所展示的信息。

这样讲还是显得不够直观,那我们逐项深入解析一下:

低精度产品原型

低精度产品原型重在表现流程,与流程图很类似,它包含的基本元素有页面、判断及触发动作,此时我们不需要考虑页面布局,只要反映出过程流转即可,这样可以清晰的帮助我们快速总结和思考产品流程的体验细节,一起先来看看下面的页面流程图:

三种原型方案,帮你理清思路,帮你事半功倍

其中,页面元素使用方框表示,读者可以看到页面名称和基础的页面信息;判断元素用棱形表示,用于判断页面的走向,触发动作元素用箭头表示,在旁边表明动作,表示用户的行为。
看看下面这张点餐的流程图,我们如何把它转换为页面流程图呢:

三种原型方案,帮你理清思路,帮你事半功倍

根据站点地图中的点餐流程,我们来绘制页面流程图:

三种原型方案,帮你理清思路,帮你事半功倍

这样,我们已经在点餐流程图的基础上绘制好了页面流程图,需要注意的是,页面流程图同样遵循7±2原则,保证流程图的易读性。

1.2 中精度产品原型

中精度原型主要用来展示完整的页面,可以让设计师、研发工程师及测试工程师像看照片一样了解产品意图。一个中精度原型至少要包含以下信息:

导航信息:告诉大家这个页面从哪里来,到哪里去。

组件元素:组件元素是基础元素,告诉我们的下游读者页面那种组件的类型和结构。

页面布局:哪些组件组合起来得到了哪些功能。

文案信息:提供明确的文案,比如这个功能的名称或者提示信息。

重要信息:注明页面中与功能或者逻辑相关的信息。

除了我们最常见的页面方式展示,也可以配合文档形式加以说明:

三种原型方案,帮你理清思路,帮你事半功倍

三种原型方案,帮你理清思路,帮你事半功倍

1.3 高精度产品原型

高精度原型是详细展示原型中各个组件在不同操作下所显示的信息,或者不同状态下页面信息。高精度原型就像产品说明书一样,详细的介绍每个组件或木块的产品要求。
这里可以参考《软件需求与可视化模型》中,作者提供的此类模板————DAR模型。DAR模型的思路是针对界面中每一个组件,根据用户的具体操作,写出对应的响应显示,比如界面上会对应显示哪些信息。这种结构化的书写思路,非常适用于输出易懂易读的原型。所以在DAR模型的基础上,我们按照元素的基本信息、权限展示、交互说明的结构输出说明:

三种原型方案,帮你理清思路,帮你事半功倍

在实际工作中,我们可以根据实际情况选择不同精度的原型,比如我们带着小徒弟,那么我们只需要低精度原型即可,剩下的交给小徒弟去做,同样也可以交给UED设计。而敏捷开发或默契度非常高的小团队,提供中等精度的原型加适量的标注即可,如果遇到To G的项目或者文档要求较高的项目,可以输出完整的高精度原型。总之,根据不同的环境选择不同的工作方式,会让工作变得更高效。

原创文章,作者:王得宇AIPM,如若转载,请注明出处:https://www.pmtemple.com/pm/no-worded-kung-fu-scripture/11497/

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
利用『HMW法』解决问题、管理需求
上一篇 2020年10月25日 上午9:28
下一篇 2020年11月15日 上午9:15

相关推荐

发表回复

登录后才能评论

评论列表(8条)

  • 镜中晴空
    镜中晴空 2026年4月16日 下午6:34

    这篇文章的结构化原型分类真棒!就像摄影中构图法则一样清晰实用。低精度原型就像是摄影的草图,快速捕捉流程;中精度则像定焦照片,展示完整页面。作为刚接触Axure的产品爱好者,这种分层次的思路对我帮助很大!📸✨

  • 二次分享客
    二次分享客 2026年4月1日 下午10:49

    哇!这原型方案简直像是游戏开发中的”概念草稿-线框图-最终模型”进阶过程!🎮 低精度就像游戏设计文档中的流程图,中精度如同关卡布局草图,真是太有共鸣了!作为游戏策划,我深有体会,好的原型真的能事半功倍!

  • 像素漫游者
    像素漫游者 2026年3月28日 下午7:24

    低中高三档原型划分很有意思!不过作为全栈,我觉得流程图才是真·救星,开发前用它能提前干掉80%的交互坑。高精度原型太肝了,实际中哪有时间做那么细啊😂

  • 聚焦好奇者
    聚焦好奇者 2026年3月22日 下午7:39

    哇,这篇文章讲得太清晰了!作为经常需要设计产品原型的产品经理,这三种精度原型分类简直是我的救星👍 低精度先理清流程,中精度展示布局,高精度呈现细节,层层递进的设计思路让我工作效率提高不少!实用干货,果断收藏!

  • 技能探路人
    技能探路人 2026年3月18日 下午9:39

    哇!这三种原型分类太清晰啦!作为游戏策划,我经常纠结要画到什么精度才算合格,这篇文章正好帮我理清了思路~低精度画流程,中精度看布局,高精度看交互,太有用了!(✧ω✧)

  • 聚焦研究者
    聚焦研究者 2026年3月14日 下午5:34

    作为产品设计的”拍摄脚本”,这三种精度原型太实用了!就像我规划旅行路线一样,低精度定方向,中精度排布局,高精度抓细节。能帮团队更清晰传达产品思路,减少返工,👍🏻

    • 素笔研究者
      素笔研究者 2026年3月17日 下午7:49

      @聚焦研究者原型设计如作画,三种精度恰如素描、水彩与油画的层次递进。低精度勾勒骨架,中精度填充血肉,高精度赋予灵魂。这种结构化思考,恰是产品经理的”�

    • 归途深度
      归途深度 2026年3月18日 下午4:49

      @聚焦研究者三种精度原型的划分很有实战价值,特别是低精度原型对流程梳理的作用常被忽视。在敏捷开发中,这种渐进式原型方法能有效降低沟通成本,不过建议补充不同原型阶段的交付标准,便于团队协作。

微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部