对 Framer 真是相见恨晚，发一些感概。请进来聊聊对原型工具的理解吧。

[sillydaddy]

最近初步了解了 Framer，虽然只是初步了解，但感觉它正是理想的原型工具。（此处引爆炸点

我对原型工具的理解

• 组件

   将原型分解成一系列的“组件”(按钮、复合组件)
  

• 属性

   然后每个“组件”暴露在外面不同的“属性”(显隐、位置、大小、透明度、颜色、文字。。等等)
  

• 状态

   然后很多个组件以及它们的属性的取值，组合成一个“状态”(不同的页面、页面的不同显示状态，这些状态中的组件同一个属性值取值可能不同)
  

• 触发

   然后使用触发器(点击、触摸、键盘)触发这些状态的切换，比如手指点击按钮，触发页面切换。
  

• 变化曲线

   状态的切换过程，就是各个组件的各个属性的变化过程，如果给属性的变化加上一个随时间的渐变效果，就是常说的“转场动画”了。
  

这些概念并不新鲜的，在不同的原型工具里面，有不同程度的体现，但毕竟体现的程度不同。

我感觉最能突出的就是“Framer”这种，因为

• 它特别强调了属性+变化这 2 个概念的组合

   每个组件都有不同的属性，每个属性值的变化都可以设置变化曲线?
  

• 而且组件+属性这 2 者的结合，又与现在前端开发的组件化不谋而合

   对于会编码的人来说非常亲切，可以很容易封装一个组件用在原型工具里。
  

开战吧

了解过 Axure 和墨刀，感觉不如 Framer 能体现出上述的概念，比如让 Axure 做个动画得费老劲了。对其他原型工具还不太熟悉，没有深入理解和对比过，可能没发现它们的优点。

欢迎大家来拍砖，聊聊你对原型工具的理解吧。

进一步了解了 Framer 以及 FramerX 。

惊讶的发现了一个事实：
之前的 Framer 和现在的 FramerX 。完全是 2 个不同的产品思路。
这可以从介绍 Framer 和 FramerX 的视频中了解到：2 者的可视化编辑器是完全不同的。思路、底层 API 也是不同的。

下面这个英文帖，有人在怀念之前 Framer 的简单、易用，而新的 FramerX 则剥夺了他们的这种权利，而不得不被迫去学习 React 相关：
https://www.designernews.co/comments/296086

我试用了一下 FramerX，逻辑上确实对于设计工作者来说，非常不友好——就连我作为开发，一时之间也很难学会。

Framer X 的思路，更像 24#楼里说的，朝着构建“组件库”的思路发展，但却在大大加大了设计师的门槛。因为之前的 Framer 虽然说有 code，但这些代码更多的非常简易的脚本语言，而且基本上都是通过“Framer Studio”可视化生成的，而现在的 Framer X 则必须要设计师具备读写 React 的能力，才能定制自己的组件。

我感觉不能说 FramerX 的方向有问题，但这种激进的方式太不可取了。
虽然 FramerX 有很多我想要的原型工具的特性，但奈何太复杂。我现在一点也不想用它。

[EvansUtopia]

我理解的原型设计，本不应该存在动画这件事

[Outshine]

我看标题的时候以为是讲 Figma，点进来看了一下介绍，发现又是一个新的原型工具！
原型工具从 Sketch 出来之后这几年，更新迭代好快啊！

[efaun]

我对原型工具就一个要求：有公开的修改记录，以后上线前产品再改需求就打死他！

[charlie21]

@efaun 哪个原型工具支持修改记录

[Pandroid]

@Outshine Framer 很早就有了，当时 origami 、principle 、flinto 、Pixate 、Form 等各家混战，到现在被收购的、被做死的一大片。这类工具对我价值主要在界面过渡、交互细节动画上的表现，充其量只是动画工具，现在已经用 keynote 代替了。

[yyc529]

@EvansUtopia 产品原型一般不需要动画。但有的交互原型，设计师需要给前端一个效果示意，有时会用到；

[C603H6r18Q1mSP9N]

我感觉 figma 也不错，直接做原型也可以

[235777178]

产品原型也要分阶段，低保证大多数就是框图，不需要动，把逻辑列出来就好了。
高保真才需要一些交互，但是也不至于做到动画的程度。
越复杂的原型以为着你在原型阶段需要花的时间越长。
表面可能对开发友好了，但是实际上压缩的时间是开发的时间。。。。

[hahastudio]

有稍微用过 Adobe XD，主要是因为免费 + 自带官方 UI Kits www.adobe.com/products/xd/features/ui-kits.html
但我真是用不惯，主要是有那用原型画出来的工夫，真的 UI 实现都做出来了

[ichanne]

@charlie21 蓝湖带记录

[sillydaddy]

@235777178 分阶段是肯定的。不过，我想要的原型工具，要能应对原型设计的各个阶段。。所以就需要去分析一个原型工具到底是什么，把它的构成要素抽象出来，看看市面上的工具是不是符合，各个工具的侧重点在哪儿。

[Eninsslei]

framer 确实不错，但是需要一定的代码基础

[235777178]

@sillydaddy 不是抬杠，就是觉得其实做原型的根本目的是为了把事说明白，不能太纠结于工具的使用。
我刚入行的时候做原型都带跳转，axure 各种动态面板嵌套，现在已经懒得就在边上写个说明就完了。

[sillydaddy]

