這是《設(shè)計(jì)師想知道的100個(gè)前端問(wèn)題》系列內(nèi)容的第二期，這一期的內(nèi)容我們來(lái)聊一聊設(shè)計(jì)師的前端學(xué)習(xí)路徑。

往期回顧：

這期內(nèi)容開(kāi)始之前，我想先回答幾個(gè)小伙伴在看完我上一期內(nèi)容之后提的幾個(gè)問(wèn)題。

第一個(gè)問(wèn)題

我想學(xué)習(xí)手機(jī) app 的開(kāi)發(fā)，是不是也要學(xué)習(xí)前端？

手機(jī) app 開(kāi)發(fā)，主要是看你要學(xué)習(xí)的是蘋(píng)果手機(jī)的 app 開(kāi)發(fā)還是安卓手機(jī)的 app 開(kāi)發(fā)，因?yàn)閮烧叩南到y(tǒng)是不一樣的，而他們 app 的開(kāi)發(fā)語(yǔ)言也是不一樣的，蘋(píng)果手機(jī)開(kāi)發(fā)的話可以學(xué)習(xí) swift 語(yǔ)言，而安卓手機(jī)開(kāi)發(fā)，可以學(xué)習(xí) Java 或者 Kotlin。

我在上一期內(nèi)容中也提到過(guò)可以開(kāi)發(fā)手機(jī)端的 app，而且是跨平臺(tái)的，蘋(píng)果和安卓都可以開(kāi)發(fā)，只不過(guò)，這個(gè)是需要你的前端基礎(chǔ)比較好，已經(jīng)深入地學(xué)習(xí)到一定程度才能掌握的一項(xiàng)技能，基礎(chǔ)的前端是無(wú)法幫你做到這件事的。

我的建議是如果你只是想學(xué)習(xí) app 開(kāi)發(fā)，可以學(xué)習(xí)蘋(píng)果的 swift 語(yǔ)言，因?yàn)樘O(píng)果的生態(tài)更好，產(chǎn)品的體驗(yàn)更棒，網(wǎng)上關(guān)于這個(gè)語(yǔ)言?xún)?yōu)質(zhì)的學(xué)習(xí)資源也非常多，只不過(guò)因?yàn)檫@個(gè)語(yǔ)言只能開(kāi)發(fā)運(yùn)行在蘋(píng)果系統(tǒng)上的軟件產(chǎn)品，例如蘋(píng)果手機(jī)、蘋(píng)果電腦等，還是有挺大的局限性，而且目前來(lái)說(shuō)只能用來(lái)開(kāi)發(fā) app，也不能寫(xiě)網(wǎng)站網(wǎng)頁(yè)，使用場(chǎng)景也比較單一，就目前的趨勢(shì)來(lái)看，很多小程序其實(shí)已經(jīng)能夠代替很多 app 的使用場(chǎng)景了，而小程序的開(kāi)發(fā)技術(shù)，是基于前端的，這一點(diǎn)你可以綜合考慮一下。

不過(guò)，哪怕就算你只想學(xué)習(xí) app 開(kāi)發(fā)，那么在你熟練掌握某個(gè)平臺(tái)的 app 開(kāi)發(fā)語(yǔ)言后，有機(jī)會(huì)也最好再學(xué)習(xí)一些前端知識(shí)，這樣不僅能擴(kuò)寬你的能力邊界，也可以幫你打破平臺(tái)的局限，同時(shí)前端的技術(shù)也可以和 swift 等語(yǔ)言結(jié)合一起進(jìn)行混合開(kāi)發(fā)，提高你的 app 開(kāi)發(fā)效率。

第二個(gè)問(wèn)題

python 好像能用在 C4D 里面實(shí)現(xiàn)非常多高級(jí)的效果和功能，這是不是說(shuō)明 python 也挺適合設(shè)計(jì)師學(xué)習(xí)的？

這兩年因?yàn)槿S風(fēng)格設(shè)計(jì)非常的流行，很多設(shè)計(jì)師都開(kāi)始學(xué)習(xí) C4d 了。確實(shí)，python 在 C4D 里面，可以用代碼實(shí)現(xiàn)很多高級(jí)的功能和效果，但你也說(shuō)了這個(gè)是高級(jí)的功能，而且據(jù)我所知是非常高級(jí)的部分了。既然這么高級(jí)的功能肯定是非常專(zhuān)精于 C4D 相關(guān)的崗位和人員才有可能需要去學(xué)習(xí)的內(nèi)容，對(duì)于絕大部分設(shè)計(jì)師來(lái)說(shuō)這種造原子彈級(jí)別的功能大概率一輩子都用不到。

不過(guò)，python 這門(mén)語(yǔ)言其實(shí)應(yīng)用領(lǐng)域還挺多的，尤其是數(shù)據(jù)處理與分析、人工智能深度學(xué)習(xí)、網(wǎng)絡(luò)爬蟲(chóng)等等領(lǐng)域（如果你知道的話，其實(shí)我想說(shuō) JS 也能寫(xiě)爬蟲(chóng)）。只不過(guò)所謂術(shù)業(yè)有專(zhuān)攻，它更擅長(zhǎng)的是數(shù)據(jù)處理和分析的領(lǐng)域，和設(shè)計(jì)師的需求真的不太貼合，這門(mén)語(yǔ)言確實(shí)很好，如果你真的有需要也可以學(xué)習(xí)，我也非常鼓勵(lì)你去學(xué)習(xí)，但絕不要被那些無(wú)良的營(yíng)銷(xiāo)號(hào)蒙蔽了雙眼，學(xué)了用不上，就真的是浪費(fèi)時(shí)間了。

