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...

知乎正在招聘產品設計師，詳情請見：加入知乎→

如果你感興趣，歡迎找我聊聊，聯繫方式可私信。

推薦閱讀：