Motif Tools BV 在 2016 年 4 月 7 号宣布 Framer 即将发布有史以来最大的版本。
这篇文章将对 Framer 做一个小结，并预测 3 天后发布的内容。
文章最后有福利。
Framer 的困境
初次试探 Framer 的人都有一个共同的体会：做原型，写代码？！
持续使用 Framer 的人也有一个共同的体会：这代码写的很值，你试试呀！
这两种体会一对比，暴露出 Framer 现在最大的问题：初期学习曲线太高导致用户没来得及尝到甜头就走了。这是一个矛盾，Framer 的优势就是 code，但这在新用户面前却成了最高的门槛。Koen Bok 在 2014 年参加 Stripe Speaker Series: Designing with Framer 时就透露过他们的产品市场做的很糟糕，两年过去了，情况看起来没有太大的好转。持续使用的用户回头看看不难发现，把新用户挡在门外的其实都是纸老虎，具体来说它们是：
- 基础代码逻辑（CoffeeScript）
- 创建图层（Layer）
- 理解状态（State）
- 安排动效（Animation）
- 设定事件（Event）
- ......
如果你看过 Framer 官网的 入门教程 就会发现，列表中的纸老虎都非常有条理的写在了教程里。另外，横向对比市面上的原型软件，Framer 的官方文档是最精美最完善的，这看起来是个好事，但更多的是个坏事。
一款原型软件，为什么需要不断查阅文档？这很明显阻碍了做原型最初的目的：快速验证。
Framer 的优势
我用具体的例子来说明一下。
灵活
将各个图层的属性设置妥当，利用 Switch States（切换状态）可将图层的状态部署在任何你想触发的地方；只要浏览器能呈现的变换，Animation Properties（动效属性）几乎可以全部实现。
高效
假设要做一个 9 宫格原型，每个格子点到相应的页面。按照传统方式，要反复的给每一个都设置好去向，如果再有 16、32 宫格怎么办？机械化的操作交给机器做，Framer 中（准确的说是代码中）for loop 配合 array 就是干这件事的。短短几行，解决半小时的工作量。
直接
Utils.Module 可以仅用一行代码实现图层联动。联动是什么呢？用 Instagram 等修图软件来解释就是：拖动滑块为图片调整角度、亮度、大小等。滑块是图层一，图片是图层二，对图层一进行交互影响图层二，就是联动。
另外，Framer 最近的 几次更新 也带来了更多的原生交互：Pinch · Pan · Swipe · Press、3D Touch、Color Control 等等。
跨过门槛，Framer 可以充分利用代码带来最高效最优雅的实现。
New Framer 的预测
Framer 团队热衷于组织、参加线下聚会，有视频记录的我都看过，无一不是手把手带着参会的人入门，也就是说，他们每场聚会的内容都是一样的：带领参会者跨过门槛。具体就是：他们会把前面所说的纸老虎一个个演示一遍，非常低效笨重。
此时，把前面说的优势和劣势放在一起看：
- 劣势：初期学习成本高，对代码（纸老虎）的畏难情绪非常普遍
- 优势：一旦上手后，实现效率和实现能力可以极大提高
就会发现：线下聚会、精美文档并不能解决问题，因为它们在解决的是真正的问题带来的问题：纸老虎导致的高门槛。而真正需要解决的问题是：
干掉纸老虎。
纸老虎犯了两个错误：
- 用代码编辑图层，管理图层间关系
- 用代码控制逻辑，且无法展现逻辑
对于强编辑、强逻辑的功能，思维导图、流程图、表单系统等等，无一不证明了图形的效果是远好于代码（文字）的，就连 Terminal 中的目录也是用代码排序成的列表图形。
代码无法体现结构，它只是记录和定义。Graphical User Interface 相对 Command Line Interface 在「体现」上有着天生的优势。
那么，相应需要解决的问题就是：
- 如何在更加简单易用的前提下，将「基础操作」从代码中摆脱出来？
- 基础操作包括但不限于：
- 创建图层、设置属性
- 赋予多种状态
- 安排动效属性
- 设定触发事件
- 如何在更加简洁明了的前提下，将「逻辑管理」从代码中摆脱出来？
- 逻辑管理包括但不限于：
- 图层管理（图层间的关系、顺序）
- 动效管理（动效的先后）
- 状态管理
我把 Framer 目前的缺失分为四点，同时这四点也是我对 New Framer 的猜测：
- 图形为主代码为辅的创建、赋值流程
- 选中、编辑、管理图层的图形化界面
- 动效管理的可视化界面（类时间轴？）
- 状态管理（结合图层管理）
图形化创建、赋值流程：
每天都要发的表情就是很好的例子：下图是 OS X 的 Emoji 选择器，通过 ⌃-⌘-Space 触发并点选。
图层与相关动效、触发事件的关系：
图层管理的图形化界面可以融入相关动效，动效管理的可视化则天然适合加入相关触发事件。
状态管理：
现在的 Framer 中，状态必须依附图层存在。但是状态本身是可以单独存在的。如果状态可以管理并复用，结合图层管理，会是一个不错的 Feature。
综上所述，用一句话粗暴简单的概括就是：
让代码做它该做的，其他的交给 GUI。
福利
我用 Framer 纯代码重现了 Framer 官网倒计时 New Framer 动效：在线预览→
GIF 不动戳大，欢迎关注我的 dribbble→
One more thing...
知乎正在招聘产品设计师，详情请见：加入知乎→
如果你感兴趣，欢迎找我聊聊，联系方式可私信。