第三個(gè)問(wèn)題

AE 表達(dá)式算編程么？想學(xué)好 ae 表達(dá)式要學(xué)哪些內(nèi)容？用過(guò) After Effect 這個(gè)后期軟件的小伙伴肯定都聽(tīng)過(guò)或者多多少少都用過(guò) ae 表達(dá)式。ae 表達(dá)式能幫我們快速實(shí)現(xiàn)很多復(fù)雜高級(jí)的動(dòng)畫(huà)效果，如果用得好能幫我們減少很多重復(fù)的工作，提高做后期做動(dòng)畫(huà)的效率。其實(shí) ae 表達(dá)式的寫(xiě)法就是JavaScript 的寫(xiě)法，只要你學(xué)會(huì)了 JavaScript，那么再了解一下 ae 表達(dá)式它內(nèi)部特殊的一些知識(shí)點(diǎn)，那就非常容易上手了。

所以，如果你有前端的能力，尤其是掌握了 JavaScript 語(yǔ)言之后，ae 表達(dá)式就非常容易學(xué)習(xí)了。而且不光是 ae 表達(dá)式，其實(shí)很多設(shè)計(jì)軟件的插件或者腳本都可以使用 js 語(yǔ)言進(jìn)行開(kāi)發(fā)，像 AE 的一些腳本，sketch、figma 的一些插件都是可以用 JS 來(lái)開(kāi)發(fā)的。所以如果你懂 JavaScript，就能自己開(kāi)發(fā)一些插件或者腳本，幫助自己或者其他設(shè)計(jì)師提高設(shè)計(jì)工作的效率。

接下來(lái)，我們就要開(kāi)始本期的話題，設(shè)計(jì)師的前端學(xué)習(xí)路徑。

所謂學(xué)習(xí)路徑也就是讓大家了解下設(shè)計(jì)師學(xué)習(xí)前端該學(xué)習(xí)哪些知識(shí)，學(xué)習(xí)的順序是怎樣的。

在這里呢，我要先給大家推薦一個(gè)網(wǎng)站→https://www.cssdesignawards.com/

這個(gè)網(wǎng)站是一個(gè)創(chuàng)意網(wǎng)站的評(píng)選平臺(tái)，里面有很多來(lái)自全球的設(shè)計(jì)師設(shè)計(jì)并開(kāi)發(fā)的非常有創(chuàng)意和設(shè)計(jì)感的網(wǎng)站，注意，很多都是設(shè)計(jì)師自己開(kāi)發(fā)的哦，這些網(wǎng)站中很多的交互和設(shè)計(jì)都非常有趣有想法。這些網(wǎng)站都是真實(shí)上線的項(xiàng)目，不是設(shè)計(jì)稿，你可以瀏覽它們網(wǎng)站的真實(shí)效果。

給大家推薦這個(gè)網(wǎng)站的目的呢，其實(shí)是想告訴大家，你學(xué)習(xí)了前端之后，你也能開(kāi)發(fā)出這些非常酷的網(wǎng)站，大家都是設(shè)計(jì)師，別人可以做到的，我們也一樣能做到。

不過(guò)，萬(wàn)事開(kāi)頭難，學(xué)習(xí)前端不是一件可以速成的事情，如果有一個(gè)比較清晰的學(xué)習(xí)路徑，那么對(duì)于我們?cè)O(shè)計(jì)師循序漸進(jìn)地學(xué)習(xí)前端會(huì)很有幫助。

很多小伙伴在一開(kāi)始有想學(xué)習(xí)前端這個(gè)念頭的時(shí)候，肯定會(huì)上網(wǎng)找各種前端的資料，想知道前端是什么，該學(xué)什么，先學(xué)什么后學(xué)什么，然后肯定會(huì)看到各種讓人懵圈的前端術(shù)語(yǔ)，我自己一開(kāi)始也是這樣，看得我頭都要炸了，一堆專(zhuān)業(yè)術(shù)語(yǔ)，心里想這都是什么跟什么啊。

那今天關(guān)于前端的學(xué)習(xí)路徑，我想換一種方式和大家說(shuō)，按照我自己的學(xué)習(xí)經(jīng)驗(yàn)和體會(huì)，然后把設(shè)計(jì)師學(xué)習(xí)前端的路徑分為四個(gè)階段。

在介紹這四個(gè)階段的過(guò)程中，我可能會(huì)講到一些專(zhuān)業(yè)術(shù)語(yǔ)，盡量都會(huì)做些直白的解釋?zhuān)绻阋廊宦?tīng)不懂，沒(méi)有關(guān)系，我會(huì)把提到的專(zhuān)業(yè)名詞都提示出來(lái)，你可以自行查找資料進(jìn)行了解，而對(duì)于有些非常重要的概念我會(huì)在以后另外制作相關(guān)的內(nèi)容來(lái)介紹。

入門(mén)

