Demand Shell
首发于Demand Shell

即将来临的 New Framer 会给我们带来什么?

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 团队热衷于组织、参加线下聚会,有视频记录的我都看过,无一不是手把手带着参会的人入门,也就是说,他们每场聚会的内容都是一样的:带领参会者跨过门槛。具体就是:他们会把前面所说的纸老虎一个个演示一遍,非常低效笨重。

此时,把前面说的优势和劣势放在一起看:

  • 劣势:初期学习成本高,对代码(纸老虎)的畏难情绪非常普遍
  • 优势:一旦上手后,实现效率和实现能力可以极大提高

就会发现:线下聚会、精美文档并不能解决问题,因为它们在解决的是真正的问题带来的问题:纸老虎导致的高门槛。而真正需要解决的问题是:

干掉纸老虎。

纸老虎犯了两个错误:

  1. 用代码编辑图层,管理图层间关系
  2. 用代码控制逻辑,且无法展现逻辑

对于强编辑、强逻辑的功能,思维导图、流程图、表单系统等等,无一不证明了图形的效果是远好于代码(文字)的,就连 Terminal 中的目录也是用代码排序成的列表图形。

代码无法体现结构,它只是记录和定义。Graphical User Interface 相对 Command Line Interface 在「体现」上有着天生的优势。

那么,相应需要解决的问题就是:


1. 如何将「编辑管理」从代码中摆脱出来?
  • 编辑管理包括但不限于:
    • 创建图层、设置属性
    • 赋予多种状态
    • 安排动效属性
    • 设定触发事件

2. 如何将「逻辑控制」从代码中摆脱出来?
  • 逻辑控制包括但不限于:
    • 图层管理(图层间的关系、顺序)
    • 动效管理(动效的先后)
    • 状态管理

我把 Framer 目前的缺失分为四点,同时这四点也是我对 New Framer 的猜测:

  • 图形为主代码为辅的创建、赋值流程
  • 选中、编辑、管理图层的图形化界面
  • 动效管理的可视化界面(类时间轴?)
  • 状态管理(结合图层管理)

1. 图形化创建、赋值流程:

每天都要发的表情就是很好的例子:下图是 OS X 的 Emoji 选择器,通过 ⌃-⌘-Space 触发并点选。

2. 图层与相关动效、触发事件的关系:

图层管理的图形化界面可以融入相关动效,动效管理的可视化则天然适合加入相关触发事件。

3. 状态管理:

现在的 Framer 中,状态必须依附图层存在。但是状态本身是可以单独存在的。如果状态可以管理并复用,结合图层管理,会是一个不错的 Feature。


4. 综上所述,用一句话粗暴简单的概括就是:

让代码做它该做的,其他的交给 GUI。

福利

我用 Framer 纯代码重现了 Framer 官网倒计时 的 New Framer 动效:在线预览→

GIF 不动戳大,欢迎关注我的 dribbble→



One more thing...

知乎正在招聘产品设计师,详情请见:加入知乎→

如果你感兴趣,欢迎找我聊聊,联系方式可私信。

编辑于 2016-04-10

文章被以下专栏收录