1. 云栖社区>
  2. PHP教程>
  3. 正文

UI设计师该如何学习前端?

作者:用户 来源:互联网 时间:2017-12-01 19:20:49

前端学习设计师

UI设计师该如何学习前端? - 摘要: 本文讲的是UI设计师该如何学习前端?,笔者的经历在知乎就可以看到,大学专业是数字媒体艺术,大一实习过动效设计师,大二拿到了人生第一个大公司的 offer 是交互设计师,后来转岗到淘宝旅行的前端团队,现在在微信电影票做前端研发。也是走过了不少野路子,不过还好有小右哥 @尤雨溪 这

笔者的经历在知乎就可以看到,大学专业是数字媒体艺术,大一实习过动效设计师,大二拿到了人生第一个大公司的 offer 是交互设计师,后来转岗到淘宝旅行的前端团队,现在在微信电影票做前端研发。也是走过了不少野路子,不过还好有小右哥 @尤雨溪 这样艺术/设计转前端的大神在前面做典范,也证明这条路是玩的通的

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

————


背景篇

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


UI设计师该如何学习前端。


入门篇(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 – 黄玄的博客 (好久没更新了…丢人现眼)


入门篇(JavaScript/jQuery)

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

举个小栗子:

alert("Hello World!")
UI设计师该如何学习前端。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索前端 , 学习 设计师 ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备
阿里云双11活动