這個(gè)階段也是最茫然的階段，像我自己在這個(gè)階段的時(shí)候，對(duì)前端一無(wú)所知，到處找資料想去了解前端方方面面的問(wèn)題，恨不得把前端這兩個(gè)字都拆開(kāi)揉碎了看。

那關(guān)于這個(gè)階段，我先告訴你的是，不管你查到什么資料，被多少前端專(zhuān)業(yè)名詞整得頭疼，那些都不重要，要記住，所有的前端知識(shí)和技能都是建立在 html、css、JavaScript 這三門(mén)語(yǔ)言基礎(chǔ)之上的。最重要的就是先學(xué)習(xí) html 和 css，然后再開(kāi)始學(xué)習(xí) JavaScript 的基礎(chǔ)，這三者是前端永遠(yuǎn)都繞不開(kāi)的基礎(chǔ)，而且順序一定是先 html、css 再 JavaScript，而最近新加入的 webassembly，這個(gè)語(yǔ)言是一些大型網(wǎng)頁(yè)應(yīng)用才用得到的語(yǔ)言，大部分人用不到它的。

在找資料的過(guò)程中，你可能會(huì)看到 jquery，react，vue，ts，node 等等你第一次聽(tīng)說(shuō)的概念，不用頭疼，所有這些東西都是要在你學(xué)習(xí)完基礎(chǔ)的 html，css，JavaScript 之后才可以去學(xué)習(xí)，也才能去學(xué)習(xí)的內(nèi)容。

html，css，JavaScript?這三門(mén)語(yǔ)言，是相輔相成的。

• html 是負(fù)責(zé)組織頁(yè)面的原材料，也就是能決定這個(gè)頁(yè)面里面放哪些基本的內(nèi)容，比如放什么文字，放什么圖片。
• css 負(fù)責(zé)是裝修這個(gè)頁(yè)面，它能輔助 html，讓頁(yè)面變得好看，順便還能加上一些動(dòng)畫(huà)效果。
• js，則是能給網(wǎng)頁(yè)網(wǎng)站加上很多功能和交互，可以讓你的網(wǎng)站從一個(gè)只能看的花瓶，變成一個(gè)又能看又好用的 72 變的全能選手。

在這一階段，先要熟悉 html 和 css 的語(yǔ)法，熟悉他們的寫(xiě)法，能熟練地寫(xiě)幾個(gè)完整的頁(yè)面出來(lái)。

在熟悉了 html 和 css 之后，然后開(kāi)始學(xué)習(xí) JavaScript 的基礎(chǔ)部分，了解 js 的基本寫(xiě)法和語(yǔ)法，能看得懂基本的 js 代碼，了解 js 當(dāng)中的一些基礎(chǔ)概念，比如變量、函數(shù)、數(shù)組、對(duì)象、表達(dá)式等等，然后通過(guò) js 能實(shí)現(xiàn)頁(yè)面中的一些小功能、小的交互效果。

除了基本的這三種語(yǔ)言的知識(shí)之外，還要學(xué)習(xí)一些基礎(chǔ)的網(wǎng)絡(luò)知識(shí)，了解服務(wù)器和瀏覽器的基本原理，畢竟前端中所有的內(nèi)容都是瀏覽器通過(guò)網(wǎng)絡(luò)從服務(wù)器來(lái)獲取的。

當(dāng)你掌握這些之后，那么從一般意義上來(lái)講你就已經(jīng)正式入門(mén)前端了，當(dāng)然如果你的要求低一些，只想學(xué)習(xí) html 和 css，畢竟只用它們已經(jīng)能寫(xiě)出完整的頁(yè)面了，那么你也可以稱(chēng)得上入門(mén)了。

但是如果你想繼續(xù)深入學(xué)習(xí)前端，那么要達(dá)到在我認(rèn)為的入門(mén)標(biāo)準(zhǔn)，你還需要再學(xué)習(xí)一些知識(shí)。

一個(gè)是 git 和 github，這兩個(gè)名字我相信很多在互聯(lián)網(wǎng)工作過(guò)一段時(shí)間的小伙伴肯定不會(huì)感到陌生，但是具體這兩個(gè)是什么呢，我以后會(huì)單獨(dú)細(xì)說(shuō)。

那簡(jiǎn)單地說(shuō)，git 是一個(gè)程序，開(kāi)源的（也就是免費(fèi)的）程序，是可以在電腦本地幫助實(shí)現(xiàn)代碼的版本管理的這么一個(gè)程序，而 github 就是以這個(gè) git 程序?yàn)榛A(chǔ)，把本地的代碼版本和遠(yuǎn)程服務(wù)器上代碼庫(kù)連接起來(lái)進(jìn)行管理的一個(gè)網(wǎng)站平臺(tái)。

還有就是要學(xué)習(xí)一下基本的命令行，命令行就是用一行一行的代碼來(lái)操控電腦實(shí)現(xiàn)一些功能和操作，就是我們會(huì)在一些電影電視劇中看到的那種很酷的黑客都會(huì)用的一種操作電腦的方式。

mac 電腦有自帶的命令行工具，叫 terminal。windows 電腦上也有自己的命令行工具，你也可以安裝一些第三方的命令行工具，具體的我會(huì)在以后命令行的教程里面細(xì)說(shuō)。我們之所以要學(xué)習(xí)命令行，一方面是因?yàn)?git 是用命令行進(jìn)行操作的，而且早點(diǎn)開(kāi)始熟悉使用命令行會(huì)有助于后期深入學(xué)習(xí)前端，以后有一些高級(jí)的知識(shí)會(huì)經(jīng)常用到命令行的方式。

