前端這兩年火了蟹地，尤其是依托于微信傳播的H5（這個(gè)名字其實(shí)很不標(biāo)準(zhǔn)）漫天飛之后。很多非程序員尤其是設(shè)計(jì)師開始在這個(gè)時(shí)候?qū)η岸水a(chǎn)生興趣藤为。而對(duì)于找工作的設(shè)計(jì)師來說怪与，有一定的編程基礎(chǔ)也會(huì)更受青睞。
前端作為一種比較偏向視覺化的編程技術(shù)缅疟，對(duì)于想學(xué)編程的非程序員來說確實(shí)是一種比較適合的編程語(yǔ)言分别。但是在我和很多設(shè)計(jì)師打交道的過程中，發(fā)現(xiàn)大部分人對(duì)于學(xué)習(xí)編程會(huì)存在一些誤區(qū)窿吩。
比如很多人雖然想學(xué)但又認(rèn)為編程太難有排斥心理；相對(duì)地也有一些人用CSS寫了一些樣式會(huì)覺得前端很簡(jiǎn)單错览；還有些人不知道從何下手纫雁，就開始啃起了枯燥無味的w3school文檔（web技術(shù)中文文檔）。于此我覺得設(shè)計(jì)師想學(xué)會(huì)寫代碼一定要對(duì)編程有正確的認(rèn)知倾哺，既要對(duì)技術(shù)保持一顆敬畏的心轧邪，又不能從潛意識(shí)里排斥它刽脖。
我做了兩年前端開發(fā)，同時(shí)也做過許多設(shè)計(jì)的工作忌愚∏埽基于自己的經(jīng)驗(yàn)，對(duì)于設(shè)計(jì)師學(xué)編程這件事我有一些自己的想法和建議想分享給你硕糊。
術(shù)業(yè)有專攻
可能有些設(shè)計(jì)師想精通編程院水，成為一個(gè)全棧設(shè)計(jì)師，但我不太贊成這種想法简十。畢竟“術(shù)業(yè)有專攻”檬某，每個(gè)人一生的精力有限，根據(jù)“一萬(wàn)小時(shí)理論”（想要成為某個(gè)領(lǐng)域的專家需要持續(xù)學(xué)習(xí)一萬(wàn)小時(shí)）螟蝙，要想成為設(shè)計(jì)大咖已經(jīng)要花費(fèi)很多時(shí)間了恢恼，想同時(shí)在技術(shù)這一領(lǐng)域有所造詣短時(shí)間也是達(dá)不到的。
但是因?yàn)榍岸私?jīng)常做一些視覺化的開發(fā)胰默，比如寫外觀樣式和交互動(dòng)畫场斑，加之CSS和HTML語(yǔ)法看起來比較簡(jiǎn)單，常常會(huì)給設(shè)計(jì)師造成一種假象：前端不是很容易學(xué)嗎牵署÷┮可是，不同于以前網(wǎng)頁(yè)設(shè)計(jì)師僅僅做一些視覺還原的工作碟刺，現(xiàn)在的前端工程師要做的工作范圍極廣锁保，寫寫樣式調(diào)調(diào)動(dòng)畫只是其中一部分。從這個(gè)職位屬性的變化——從設(shè)計(jì)師到工程師——就可以看出來半沽，一名合格的前端工程師除了能夠還原頁(yè)面視覺爽柒，還要有工程化的思維，對(duì)數(shù)據(jù)結(jié)構(gòu)有深刻的認(rèn)識(shí)者填，有時(shí)候還需要一些計(jì)算機(jī)網(wǎng)絡(luò)的知識(shí)浩村，對(duì)后端也要有一定了解。這幾年前端技術(shù)發(fā)展飛快占哟，各種框架及工具層出不窮心墅，新技術(shù)不斷出現(xiàn)，想要追上卻力不從心榨乎。所以說怎燥，前端入門容易但想要學(xué)深學(xué)透卻“難于上青天”。
說了這么多蜜暑，其實(shí)是想告訴你要明確學(xué)習(xí)編程的目的铐姚。如果你想從設(shè)計(jì)師轉(zhuǎn)行成為一個(gè)前端工程師，那么可能就要心無旁騖地去從計(jì)算機(jī)科學(xué)這門學(xué)科的基礎(chǔ)知識(shí)開始學(xué)習(xí)了肛捍。但我相信大部分設(shè)計(jì)師的目的是想成為“T”型人才——在設(shè)計(jì)領(lǐng)域是專家隐绵，而對(duì)于技術(shù)領(lǐng)域也有一定程度的涉獵之众。所以，學(xué)習(xí)編程對(duì)我們來說就是為了增加自己的附加值依许。
靠興趣驅(qū)動(dòng)學(xué)習(xí)
明確了學(xué)習(xí)目的棺禾，那我們的學(xué)習(xí)方式也應(yīng)該是有別于工程師的學(xué)習(xí)方式的。我認(rèn)為設(shè)計(jì)師學(xué)習(xí)編程最快也是最有效的方式就是通過興趣驅(qū)動(dòng)學(xué)習(xí)——沒有什么比看見自己用代碼寫出一個(gè)小demo更讓設(shè)計(jì)師開心了峭跳。
當(dāng)然膘婶，除了滿足感我們還能得到一些切實(shí)的好處。我從四點(diǎn)分別講述坦康，同時(shí)推薦一些編程語(yǔ)言或軟件竣付。
1、了解一定的開發(fā)原理滞欠，和工程師溝通更順暢
推薦使用交互原型工具Framer進(jìn)行一些動(dòng)效設(shè)計(jì)古胆，它將視覺設(shè)計(jì)和編程相結(jié)合，雖然代碼不能直接拿去用筛璧，但能夠讓你和開發(fā)工程師溝通起來更加順暢逸绎。
2、自己能夠編寫Ps和Sketch插件夭谤，通過代碼減少重復(fù)性工作
Ps和Sketch都支持插件擴(kuò)展棺牧，同時(shí)支持多種語(yǔ)言風(fēng)格書寫插件，所以你可以選擇自己熟悉的語(yǔ)言編寫朗儒。當(dāng)遇到重復(fù)性的操作時(shí)颊乘，你就可以自己寫個(gè)插件提高工作效率了。
3醉锄、代碼也是一種藝術(shù)乏悄，編程就是換一個(gè)角度進(jìn)行藝術(shù)創(chuàng)作
Processing是一款可視化編程軟件，很多設(shè)計(jì)師通過Processing創(chuàng)作出一些很棒的作品恳不。在Processing里檩小，代碼就是一支畫筆可以讓你畫出一些意想不到的作品，設(shè)計(jì)師玩了這個(gè)絕對(duì)會(huì)愛不釋手烟勋。
4规求、可以按自己的想法做出個(gè)人網(wǎng)站
能自己獨(dú)立完成個(gè)人網(wǎng)站需要很多知識(shí)積累。到這一步的設(shè)計(jì)師應(yīng)該已經(jīng)在代碼里摸爬滾打很長(zhǎng)時(shí)間了卵惦，各種需要使用的技術(shù)都能懂一些阻肿。
需要注意的細(xì)節(jié)
最后，說一些細(xì)節(jié)問題沮尿，希望能給你在學(xué)習(xí)編程的路上一些指引丛塌。
1、永遠(yuǎn)不要畏懼代碼
很多設(shè)計(jì)師會(huì)對(duì)代碼有一種潛意識(shí)的排斥，但其實(shí)是被自己的眼睛欺騙了姨伤。如果靜下心來，“摒棄前嫌”地看一段代碼庸疾，你會(huì)發(fā)現(xiàn)好像也可以看懂乍楚，它好像也沒那么難。
2届慈、思維的轉(zhuǎn)變
編程的思維和設(shè)計(jì)的思維肯定是不同的徒溪，編程會(huì)更加注重抽象能力，很多具象的東西在代碼里就抽象成了數(shù)據(jù)金顿。所以臊泌，最好的方式就是在寫代碼時(shí)把自己想象成一臺(tái)計(jì)算機(jī)。
計(jì)算機(jī)的特點(diǎn)就是能快速計(jì)算揍拆，所以代碼里所表現(xiàn)的一些過程其實(shí)就是很原始的方法渠概，比如計(jì)算1到100的平均值，在代碼里就是把它們一個(gè)個(gè)加起來除以100嫂拴。但是播揪，最后肯定需要人為的地進(jìn)行一些算法優(yōu)化。
3筒狠、注意格式
正如在設(shè)計(jì)中將文字猪狈、圖案對(duì)齊一樣，將代碼對(duì)齊辩恼、按規(guī)范書寫將會(huì)是一個(gè)好習(xí)慣雇庙。誠(chéng)然，一團(tuán)亂麻的代碼沒有報(bào)錯(cuò)也能正確執(zhí)行灶伊，但是考慮到以后你可能會(huì)再次閱讀自己的代碼疆前，還是把它對(duì)齊并按照規(guī)范寫吧，不然下次讀自己的代碼時(shí)你可能會(huì)想殺掉之前的自己谁帕。
更何況峡继，簡(jiǎn)潔優(yōu)雅的代碼看起來簡(jiǎn)直是一件藝術(shù)品。
4匈挖、數(shù)據(jù)類型及代碼結(jié)構(gòu)碾牌。
編程語(yǔ)言有很多種，但是它們的數(shù)據(jù)類型和代碼結(jié)構(gòu)卻大同小異儡循。比如數(shù)據(jù)類型無非就是數(shù)字（number）舶吗、字符串（string）、布爾值（boolean）择膝、對(duì)象（object）等誓琼，而代碼結(jié)構(gòu)無非就是條件、循環(huán)等。所以腹侣，在準(zhǔn)備編程之前能夠了解一下這些基礎(chǔ)知識(shí)叔收，將會(huì)在以后寫代碼時(shí)減少很多不必要的時(shí)間。
在Framer官網(wǎng)關(guān)于程序的章節(jié)就大概講了這些內(nèi)容傲隶，推薦你去看一看饺律。
以上所述，都來自于個(gè)人經(jīng)驗(yàn)跺株，未免有些錯(cuò)誤或疏漏复濒，僅供各位參考，但不可盡信乒省。希望我的這些經(jīng)驗(yàn)?zāi)荛_啟你的編程之路或在你編程時(shí)給你一些切實(shí)的幫助巧颈，如果有任何問題也可以留言探討。
