設計全新的 Framer（譯文）

https://blog.framer.com/designing-the-all-new-framer-eec13aaa2b53（原文，需翻牆）

正文開始：

在過去2年中，我們把Framer構建成一個豐富的產品，以適宜我們的口號「設計無界限」但是這個架構仍有些混亂。今天我們就上線了重新設計的界面，在之前說到的目標下提升代碼和畫布的共生關係。相對於之前擁擠的工具欄來說，這次改進會保持簡單和智能。彈跳曲線從未這麼好用過。

創建塊元素和核心模塊

對於初學者來說，Framer可以非常好的理解一系列塊元素。你開始畫一個圖層，然後你添加了一個狀態或者動畫，用事件控制它，通常是點擊事件或輕拍事件。這四個核心概念對任何想要快速學習的人來說都很簡單。這些基礎的塊元素都可以通過Auto-Code來完成。然而，我們把它們嵌套在了工具欄的插入菜單里了。用戶很難直觀的發現這個好用的功能。為了促使完成一個更好的使用流程，我們把這些核心塊元素移動左上方一個簡潔的下拉列表中，方便插入。現在你最重要的一鍵功能直接集成在編輯器中了。

從Sketch導入時，文檔和錯誤檢測都移到了底部左邊的側邊欄。在你做原型時，基於它們是關鍵的共建組件，你不需要它們像核心功能一樣那麼頻繁的出現。檢測功能現在非常方便的出現在錯誤信息的旁邊，可以讓你輕鬆的解決bug。

畫布和代碼聯合

值得注意的地方是，我們之前把Framer的窗口分為了兩個部分。

假定之下，給它一個平等的空間去寫代碼和呈現畫布。但最終我們的社區成員反饋了一堆亮瞎狗眼的問題：有限的觀察適應能力，不能看到原型的不同方案，鎖定的設備比例，限制性的使用屏幕工作流等等。所以我們決定是時候切割了，並且要讓你們能控制自己的工作區。結果就是界面設計兼顧注意力和功能自定義。

如果你喜歡讓你的設計環節保持緊湊，你仍然可以把畫布面板拖回到主程序窗口。它會對齊到編輯器右下側，在你的代碼和圖層中有一個很舒適的存在。這是畫布模式的預設，不過我們讓設備的切換變得簡單：可直接在許多設備間跳轉或者從菜單圖標選擇。點擊旋轉，放大，刷新，選擇展示什麼樣的手或者設備。需要演示原型？一個綠色按鈕就可以，會自動進入一個全屏預覽，且是你自己選擇的那個設備。

所有元素已就位

當需要測試和分享時，你會找到Cloud和Mirror功能來預覽，入口在右上角。這些非常適用的功能在常規設計環節中最後一步會用到。

在這次更新中，我們的歡迎界面同樣更新了，提供易於對接優質資源的方式。作為我們努力降低學習曲線的一部分，我們還提供了4個如何開始的例子。配合加註了簡單說明，每個例子都作為獨立模塊來幫助初學者學習如何用代碼實現流行交互方式。

以下內容屬自我YY：

我個人比較喜歡新版的界面，可以看出來 Framer 這次更新，把 Auto-Code 這個功能的權重又加大了，意在減少設計師的學習成本，包括曲線部分的小設計也很棒。雲端和分享的改進也方便設計師們呈現和討論自己的想法。

順便提一句：新版本需要重新購買 license。什...什麼？！

如果你喜歡這篇文章，不要吝惜你的「贊」

推薦閱讀：