如果你把我以上說(shuō)的這些都學(xué)完了，在我看來(lái)，就已經(jīng)正式入門(mén)前端了，而且你已經(jīng)有能力進(jìn)入第二個(gè)階段的學(xué)習(xí)了。

探索

有小伙伴可能會(huì)覺(jué)得奇怪，為什么第二個(gè)階段叫探索，探索不應(yīng)該是第一個(gè)階段么。因?yàn)樵谖铱磥?lái)，只有當(dāng)你掌握了基本的前端知識(shí)之后，你才有了學(xué)習(xí)各種深入的前端知識(shí)的能力，而進(jìn)一步的深入學(xué)習(xí)的過(guò)程中，其實(shí)可以細(xì)分為好幾個(gè)方向，而這些方向都需要你自己去嘗試，去探索，看看自己到底興趣在哪，適合哪個(gè)方向。

因此我也總結(jié)了幾個(gè)適合設(shè)計(jì)師的學(xué)習(xí)方向，同時(shí)我會(huì)把每個(gè)方向中主要的核心知識(shí)做一個(gè)簡(jiǎn)單的介紹。這里，我要先說(shuō)兩個(gè)概念首先是框架和庫(kù)，你在自己學(xué)習(xí)或者找資料的時(shí)候也總會(huì)看到這兩個(gè)概念，比如 react，vue ，bootstrap 等等都是框架和庫(kù)。那具體什么是框架（Framework）和庫(kù)（Library）？現(xiàn)在，你可以暫時(shí)把它們當(dāng)作同一個(gè)東西來(lái)理解。

我打個(gè)比方，就像我們平時(shí)用的設(shè)計(jì)軟件或其他一些工具，那假設(shè)基礎(chǔ)的 js 能提供的就是軟件中一些很基本的功能，可以幫我建畫(huà)板，給畫(huà)板調(diào)顏色，可以給畫(huà)板挪位置，在畫(huà)板上畫(huà)一筆畫(huà)兩筆等等。那所有這些操作，都需要我們一步一步去操作，也是單一的一個(gè)一個(gè)的功能。那所謂庫(kù)和框架，就是有人幫我們把這些基礎(chǔ)的獨(dú)立的功能用各種奇思妙想結(jié)合起來(lái)，我們用軟件的時(shí)候不需要用某個(gè)基礎(chǔ)的功能了，因?yàn)檫@個(gè)庫(kù)和框架給我們做好了各種各樣的更快捷的整合型的功能。比如使用這個(gè)庫(kù)提供的某個(gè)功能，就能創(chuàng)建畫(huà)板并上色和導(dǎo)出，一步到位，就不要我們那么麻煩地一步步去操作了。

所以，可以簡(jiǎn)單地把庫(kù)和框架理解為以某種語(yǔ)言為基礎(chǔ)的一系列高效的快捷命令或者工具組成的一個(gè)集合。

第二個(gè)概念，是關(guān)于計(jì)算機(jī)語(yǔ)言的版本問(wèn)題。

大家找資料的過(guò)程中會(huì)遇到一些關(guān)于語(yǔ)言版本的問(wèn)題，比如說(shuō) htm4、html5、css2、css3、ES6、ES7 等等這些概念。

為什么 html、css、JavaScript?語(yǔ)言還會(huì)有那么多版本？JavaScript 和 ecmascript 是什么關(guān)系？大家可能都會(huì)覺(jué)得很懵。

其實(shí)，這就有點(diǎn)像產(chǎn)品一樣，計(jì)算機(jī)語(yǔ)言畢竟都是人設(shè)計(jì)的，是要不停地更新?lián)Q代，不停地改進(jìn)的。

那計(jì)算機(jī)語(yǔ)言這個(gè)版本，其實(shí)也是一樣的道理。就拿 html 這個(gè)語(yǔ)言來(lái)說(shuō)吧，有一個(gè)專(zhuān)門(mén)的組織負(fù)責(zé)制定和更新 Html 語(yǔ)言的標(biāo)準(zhǔn)，叫 W3C。W3C 每隔一段時(shí)間整理、討論、更新 Html 的語(yǔ)言標(biāo)準(zhǔn)，而那些瀏覽器的開(kāi)發(fā)公司，一般情況下都會(huì)按照語(yǔ)言標(biāo)準(zhǔn)來(lái)不停地更新瀏覽器，讓這些瀏覽器可以對(duì)采用了新標(biāo)準(zhǔn)寫(xiě)法的 html文件進(jìn)行正確的解碼，但是這些標(biāo)準(zhǔn)都不是強(qiáng)制性的。

所以有時(shí)候你也要明白，不是標(biāo)準(zhǔn)出來(lái)了，瀏覽器就一定會(huì)支持，也有可能它標(biāo)準(zhǔn)還沒(méi)正式發(fā)布，瀏覽器也有可能已經(jīng)支持的情況，關(guān)鍵就在于瀏覽器廠家對(duì)這些新功能特性的積極程度了。

