@Sophia的玲瓏閣 ：前段時間Framer改版，讓這個軟件大熱，分出了設(shè)計和代碼兩種模式。我喜歡嘗試新鮮事物的性格，這下子也是躍躍欲試。這一周，終于靜下心來去嘗試做了一個demo。通過做這個demo，來說說設(shè)計師到底有沒有必要學(xué)習(xí)代碼。

Framer簡介

先來說說我對Framer的理解。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者簡介：Sophia的玲瓏閣，一枚愛折騰，愛健身的交互設(shè)計妹紙。

職場設(shè)計技能，更多教程搶先看，請關(guān)注作者的微信公眾號：「Sophia的玲瓏閣」

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com