這是《設計師想知道的100個前端問題》系列內容的第二期，這一期的內容我們來聊一聊設計師的前端學習路徑。

往期回顧：

閱讀文章 >>

這期內容開始之前，我想先回答幾個小夥伴在看完我上一期內容之後提的幾個問題。

第一個問題

我想學習手機 app 的開發，是不是也要學習前端？

手機 app 開發，主要是看你要學習的是蘋果手機的 app 開發還是安卓手機的 app 開發，因為兩者的系統是不一樣的，而他們 app 的開發語言也是不一樣的，蘋果手機開發的話可以學習 swift 語言，而安卓手機開發，可以學習 Java 或者 Kotlin。

我在上一期內容中也提到過可以開發手機端的 app，而且是跨平台的，蘋果和安卓都可以開發，只不過，這個是需要你的前端基礎比較好，已經深入地學習到一定程度才能掌握的一項技能，基礎的前端是無法幫你做到這件事的。

我的建議是如果你只是想學習 app 開發，可以學習蘋果的 swift 語言，因為蘋果的生態更好，產品的體驗更棒，網上關於這個語言優質的學習資源也非常多，只不過因為這個語言只能開發運行在蘋果系統上的軟件產品，例如蘋果手機、蘋果電腦等，還是有挺大的局限性，而且目前來說只能用來開發 app，也不能寫網站網頁，使用場景也比較單一，就目前的趨勢來看，很多小程序其實已經能夠代替很多 app 的使用場景了，而小程序的開發技術，是基於前端的，這一點你可以綜合考慮一下。

不過，哪怕就算你只想學習 app 開發，那麼在你熟練掌握某個平台的 app 開發語言后，有機會也最好再學習一些前端知識，這樣不僅能擴寬你的能力邊界，也可以幫你打破平台的局限，同時前端的技術也可以和 swift 等語言結合一起進行混合開發，提高你的 app 開發效率。

第二個問題

python 好像能用在 C4D 裏面實現非常多高級的效果和功能，這是不是說明 python 也挺適合設計師學習的？

這兩年因為三維風格設計非常的流行，很多設計師都開始學習 C4d 了。確實，python 在 C4D 裏面，可以用代碼實現很多高級的功能和效果，但你也說了這個是高級的功能，而且據我所知是非常高級的部分了。既然這麼高級的功能肯定是非常專精於 C4D 相關的崗位和人員才有可能需要去學習的內容，對於絕大部分設計師來說這種造原子彈級別的功能大概率一輩子都用不到。

不過，python 這門語言其實應用領域還挺多的，尤其是數據處理與分析、人工智能深度學習、網絡爬蟲等等領域（如果你知道的話，其實我想說 JS 也能寫爬蟲）。只不過所謂術業有專攻，它更擅長的是數據處理和分析的領域，和設計師的需求真的不太貼合，這門語言確實很好，如果你真的有需要也可以學習，我也非常鼓勵你去學習，但絕不要被那些無良的營銷號蒙蔽了雙眼，學了用不上，就真的是浪費時間了。

第三個問題

AE 表達式算編程么？想學好 ae 表達式要學哪些內容？用過 After Effect 這個後期軟件的小夥伴肯定都聽過或者多多少少都用過 ae 表達式。ae 表達式能幫我們快速實現很多複雜高級的動畫效果，如果用得好能幫我們減少很多重複的工作，提高做後期做動畫的效率。其實 ae 表達式的寫法就是JavaScript 的寫法，只要你學會了 JavaScript，那麼再了解一下 ae 表達式它內部特殊的一些知識點，那就非常容易上手了。

所以，如果你有前端的能力，尤其是掌握了 JavaScript 語言之後，ae 表達式就非常容易學習了。而且不光是 ae 表達式，其實很多設計軟件的插件或者腳本都可以使用 js 語言進行開發，像 AE 的一些腳本，sketch、figma 的一些插件都是可以用 JS 來開發的。所以如果你懂 JavaScript，就能自己開發一些插件或者腳本，幫助自己或者其他設計師提高設計工作的效率。

接下來，我們就要開始本期的話題，設計師的前端學習路徑。