一般來(lái)說(shuō)，除非是整個(gè)語(yǔ)言重新設(shè)計(jì)，不然計(jì)算機(jī)語(yǔ)言的版本更新都是向前兼容的，新的版本主要是相較之前的版本增加一些內(nèi)容，支持更多的功能和特性，而不會(huì)影響對(duì)之前版本語(yǔ)言的支持。如果你看到有什么教程里說(shuō)某個(gè)知識(shí)點(diǎn)是 html5 、css3 知識(shí)，其實(shí)就是說(shuō)這個(gè)東西是 html5 或者 css3 的版本新加入的，所以，瀏覽器如果能支持解讀 html5 版本的 html 文件，那么也就能支持 html4 版本寫(xiě)法的文件了。所以說(shuō) html4、html5 這些其實(shí)都是 html 語(yǔ)言標(biāo)準(zhǔn)的一個(gè)版本的名稱(chēng)，就像 css2、css3 一樣，是 css 語(yǔ)言標(biāo)準(zhǔn)版本的一種稱(chēng)呼，從這個(gè)版本號(hào)也能猜到，css3 比 css2 能實(shí)現(xiàn)的效果更多了。

但是 JavaScript 的語(yǔ)言標(biāo)準(zhǔn)的版本的名稱(chēng)相對(duì)復(fù)雜一些，你可能會(huì)聽(tīng)到的 ECMAscript 6 簡(jiǎn)稱(chēng) ES6，其實(shí)就是 js 語(yǔ)言標(biāo)準(zhǔn)的一個(gè)版本。有些文章里說(shuō)的要學(xué)習(xí) es6， 其實(shí)就是讓你學(xué)習(xí) ES6 版本里面新加入的一些 js 語(yǔ)言的特性和寫(xiě)法，而這些標(biāo)準(zhǔn)，都是有專(zhuān)門(mén)的組織去制定和發(fā)布的?，F(xiàn)在每年都會(huì)發(fā)布一版，比如現(xiàn)在 JS 語(yǔ)言標(biāo)準(zhǔn)的版本的命名方式更清晰一些了，直接叫 ECMASCRIPT2018 這樣的方式，簡(jiǎn)稱(chēng) ES2018。

那關(guān)于這一塊的知識(shí)，先簡(jiǎn)單了解下就好。

探索階段的三個(gè)方向和一個(gè)基本

說(shuō)完這兩個(gè)概念，我們就來(lái)說(shuō)說(shuō)一說(shuō)探索階段的三個(gè)方向和一個(gè)基本。

一個(gè)基本

在一開(kāi)始的入門(mén)階段，其實(shí)我們學(xué)到的都只是前端知識(shí)的皮毛而已，更多的是對(duì)前端幾個(gè)語(yǔ)言的基本的了解和使用，如果你想要更加深入地去學(xué)習(xí)和掌握更多前端的知識(shí)，就必須把基礎(chǔ)打得更扎實(shí)，尤其是 css 和 JS 需要更加全面系統(tǒng)地學(xué)習(xí)。在不斷打好基礎(chǔ)的同時(shí)，可以開(kāi)始學(xué)習(xí)一些框架的使用，了解框架的原理，讓自己有能力去使用這些框架提高自己的代碼能力，比如說(shuō) js、Query、boostrap、vue react，在學(xué)習(xí)框架的同時(shí)也能讓你更深入了解 js，把 js 學(xué)得更透徹，對(duì)于提高自己的代碼能力有很大的幫助。

當(dāng)然，并不是所有框架都需要學(xué)習(xí)，各種各樣的框架實(shí)在是太多了，甚至你自己有能力也可以開(kāi)發(fā)一個(gè)框架。不過(guò) react 這個(gè)框架我建議是必學(xué)的，因?yàn)樗F(xiàn)在非常流行，普及率也很高，很多公司都在用這項(xiàng)技術(shù)，而且像 FramerX 這些和代碼相結(jié)合的設(shè)計(jì)工具也是深度集合了 react。如果你能掌握 react，那么會(huì)對(duì)你的設(shè)計(jì)工作有很大幫助。所以這個(gè)基本，就是需要你繼續(xù)打好基礎(chǔ)，不放松對(duì)看似已經(jīng)了解的 CSS、JS 內(nèi)容的學(xué)習(xí)，這部分的知識(shí)其實(shí)是非常多，尤其是 JS，它是需要花很多時(shí)間精力才能慢慢學(xué)通學(xué)透的。

而那三個(gè)方向，很多知識(shí)都是建立在你扎實(shí)的 CSS 和 JS 基礎(chǔ)上的，你的基礎(chǔ)越好，后面學(xué)習(xí)就會(huì)越輕松，越高效。那我們就來(lái)看看三個(gè)方向到底是哪三個(gè)。

第一個(gè)方向：創(chuàng)意產(chǎn)品方向

這方向就是讓自己學(xué)會(huì)開(kāi)發(fā)并上線一些完整的產(chǎn)品項(xiàng)目的方向。

很多設(shè)計(jì)師小伙伴其實(shí)對(duì)于互聯(lián)網(wǎng)產(chǎn)品是有自己的想法和思考的，也渴望去把一些想法落地實(shí)現(xiàn)出來(lái)，并不僅僅是畫(huà)圖標(biāo)畫(huà)界面做高保真，如果你是這樣的設(shè)計(jì)師，那么就可以往產(chǎn)品開(kāi)發(fā)這一塊領(lǐng)域深入學(xué)習(xí)，就很有可能成為一個(gè)獨(dú)立的產(chǎn)品設(shè)計(jì)師，自己設(shè)計(jì)，自己開(kāi)發(fā)。如果要學(xué)習(xí)這一塊，那內(nèi)容就非常多了。