@235777178
也不是抬杠，你看下 2 楼的回复，再结合下面 2 个链接，1 个链接是 7 年前的，1 个链接是 2 年前的：
15 款优秀原型产品 ( http://www.woshipm.com/rp/64741.html )
9 款原型工具 ( http://www.chanpin100.com/article/109790 )

现在都流行微交互了 ( https://www.uisdc.com/micro-interactions-why-when-how )
新的原型工具能更流行，肯定是有需求在推动着的吧。

[235777178]

@sillydaddy
这些我很早就看过了。你所谓的需求，并不是说产品经理实际的工作内容，或者可以这么说。
产品经理的最根本职责就是把事说明白了，减少沟通成本，哪怕用纸也无所谓。
有交互必然是好的，但是对于整个项目周期来看，产品经理所占的实际份额就会很长，然后下一个环节就会被挤压。

在一个项目周期里，什么时候需要这种交互，是给到客户展示、领导展示的时候。开发的时候。
而且在一个项目的开发周期里，开发首先在意的是你这个功能说没说明白，至于怎么交互，交互的细节，其实是在优化的过程中了。

[heypig]

作为一个外行 , 看各位交流挺有意思. 了解到一些这个行业变化情况. ​

有些是关于"器"的讨论, 工具的比较, 工具的演化,工具背后的理念变化.
有些是关于"道"的讨论 弱化工具, 强调原则, 介绍不变的理念. 和实践经验. 常见到最后出现的现象, "最好的原型工具"还是纸和笔.

不同阶段的不同做着重点.

既然楼主开贴是介绍工具. 我们尽量聚焦点吧. 大家都介绍下自己的不同的工具体验和实践经验吧.
个人作为围观者, 潜在的入门学习者, 短期也觉得这更实用点.

[EvansUtopia]

@yyc529 任何要求我在原型阶段给他做动画的需求，我都想一巴掌扇死他。除非客户要求进行演示，必须做动画，否则一概不做。
对于你说的效果示意，交互标注和直接沟通的效率吊打原型做动画。

[Outshine]

@EvansUtopia 文字和语言沟通始终没有一个动画效果好理解

而且，当所有（大部分吧）的原型设计工具都这么做的时候，说明需求和趋势是存在的。

[superliwei]

当一个外国厨师说最好的味道是原汁原味的时候，你想想中国几千年的饮食文化中又是炸又是蒸又是煮又是煎的是为了什么？这一想你就明白了，五花八门的原型工具，目的就是为了你能体验到各种方式做原型的乐趣，所以，选择自己喜欢的方式准没错。

[EvansUtopia]

@Outshine 确实没有一个动画效果好理解，但是如果是对内的原型（就是我说的非对外演示的情况下），原型的意义是快速描绘产品的意图，产品逻辑闭环等等...
做动画（非简单的跳转），是一件极其费工夫的事情。
而且原型的修改是非常繁多的，一旦附加上动画，修改工作量指数级增长。
看似好像做动画很高大上，提高效率，实则不然。
至于需求和趋势，我只能说，那是被外界倒逼的，真的交互设计师，谁想在原型阶段做动效

[Spoter]

实际过程中，很少用到动画（应该说是 99.9%），流程图、uml 用的多，
如果是原创的动画，一般都是设计做。非原创的话，都直接文字说明或者给个案例即可。

[blaaibla]

哈哈哈，这种工具果然是程序员喜欢的。我这种不懂代码的设计师一而再再而三被 Framer 的顺滑效果惊艳到并吸引到安装学习并启用过好几次了。

[sillydaddy]

@Spoter 了解
@blaaibla 现在 Framer X 应该是不需要编码吧，看介绍说是对设计人员更友好了。我还在了解 Framer 中。

[madlifer]

UX 的事儿别老往产品这边靠，原型不需要动画，甚至不需要交互

原型是产品经理用的

产品经理的岗位职责是做一个好的连接器

作为一个连接器，更高效的沟通才是追求的目标。画图是必备的嘛？

并不是，如果你能通过文字甚至口述把事儿讲清楚，根本就不需要画图。

既然画图只是沟通的一种工具，方便、快捷才是进化方向。

你要说你是个 UX 设计师，可以，研究交互设计技巧，Sketch 、Figma 、Framer 都可以尝试选出最优。

你要说你是个产品经理，算了，你的精力应该更聚焦于产品规划和做每一个功能点的抉择

-----

在我看来，Axure 以外，唯一一个进化方向还在正轨的产品原型工具是墨刀

为什么这样说，因为让我坚守 Axure 的理由只有一个，就是社区强大的组件库。

我需要快速画出原型，不想去纠结什么交互设计，直接拖，对，就是一把拖。

墨刀现在就在建立社区资源库，同时在开发导入 Axure 的功能，直接把 Axure 的社区组件占为己有

一个随时随地可以打开，支持团队协作的原型工具，这才是产品真正想要的东西。

-----

To 同行：

奉上最近参悟到的一句产品经理应恪守的信条：


做规划胸怀宇宙，做选择如履薄冰

[sillydaddy]

@blaaibla #22
又进一步了解了 FramerX 。感觉它里面的概念有点多，而且比较复杂，太偏向 Code 而不是设计了。

@madlifer #24
你说的对，是这个道理。不过一般来说，后面的原型工具都是在前面工具基础上进化的，它们不止可以做动效，产品初始阶段的线框图、基本交互都是能做的，而且一点也不复杂。

[xingzhi]

@madlifer
说得很对，产品经理的职责更在于做功能的规划和抉择，而工具甚至于原型图也只是术而已。