我想要的原型注解方式是这样的……

从零开始学运营,10年运营老司机带路,2天线下集训+1年在线学习,做个优秀的运营人。了解详情

原型的最大目的,无非是将产品的要求理解以一种简单明白的方式展现给开发或者设计伙伴。从而使得产品的构想和实际产出能够最大程度的接近。

Prd文档+原型的模式,是执行产品经常做的一种需求告知的方式。

然而,很多时候(为避免一概而论,仅参考自身碰到的情境)开发及设计很少有效率能够将两份文档同时关注并仔细揣摩解读。其中会涉及到原型的点到prd的点对应问题,万一关联错误或解读错误,势必会花很多时间去询问理解。

因此,现在针对大部分的产品需求展现,我只需要通过原型+注解的方式来展示来避免关联的不便。

那么,一般的1.0版本的原型需求是怎样的呢?

如下图(图片源自网络):

没错,就是在原型的旁边加线引出标注。

当然也有其他的一些方式如下图(图片源自网络):

就是需求都在一处,用序号点来关联需求点和页面点的方式。

本着个人爱折腾原则,我认为以上这些方式都不是我想要的原型注解方式。

那么,我想要的原型注解方式是怎样的?

需求来了!

  1. 我希望注解能固定在一个地方且第一时间能看到(这样开发就不会忽略注解只看图)
  2. 我希望原型图上的对应需要注解的点和注解能够迅速的关联(比如我点这个点就可以立即看到注解)

基本上只要有这两大需求能满足就可以了。

那么,接下来就是各种试验。

这里就有些尴尬了,试验过程没有截图或者老版本的保存所以消失在异次元空间。

大致过程就是尝试了各种方案,然后征求开发小伙伴和设计小伙伴的意见。

概念就像冰山理论,你只看到成品,却不知道冰山下面掩埋多少尸体(默哀)

那么,最后是一个怎样的东西呢?

来,放音乐(登登登登)~

其实,图上的内容大致分为两块:

第一块:注解块(文字说明填写区)

第二块:标注点(放置到需要标注的地方)

那么具体怎么用呢?

第一步:放标注控件

这里一开始我个人习惯,为了给控件留放置区域,我的所有页面的定位数据都是这个。

然后拖入标注控件

拖入后定位

为什么定位的x是-94大家应该可以理解(下载元件后尝试即可)?

第二步:放标注点 写注解 或 写注解 放标注点

为什么是或?因为个人习惯不一样 ,我自己比较习惯先写注解,再放标注点。

放标注点比较简单,只要把标注点拖放到需要注解的位置即可。

写注解则需要双击注解动态面板进入后再填写注解内容,一块注解块对应一个标注点(在图形命名上也会对应)。

做好后预览一下你可以看到这样的结果。

hover标注点,对应注解块会高亮,点击标注点后,对应注解块会置顶展示。

hover注解块,对应标注点会闪烁,点击注解块,整体页面会平移到标注点位置。

双向的关联对应就是的需要注解点点和注解内容直接关联上,同时又不影响注解内容直接第一时间被看到。

上一个用该标注做的社交圈子的demo点击查看

小提示:

  1. 有时候注解块不够大的时候,拉高度去调整就可以了,最好不要拖动整个块调位置,建议拉上边沿和下边沿调整,下方空间不够时,框选下方所有注解块shift+↓下移,多下移一些都没事,优先保证余量够。
  2. 为什么只有一个标注点,因为其他标注点想用的时候只需要把隐藏去掉就可以显示了

最后,再重复一句,原型不必要做的特别完美高保真。优先保证说明的需求能完美传达,其次才考虑制作室的内容层次,排版布局是否整洁干净。然后提高你自身做原型的效率,可以再考虑提前做好你自己经常使用的原型控件,建议按自己的制作需要搭配,网上的控件太多,但其实简单的几个有需要的就够了。

最后的最后,放下载链接:

带标注控件-APP常用元件

带标注控件-WEB后台常用元件

按需提取,鼓励提取后学习思考优化后为己所用。

 

本文由 @RAMBLE 原创发布于人人都是产品经理。未经许可,禁止转载。

祝给予赞赏的伙伴,2017年发大财!
3人打赏

评论( 29

写下你的想法
  1. :lol:

    回复
  2. 很努力的在读你写的东西,还是没理解

    回复
    1. 回复

      可能要等你想用到的时候会理解

  3. 【接上条】
    在“带标注控件”里找到了,谢谢。

    回复
    1. 回复

      :oops:

    2. 回复

      还是有些不懂的地方,方便留个微信或者QQ咨询吗?我微信号是我ID

    3. 回复

      846709087

    4. 回复

      明白了,标注页里,矩形和组合的名字一样,容易搞混

  4. 看了感觉还是挺收益的,已打赏。
    可能是我水平还不是很理解,想问下能发下用该种标注做的rp文件研究下吗?谢谢。
    邮箱li.tiansoon@qq.com

    回复
  5. 是不愿苟且才不是傲娇

    可以的,支持。

    回复
  6. 不知名的产品

    看评论里同学的评论,其实有很多话要说,但是如果说的话,估计又可以写一篇文章了。但是转念一想,现在互联网文章那么多了,其实该讲的也都讲了。但是很多时候,觉得有收获的同学基本该收藏的收藏,打赏的打赏了。至于觉得无用的同学,我猜想有那么几种情况吧:1我习惯目前的方式了,不想改变,反正我认为的方式就是最好的,你的行为都是徒劳无功。2我文章都不想看,demo也草草体验或者不想体验了,反正你这种只是元件分享而已嘛,太麻烦了。我比较希望的不是你真的认可这种方式,而是你的论点不应该只是这么浅层,是不是可以去追求一下目的,我们如何将自己输出的内容让开发和设计更容易更方便的接受呢?如果您说不实用,在我回复您后,可以提出不实用的原因。以至于我回复了这么多也没见一个人回应。也是非常奇怪的。

    回复
  7. 所实话,体验不太理想,AXURE自带的就很好,你这个不在怎么样,而且好多内容,一交流就解决的,没必要说那么多。

    回复
    1. 回复

      嗯 我只是分享给 和我一样有需要的同学的

    2. 回复

      如果你非要说自带的体验好我也是无fuck说

  8. 不卑不亢,从容优雅,面对一切。公众号:玲子奋斗史

    你这个注解还不如用axure8.0软件自己的注解呢,也是点击之后自动显示

    回复
    1. 回复

      请问您体验demo了吗?

    2. 回复

      以及您看清我的需求及需求原因了吗

  9. 这种很不实用,还特别累~不赞同

    回复
    1. 回复

      求推荐更高效率更实用的~

  10. 不知名的产品

    大部分小伙伴可能对最终的用户有疑惑或者没耐心看内容的可以先体验下demo:http://www.pmdaniu.com/rp/view?id=ByQCYAdmADwENQY3UnpXZA

    回复
    1. 回复

      demo无法访问呦

    2. 回复

      更新地址:http://www.pmdaniu.com/rp/view?id=ByQCYAdmADwENQY3UnpXZA

  11. 努力的产品小汪

    写了很多,但感觉不是很实用。

    回复
    1. 回复

      嗯 每个人需求不一样 按需自取 但是原则不变 都是为提高开发效率

  12. 很喜欢

    回复
  13. 建议您使用一下 Axure原配的写原件说明的功能NOTES。
    相信你一定会喜欢上的

    回复
    1. 回复

      有尝试过,不过还是无法达到我说的上述需求哦~

    2. 回复

      哈哈 您也可以下载我的这套标注元件看看是否喜欢~

    3. 回复

      好的,我也尝试一下

推荐阅读