超多干货!零基础设计师该如何学习前端?

2015/10/28 20865

head-first-front-end-1

编者按:非计算机科班设计师如何学习前端?让@Hux黄玄 (现微信电影票前端)用亲身经历告诉你!作为一枚非计算机科班的设计师,他可是走过了不少弯路,都是自己亲身经历过的,实打实的宝贵经验,全文不仅教你怎么学,还为将来的职业选择附上了细致的建议,满满的都是干货,来收!

笔者大学专业是数字媒体艺术,大一实习过动效设计师,大二拿到了人生第一个大公司的 offer 是交互设计师,后来转岗到淘宝旅行的前端团队,现在在微信电影票做前端研发。

也是走过了不少野路子,不过还好有小右哥 @尤小右 这样艺术/设计转前端的大神在前面做典范,也证明这条路是玩的通的 :)

接下来就说说自己的学习建议吧,一个小教程,也是自己走过的流程,仅供参考哈

—————————————————— 背景篇 ——————————————————

在这个时代学习新东西,一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富,自学能力也尤为重要,尤其是对于学习技术!

入门篇(HTML/CSS)

说起设计师希望学前端的初衷,大概还是因为各种华丽的网页特效/交互太过吸引人,这种感觉大概就是:“Hey,我的设计可以做成网页访问了呢!”

好在,“展示”对于前端技术来说反而是最简单的部分。所以,放下你对“编程”两个字的恐惧,从“称不上是编程语言”的 HTML/CSS 开始,先做点有成就感的东西出来吧!

对于设计师来说,最有成就感的一定是“可以看到的东西”,而 HTML/CSS 正是用来干这个的,HTML 就是一堆非常简单的标签,而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已:

<p> p is paragraph! </p>

<style>
p { color: red;}
</style>

是不是非常容易,就跟读英语一样!

接下来,你就需要开始自学啦,比如常用 HTML 标签的意思,各种 CSS 的属性,还有 CSS 的盒模型、优先级、选择器……放心,它们都很容易;能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们,学这个洒洒水啦

推荐几个资源:

  • w3school 在线教程 (中文,一个很 Low 但是又很好的入门学习网站)
  • Learn to code (Codecademy,如果你英文 OK,强烈建议你使用它进行交互式的学习!里面从 HTML/CSS 到搭建网站的课程都有,免费,生动直观)

这个阶段的练习主要是“临摹”:用代码画出你想画的网站,越多越好。

对于书,我非常不推荐上来就去看各种厚厚的入门/指南书,没必要!这一个阶段应该快速上手,培养兴趣,培养成就感。先做出可以看的东西再说,掌握常用的 HTML/CSS 就够用了

如果完成的好,这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了,比如这个作品集/简历:Portfolio – 黄玄的博客 (好久没更新了…丢人现眼)

code20151029 (1)

入门篇(JavaScript/jQuery)

想要在网页上实现一些交互效果,比如轮播图、点击按钮后播放动画?那你就必须要开始学习 JavaScript 了!JavaScript 是一门完整、强大并且非常热门的编程语言,你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的!

举个小栗子:

alert("Hello World!")

就这一行,就可以在浏览器里弹出 Hello World 啦!

在了解一些基础的 JavaScript 概念(变量、函数、基本类型)后,我们可以直接去学习 jQuery,你不用知道它具体是什么(它是一个 JavaScript 代码库),你只要知道它可以显著地降低你编写交互的难度就好了:

$('.className').click(function(){
    alert("Hello jQuery")
})

通过 jQuery,我们可以继续使用在 CSS 中学到的“选择器”

对于没有编程基础的人来说,想要完全掌握它们两并不容易。作为设计师,很多时候我们可以先不必深究它们的原理,而是尝试直接应用它!这样成就感会来得很快,并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。

我仍然推荐你使用 w3school 在线教程http://www.codecademy.com/ 进行学习。另外,你可以看一看诸如《锋利的jQuery (豆瓣)》 这一类非常实用的书籍,可以让你很快上手做出一些简单的效果来!

如果学习得顺利,你还可以尝试使用各种丰富的 jQuery 插件,你会发现写出支持用户交互的网站也没有那么困难~很多看上去很复杂的功能(比如轮播图、灯箱、下拉菜单),搜一搜然后看看文档(教程)、改改示例代码就好了。

比如说,配合 Huxpro/jquery.HSlider · GitHub 这样的轮播图插件,你可以很轻松的写出 Hux-Slider | Demo 这样的网页相册~

