最适合设计师的前端学习路径来啦!设计师学习前端编程学什么看这里【设计师的100个前端问题-02】

最全面的设计师前端学习路径https://www.zhihu.com/video/1217778836068405248

这一期内容有点长,整理了挺久。

要和大家详细说说设计师的前端学习路径,让每一个对前端有兴趣的小伙伴都能有清晰的学习方向


空降时间点:

00:18 前端路径图获取

00:46 上一期小伙伴的几个问题

04:47 推荐一个网站 cssdesignawards

06:31 阶段一 入门

10:32 阶段二 探索

11:14 框架和库的概念说明

12:23 计算机语言的版本说明

22:42 阶段三 创造

24:29 阶段四 钻研


hi 我是三木!

这是《设计师想知道的100个前端问题》系列内容的第二期,这一期的内容我们来聊一聊设计师的前端学习路径。

我已经把这个学习路径做成了一张图,如果你不想听我巴拉巴拉的一堆废话,可以直接去我的公众号(三木自习室)下载,就在中间学习前端的tab里面。

不过,如果你没有什么前端的学习经验,还是先听我唠叨一下,这样,你看那张图也能看得更明白些。那在这期内容开始之前呢,我想先回答几个小伙伴在看完我上一期内容之后提的几个问题:

第一个问题

我想学习手机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,就能自己开发一些插件或者脚本,帮助自己或者其他设计师提高设计工作的效率。好,关于上一期的几个问题我就简单说这么多,如果看到这期内容的你也有什么疑问,欢迎评论、弹幕或者私信告诉我。

接下来,我们就要开始本期的话题,设计师的前端学习路径。

所谓学习路径也就是让大家了解下设计师学习前端该学习哪些知识,学习的顺序是怎样的。

在这里呢,我要先给大家推荐一个网站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是一个程序,开源的(也就是免费的)程序,是可以在电脑本地帮助实现代码的版本管理的这么一个程序,而github就是以这个git程序为基础,把本地的代码版本和远程服务器上代码库连接起来进行管理的这么一个网站平台

还有一个呢 就是要学习一下基本的命令行,命令行就是用一行一行的代码来操控电脑实现一些功能和操作,就是我们会在一些电影电视剧中看到的那种很酷的黑客都会用的一种操作电脑的方式。

mac电脑有自带的命令行工具,叫terminal,windows电脑上也有自己的命令行工具,你也可以安装一些第三方的命令行工具,具体的我会在以后命令行的教程里面细说。我们之所以要学习命令行,一方面是因为git是用命令行进行操作的,而且早点开始熟悉使用命令行会有助于后期深入学习前端,以后有一些高级的知识会经常用到命令行的方式。

如果你把我以上说的这些都学完了,在我看来,就已经正式入门前端了,而且你已经有能力进入第二个阶段的学习了。

第二个阶段

探索

有小伙伴可能会觉得奇怪,为什么第二个阶段叫探索,探索不应该是第一个阶段么。因为在我看来,只有当你掌握了基本的前端知识之后,你才有了学习各种深入的前端知识的能力,而进一步的深入学习的过程中,其实可以细分为好几个方向,而这些方向都需要你自己去尝试,去探索,看看自己到底兴趣在哪,适合哪个方向。

因此我也总结了几个适合设计师的学习方向,同时我会把每个方向中主要的核心知识做一个简单的介绍。这里呢,我要先说两个概念首先是框架和库,因为以后我会经常提到这两个概念,你在自己学习或者找资料的时候也总会看到这两个概念,比如react,vue ,bootstrap等等都是框架和库那具体什么是框架(Library)和库(Framework )呢?现在,你可以暂时把它们当做同一个东西来理解。

我打个比方,就像我们平时用的设计软件或其他一些工具,那假设基础的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语言标准的一个版本的名称,就像css2css3一样,是css语言标准版本的一种称呼,从这个版本号也能猜到,css3比css2能实现的效果更多了。

但是JavaScript的语言标准的版本的名称相对复杂一些,你可能会听到的ECMAscript 6 简称ES6其实就是js语言标准的一个版本,有些文章里说的要学习es6, 其实就是让你学习ES6版本里面新加入的一些js语言的特性和写法,而这些标准,都是有专门的组织去制定和发布的,现在每年都会发布一版,比如现在JS语言标准的版本的命名方式更清晰一些了,直接叫ECMASCRIPT2018这样的方式,简称ES2018。

那关于这一块的知识,我以后会专门做一期的视频来细说,在这里你就先简单了解下就好了。

说完这两个概念,我们就来说说一说探索阶段的三个方向和一个基本。

首先是这个基本

在一开始的入门阶段,其实我们学到的都只是前端知识的皮毛而已,更多的是对前端几个语言的基本的了解和使用,如果你想要更加深入地去学习和掌握更多前端的知识,就必须把基础打得更扎实,尤其是css和JS需要更加全面系统地学习。在不断打好基础的同时,可以开始学习一些框架的使用,了解框架的原理,让自己有能力去使用这些框架提高自己的代码能力,比如说jQuery boostrap vue react,在学习框架的同时也能让你更深入了解js,把js学得更透彻,对于提高自己的代码能力有很大的帮助。

当然,并不是所有框架都需要学习,各种各样的框架实在是太多了,甚至你自己有能力也可以开发一个框架。不过react 这个框架我建议是必学的,因为它现在非常流行,普及率也很高,很多公司都在用这项技术,而且像FramerX这些和代码相结合的设计工具也是深度集合了react,如果你能掌握react,那么会对你的设计工作有很大帮助。所以这个基本,就是需要你继续打好基础,不放松对看似已经了解的CSSJS内容的学习,这部分的知识其实是非常多,尤其是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个动效代码的实现项目,把自己工作中的动效和交互自己用代码实现出来,所以说,你可以做的项目其实是非常多非常多的,你还可以把你自己平时遇到的一些需求或者难题记录下来,如果可以用一些前端的技术解决,那这就可以变成一个新的项目。

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

第四个阶段

钻研

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

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

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

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


好,终于把这个设计师的前端学习路径给大家说完了。

有需要前端学习路径图的,可以去我公众号(三木自习室)下载。

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

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

这期的内容就先到这里。未来很长,要学的东西还很多,我们以后慢慢聊。

编辑于 03-05

文章被以下专栏收录