UI設(shè)計師學習Framer代碼的那些事

Framer簡介

先來說說我對Framer的理解。

Framer是一個用來做動效的軟件，用來將咱們二維平面軟件設(shè)計出來的方案做成可以在手機上可以進行真實模擬操作交互的原型出來。市面上有很多種這樣的軟件，每個軟件的原理可能不太一樣，比方說Flinto，Principle，Origami等等。

絕大部分都是在視覺基礎(chǔ)上進行一些手勢的串聯(lián)，設(shè)計師只需要設(shè)置出類似流程線的東西，設(shè)置好一些參數(shù)（不需要寫代碼），軟件就會幫忙進行計算，然后渲染出demo，即咱們所說的原型。

Framer的不同之處，它是真的是讓設(shè)計師去寫代碼呀，通過代碼實現(xiàn)出原型，當然Framer它自己也做了很多的類似于效果包的代碼庫，設(shè)計師只需要調(diào)出來進行使用就可以。意思就是，不是每行代碼設(shè)計師都要敲，F(xiàn)ramer是簡化后的代碼模式軟件。還有就是它支持Sketch等文件的導(dǎo)入，也就是說咱們可以在sketch上畫好了，再到Framer進行動態(tài)效果的呈現(xiàn)，不需要將每個圖層都在Framer進行代碼實現(xiàn)。（后來驗證，畫圖還是在Framer自己的設(shè)計模式進行畫實現(xiàn)才比較方便）

怎樣學習

入手Framer的時候，我先從它全英文的手冊開始看，跳過設(shè)計模式（粗略看了一下覺得跟sketch的用法很像），直接從代碼模式進行查看。知道了原來它是基于CoffeeScript語言進行demo開發(fā)的。當然，手冊網(wǎng)上也可以找到部分的中文翻譯，但更新不完全，我也下了一番功夫，將最新的Framer的代碼手冊翻譯成了中文，整理好了之后會給分享給大家。

CoffeeScript我也不會，于是又從網(wǎng)上去找相應(yīng)的官方手冊，發(fā)現(xiàn)太難了，一點也不想看（原諒我也是個萌妹紙，偶爾也會任性）。

于是，我一不做二不休，直接從Framer官方網(wǎng)站的簡易版手冊和部分教學視頻開始學習。然后畫好了sketch文件，導(dǎo)入到Framer進行敲代碼了。當然也是不完全會的，先在官網(wǎng)上看手冊，然后加入一些學習小組的群在群里進行討論。

然后遇到都不懂的問題（畢竟咱們都是設(shè)計師），我就在下班后拿去請教公司的開發(fā)GG們，當然也不能太多，可以分開進行問幾個人，這樣每個人都比較輕松。

就這樣糾結(jié)了好幾天，一個雛形的demo算是做出來了。

我現(xiàn)在說的是很輕松，每一步實施起來都是困難重重，因為不懂所以會遇到很多問題，然后自己再耐心一個個解決。

 

學習中的收獲

這一個禮拜的收獲除了自己入門的Framer，還有幾點比較重要。

一是驗證了我一直強調(diào)的學習方法，即實踐總是讓自己學習最快的流程，沒有之一。

二是最為交互設(shè)計師，領(lǐng)悟到了之前開發(fā)GG們一直強調(diào)的一句話“設(shè)計師的方案是會影響到開發(fā)代碼實現(xiàn)的邏輯的”。設(shè)計師在做方案的過程中不要突發(fā)奇想去想一些很創(chuàng)新的idea，往往這些idea可以解決當前的交互問題，可能卻不知道影響了哪些地方的操作和邏輯的統(tǒng)一性?？紤]問題的時候不單單從一個小的點進行思考，如果可以，盡量從大局，即所有的功能點都進行一些思考。操作越統(tǒng)一，代碼越簡單，邏輯越清晰，實現(xiàn)起來也越方便。

 

設(shè)計師到底要不要學代碼

如果從大的方向來思考一下，設(shè)計師到底需不需要學習代碼？隨著我工作經(jīng)驗的豐富，我從現(xiàn)階段的理解來跟大家聊聊。

主要可以分為兩個階段，如果是新手，也就是想換行到互聯(lián)網(wǎng)領(lǐng)域的設(shè)計師，或者說從業(yè)大概1~2年以內(nèi)的設(shè)計師（求職的時候會給會代碼的設(shè)計師加分但不是主要的判斷依據(jù)），這個階段我建議暫時不需要將精力放在學代碼上面，這個階段主要是設(shè)計基本功的扎實，顏色、字體、排版的功底在這個階段更重要。

度過新手期，處于上升期或者穩(wěn)定期的設(shè)計師，也就是工作2~3年以上的設(shè)計師，可以開始這方面的著手了，但依個人精力來進行一個判定，不強求。學了代碼自己思維訓(xùn)練又多了一個維度，跟開發(fā)交流起來更加方便。不學的話自己主攻視覺UI這一層也很不錯。

總的來說，學了更好，不學影響也不是很大，術(shù)業(yè)有專攻，這只是一件錦上添花的事情。個人愚見，只限于同行進行交流。

會代碼的設(shè)計師會讓人看起來很酷，但不代表著職場核心競爭力會變強，人最核心的競爭力還是尋找問題核心的分析力以及解決問題的執(zhí)行力。