最后,我想推荐下 Bootstrap · The world’s most popular mobile-first and respons ,这是世界上最知名的前端 UI 框架之一,提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且文英文教程都非常得健全,你并不需要理解它背后的工作原理就能很好的使用它,让你快速达到“可以建站的水平”。另外,你不但可以学习如何使用它,还可以学习它背后的思想。

code20151029 (3)

转职方向一:前端重构

业内通常把专精 HTML/CSS 的前端从业人员成为重构,而对于注重视觉效果的设计师来说,在掌握基本的 HTML/CSS 后,就可以朝着这个方向发展了。

到了这个阶段,你不但要知道怎么写页面,还要知道它们都是为什么,并且知道怎么做更好。这对你理解 Web 世界非常有帮助,并且能帮助你做出更“系统化”的设计。

CSS 的学问很多,你需要开始理解文档流、浮动流等各种定位的方式与原理,理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……这里强烈推荐一本书:《精通CSS(第2版) (豆瓣)》,虽然前端技术突飞猛进,但这本书的思想永远不会过时。

HTML 方面,要开始注重语义化、可访问性与结构的合理,你要开始学习“结构与样式的分离”,这里有一本神书将这种分离做到了极致:《CSS禅意花园 (豆瓣)

另外,各种炫酷屌的 CSS 3 属性你一定会喜欢:你可以用媒体查询做响应式网页设计,你可以用 transiton 和 animation 做补间动画与关键帧动画,用 transform 做缩放、旋转、3D变换,还有圆角、渐变、阴影、弹性盒!样样都是设计师的神器!

如果你还掌握了 入门篇(JavaScript/jQuery)的知识,那么恭喜你!你已经可以做出很多有趣的网页了!很多 minisite 或者微信上的“H5” 小广告,这个程度的你已经可以轻松完成了!

配合上你的设计功力,你可以开始尝试创作一些好玩的东西,比如这种富含交互和动画的网站 绅宝 SENOVA ,它仍然是基于 Huxpro/jquery.HSlider · GitHub 实现的!或者给自己做个小小的个人网站试试。

转职方向二:前端工程师

如果你觉得上述的这些都还满足不了你,你渴望做出更多了不起的交互,甚至你已经喜欢上了编程,想要转行做工程师,或者成为一名全栈设计师,那么你可以朝着这个方向继续发展!

这个阶段的最大难度,是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言,深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念,你还需要了解浏览器,学习 DOM、BOM、CSSOM 的 API,你甚至还需要学习一些网络原理,包括域名、URL、DNS、HTTP 请求都是什么…

你可能会被这一大堆名词吓到。确实,想要搞定他们并不容易。但是,你要相信只要你肯花功夫它们也没有那么难,而更重要的是,如果你能拿下他们,你所收获的并不只是这些而已,而是真正跨过了一道坎 —— 你的世界将因此打开, 你看待世界的方式将因此改变

对于这个阶段,你可以继续在 http://www.codecademy.com/ 上学习,但是 w3school 已经不够用了,遇到不会的语法,我推荐你查阅 Mozilla 开发者网络,这是少数中英文都有的超级专业且友好的网站。

同时,你可能需要看一些书本来帮助你学习 JavaScript :

如果你能顺利得渡过了这个阶段,我想你已经能做出很多令你自豪的网站了!试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器,或者搜搜“Github Pages”,然后把你的作品挂在网络上让大家欣赏吧!

你还可以试着用 JavaScript 写写小游戏,这不但能锻炼你的编程水平还非常有趣~比如这是我刚学 JS 不久后 hack 一晚的产物 —— 用 DOM 实现的打飞机:Hux – Aircraft (不支持手机)

code20151029 (2)

—————————————————— 入行篇 ——————————————————

