Daily Design 設計師武功之「極速入門Framer」

01-27

俗話說的好「不會畫圖的產品不是一個好開發」，等一下，這句俗話誰講的，來，你過來，我保證讓你改20遍設計方案之後再用回第一稿！！

玩笑歸玩笑，身為一個設計師，我們的「追??」當然要高，要做到「能文能武」是吧，文能提筆安天下，武能上馬定錢楓，不是，武能上馬定乾坤（不要笑場）

許多設計師都期望能用一個新奇特的 idea 來征服世界有木有，但是你需要的不是用生澀的文字來描述你的想法，你需要的是一個具象的實物來演示。許多工業設計師、建築設計師、汽車設計師除了畫圖，他們還會塑模型（也就是會捏超大的橡皮泥），他們還要學習材料學知識、結構力學知識等等。因此作為一個Web/App設計師，你也應當了解基本的技術實現手段，這樣不僅能高效解釋你的想法，也有助於開發同學還原設計。所以這篇文章將通過下面一個實例，帶你認識 Framer 這個工具。

Sketch、PS 與 Framer 的快速對接

Step1. 你在 Sketch 或 PS 已經設計好了你想展示的界面，如下圖：

Step2. 想好在這個界面中有哪些控制項是可交互的，將他們單獨分組，哪怕只有一個圖層，也要如此。注意看下面的圖：

分組名稱一定要起英文，否則導入到 Framer 裡面無法正常顯示，並且這些名稱是用來定位該元素的，你可以把這些名稱理解成「錨點」，命名規則可遵循上圖，兩個單詞銜接時，後面一個詞的第一個字母大寫，編程命名規則。注意：未編組的圖層不會在 Framer 中出現！

Tips：在作圖的時候就養成習慣，隨手分組並命名，事半功倍

Step3. 打開 Frame Studio 新建一個項目，選擇設備為 iPhone ，點擊左上角「Import」，選擇從 Photoshop 導入（此時不要關掉你的PS）。

導入完成後，你就看到所有你編組的圖層按順序出現在裡面了。

你可以在 App Store 下載 Framer Preview （如果你用iPhone的話），這個App可以讓你在手機上演示你的項目，之前是收費的，現在似乎免費了（你賺到了，PO主當時花了60+大洋入手的）。

瀏覽一下 Framer 的界面，比較簡單，左半邊是寫代碼的地方，右半邊是演示區，中間是圖層樹。OK，導入完畢後，代碼區會自動生成這樣一段代碼：

psd = Framer.Importer.load("imported/chat_concept@1x")n

你需要關注的是「=」前面的「psd」這是一個變數名（錨點），當你想控制界面中的元素時，會用到它。例如，當你想讓底部欄消失時，你需要寫下這行代碼：

psd.bottom.visible = falsen

不過這裡有個Trick，如果添加下面這行代碼：

Utils.globalLayers(psd)n

那麼此時你想讓底部欄消失，你只需要寫下：

bottom.visible = falsen

你發現前面的「psd」省略了，沒錯，此時你想定位任何一個元素，都不需要再在前面加上「psd」了。

Tips：當你修改了PS中的圖層或名字而重新導入一遍時，Framer.Importer 前的變數名會變為：psd1、psd2、psd3....... 此時你需要注意修改對應名稱

編寫一個簡單的交互動作

目前為止所有準備工作都已經完成，接下來你需要添加交互事件，讓它們活起來。萬事開頭難，我們從最簡單的開始：輕點「+」彈出一個對話框。

注意，這裡你需要了解兩件事：「輕點」和「+、對話框」，前者是事件，後者是對象。通過「輕點」這個事件映射到對象「+」，讓「對話框」這個對象出現。舉個栗子：你給你老婆戴上一枚鑽戒讓她微笑，戴上這個動作就是事件，你老婆和戒指就是對象。

所以首先，你要創建一個對話框（對象）：

dialog = new Layern

然後，你要規定一下這個對話框多高啊，多寬啊，什麼顏色啊，出現在哪裡啊（為對象添加屬性）：

dialog = new Layern height: 100n width: 200n x: Align.center()n y: Align.center()n backgroundColor: "white"n

最後，讓這個對話框默認不顯示

dialog = new Layern height: 100n width: 200n x: Align.center()n y: Align.center()n backgroundColor: "white"n visible: falsen

對話框搞定了，開始添加事件：

iconAdd.onTap ->n

上面這行代碼是賦予「iconAdd」這個圖標一個「on tap」點擊事件，完成後你要告訴電腦，點這個圖標時做什麼，所以你要在下面填上：

iconAdd.onTap ->n dialog.visible = truen

OK，到目前為止，你如果照著練習了一下，那麼你應該成功了！

Tips：上面的例子 iconAdd 這個對象默認是從PS中導入進來的圖層，所以如果你從PS導入時沒有這個圖層，那麼代碼是不會被執行的

任何問題歡迎你在下面留言給我～

我們的奮鬥目標：

在設計圈，代碼寫的最好。在碼農圈，icon畫的最棒。在產品圈......??

歡迎訂閱我的Bolg（不定期更新）SteveoOn.Ren on WordPress.com