首先可以深入鉆研下 react 的知識(shí)，因?yàn)?react 能使用的場(chǎng)景非常多，能幫我們做很多事情，不僅能開(kāi)發(fā)網(wǎng)站、webapp，也能幫我們?cè)谝苿?dòng)端實(shí)現(xiàn) app 的開(kāi)發(fā)──react-native，而且有不少好用的開(kāi)發(fā)框架就是基于 react，比如 GATSBY next.js。

還可以學(xué)習(xí)一下小程序的開(kāi)發(fā)，小程序的開(kāi)發(fā)語(yǔ)言其實(shí)就是以前端技術(shù)的這幾門(mén)語(yǔ)言為基礎(chǔ)的，如果你前端的基礎(chǔ)不錯(cuò)，那么上手小程序的開(kāi)發(fā)就非?？炝恕Ｍㄟ^(guò)開(kāi)發(fā)小程序 其實(shí)你就能做很多應(yīng)用級(jí)的產(chǎn)品了，絕大部分的時(shí)候已經(jīng)能夠取代 app 的開(kāi)發(fā)需求了。

另外，你還可以學(xué)習(xí)下 node 或者叫 nodejs。node 就是可以讓我們?cè)诜?wù)器上使用 js 的一個(gè)程序，因?yàn)閭鹘y(tǒng)來(lái)說(shuō)以前的 js 都是只能跑在瀏覽器端，因?yàn)闉g覽器里面有一個(gè) js 引擎，能解析這個(gè) js 文件，但是自從有了 node 之后，就能在服務(wù)器上使用 js 語(yǔ)言來(lái)實(shí)現(xiàn)很多功能了。

如果你還不滿足，還可以學(xué)習(xí)一些數(shù)據(jù)庫(kù)和服務(wù)器的知識(shí)，了解下 mongdb（一種數(shù)據(jù)庫(kù)），它和 node 結(jié)合起來(lái)實(shí)現(xiàn)一些用戶(hù)信息的存取讀寫(xiě)，這樣你就可以做更多的事情，做一些更復(fù)雜的產(chǎn)品。如果你想開(kāi)發(fā)電腦端的 app，那么可以學(xué)習(xí)下 electron 這個(gè)框架，它能幫我們用 htm、css、js來(lái)實(shí)現(xiàn)跨平臺(tái)的桌面端軟件的開(kāi)發(fā)，vscode 這款代碼編輯器就是通過(guò) electron 來(lái)開(kāi)發(fā)的。

如果你能把我說(shuō)的這些都學(xué)會(huì)，那你已經(jīng)是一個(gè)非常厲害的全棧獨(dú)立產(chǎn)品設(shè)計(jì)師了，開(kāi)發(fā)一些小而美的互聯(lián)網(wǎng)產(chǎn)品對(duì)你來(lái)說(shuō)已經(jīng)不是什么難事了。

第二個(gè)方向：交互體驗(yàn)與動(dòng)畫(huà)動(dòng)效

這個(gè)方向其實(shí)是很多設(shè)計(jì)師比較擅長(zhǎng)也是可能和工作最息息相關(guān)的。

這個(gè)方向你首先要去更加深入的學(xué)習(xí) CSS，熟練掌握 CSS 中實(shí)現(xiàn)動(dòng)畫(huà)的方法和技巧，還有就是 html 中的 svg 的圖形繪制和動(dòng)畫(huà)的知識(shí)。關(guān)于 JS，你就需要更加深入地去學(xué)習(xí)如何通過(guò) js 來(lái)實(shí)現(xiàn)頁(yè)面的交互，不僅可以控制和改變頁(yè)面的內(nèi)容，也可以控制瀏覽器的一些行為，讓交互體驗(yàn)或者是動(dòng)畫(huà)動(dòng)效更貼近我們?cè)O(shè)計(jì)方案。

接著還要學(xué)習(xí)一些專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的庫(kù)和框架，比較有名的比如說(shuō) gsap，可以幫你更輕松地對(duì)動(dòng)畫(huà)進(jìn)行控制，在網(wǎng)頁(yè)中實(shí)現(xiàn)一些用一般的寫(xiě)法很難實(shí)現(xiàn)的復(fù)雜的動(dòng)畫(huà)效果。

除此之外，你還可以去學(xué)習(xí)一下 FramerX 這款用代碼和設(shè)計(jì)相結(jié)合的高保真原型的制作工具，它的代碼部分是基于 react，它還有一個(gè)專(zhuān)門(mén)的庫(kù)叫 framer-motion，是可以在開(kāi)發(fā)真實(shí)產(chǎn)品中使用的，它提供很多便捷的功能，很輕松地就能幫我們實(shí)現(xiàn)很多交互的行為和動(dòng)畫(huà)細(xì)節(jié)。

第三個(gè)方向：數(shù)據(jù)可視化與前端視覺(jué)化

這一個(gè)方向，是一個(gè)非常有前景的方向。這個(gè)方向，我覺(jué)得主要是聚焦于兩個(gè)方面。