所謂學習路徑也就是讓大家了解下設計師學習前端該學習哪些知識，學習的順序是怎樣的。

在這裏呢，我要先給大家推薦一個網站→https://www.cssdesignawards.com/

這個網站是一個創意網站的評選平台，裏面有很多來自全球的設計師設計並開發的非常有創意和設計感的網站，注意，很多都是設計師自己開發的哦，這些網站中很多的交互和設計都非常有趣有想法。這些網站都是真實上線的項目，不是設計稿，你可以瀏覽它們網站的真實效果。

給大家推薦這個網站的目的呢，其實是想告訴大家，你學習了前端之後，你也能開發出這些非常酷的網站，大家都是設計師，別人可以做到的，我們也一樣能做到。

不過，萬事開頭難，學習前端不是一件可以速成的事情，如果有一個比較清晰的學習路徑，那麼對於我們設計師循序漸進地學習前端會很有幫助。

很多小夥伴在一開始有想學習前端這個念頭的時候，肯定會上網找各種前端的資料，想知道前端是什麼，該學什麼，先學什麼後學什麼，然後肯定會看到各種讓人懵圈的前端術語，我自己一開始也是這樣，看得我頭都要炸了，一堆專業術語，心裏想這都是什麼跟什麼啊。

那今天關於前端的學習路徑，我想換一種方式和大家說，按照我自己的學習經驗和體會，然後把設計師學習前端的路徑分為四個階段。

在介紹這四個階段的過程中，我可能會講到一些專業術語，盡量都會做些直白的解釋，如果你依然聽不懂，沒有關係，我會把提到的專業名詞都提示出來，你可以自行查找資料進行了解，而對於有些非常重要的概念我會在以後另外製作相關的內容來介紹。

入門

這個階段也是最茫然的階段，像我自己在這個階段的時候，對前端一無所知，到處找資料想去了解前端方方面面的問題，恨不得把前端這兩個字都拆開揉碎了看。

那關於這個階段，我先告訴你的是，不管你查到什麼資料，被多少前端專業名詞整得頭疼，那些都不重要，要記住，所有的前端知識和技能都是建立在 html、css、JavaScript 這三門語言基礎之上的。最重要的就是先學習 html 和 css，然後再開始學習 JavaScript 的基礎，這三者是前端永遠都繞不開的基礎，而且順序一定是先 html、css 再 JavaScript，而最近新加入的 webassembly，這個語言是一些大型網頁應用才用得到的語言，大部分人用不到它的。

在找資料的過程中，你可能會看到 jquery，react，vue，ts，node 等等你第一次聽說的概念，不用頭疼，所有這些東西都是要在你學習完基礎的 html，css，JavaScript 之後才可以去學習，也才能去學習的內容。

html，css，JavaScript 這三門語言，是相輔相成的。

• html 是負責組織頁面的原材料，也就是能決定這個頁面裏面放哪些基本的內容，比如放什麼文字，放什麼圖片。
• css 負責是裝修這個頁面，它能輔助 html，讓頁面變得好看，順便還能加上一些動畫效果。
• js，則是能給網頁網站加上很多功能和交互，可以讓你的網站從一個只能看的花瓶，變成一個又能看又好用的 72 變的全能选手。

在這一階段，先要熟悉 html 和 css 的語法，熟悉他們的寫法，能熟練地寫幾個完整的頁面出來。

在熟悉了 html 和 css 之後，然後開始學習 JavaScript 的基礎部分，了解 js 的基本寫法和語法，能看得懂基本的 js 代碼，了解 js 當中的一些基礎概念，比如變量、函數、數組、對象、表達式等等，然後通過 js 能實現頁面中的一些小功能、小的交互效果。

除了基本的這三種語言的知識之外，還要學習一些基礎的網絡知識，了解服務器和瀏覽器的基本原理，畢竟前端中所有的內容都是瀏覽器通過網絡從服務器來獲取的。

當你掌握這些之後，那麼從一般意義上來講你就已經正式入門前端了，當然如果你的要求低一些，只想學習 html 和 css，畢竟只用它們已經能寫出完整的頁面了，那麼你也可以稱得上入門了。

但是如果你想繼續深入學習前端，那麼要達到在我認為的入門標準，你還需要再學習一些知識。

