UI設(shè)計(jì)師學(xué)習(xí)Framer代碼的那些事

Framer簡(jiǎn)介

先來(lái)說(shuō)說(shuō)我對(duì)Framer的理解。

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

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

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

怎樣學(xué)習(xí)

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

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

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

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

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

我現(xiàn)在說(shuō)的是很輕松，每一步實(shí)施起來(lái)都是困難重重，因?yàn)椴欢詴?huì)遇到很多問(wèn)題，然后自己再耐心一個(gè)個(gè)解決。

 

學(xué)習(xí)中的收獲

這一個(gè)禮拜的收獲除了自己入門(mén)的Framer，還有幾點(diǎn)比較重要。

一是驗(yàn)證了我一直強(qiáng)調(diào)的學(xué)習(xí)方法，即實(shí)踐總是讓自己學(xué)習(xí)最快的流程，沒(méi)有之一。

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

 

設(shè)計(jì)師到底要不要學(xué)代碼

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

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

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

總的來(lái)說(shuō)，學(xué)了更好，不學(xué)影響也不是很大，術(shù)業(yè)有專(zhuān)攻，這只是一件錦上添花的事情。個(gè)人愚見(jiàn)，只限于同行進(jìn)行交流。

會(huì)代碼的設(shè)計(jì)師會(huì)讓人看起來(lái)很酷，但不代表著職場(chǎng)核心競(jìng)爭(zhēng)力會(huì)變強(qiáng)，人最核心的競(jìng)爭(zhēng)力還是尋找問(wèn)題核心的分析力以及解決問(wèn)題的執(zhí)行力。