首先是數(shù)據(jù)可視化。我想大數(shù)據(jù)這個(gè)詞大家可能都聽(tīng)爛了，那么數(shù)據(jù)可視化其實(shí)就是大數(shù)據(jù)帶來(lái)的一個(gè)重要使用場(chǎng)景。

大量的數(shù)據(jù)如何展示，如何提高數(shù)據(jù)信息的傳達(dá)能力，就是數(shù)據(jù)可視化要解決的問(wèn)題，而這個(gè)方面的需求會(huì)隨著數(shù)字經(jīng)濟(jì)的不斷發(fā)展，會(huì)越來(lái)越大。

而前端，在實(shí)現(xiàn)數(shù)據(jù)可視化方向其實(shí)已經(jīng)有一些比較成熟的庫(kù)了，可能最有名的是 D3，也有不少其他新的庫(kù)，大家都可以去搜索了解一下。如果你對(duì)數(shù)據(jù)可視化感興趣，那么這一些庫(kù)可能都是你需要去學(xué)習(xí)的目標(biāo)。

另一個(gè)方面是前端視覺(jué)化。

隨著移動(dòng)設(shè)備和電腦設(shè)備的不斷更新?lián)Q代，瀏覽器能做到的事情已經(jīng)越來(lái)越多，在網(wǎng)頁(yè)中實(shí)現(xiàn)一些三維的、動(dòng)態(tài)的、可交互的圖形化的效果，也已經(jīng)是非常輕松了。

這一塊涉及的知識(shí)非常多，也非常的有趣，如果你有興趣，這是一個(gè)可以學(xué)習(xí)得非常深入的領(lǐng)域，這不僅僅需要扎實(shí)的 js 基礎(chǔ)，甚至某些深入的部分可能還要學(xué)習(xí)一些圖形學(xué)的知識(shí)，以及稍微多一點(diǎn)的數(shù)學(xué)知識(shí)。不過(guò)，關(guān)于這一塊，我也只是簡(jiǎn)單地了解一些，所以我這里就簡(jiǎn)單說(shuō)說(shuō)我了解到的東西。

主要涉及到的知識(shí)是 canvas 和 webgl，canvas 是 hmtl 里面的一個(gè)標(biāo)簽，如果你不知道什么是標(biāo)簽，你可以把它理解為是 html 語(yǔ)言里面的一個(gè)功能，而 webgl 就是能通過(guò) JavaScript 在這個(gè) canvas（畫(huà)布）上進(jìn)行繪制各種各樣二維三維的圖形。

而關(guān)于三維的庫(kù)最有名的是 three.js，當(dāng)然，也有不少其他的庫(kù)，你可以自己去找找相關(guān)的資料。

還有一個(gè)就是我上期說(shuō)過(guò)的 p5 這個(gè)庫(kù)，用來(lái)實(shí)現(xiàn) processing 藝術(shù)編程的效果的，如果你對(duì)藝術(shù)編程感興趣，可以在適當(dāng)?shù)臅r(shí)候進(jìn)行學(xué)習(xí)。其實(shí)這個(gè)方向的知識(shí)，不管是數(shù)據(jù)可視化還是前端視覺(jué)化，主要都是要建立在扎實(shí)的 js 基礎(chǔ)之上的，因?yàn)樗械倪@些庫(kù)都是在利用 js 對(duì)頁(yè)面元素進(jìn)行操作，從而實(shí)現(xiàn)各種效果，所以在你學(xué)習(xí)這些內(nèi)容之前，一定要打好 js 的基礎(chǔ)。

以上，就是我總結(jié)的三個(gè)方向，其實(shí)這幾個(gè)方向并不是互斥的，甚至是可以交替進(jìn)行的，可以多去嘗試多去學(xué)習(xí)，這也就是我稱(chēng)這個(gè)階段為探索的原因了，而這個(gè)不斷嘗試的過(guò)程也是一個(gè)不斷學(xué)習(xí)和復(fù)習(xí)的過(guò)程，能讓你對(duì)前端的知識(shí)有更深入的體驗(yàn)，也能掌握得更好，尤其是能把 JavaScript 的知識(shí)掌握得更加扎實(shí)。

記住，JavaScript 的能力是你不斷深入學(xué)習(xí)前端技能的核心基礎(chǔ)。

好，第二個(gè)探索的階段總算是說(shuō)完了。

創(chuàng)造

在第二階段，你已經(jīng)又學(xué)會(huì)了不少前端相關(guān)的技能了，有些可能深入一些，有些可能只是了解一些，而且大部分的時(shí)候就是跟著教程做案例，做練習(xí)，而這個(gè)第三個(gè)階段，就是需要你抽出一定的時(shí)間來(lái)做自主性的、系統(tǒng)性、項(xiàng)目性質(zhì)的輸出了。