一個是 git 和 github，這兩個名字我相信很多在互聯網工作過一段時間的小夥伴肯定不會感到陌生，但是具體這兩個是什麼呢，我以後會單獨細說。

那簡單地說，git 是一個程序，開源的（也就是免費的）程序，是可以在電腦本地幫助實現代碼的版本管理的這麼一個程序，而 github 就是以這個 git 程序為基礎，把本地的代碼版本和遠程服務器上代碼庫連接起來進行管理的一個網站平台。

還有就是要學習一下基本的命令行，命令行就是用一行一行的代碼來操控電腦實現一些功能和操作，就是我們會在一些電影電視劇中看到的那種很酷的黑客都會用的一種操作電腦的方式。

mac 電腦有自帶的命令行工具，叫 terminal。windows 電腦上也有自己的命令行工具，你也可以安裝一些第三方的命令行工具，具體的我會在以後命令行的教程裏面細說。我們之所以要學習命令行，一方面是因為 git 是用命令行進行操作的，而且早點開始熟悉使用命令行會有助於後期深入學習前端，以後有一些高級的知識會經常用到命令行的方式。

如果你把我以上說的這些都學完了，在我看來，就已經正式入門前端了，而且你已經有能力進入第二個階段的學習了。

探索

有小夥伴可能會覺得奇怪，為什麼第二個階段叫探索，探索不應該是第一個階段么。因為在我看來，只有當你掌握了基本的前端知識之後，你才有了學習各種深入的前端知識的能力，而進一步的深入學習的過程中，其實可以細分為好幾個方向，而這些方向都需要你自己去嘗試，去探索，看看自己到底興趣在哪，適合哪個方向。

因此我也總結了幾個適合設計師的學習方向，同時我會把每個方向中主要的核心知識做一個簡單的介紹。這裏，我要先說兩個概念首先是框架和庫，你在自己學習或者找資料的時候也總會看到這兩個概念，比如 react，vue ，bootstrap 等等都是框架和庫。那具體什麼是框架（Framework）和庫（Library）？現在，你可以暫時把它們當作同一個東西來理解。

我打個比方，就像我們平時用的設計軟件或其他一些工具，那假設基礎的 js 能提供的就是軟件中一些很基本的功能，可以幫我建畫板，給畫板調顏色，可以給畫板挪位置，在畫板上畫一筆畫兩筆等等。那所有這些操作，都需要我們一步一步去操作，也是單一的一個一個的功能。那所謂庫和框架，就是有人幫我們把這些基礎的獨立的功能用各種奇思妙想結合起來，我們用軟件的時候不需要用某個基礎的功能了，因為這個庫和框架給我們做好了各種各樣的更快捷的整合型的功能。比如使用這個庫提供的某個功能，就能創建畫板並上色和導出，一步到位，就不要我們那麼麻煩地一步步去操作了。

所以，可以簡單地把庫和框架理解為以某種語言為基礎的一系列高效的快捷命令或者工具組成的一個集合。

第二個概念，是關於計算機語言的版本問題。

大家找資料的過程中會遇到一些關於語言版本的問題，比如說 htm4、html5、css2、css3、ES6、ES7 等等這些概念。

為什麼 html、css、JavaScript 語言還會有那麼多版本？JavaScript 和 ecmascript 是什麼關係？大家可能都會覺得很懵。

其實，這就有點像產品一樣，計算機語言畢竟都是人設計的，是要不停地更新換代，不停地改進的。

那計算機語言這個版本，其實也是一樣的道理。就拿 html 這個語言來說吧，有一個專門的組織負責制定和更新 Html 語言的標準，叫 W3C。W3C 每隔一段時間整理、討論、更新 Html 的語言標準，而那些瀏覽器的開發公司，一般情況下都會按照語言標準來不停地更新瀏覽器，讓這些瀏覽器可以對採用了新標準寫法的 html文件進行正確的解碼，但是這些標準都不是強制性的。

所以有時候你也要明白，不是標準出來了，瀏覽器就一定會支持，也有可能它標準還沒正式發布，瀏覽器也有可能已經支持的情況，關鍵就在於瀏覽器廠家對這些新功能特性的积極程度了。

