前端自学专题（二）：最适合设计师的前端学习路径

这是《设计师想知道的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 个动效代码的实现项目，把自己工作中的动效和交互自己用代码实现出来。所以说，你可以做的项目其实是非常多的，你还可以把自己平时遇到的一些需求或者难题记录下来，如果可以用一些前端的技术解决，那这就可以变成一个新的项目。

当你通过这一个个的项目积累越来越多的实际项目经验后，你的代码能力会在不知不觉中快速提高，与此同时，你能拿得出手的个人项目也会越来越多，对于你来说，也是非常宝贵的资本。

钻研

如果你能到第四个阶段，说明你的前端能力已经到了一定水平了，写网站、写动效或者做一些视觉效果都已经难不倒你了。

同时，你也应该能大致知道自己更倾向于深入往哪个方向发展。当然，作为设计师，可能不少小伙伴都会想往动画动效或者是前端视觉化的方向发展，也不排除有的小伙伴对于开发产品很感兴趣，主要想做独立的产品设计师，自己设计自己开发产品。

那不管怎样，这个阶段就是在明确自己的方向后，集中一段时间把主要的精力投入到这一块领域里面持续学习，不断地做项目，锻炼自己，不断学习和总结，在这个领域不断深入。因为人的精力是有限的，从我前几个阶段的描述，你大概也能了解到不管哪一个方向其实都需要花非常多的精力去学习和实践。这第四个阶段是没有终点，你也可以在某个方向学习到一定深度之后，再切换别的方向再进行学习，这都要看你自己的需要和兴趣。

学习本就是永无止尽的，尤其是互联网这一行，发展变化特别快，技术进步和迭代也快，也只有不停地学习，你才有可能不被这个行业淘汰。希望在这个过程中，你能享受学习，同时收获自己的成长。

以上内容中提到的知识点，都是根据我自己的真实学习经验和体会总结出来比较核心和重要的，我说的这些并不是你在学习过程中可能会碰到的全部的内容和知识，还有很多我没有办法，也没有必要一一列举，如果万一你碰到什么不了解的，欢迎与我交流。希望本期内容能帮助你解决一些关于学习前端学习的疑问。

那下一期，我会和大家聊聊前端的学习方法，再给大家分享一些我知道的前端的学习资源。

欢迎关注作者的公众号：「三木自习室」