學(xué)以致用是掌握一項(xiàng)技能最好的方式，那這個(gè)階段就是需要你把所學(xué)的東西用起來(lái)，創(chuàng)造一些產(chǎn)品，這個(gè)階段就是項(xiàng)目實(shí)戰(zhàn)，通過(guò)創(chuàng)造來(lái)鞏固所學(xué)，發(fā)現(xiàn)問(wèn)題，持續(xù)學(xué)習(xí)、深入學(xué)習(xí)。學(xué)習(xí)是需要實(shí)踐的，就像做產(chǎn)品一樣，我們要深入用戶(hù)真實(shí)的使用場(chǎng)景，才能真正發(fā)現(xiàn)產(chǎn)品的問(wèn)題、用戶(hù)的痛點(diǎn)，學(xué)習(xí)也是一樣的，你只有真正地做項(xiàng)目，你才會(huì)發(fā)現(xiàn)自己哪里不會(huì)哪里不懂，如果只是照著教程做，會(huì)有很多知識(shí)的盲點(diǎn)，技能的盲區(qū)。

很多同學(xué)會(huì)覺(jué)得自己哪來(lái)什么項(xiàng)目可以做，其實(shí)不然，比如自己個(gè)人網(wǎng)站開(kāi)發(fā)，自己的博客網(wǎng)站開(kāi)發(fā)，既可以做一般的網(wǎng)站網(wǎng)頁(yè)也可以做小程序。比如你在工作中有一些 app 產(chǎn)品的設(shè)計(jì)稿，你就把它做成 web 版的產(chǎn)品，自己用代碼實(shí)現(xiàn)出來(lái)。再比如，工作中你是負(fù)責(zé)動(dòng)效的，你可以給自己定一個(gè) 100 個(gè)動(dòng)效代碼的實(shí)現(xiàn)項(xiàng)目，把自己工作中的動(dòng)效和交互自己用代碼實(shí)現(xiàn)出來(lái)。所以說(shuō)，你可以做的項(xiàng)目其實(shí)是非常多的，你還可以把自己平時(shí)遇到的一些需求或者難題記錄下來(lái)，如果可以用一些前端的技術(shù)解決，那這就可以變成一個(gè)新的項(xiàng)目。

當(dāng)你通過(guò)這一個(gè)個(gè)的項(xiàng)目積累越來(lái)越多的實(shí)際項(xiàng)目經(jīng)驗(yàn)后，你的代碼能力會(huì)在不知不覺(jué)中快速提高，與此同時(shí)，你能拿得出手的個(gè)人項(xiàng)目也會(huì)越來(lái)越多，對(duì)于你來(lái)說(shuō)，也是非常寶貴的資本。

鉆研

如果你能到第四個(gè)階段，說(shuō)明你的前端能力已經(jīng)到了一定水平了，寫(xiě)網(wǎng)站、寫(xiě)動(dòng)效或者做一些視覺(jué)效果都已經(jīng)難不倒你了。

同時(shí)，你也應(yīng)該能大致知道自己更傾向于深入往哪個(gè)方向發(fā)展。當(dāng)然，作為設(shè)計(jì)師，可能不少小伙伴都會(huì)想往動(dòng)畫(huà)動(dòng)效或者是前端視覺(jué)化的方向發(fā)展，也不排除有的小伙伴對(duì)于開(kāi)發(fā)產(chǎn)品很感興趣，主要想做獨(dú)立的產(chǎn)品設(shè)計(jì)師，自己設(shè)計(jì)自己開(kāi)發(fā)產(chǎn)品。

那不管怎樣，這個(gè)階段就是在明確自己的方向后，集中一段時(shí)間把主要的精力投入到這一塊領(lǐng)域里面持續(xù)學(xué)習(xí)，不斷地做項(xiàng)目，鍛煉自己，不斷學(xué)習(xí)和總結(jié)，在這個(gè)領(lǐng)域不斷深入。因?yàn)槿说木κ怯邢薜模瑥奈仪皫讉€(gè)階段的描述，你大概也能了解到不管哪一個(gè)方向其實(shí)都需要花非常多的精力去學(xué)習(xí)和實(shí)踐。這第四個(gè)階段是沒(méi)有終點(diǎn)，你也可以在某個(gè)方向?qū)W習(xí)到一定深度之后，再切換別的方向再進(jìn)行學(xué)習(xí)，這都要看你自己的需要和興趣。

學(xué)習(xí)本就是永無(wú)止盡的，尤其是互聯(lián)網(wǎng)這一行，發(fā)展變化特別快，技術(shù)進(jìn)步和迭代也快，也只有不停地學(xué)習(xí)，你才有可能不被這個(gè)行業(yè)淘汰。希望在這個(gè)過(guò)程中，你能享受學(xué)習(xí)，同時(shí)收獲自己的成長(zhǎng)。

以上內(nèi)容中提到的知識(shí)點(diǎn)，都是根據(jù)我自己的真實(shí)學(xué)習(xí)經(jīng)驗(yàn)和體會(huì)總結(jié)出來(lái)比較核心和重要的，我說(shuō)的這些并不是你在學(xué)習(xí)過(guò)程中可能會(huì)碰到的全部的內(nèi)容和知識(shí)，還有很多我沒(méi)有辦法，也沒(méi)有必要一一列舉，如果萬(wàn)一你碰到什么不了解的，歡迎與我交流。希望本期內(nèi)容能幫助你解決一些關(guān)于學(xué)習(xí)前端學(xué)習(xí)的疑問(wèn)。

那下一期，我會(huì)和大家聊聊前端的學(xué)習(xí)方法，再給大家分享一些我知道的前端的學(xué)習(xí)資源。

歡迎關(guān)注作者的公眾號(hào)：「三木自習(xí)室」