一般來說，除非是整個語言重新設計，不然計算機語言的版本更新都是向前兼容的，新的版本主要是相較之前的版本增加一些內容，支持更多的功能和特性，而不會影響對之前版本語言的支持。如果你看到有什麼教程里說某個知識點是 html5 、css3 知識，其實就是說這個東西是 html5 或者 css3 的版本新加入的，所以，瀏覽器如果能支持解讀 html5 版本的 html 文件，那麼也就能支持 html4 版本寫法的文件了。所以說 html4、html5 這些其實都是 html 語言標準的一個版本的名稱，就像 css2、css3 一樣，是 css 語言標準版本的一種稱呼，從這個版本號也能猜到，css3 比 css2 能實現的效果更多了。

但是 JavaScript 的語言標準的版本的名稱相對複雜一些，你可能會聽到的 ECMAscript 6 簡稱 ES6，其實就是 js 語言標準的一個版本。有些文章里說的要學習 es6， 其實就是讓你學習 ES6 版本裏面新加入的一些 js 語言的特性和寫法，而這些標準，都是有專門的組織去制定和發布的。現在每年都會發布一版，比如現在 JS 語言標準的版本的命名方式更清晰一些了，直接叫 ECMASCRIPT2018 這樣的方式，簡稱 ES2018。

那關於這一塊的知識，先簡單了解下就好。

探索階段的三個方向和一個基本

說完這兩個概念，我們就來說說一說探索階段的三個方向和一個基本。

一個基本

在一開始的入門階段，其實我們學到的都只是前端知識的皮毛而已，更多的是對前端幾個語言的基本的了解和使用，如果你想要更加深入地去學習和掌握更多前端的知識，就必須把基礎打得更紮實，尤其是 css 和 JS 需要更加全面系統地學習。在不斷打好基礎的同時，可以開始學習一些框架的使用，了解框架的原理，讓自己有能力去使用這些框架提高自己的代碼能力，比如說 js、Query、boostrap、vue react，在學習框架的同時也能讓你更深入了解 js，把 js 學得更透徹，對於提高自己的代碼能力有很大的幫助。

當然，並不是所有框架都需要學習，各種各樣的框架實在是太多了，甚至你自己有能力也可以開發一個框架。不過 react 這個框架我建議是必學的，因為它現在非常流行，普及率也很高，很多公司都在用這項技術，而且像 FramerX 這些和代碼相結合的設計工具也是深度集合了 react。如果你能掌握 react，那麼會對你的設計工作有很大幫助。所以這個基本，就是需要你繼續打好基礎，不放鬆對看似已經了解的 CSS、JS 內容的學習，這部分的知識其實是非常多，尤其是 JS，它是需要花很多時間精力才能慢慢學通學透的。

而那三個方向，很多知識都是建立在你紮實的 CSS 和 JS 基礎上的，你的基礎越好，後面學習就會越輕鬆，越高效。那我們就來看看三個方向到底是哪三個。

第一個方向：創意產品方向

這方向就是讓自己學會開發並上線一些完整的產品項目的方向。

很多設計師小夥伴其實對於互聯網產品是有自己的想法和思考的，也渴望去把一些想法落地實現出來，並不僅僅是畫圖標畫界面做高保真，如果你是這樣的設計師，那麼就可以往產品開發這一塊領域深入學習，就很有可能成為一個獨立的產品設計師，自己設計，自己開發。如果要學習這一塊，那內容就非常多了。

首先可以深入鑽研下 react 的知識，因為 react 能使用的場景非常多，能幫我們做很多事情，不僅能開發網站、webapp，也能幫我們在移動端實現 app 的開發──react-native，而且有不少好用的開發框架就是基於 react，比如 GATSBY next.js。

還可以學習一下小程序的開發，小程序的開發語言其實就是以前端技術的這幾門語言為基礎的，如果你前端的基礎不錯，那麼上手小程序的開發就非常快了。通過開發小程序 其實你就能做很多應用級的產品了，絕大部分的時候已經能夠取代 app 的開發需求了。