如果你能完成上述所有的学习,你已经是一名非常出色的前端学徒了!对于只是想要丰富技能的设计师或者产品经理来说,接下来的内容可能会让你感到不适 ; (

但如果你铁了心想要真正入行进入大公司从事专职前端开发的工作,那么你可以接着往下看:

近几年的前端技术发展迅猛,前端工程师早已不是切切图写写页面做点特效就完事的职位,你需要具备相当完善的工程师素质与计算机知识,成为一名真正的工程师。

你需要非常了解 JavaScript 这门语言,包括 闭包、IIFE、this、prototype 及一些底层实现(ES、VO、AO)、熟悉常用的设计模式与 JavaScript 范式(比如实现类与私有属性)。另外,新的 ES6 已经问世,包括 class, module, arrow function 等等。

你需要非常了解前端常用的网络及后端知识,包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式(JSONP/CORS),以及 CDN 缓存、静态网站/动态网站区别、服务器端渲染/前端渲染区别等等。

你需要学习使用进阶的 CSS,包括熟悉 CSS 3,使用 Scss/Less 等编译到 CSS 的语言,使用 autoprefixer 等 PostCSS 工具,了解 CSS 在 Scope/Namespace 上的缺陷,你还可以学习 CSS Modules、CSS in JS 这些有趣的新玩意。

你需要非常了解前端的模块化规范,可能在你学习到这里的时候,Require.js/AMD 已经再见了,但是 CommonJS 与 ES6 Modules 你必须要了解。(你可以观看我的分享《JavaScript Modularization Seven Day》 来学习 JS 模块化的历史)

你需要熟悉 Git 与 Shell 的使用,包括基于 git 的版本管理、分支管理与团队协作,包括简单的 Linux/Unix 命令、你要知道大部分程序员的工作可以通过 shell 更快更酷的完成,并且很多“软件”只能通过 shell 来使用。你还可以把你的代码放到 github 上与人分享,并且学习 github 上其他优秀的开源代码。

你需要熟悉并且习惯使用 Node,包括了解 npm、使用 Grunt/Gulp/Browserify/Webpack 优化你的工作流、对你的代码进行打包、混淆、压缩、发布,你还可以使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域,或者尝试用 Node 做后端渲染优化你的首屏体验。

你需要了解各种 HTML 5 的新 API,包括 <video>/<audio>,包括 Canvas,webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等等。

你需要学习 JavaScript 的单线程与异步编程方法,因为它们非常非常常用、包括 setTimeout/setInterval,回调与回调地域、事件与event loop、还有 Promise 甚至 Async/Await。

你需要非常了解浏览器,包括主流浏览器的名称、内核与差异、包括私有属性与 -webkit-,你需要学习如何使用 Chrome DevTool,你需要了解浏览器渲染的 reflow/repaint 来避免 Jank 并进行有针对性的性能优化。

你需要专门学习 Mobile Web,因为移动互联网是趋势。包括 viewport、CSS pixel、 touch 事件、iOS/Android 浏览器的差异与兼容、移动端的性能优化、300ms delay 等等…你还需要知道 Hybrid 是什么,包括 Cordova/Phonegap,更复杂的比如和 iOS/Android 通信的机制,比如 URI Scheme 或者 JS Bridge。

你需要学习一些非常火热的前端框架/库,他们不但能帮助你更快的进行开发、更重要的是他们背后所蕴含的思想。包括 Backbone、Angular、Vue、React、Polymer 等等、了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 思想、Web Component 与组件化等等。

你需要学习如何构建 web 单页应用,这是 web 的未来,包括利用 history API 或者 hash 实现路由,包括基于 Ajax + 模版引擎或者其他技术的前端渲染、包括组织较为复杂的软件设计等等。

我还建议你学习更多的计算机知识,它们能对你的代码能起到潜移默化的作用,包括简单的计算机体系结构、更广泛的编程知识(面向对象/函数式等)、栈、堆、数组、队列、哈希表、树、图等数据结构、时间复杂度与空间复杂度以及简单的算法等等。

你需要了解业内的大神并阅读它们的博客/知乎/微博,很多思想和新东西只有从他们身上才能学到。我还推荐你多参加技术交流会,多认识一些可以一起学习的小伙伴,你们可以互相交流并且一起成长。

你需要具备很强的自学能力、对技术有热情并且不断跟进。因为 JavaScript/前端的社区非常非常活跃,有太多的新东西需要你自己来发现与学习:比如 Universal JavaScript(同构)、 前端测试、HTML5 游戏、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等等等等…

虽然一下扯得有点多,但这些确实就是你未来将会遇到的。你并不需要全部掌握它们,但是却多多益善;你也可以专精在某几个方面,这已经足以让你成为非常专业的前端工程师。

所以,如果你自认为涵盖了上述要求的 40%,欢迎简历发 huangxuan@wepiao.com ,实习/全职皆可~(非软文,顺道宣传下)

【新人最喜欢的职场大全】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  3. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  4. 面试求职:《优设重磅首发!全方位揭开简历和面试话术的秘密》

原文地址:zhihu

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量103万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/head-first-front-end

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里