另外，你還可以學習下 node 或者叫 nodejs。node 就是可以讓我們在服務器上使用 js 的一個程序，因為傳統來說以前的 js 都是只能跑在瀏覽器端，因為瀏覽器裏面有一個 js 引擎，能解析這個 js 文件，但是自從有了 node 之後，就能在服務器上使用 js 語言來實現很多功能了。

如果你還不滿足，還可以學習一些數據庫和服務器的知識，了解下 mongdb（一種數據庫），它和 node 結合起來實現一些用戶信息的存取讀寫，這樣你就可以做更多的事情，做一些更複雜的產品。如果你想開發電腦端的 app，那麼可以學習下 electron 這個框架，它能幫我們用 htm、css、js來實現跨平台的桌面端軟件的開發，vscode 這款代碼編輯器就是通過 electron 來開發的。

如果你能把我說的這些都學會，那你已經是一個非常厲害的全棧獨立產品設計師了，開發一些小而美的互聯網產品對你來說已經不是什麼難事了。

第二個方向：交互體驗與動畫動效

這個方向其實是很多設計師比較擅長也是可能和工作最息息相關的。

這個方向你首先要去更加深入的學習 CSS，熟練掌握 CSS 中實現動畫的方法和技巧，還有就是 html 中的 svg 的圖形繪製和動畫的知識。關於 JS，你就需要更加深入地去學習如何通過 js 來實現頁面的交互，不僅可以控制和改變頁面的內容，也可以控制瀏覽器的一些行為，讓交互體驗或者是動畫動效更貼近我們設計方案。

接着還要學習一些專門用來實現動畫的庫和框架，比較有名的比如說 gsap，可以幫你更輕鬆地對動畫進行控制，在網頁中實現一些用一般的寫法很難實現的複雜的動畫效果。

除此之外，你還可以去學習一下 FramerX 這款用代碼和設計相結合的高保真原型的製作工具，它的代碼部分是基於 react，它還有一個專門的庫叫 framer-motion，是可以在開發真實產品中使用的，它提供很多便捷的功能，很輕鬆地就能幫我們實現很多交互的行為和動畫細節。

第三個方向：數據可視化與前端視覺化

這一個方向，是一個非常有前景的方向。這個方向，我覺得主要是聚焦於兩個方面。

首先是數據可視化。我想大數據這個詞大家可能都聽爛了，那麼數據可視化其實就是大數據帶來的一個重要使用場景。

大量的數據如何展示，如何提高數據信息的傳達能力，就是數據可視化要解決的問題，而這個方面的需求會隨着数字經濟的不斷髮展，會越來越大。

而前端，在實現數據可視化方向其實已經有一些比較成熟的庫了，可能最有名的是 D3，也有不少其他新的庫，大家都可以去搜索了解一下。如果你對數據可視化感興趣，那麼這一些庫可能都是你需要去學習的目標。

另一個方面是前端視覺化。

隨着移動設備和電腦設備的不斷更新換代，瀏覽器能做到的事情已經越來越多，在網頁中實現一些三維的、動態的、可交互的圖形化的效果，也已經是非常輕鬆了。

這一塊涉及的知識非常多，也非常的有趣，如果你有興趣，這是一個可以學習得非常深入的領域，這不僅僅需要紮實的 js 基礎，甚至某些深入的部分可能還要學習一些圖形學的知識，以及稍微多一點的數學知識。不過，關於這一塊，我也只是簡單地了解一些，所以我這裏就簡單說說我了解到的東西。

主要涉及到的知識是 canvas 和 webgl，canvas 是 hmtl 裏面的一個標籤，如果你不知道什麼是標籤，你可以把它理解為是 html 語言裏面的一個功能，而 webgl 就是能通過 JavaScript 在這個 canvas（畫布）上進行繪製各種各樣二維三維的圖形。

而關於三維的庫最有名的是 three.js，當然，也有不少其他的庫，你可以自己去找找相關的資料。

還有一個就是我上期說過的 p5 這個庫，用來實現 processing 藝術編程的效果的，如果你對藝術編程感興趣，可以在適當的時候進行學習。其實這個方向的知識，不管是數據可視化還是前端視覺化，主要都是要建立在紮實的 js 基礎之上的，因為所有的這些庫都是在利用 js 對頁面元素進行操作，從而實現各種效果，所以在你學習這些內容之前，一定要打好 js 的基礎。

以上，就是我總結的三個方向，其實這幾個方向並不是互斥的，甚至是可以交替進行的，可以多去嘗試多去學習，這也就是我稱這個階段為探索的原因了，而這個不斷嘗試的過程也是一個不斷學習和複習的過程，能讓你對前端的知識有更深入的體驗，也能掌握得更好，尤其是能把 JavaScript 的知識掌握得更加紮實。

記住，JavaScript 的能力是你不斷深入學習前端技能的核心基礎。

好，第二個探索的階段總算是說完了。

創造

在第二階段，你已經又學會了不少前端相關的技能了，有些可能深入一些，有些可能只是了解一些，而且大部分的時候就是跟着教程做案例，做練習，而這個第三個階段，就是需要你抽出一定的時間來做自主性的、系統性、項目性質的輸出了。

學以致用是掌握一項技能最好的方式，那這個階段就是需要你把所學的東西用起來，創造一些產品，這個階段就是項目實戰，通過創造來鞏固所學，發現問題，持續學習、深入學習。學習是需要實踐的，就像做產品一樣，我們要深入用戶真實的使用場景，才能真正發現產品的問題、用戶的痛點，學習也是一樣的，你只有真正地做項目，你才會發現自己哪裡不會哪裡不懂，如果只是照着教程做，會有很多知識的盲點，技能的盲區。

很多同學會覺得自己哪來什麼項目可以做，其實不然，比如自己個人網站開發，自己的博客網站開發，既可以做一般的網站網頁也可以做小程序。比如你在工作中有一些 app 產品的設計稿，你就把它做成 web 版的產品，自己用代碼實現出來。再比如，工作中你是負責動效的，你可以給自己定一個 100 個動效代碼的實現項目，把自己工作中的動效和交互自己用代碼實現出來。所以說，你可以做的項目其實是非常多的，你還可以把自己平時遇到的一些需求或者難題記錄下來，如果可以用一些前端的技術解決，那這就可以變成一個新的項目。

當你通過這一個個的項目積累越來越多的實際項目經驗后，你的代碼能力會在不知不覺中快速提高，與此同時，你能拿得出手的個人項目也會越來越多，對於你來說，也是非常寶貴的資本。

鑽研

如果你能到第四個階段，說明你的前端能力已經到了一定水平了，寫網站、寫動效或者做一些視覺效果都已經難不倒你了。

同時，你也應該能大致知道自己更傾向於深入往哪個方向發展。當然，作為設計師，可能不少小夥伴都會想往動畫動效或者是前端視覺化的方向發展，也不排除有的小夥伴對於開發產品很感興趣，主要想做獨立的產品設計師，自己設計自己開發產品。

那不管怎樣，這個階段就是在明確自己的方向後，集中一段時間把主要的精力投入到這一塊領域裏面持續學習，不斷地做項目，鍛煉自己，不斷學習和總結，在這個領域不斷深入。因為人的精力是有限的，從我前幾個階段的描述，你大概也能了解到不管哪一個方向其實都需要花非常多的精力去學習和實踐。這第四個階段是沒有終點，你也可以在某個方向學習到一定深度之後，再切換別的方向再進行學習，這都要看你自己的需要和興趣。

學習本就是永無止盡的，尤其是互聯網這一行，發展變化特別快，技術進步和迭代也快，也只有不停地學習，你才有可能不被這個行業淘汰。希望在這個過程中，你能享受學習，同時收穫自己的成長。

以上內容中提到的知識點，都是根據我自己的真實學習經驗和體會總結出來比較核心和重要的，我說的這些並不是你在學習過程中可能會碰到的全部的內容和知識，還有很多我沒有辦法，也沒有必要一一列舉，如果萬一你碰到什麼不了解的，歡迎與我交流。希望本期內容能幫助你解決一些關於學習前端學習的疑問。

那下一期，我會和大家聊聊前端的學習方法，再給大家分享一些我知道的前端的學習資源。

歡迎關注作者的公眾號：「三木自習室」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊平台_前端自學專題（二）：最適合設計師的前端學習路徑