超多干货！零基础设计师该如何学习前端？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
超多干货！零基础设计师该如何学习前端？
编者按：非计算机科班设计师如何学习前端？让 （现微信电影票前端）用亲身经历告诉你！作为一枚非计算机科班的设计师，他可是走过了不少弯路，都是自己亲身经历过的，实打实的宝贵经验，全文不仅教你怎么学，还为将来的职业选择附上了细致的建议，满满的都是干货，来收！
笔者大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司的 offer 是交互设计师，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。
也是走过了不少野路子，不过还好有小右哥
这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的 ：）
接下来就说说自己的学习建议吧，一个小教程，也是自己走过的流程，仅供参考哈
—————————————————— 背景篇 ——————————————————
在这个时代学习新东西，一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富，自学能力也尤为重要，尤其是对于学习技术！
入门篇（HTML/CSS）
说起设计师希望学前端的初衷，大概还是因为各种华丽的网页特效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！”
好在，“展示”对于前端技术来说反而是最简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！
对于设计师来说，最有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已：
&p& p is paragraph! &/p&
p { color:}
是不是非常容易，就跟读英语一样！
接下来，你就需要开始自学啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个洒洒水啦
推荐几个资源：
(中文，一个很 Low 但是又很好的入门学习网站）
(Codecademy，如果你英文 OK，强烈建议你使用它进行交互式的学习！里面从 HTML/CSS 到搭建网站的课程都有，免费，生动直观）
这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。
对于书，我非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了
如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了，比如这个作品集/简历： （好久没更新了…丢人现眼）
入门篇（JavaScript/jQuery）
想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 JavaScript 了！JavaScript 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！
举个小栗子：
alert("Hello World!")
就这一行，就可以在浏览器里弹出 Hello World 啦！
在了解一些基础的 JavaScript 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 JavaScript 代码库），你只要知道它可以显著地降低你编写交互的难度就好了：
$('.className').click(function(){
alert("Hello jQuery")
通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”
对于没有编程基础的人来说，想要完全掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。
我仍然推荐你使用
进行学习。另外，你可以看一看诸如《》 这一类非常实用的书籍，可以让你很快上手做出一些简单的效果来！
如果学习得顺利，你还可以尝试使用各种丰富的 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。
比如说，配合
这样的轮播图插件，你可以很轻松的写出
这样的网页相册～
最后，我想推荐下
，这是世界上最知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且文英文教程都非常得健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。另外，你不但可以学习如何使用它，还可以学习它背后的思想。
转职方向一：前端重构
业内通常把专精 HTML/CSS 的前端从业人员成为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。
到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知道怎么做更好。这对你理解 Web 世界非常有帮助，并且能帮助你做出更“系统化”的设计。
CSS 的学问很多，你需要开始理解文档流、浮动流等各种定位的方式与原理，理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……这里强烈推荐一本书：《》，虽然前端技术突飞猛进，但这本书的思想永远不会过时。
HTML 方面，要开始注重语义化、可访问性与结构的合理，你要开始学习“结构与样式的分离”，这里有一本神书将这种分离做到了极致：《》
另外，各种炫酷屌的 CSS 3 属性你一定会喜欢：你可以用媒体查询做响应式网页设计，你可以用 transiton 和 animation 做补间动画与关键帧动画，用 transform 做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒！样样都是设计师的神器！
如果你还掌握了 入门篇（JavaScript/jQuery）的知识，那么恭喜你！你已经可以做出很多有趣的网页了！很多 minisite 或者微信上的“H5” 小广告，这个程度的你已经可以轻松完成了！
配合上你的设计功力，你可以开始尝试创作一些好玩的东西，比如这种富含交互和动画的网站
，它仍然是基于
实现的！或者给自己做个小小的个人网站试试。
转职方向二：前端工程师
如果你觉得上述的这些都还满足不了你，你渴望做出更多了不起的交互，甚至你已经喜欢上了编程，想要转行做工程师，或者成为一名全栈设计师，那么你可以朝着这个方向继续发展！
这个阶段的最大难度，是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，你还需要了解浏览器，学习 DOM、BOM、CSSOM 的 API，你甚至还需要学习一些网络原理，包括域名、URL、DNS、HTTP 请求都是什么…
你可能会被这一大堆名词吓到。确实，想要搞定他们并不容易。但是，你要相信只要你肯花功夫它们也没有那么难，而更重要的是，如果你能拿下他们，你所收获的并不只是这些而已，而是真正跨过了一道坎 —— 你的世界将因此打开， 你看待世界的方式将因此改变
对于这个阶段，你可以继续在
上学习，但是 w3school 已经不够用了，遇到不会的语法，我推荐你查阅 ，这是少数中英文都有的超级专业且友好的网站。
同时，你可能需要看一些书本来帮助你学习 JavaScript ：
《 》或 《》，大而全的书只需要一本就够了
如果上面这本你觉得太难，你可以先看 《》来过渡一下，这本书比较容易，它会教给你 “优雅降级、渐进增强”的优秀思想
如果你能顺利得渡过了这个阶段，我想你已经能做出很多令你自豪的网站了！试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器，或者搜搜“Github Pages”，然后把你的作品挂在网络上让大家欣赏吧！
你还可以试着用 JavaScript 写写小游戏，这不但能锻炼你的编程水平还非常有趣～比如这是我刚学 JS 不久后 hack 一晚的产物 —— 用 DOM 实现的打飞机： （不支持手机）
—————————————————— 入行篇 ——————————————————
如果你能完成上述所有的学习，你已经是一名非常出色的前端学徒了！对于只是想要丰富技能的设计师或者产品经理来说，接下来的内容可能会让你感到不适 ; (
但如果你铁了心想要真正入行进入大公司从事专职的工作，那么你可以接着往下看：
近几年的前端技术发展迅猛，前端工程师早已不是切切图写写页面做点特效就完事的职位，你需要具备相当完善的工程师素质与计算机知识，成为一名真正的工程师。
你需要非常了解 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 你必须要了解。（你可以观看我的分享《》 来学习 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%，欢迎简历发
，实习/全职皆可～（非软文，顺道宣传下）
【新人最喜欢的职场大全】
平面设计：
交互设计：
面试求职：
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量103万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注从零基础如何自学 UI 设计
我的图书馆
从零基础如何自学 UI 设计
号更新：欢迎大家关注我的微信公众号：ui每日推我会在每周日更新我的视频教程，教大家如何零基础自学 UI ，内容包含详细的操作技法，对设计的理解，配色，版式的运用等等，另外每天推送国内外精选的十佳 UI 作品，只需两分钟轻松提高审美！已经有1万人关注了，就差勤奋的你啦！请扫下面的二维码。......................................................................................................................................................................................................................................................................................................................正文：看了这么多答案，我也来讲讲我的自学设计之路2011年，大学一年级的时候，我的专业是软件工程，但是我奇怪的被分到了物理电子工程学院，老师从来不教软件，天天教电路基础和大学物理，由于没兴趣，我从来不去上课，就和同学们开黑打dota，这样打了一年。2012年，大二了，我妈有一天和我讲，说以后肯定不能帮我安排工作，我突然有了危机感，如果毕业了我还没工作，会很丢人，我父母都是教师，别人家的孩子不是出国就是考上重点大学，压力还是很大的。当时我还挂着4门课在学校。当时喜欢研究各种手机越狱和雨滴之类的东西，然后有一天，我打完游戏上网的时候看到了一张图片当时我还不知道，《1126》，设计师叫罗子雄，现在是锤子科技的视觉设计总监，那时候我还没有ui设计的概念，把这个都叫做主题，它太精致了，给我带来极大的震撼，不仅细节完美，而且还特别严谨，运用了黄金分割。如果你以为我看了这个作品就开始努力学UI那你就大错特错了,我根本不知道这是用什么软件做的，我开始学习了网页设计，研究css样式和html，学了半个月发现好像有点不对，这是帮助别人实现效果的啊。。。然后有一天看到邵飞老师的一个视频教程，是教你画图标的，需要用ps这个软件，我跟着做了一下，完全做不下来，我就百度如何学ps，找到了李涛老师的《ps高手之路》，这样开始一步步学习ps，每天也不上课就看视频学习。不得不说学软件是个漫长的过程。所幸李涛老师的讲解很幽默，也就跟着学下来了。接下来要讲的是我的临摹之路，这个相当漫长，也最为重要。因为UI设计也是设计的一种，所以它第一个要求就是你设计的东西要美，如何能美？细节是最重要的，你需要观察，仔细的观察你和大神的作品之间的差别，然后再想办法实现它。现在设计之所以浮躁的原因我想就是很多人不愿意也没有耐心去培养自己的审美了。当时站酷上有一个视频教程叫《十分钟UI设计》，是腾讯的设计师omega和老程一起做的，里面的内容特别好，大家可以去搜索一下，我跟着里面的教程做了很多练习，当时老程说，windows的图标是很不错的，当你能把一整套图标都临摹下来，你就出师了。这是我当时跟着临摹教程做下来的，一个比一个有进步，每个都花了一天或者半天时间完成，当达不到原作效果的时候就继续观察，继续改，现在一看还有好多问题，比如第一个铅笔的投影是黑色的很难看，第二个台球的边缘太锐利，很不真实，如果当时不是疯狂修改我想问题会更多。2013年，大三了当我临摹了半年以后，我认为我的ps技术已经很不错了，跟同学说话的时候也爱吹牛，说自己是ps大神，一天一个同学下午来我寝室，说你干嘛呢？不知道今天晚上团里要开荒？你的萨满装等多少了？天天日常任务也不做。。。我说我画会图标，他说？？？我说我以后想当设计师，他说你别逗了。。。我当时心想一定要坚持下来！有一天在上站酷的时候，发现一个主题设计，再次深深震撼到了我，那时候ios7扁平风格盛行，很少有拟物的东西出现了，在看了很多千篇一律的设计以后很难被打动。牛mo王的《心随我动》，参加了康佳首届主题设计比赛，我立马跑到他站酷的主页&膜拜了他，看了他当时发的所有文章，他也是自学，我觉得太厉害了，他当时写了好多文章，告诉大家如何自学，感触特别深。后来我找到了他的qq，没想到他居然同意了，真的特别兴奋。。。然后我问了他一个图标方面的问题，令我没想到的是，他居然打开ps手把手教我如何调参数。。。一边做一边传图片给我，教我如何实现效果，他说好多东西其实非常简单，但是没有人告诉你的话自己很难想出来，到现在我都特别感谢他，叫他牛哥，虽然他不姓牛。。。我问他心随我动这个主题是怎么做出来的？他说只有积累到一定程度才可以。。。然后我默默努力，偷偷临摹它，一天一个图标。下面是我临摹的《心随我动》。做了快一个月，其实我在最后一天偷懒了，上面的哪个大的天气widget是用的原来的图抠下来的。。。然后我把临摹的给牛哥看，他当时就说，哇，好棒，你进步好快！可能没有谁像我一样把它临摹了一遍，在这些过程中，我的技法运用越来越熟练了，其实做这种ui，只需要你用好图层样式这一个ps功能就好！剩下的就是不断调整内阴影，投影，还有渐变，一定要注意投影的颜色，不要用黑色！要用深色，比如说黄色就用深黄色当投影，蓝色就用深蓝色，这样。推荐大家去站酷看看牛哥的文章，他的分享真的是很详细也很实用，从字体选择到ui入门都讲的特别到位，在学习路上能有他这样的老师带路我想我很幸运，再次谢谢他！当ps技术熟练以后，我就想着做一些自己的东西出来，然后照着照片用ps涂抹了一张定制耳机现在感觉阴影有一些深，线的感觉也不自然，有些发虚。在大三后半学期，参加了小米的主题比赛，每个图标都在网上搜索好多的图片做参考，然后自己绘制，差不多两个月的时间，最后入围了决赛。自己做主题和临摹是有很大不同的，每个图标做多大？用什么颜色？这些都需要自己控制，可以看出，这个作品在这两个方面都很差。。。当时很迷茫，自己做的东西究竟是不是设计？字体要用什么？排版怎么才好看？因为平时积累的东西太少了，所以真的很质疑自己。我意识到需要多看设计方面的东西，所有的都需要积累，到需要用的时候才能用到。第一次 接触实际项目 是大三后半学期，我的一个老师要做一款ios应用，主打背单词功能，我们两个人他写代码，我负责设计 ui 。我花了一天时间研究切图，研究我做的图片怎么才能用在实际的app中，然后我模仿path做了几个样式出来，我们干劲十足，前后做了好几个版本，修改了十几次。这个软件前前后后一共做了半年，对我实际项目的实践是一个挑战，靠这个软件我还拿到了在京东实习的机会，大四后半学期在京东实习了半年。期间还和同学做了一个网站叫野渡集市现在我工作已经一年了，在北京的美餐网，自己一路自学过来，毅力很重要，我想兴趣更重要，我现在还在不断学习，因为自己的设计知识还是很不足，到这个时候要多看看ios和google的设计规范，知道ios的最小点击区域是44pt，字体不要小于22像素，36像素适合阅读，这些都是在以前自己很少注意到的。现在每天还在自学c4d和ae，加强自己动效方面的实力。发一点现在的作品吧，我觉得很少有人能听我啰嗦到现在。。最后推荐大家一定要多上dribbble，看看国外的大神是怎么做的，当我上dribbble以后才发现，很多国内的所谓大神不过是抄袭别人的作品而已。/////////////////////////////////////////////// 9月25日更新 ////////////////////////////////////////////刚才写了一大堆然后浏览器崩溃了都没了。。。只好重写了2天收获了500多个赞，我真的没有想到，还是有好多同学提问或者私信我，我在这里做统一的解答1.好多人问我用的是什么软件？是ps还是ai？这个问题在我学ps的时候也特别困惑，我想说的是一门心思学好ps就行了，ps比ai更适合做ui设计，我都是用ps做的，当然用ai也能做出来但是会不方便，而且网上ps的教程会很多，ai就很少了，所以建议大家学好ps。我现在工作以后使用sketch进行设计，因为公司是全mac办公，用sketch能极大提高效率，sketch默认输出一倍图片，减少了标注的麻烦，而且设计稿可以让ios工程师直接使用。（现在这个软件只有mac能用到，这是它不好的一点，当然有条件的可以学习一下，很方便。）这是用sketch设计的设计稿，虽然最后没有用，但是可以看出来一个文件搞定了好多设计稿（不会说话了。。。）2.我向大家推荐了使用dribbble来提高审美，并且了解ui设计的最新趋势，但是说的不仔细，现在给大家分享一下我如何使用dribbble。首先在dribbble里有一个点赞功能，叫likes。拿我举个例子，在我的主页，这个地方，进去有我喜欢的作品。这个有什么用呢？比如我在浏览今天dribbble的推荐作品的时候，发现两个超棒的作品,看下面的图：我们可以发现，这是两种不同的风格，也是现在最流行的两种第一种设计是那种酷炫的，很有ios的风格，像自带的应用日历一样，里面有很多小的控件，很精致。第二种设计现在更多得流行起来，用大的色块，大的按钮，大的圆角，还有流畅的动效给使用者带来非常愉悦的感觉，有的配合了卡通形象，更加增加了亲切感，这类的app有marval，还有游戏jellies（就是那个抓水母游戏）。我们点击作者的名字，到他们的主页，看到他们更多的作品。可以发现他们在自己的风格里面都做的特别棒，有很多值得我们学习和研究的地方，最好能看看他们的likes，看看他们都喜欢什么作品比如这个大神，应该是中国人但是原谅我不知道他是谁，低调的人太多了这个是他的主页，可以看出来他也是第二种风格的，我们看看他的喜欢果然，可以看到更多的大色块和卡通的设计。也让我们发现更多的擅长此类设计的大神。接下来讲讲dribbble的搜索当有一天老板需要我设计一个登录界面，但是我并没有什么好的灵感，大家肯定早就注意到dribbble上有search按钮了，我们搜索“login”，出来以下结果这么多的登录界面设计，这下不怕没有灵感了，我忘了是谁说的了，世界上没有纯粹的设计，所有伟大的作品都是以前的作品的结合和再创造，我们学习别人的想法和设计语言。dribbble还有很多psd可以下载的，比如iphone的各种展示模型，我们搜索“mockups”或者“mockup iphone”就可以找到下载了。做展示的时候很好用。看下图：我做界面设计的时间也不长，只是说一些自己的理解，尤其是工作以后，那些很炫很酷的界面往往是不能实现的，我们的设计不能出格，比如在ios上你使用安卓的材料设计语言就很错误，但是在遵守大的设计规范的时候如何才能让你的设计出彩？这就需要我们对细节的处理，比如path里掉下来的小卡片，或者是一个小的可爱的动画，让用户能感觉到设计的精致，现在我们也管这种小细节叫“情怀”。我们看好的作品不一定要把他实现，但是要学里面的细节，有时一抹亮色或者一点光晕就能为你的设计点睛。3.前面有些提到的素材有人说找不到，我帮大家把链接贴出来还有就是回音的ui分享会，牛哥的u1系列教程，我都看过，也推荐大家认真看一下。学c4d可以看看ihdt上海映速的免费教程（以上教程我都是一步步看过来的，还有好多跟着做了临摹，我一直认为，如果你回答里推荐的那些素材网站你从来没有看过那是不负责任的，推荐一大堆链接不如不推荐，有人评论和私信喷我我必须说他们两句。。。）这次更新就到此为止，祝大家每天都有进步。下次更新可能要到我动效或者c4d有大的进步的时候再来了！最新作品更新：dribbble：zcool：我会经常更新的！！！！
&&&&·&&·&&·&
143赞同反对，不会显示你的姓名
感觉各位大神该说的都说了，我想先跳出来讲一个关于UI设计的误区。UI设计是美工么？根据今年的趋势预测，Our Fascination with Pixels is Almost Over（译：我们痴迷于像素完美的设计时代已经走向尾声）[From:&]指的就是今后的界面，不会再是“被精心设计过的”了。文章中也指出，人们对于固定的UI模式的适应度已经到达了很舒适的程度，不会再有交互方式上的大革新。我个人的理解就是，固定的UI就像是人们使用剪刀一样，不会有人质疑剪刀的设计本身了，而是考虑如果做更好的更轻更快的剪刀。那么回归到做UI设计的问题，我认为好的UI设计师越来越会是对不同交互模式，UI组件甚至是互联网产品有清楚认识的设计师，而这个设计本身，不同于纯粹的艺术创作。感觉在美国，目前的大趋势也是如此。UI设计师已经不再是从设计专业毕业的只做设计的人，而是有着系统思维的，了解互联网产品细节的，向上能理解复杂大系统向下能调整小按钮的设计师。如果你认同我对于“ UI设计师不是美工“这个看法，那么可以继续看下去，关于怎么成为一个好的UI设计师。1. 随时收集灵感，紧跟设计大潮说的Everything will look the same这个观点，他们不是第一个提出的。相信如果你关注过这些年UI的变迁模式，就会清楚的看到从skeuomorph(拟物化设计)到现在流行的Flat design(扁平化设计)，是有一个变迁过程的，而每当一个设计趋势在产品实践中被肯定，这个趋势就会被大量的使用，比如Google的Material Design，虽然本身的采用率并不高，但是却做火了Card（卡片设计）。想要获取最新的UI设计风潮，要特别吐血推荐几个资源：
2. 多读书，读好书推荐一个UX的书单，以及下载地址。所有书都是英文版的，中文版网上应该也可以找到网盘链接：&密码: gkx3
3. 做几个Redesign项目设计的重点是分析问题解决问题，需要 实践才能有进步，可以去behance上面看看大家是怎么做的。关于这部分我有空了再上来补充吧。以上————————
&&&&·&&·&&·&
4910赞同反对，不会显示你的姓名
插播一条招聘！！我这需要有经验有水准的设计师，UI和平面视觉！女性产品所以女生优先！不招新人哦～我觉得已有问题没真正提供有效的帮助，楼上各位给题主提供的心得，本质上和鸡汤一样，只能解渴不能果腹。下面是我这几年经验的总结和思考，虽然我并不算是最出类拔萃的UI设计师，但也希望对题主和其他新人有益。QQ：！如果有独到见解，请加来讨论 （注明信息，如果没啥见解求指导的下面基本已经写了，在评论里留言）--------------------------------分割线-----------------------------------第一点：学习准备——启蒙学习一项技能，尤其是已经有一定沉淀并在各行各业有广泛应用的技能，就一定要对它先有充分的认知。在开始正式学习前，你需要花足够的经历去了解和查阅它的起源、发展、应用、未来。UI作为平面设计的一部分，再往上又从属与美术学这一大类。因此，首先要先去了解整个美术史的发展。从人类起源各个阶段中，美术经历了什么样的变化，在各自的时代发挥了什么作用，近代美术史又经历了哪些波折，平面设计艺术是如何发展壮大走进千家万户，并且有哪些经验成功过度到后来的UI设计中。那些享誉中外的艺术大师有何过人之处，他们为美术学发展做出了哪些贡献，他们的名作到底有何动人之处。在今天的UI设计群体中，我们作为专业的设计人员，可以和别人侃侃而谈雷军的创业心得，罗胖子的工匠情怀，滴滴快滴的商业模式以及BAT在传统行业的布局等等，各种其实并不太相干的话题，却说不出半点艺术见解。我们看不懂博物馆展览那些画作，不知道梵高画了什么作品，抽象派到底在闹腾些什么，更甚者连扁平化的推动有什么深层次的原因都不明白。如果说最近很火的二月河说大学生不看《红楼梦》是耻辱尚有争议性，那么设计师无法理解前人艺术成就是绝对的悲哀，无法去辩驳的事实。了解美术史，学会入门的美术鉴赏，目的是以正视听。学会用多个纬度去思考美学，学会用更深入的方法来看待问题，学会从更宏观的视角审视行业……这样，你才能更客观的去理解UI的发展历程。这些知识和思想，将为你的职业生涯做出启蒙，才更容易成为一个有内涵有深度的设计师，这当中还有诸多优点，就得靠你们自己慢慢体会。下面推荐书目：（重点）近代设计史 （一下搜不到这书的地址，回头我拍张照片）&（有1.2.3，都得看）以上是我目前看过能想到的最基础书目，如果有朋友觉得还有合适的请给我留言补充上来。哲学有三大哲学问题，“你是谁？”“你从哪里来？”“你要到哪里去？”，构成了哲人在探索人世真理时的基础框架。我们也一样，要在阶段给自己提出三个问题，并花至少一个月的时间寻找答案：设计是什么？设计是如何产生的？设计可以做什么？第二点：绘画技巧——洞察曾经和很多同行争论过，UI设计，到底需不需要手绘训练。想必大家都知道，目前国内知名的UI设计师，站酷、、追波上的大神们，很多都是草根出身，从其它行业空降来的，他们的出色是有目共睹的，似乎从某种层面上证实，不需要有绘画基础，也可以做好UI，也可以当大神？图样拿衣服！我们来说说绘画的问题。美术高考主要考的三大项：素描、速写、色彩。就是绘画入门的三大基础课题，我们学习的过程也是以这个顺序逐步覆盖的。如果你已经在第一部看完了那些书籍，就会知道，学习基础绘画的过程中，我们在纸张上对现实世界的物体进行细致准确的描绘，也就需要我们更仔细的观察事物。光照射的角度是如何的，在对应的形状中表现出什么明暗分布，在透视原理下杯口厚度的弧形是怎么变化的。随着绘画的深入你就会逐渐培养一双洞察细节的眼睛，你会对所有设计和形体做出本能的反应，分析它们的美丑，找出核心所在。我们看看下面这样的案例：这是一个很简洁的小鸟，只用几个细节就轻松的表现出来，但我相信，如果要原图照抄，有90%以上的UI设计师是画不出精髓的（不信你们试试）。越是这般简单的图形，在弧度、头身比、重心偏向这类细节上就越关键，如果你没有良好的观察能力，那么就连抄也抄不像，你只能做出曲线都歪歪扭扭的贝西货并自己洋洋得意的四处上传设计媒体求赞求认可。前面提到的这批国内的大神，其实就是在远超常人的勤奋中积累了观察的经验，以此可以复制一定的风格，并能发现设计中的细节而不断做出改正。但这就完了么？当然不是。你们可以仔细去观察这些没有绘画能力的UI设计师，他们的作品存在着很强的局限性，虽然可以很好完成熟悉领域和流行风格的设计，但是形势是很单一，并且缺乏真正的创造力。强大的手绘能力，除了提高洞察力以外，就是为你将来创作的多元化提供更多可能，看下面案例：比如绘制这样的图形，私以为没有手绘技能无异于天方夜谭，而GAME UI的最大门槛就在这里。你的绘画技巧会支撑你跨过更多的门槛，在设计的道路上有更多的选择和可能，也会支撑你走的更远。那么学习绘画要到什么程度呢？直到你觉得可以正确绘出静物为止。推荐去报一些高考培训的机构，和高三孩纸们一块儿学画，你会提升的相当快，这个过程只需要两三个月的时间。不要觉得可以跳过，将来成为出色设计师的成本将远低于不学习绘画的其他人。还有，最重点要掌握的一个绘画技能，我觉得是结构素描。你就可以在纸张上对想绘制的图形做出快速、准确的打稿，效率和延展性远胜上机鼠绘。手绘将贯穿你整个职业生涯，在今后的学习工作中要保持这个习惯，相信我，每到一个合适的时机，它总会给你带来意想不到的惊喜。第三点：掌握软件——手段这一步就正式开始进入学习软件的步骤。如果学习的是UI，那么以下几种软件是必不可少的：PS、AI、DW、Sketch……其余的根据爱好自己补充这里要先和大家谈谈，我们都知道美工对于设计师来说已经成为具有侮辱性的贬义词，设计师们喜欢反驳，你丫才是美工，你全家都是美工。有点小理想的有志青年们都对这个称谓充满鄙夷，但我得给大多数人泼冷水，因为大多数设计师连一个合格的美工都够不上。我们知道美工代表的是一种技师的称谓，有一定技巧但没有创造力。可偏偏就是绝大多数人都没有掌握足够的技巧，这就是当前设计行业所需要面对的事实。很多设计师没有经过前两个步骤的熏陶的，所以在学习软件的过程中很容易自满，明明对软件的掌握还很肤浅就已经恬不知耻的在简历中输入”精通“二次（哎呀，好像在说我自己！）。他们的视角是狭隘的，只认为学会了PS这些工具，就学会了设计，也忽略了自己远远没有达到美工门槛的界限。下面我来谈谈怎么学习这些软件。首先看李涛视频的前三课：只看前三课！重复强调一遍，先只看前三课，并且做好笔记把所有内容都背到滚瓜烂熟为止（我看了至少五遍以上）。这是整个UI设计行业里最基础的知识点，光、色、分辨率、色彩模式，连这些都没有掌握你就不要想精通设计软件和掌握它们的原理。然后你就开始去看别的视频教程，这时候可以去淘宝买：几块钱就有一打的高清入门视频，不要浪费时间在搜索免费的低质量视频上。入门教程基本都是相同的，你要完整的看完和跟着学习几个新手教程，直至对软件使用有了初步的理解，然后再返回去看李涛的视频剩下的内容。那软件要学到什么程度？学到你可以用它临摹出任何使用这种软件设计的图形。一定要记住，设计软件只是我们用来实现设计的一种手段，过渡沉迷在软件的研究中是本末倒置的，但如果你使用软件连抄都抄不出来，那就是一种不需要反驳的耻辱。例如下图：这样的作品，你有了足够的观察力，靠对软件的掌握度就可以轻松临摹，但很多已经从业数年时间的设计师连这种临摹都做不到，原因在哪里你们自己好好想想。软件的掌握是为你实现更多设计方案提供可能性，不要让软件熟悉度这件最简单容易的技能变成自己的短板，至少我们要成为一个合格的美工！经常自己做一些练习来测试自己对软件掌握度在哪里，就很容易发现问题，然后自己去查资料做研究。下面就是一个我很久以前做的软件练习（要点开大图，大神轻拍= =！）：好好去理解每个软件可以实现什么，优势是什么，极限在哪里。然后你就再！也！不！会！跑去大神评论区里问：好牛逼，请问这是PS做的吗？请和我默念这是本世纪设计界里最愚蠢的评论，不要让它们发生在自己身上。再唠叨一次，软件只是一种手段，你还并不懂设计，少吹牛逼！第四点：设计理论——实践广义上来说，到这步才是真正开始学习设计，也是让一、二两点作用开始充分发挥的时候。因为看过艺术史，所以你会知道，每个时代流行的艺术创作有各自的手法特点，有共性，所以可以被归纳和总结，也就可以教授，培养出相同的作家。换句话说，美术家是可以被量产的。在理论不断被完善的今天，要做出好的设计一样是可以通过理论学习——实践产生，一定不要认为这是天赋上的差距，别人比自己就更有艺术细胞。那些能被历史铭记的艺术大师，之所以伟大，是因为他们的开创性或者作品所包含的人文精神和伟大的灵魂，而不只是一幅出色的图画。前面的几点都为你提供了足够的实践基础，所以在这部才能让你正确看待自己的潜力，不会轻易停下追求进步的脚步。只有最伟大的设计师才需要较量天赋，而成为一个优秀的设计师靠的是努力。设计是勤行，不是设计人，不入设计门。那么理论知识我们该学习什么呢？首先是基础中的基础：每个方向都需要阅读相应的教材，重要性无以复加，你需要在观看的时候一边做练习。然后才是具体设计类的书籍，记得不要再买那些无用的通篇告诉你软件操作的书籍。还有个差点被我忽略，本来想单当一个步骤说得，后来想想还是归纳到这里来，那就是对于字体的认识。UI设计师普遍对字体缺乏敬畏，尤其在扁平化盛行的今天，字体的作用更加突出。只有掌握了字体的奥义，才能设计出有力的排版，才能对可读性和观赏性文字符号有充分的了解。比如日本二十四节气网站就是运用字体的优秀案例：（原网站好像打不开了，只有图）。推荐书目：一定要看！！）接着就是关乎排版，、，这也是UI设计师必须掌握的基础技巧之一。对栅格化有充分理解，就可以设计出足够安全而和谐的页面，下面书目：栅格排版法（找不到了，我回去翻翻）还有一些相关的基础推荐书籍，太困，记不起来，希望知友推荐：重点推荐）设计的理论书籍教会你怎么设计，你需要在不断接受知识的同时，马上对它们做实验，不停的练习，不停的产生问题并解决。在你的设计观念足够成熟前，绝对不要没事上网看设计的XX法则，如何做好网页设计你需要掌握的XX个技巧，完全就是设计界的鸡汤文，它们看着其实挺有道理，但完全没办法给新人提供实践指南，是用来遗忘的，即使看再多这类鸡汤文，你也做不好设计。举个本题内的例子：这样的回答实际上可有给你提供详细的帮助？没有（无意冒犯）！你的学习过程在每个方面都要系统而有调理，书籍比零碎的阅读可以给你带来更多的帮助和进步。第五点：逻辑取舍——平衡在我这个回答：已经说很详细了，作为UI设计师，是必须掌握前端的对应技能的，这不是可以完全无限制的发挥设计技艺的地方，你就要有取舍，要跟的上前端开发的逻辑，做出稳定可以被实现的设计稿。学会HTML5 CSS3 JQ的入门，安卓、IOS的实现规范！第六点：鉴赏模仿——超越特地把这点放到后面，也是有理由的，前面的步奏都是一个设计师基础素养的实现，而一个出色设计师还需要培养自己的套路和风格——站在巨人的肩膀上。你要学会如何辨别优秀的作品，可以从多个渠道收集优秀作品和案例，首推使用：&（又到了求粉的季节，懒惰的可以只看我的花瓣&）&（其它的可以在导航里逛）学会看优秀的案例，用它们给你提供设计的燃料，然后你要做的就是抄！抄！抄！用你学过的设计理论在实现中对案例进行分析，只有发现了它们的优点并自己动手实践实现了，才对你的提升有实际帮助。你每天抄一个案例，BANNER、ICON、APP界面，那么不出几个月，你就能对现有的设计形式套路了如指掌，可以设计出安全不会有太大毛病的UI设计稿，你可以轻松完成这样的：而不会做出这样的：同时，必须提醒一点就是，我们在设计过程中对美的追求和实际实现、用户需要很多时候是不一致的，这是一个坑，需要有足够的经验去判断什么样的设计已经足够了，什么样的是过度设计，没有实际意义。你不止要在网上搜索优秀的案例，一定要持续关注这些那些最简单，但是最受欢迎的网站和应用。例如：知乎、INS、微信、淘宝等等。去不断讨论、查阅，来理解为什么是当前的呈现式样，而不如自己的预期。比如我写的另一个回答的思考方式：你要在练习和思考中进步，不要盲目的追求视觉表现，这样的UI设计师是很难真正的成长起来。设计的终极目的是解决问题，而不是盲目的表现自己对美的追求。所以我要新手不要去看那些只上传飞机稿的网站：、追波等等。当前主流设计平台的趋势就是，少数大神驱动庞大的底端设计群体，如果你已经在前几个步奏得到提升，那么这些网站的多数设计师已经在思想上没法和你并驾齐驱，不要去这些地方混迹。这些网站不会有真正有价值对等的交流和见解，只有设计师在自己圈子里找自信刷存在感的证明，你去扫两眼评论，就知道不会有“落霞与孤鹜齐飞，秋水共长天一色”这种回答，只有“哎呀，我草，牛逼”，“请问这是用数位板画的吗？”，“请问这是AI做的吗？”。这些大神的飞机稿和普通练习的迅速流传，很可能会产生诸多的不良印象。就拿我深深唾弃的追波来说，大量的作品没有任何实践价值，尤其为了吸引同行关注而过分秀技巧，秀动效。于是动效的风气马上在国内圈子弥漫开，明明是连基础排版、配色都做不好，PS都还没捂热，就追着赶着学习AE，开始玩转交高大上交互特效了。具体请看下文：当你抄了两三个月案例，就已经有足够多的作品集了，你已经可以打包做简历去应聘了。届时你的水准将超越绝大多有数年经验的设计师了！第七点：阅读思考——扩展整个UI设计圈，还有一个很致命的缺点，就是对其它行业知识的排斥，科班毕业生尤甚。因为学生时代大多讨厌学习，有艺术生这个庇护伞，就可以合理安慰自己不学习不念书那是放荡不羁爱自由。屎丢皮啊！！艺术史还要教会你们的一点就是，真正的大师绝对不会只是孤陋寡闻而只专注在手中的笔杆和油墨，他们不断在认识世界，不断在研究感兴趣的知识和见解，这也就是知乎存在所要满足的需求。不要做一个只知有设计，不知有数理化的蟾蜍，只能在你自己的井里蹦跶。成熟的设计不只是你个性技巧的表达，还有你对解决问题所展示出来的理性和洞见。很多设计师和同层次的其它专业人员比较起来显得太幼稚和粗浅，症状也在这里。不要只用设计的角度去看世界，去涉猎更多的专业，让眼界更宽广，有更多的角度去理解世界，得到的感悟将给你带来难以估量的升华和进步。这是可以持续一生的事业和技艺，在正确的方法下，越积累越成熟，老而弥坚。请不要再用肤浅的思想认为它是吃青饭的过度阶段！……………………===================================================设计是一门需要沉淀的技艺，却恰巧遇见了日新月异的互联网文化。这让大家对流行极具敏感度，而开始追赶潮流，轻视正统和法则。这整个流程需要或许需要1整年的时间，但我相信，只要有足够的耐心，是可以让一个新手成长成为一名合格的UI设计师，请放慢你的角度不要急于求成。 下午补充了六、七的内容。大家请积极点赞给我动力= =！！PS：这里写下的内容，不仅是我自己的经验总结，也是对自己重新学习设计的规划，写的太累很多细节没有完善，我将在自己重新实践的过程中不断更新这篇回答。
&&&&·&&·&&·&
277赞同反对，不会显示你的姓名
在知乎上也码了不少字，结合以前的回答，说说我的建议罢。大的要点其实就这么两点：1. 系统的学习与积累2. 不断地思考与动手一、认识 UI 到底是什么很多朋友可能认为 UI 就是画画图标之类的视觉工作，其实不是的。它更重要的是清晰地呈现内容，展示功能，让人高效地工作。
一句话概述的话就是：UI 是架接机器与人沟通的桥梁。
UI 的中文名是用户界面（User interface），而我们现在使用的大多数设备界面都是图形用户界面，即 GUI（Graphical user interface）。我们通过这些可视化的图形界面来理解计算机，进行工作。
但是最初的界面可不这么友好，那时的界面还是命令行界面，CLI（Command line interface）。计算机只是被政府或大型机构使用，在普通人眼中是完全不能理解的存在。
（命令行界面，Bourne shell interaction on Version 7 Unix）
而乔布斯一直渴望计算机能进入寻常百姓家。在 1979 年，他「命运般」地参观了施乐公司，然后做了一回搬运工……使得图形界面被应用在 Macintosh 上，还引入了鼠标。苹果电脑大肆宣传其创新的交互界面，Macintosh 的诞生开启了一个新的时代。而那时的界面设计也奠定了现在的计算机界面。你可以发现很多设计，过了几十年依旧被保留了下来。
（1984 年面世的 Mac OS System 1.0）
因此 UI 设计师的首要任务是设计一个个图形界面，为的是让人们能够清晰、高效地使用软件。二、优秀的 UI 设计师要掌握些什么我非常鼓励大家学习多方面的知识，而不是视觉就只盯着视觉，交互就只盯着交互。可以在跨学科的学习中慢慢树立自己的专业方向，然后目标成为「T 型」设计师，拥有知识面的广度和专业知识的深度。我前段时间梳理了一个「UI 设计知识库」：（以上内容来自我的专栏：&。红字是我认为 UI 设计师第一阶段必须要具备的知识和能力。）三、这么多东西该怎么学其实我已经通过上图将知识点很好的归类了，你可以将上图更细分，一个个攻破。我在这也不能具体地说该怎么学画画、怎么学平面，知乎上已经有很多优秀的回答，希望真正好学的人可以自己整理，然后制定适合自己的学习计划。以前还有谈过这个问题也可以应用：
一、从整体出发，确切理解自己要做的事。二、理清事情的思路，知道自己如何去做，保证每时每刻都知道自己在做什么。三、落实到每个细节。四、边学边不断地积累这部分我可以通过分享三个回答来说明。第一个是我对于「设计师如何积累素材库」的回答：摘录大步骤如下：
第一步、选择优秀的网站第二步、整理收藏夹第三步、如何在工作中应用这些收藏素材（想看详细请点原回答链接）第二个是&&对于「设计师如何记笔记」的回答：摘录大纲如下：
1. 为什么记笔记？
2. 笔记对设计师或设计学生意味着什么？
关键字：思路，积累，总结。
3. 怎样记笔记？
这里我用具体实例来分析。（想看详细请点原回答链接）第三个是我「分享的设计书单」：（请点原回答链接查看。有好的书，也欢迎大家推荐给我）关于我自己的故事分享请看这：
&&&&·&&·&&·&
454赞同反对，不会显示你的姓名
看来这次我也要从知乎的标准开场白开始了——谢邀！其实我在UI设计上还不算有经验诶，不过在大学期间常年自学各种感兴趣的领域包括UI所以在「从零开始自学」上还算有点心得吧。因为本人大学专业跟CS , 互联网 以及设计毫无关系，但自己偏偏对这几部分很感兴趣，所以都得自己寻找资源自学了……这里也想说第一点就是1. 随时随地保持的学习状态和学习主动性。自学的机会很多，生活里，你结识一个朋友、看一场电影、读一本书、浏览一个网站、看一则广告，随处都暗藏着学习的机会，不一定能学到具体的技能，但至少可以领略到一些精神和获得一些专业上的灵感~2. 掌握一定基础理论和基本技能你可以自己找书看，各种设计专业的书籍 可以具体从构图、排版、色彩、图形等方面入手了解一些基础知识。然后学习UI设计常用的软件，Adobe系列的 Photoshop、Illiustrator算常用的了，如果对web感兴趣还可以玩玩Flash，Dreamweaver甚至是html5……3. 练习，一定要坚持不懈的练习！设计、编程在我眼里都是需要动手才能练就出来的本事，只看书满脑子理论完全不行。－ 设计基本功上，你可以有计划的练习手绘，提高painting能力我认为对做设计，包括ui设计，是有好处的。－ 从模仿开始，可以先临摹一些教材上的范例，现有的优秀界面，优秀设计师的作品；在此基础上，时不时可以加上自己的想法情感，搞点原创。总之，就是要坚持练习，多动手，一定会从中获得很多经验！4. 我认为可以和3结合使用，多看优秀作品，多向同行学习。还是那句话，即使不能学到具体某项技能，也能获得行业中的某些精神，培养出自己和行业兼容的调性，培养鉴赏和审美力。我贡献下我chrome收藏夹里的一些内容吧。国内的我知道，&还蛮多交流分享机会的，有些线上活动和比赛也可以参加下，当练练手。国外的，&算最有名的了吧。除此还有以上，边看边练习吧。工具性的&&我觉得可以当作设计师的evernote来用哈5. 既然是UI设计，还是建议了解甚至是熟悉下各个操作系统的设计规范、风格。并善于体验每个OS下的优秀App，分析下别人的优秀之处。6. 做UI设计少不了了解一些用户体验，交互设计易用性的知识。UI设计不只是要做得「漂亮」，更要让用户在交互使用是觉得愉悦、自然、贴心。所以可以参考点UX书籍或网站举几个栗子经典的一本：不过，某些理论也不能完全迷信。在具体项目中还是要结合实际情况和用户特性来分析的。7. 学习就是一种习惯，养成这种习惯就好了。比如我大学把手机换成google四儿子的初衷就是用来看各种app在Android原生环境下设计和交互风格的，当然我本来就喜欢google风格。我很喜欢体验各种软件，手机上电脑上装很多软件，经常都是为了向他们学习。以上很多点都是方法论，我觉得自学其他领域也合适。不过我觉得我学得不算好因为某几条践行得不够很是惭愧啊，还需努力啊- -所以最后要说的是，一定要坚持，耐住性子，肯付出、花时间！&（也当自勉了）
&&&&·&&·&&·&
145赞同反对，不会显示你的姓名
已经自学了一年左右，来说一说自己的经验好了1、找方向你想做什么？为什么要学设计？什么是设计？设计里面有分多个方向，每个方向和每个方向不一样，选择哪一个？为什么？只有确定了方向，确定你真心热爱它，你才能坚定不移的走下去。我花了2个月的时间集中搞这些问题，事实上现在还在不停的思考。2、抄袭，画界面这是一个培养美感的过程。Dribbble上有很多漂亮的界面，用photoshop抄袭画下来。画的时候要分析他们哪里做的好，哪里做的不好。然而一直使用xp系统的我没办法培养起来好的审美，直接花高价买了一个mac和iphone5。只要确定了方向，就会舍得买:D3、做项目这份经历比较特殊，朋友正好过来托我设计一个App，就开始了旅程。设计App的过程中会碰到种种问题，随着自己努力解决这些问题，你所问的书籍，网站，工具等开始浮出水面。4、Stanford HCI课程做完了自己的项目，紧接着斯坦福大学的HCI课程开课了。完完整整的跟了下来，作业认真做，最后得分好像90%，记不清了，拿了个证，对交互设计的理解更系统了一些。5、做项目又有朋友给了我一个项目，又面临种种问题，自己动手解决问题，又浮现出来各种书，工具，网站等。6、做项目我是不是比较好运。。又来了一个项目，不说了。。7、随时抬头看看方向，经常思考另外：在你提问之前，建议先自己动手在网络上搜索答案，自己进行总结，培养自己动手解决问题的能力。
&&&&·&&·&&·&
87赞同反对，不会显示你的姓名
刚好最近在整理资料，所以就 补充几张作品，代表了从最初的临摹到实际项目到入门到还行的过程吧。这是大学时的一些图标界面临摹练习，毕业时，也是靠这个拿到了创业公司的offer的。&当时大四下学期，很多人已经开始忙着毕业设计忙着找工作时，我一个人每天早上起来去教室画图标界面，给自己的目标是一天画好一个图标。画完了就会宿舍玩游戏 ，就这样坚持了整整一个月，然后画出了上面的这些东西。当时主要是临摹，看到好看的图标界面就去画，没有想太多，就是要画的跟原作一模一样的。这是12年毕业后在创业公司做的东西。现在看，非常的糙。&当时一个人做设计，也不知道什么是细节，什么是排版，不知道怎么跟pm沟通。&从这个可以看出，临摹跟实际项目还是有很大的区别的。这是13年从设计公司出来后，搜狗的面试题。&当时是根据搜狗目前的浏览器进行概念设计。可以看出开始有了一些设计细节了&这个还是13年百度多看的一个面试。&13年人人的面试题。。&--------------以下是第一次回答----------------先说明两个观点吧：&观点1：老师和教程，都只是告诉你方向，怎么去走，能走多远，还是要靠个人的学习。&观点2：设计需要积累。多看多练，久之，才能看到成效。&OK，接下来说下，UI怎么学吧。&第一：临摹，临摹，临摹。（锻炼ps技巧）&看到好看的界面，保存下来，用PS打开，照葫芦画瓢，画出来。保证画的相似度90%以上。&刚开始建议，印着图画，熟练后，就开始脱稿，看着图片，然后用PS去画，最终的目标是，随便看到一个界面，就知道用什么方法，怎么样画出来。&第二：多下载app，玩玩玩。（锻炼逻辑交互）&打开AppStore—排行榜—类别，建议把音乐、新闻、社交、娱乐分类的免费排行榜，前10位的app，都下载下来，然后跑通每个app里面的每个流程，什么叫跑通，就是app里面可以点击的地方，都点一下，看看点进去的是什么页面，点点点，点到没有按钮可以点为止，然后思考每个页面之间是怎么切换的，页面布局是怎么样的、、、觉得好看的地方，按home键截图下来，然后PS打开，自己去画一遍。&第三：每天图片收集。（1是建立自己的素材库，2是培养审美）&dribble（单独页面较多，局部美），每天更新，收集自己觉得好看的图标界面，&behance（都是完整的案例作品，强烈推荐），可以每周看一次，收集里面好看的案例&花瓣，每天更新&每周至少收集100张图片，坚持两个月，800张图片，足够提高个人审美了，看到不错的，一定要在ps画一遍。。。&第四：下载PSD素材。&网上很多UI控件，常用矢量图标啥的，记得下载下来，方便以后作图时用，&推荐UI中国，365psd，&遇到好看界面的PSD，一定要下载下来，打开，看看别人是怎么效果实现。&多多分析高手的psd，会进步很快的。&关于PS&目前网上很多这块的教程，站酷、花瓣、、、多看，多跟着练习，&因为现在流行扁平化设计，所以反而对ps的要求降低了，因为不用做太多了特效啥的，&只要会简单的ps+平面排版，就足够了。（品牌运营设计除外，）&最后的推荐&dribble 偏界面类网站，&behance 案例比较完整，综合型设计网站&花瓣 运营活动专题，banner设计，&交互类 iPhone 人机界面设计规范 （苹果自家出的 看完这个基本就懂了交互是什么回事，UI要做的好，一定要懂交互，一定看这个，） 在百度上找的一个中文链接视觉设计基础 设计元素：平面设计样式 （书，我只推荐这本，讲了很多设计基础的书，这本书，我看了3遍）&ps教程&&这个是我大三，自学ps时，找的一些ps教程的网站，有点多，可以挑选自己喜欢的教程跟着学学，就好。
&&&&·&&·&&·&
32赞同反对，不会显示你的姓名
如果英文可以的话，加一个翻墙技能世界就很广阔了。-可以到treehouse登记一个14天免费体验，足够把ui类基本概念课程学完了。-然后可以下个sketch描图练手。-参加hiued等分享活动，认识人相互交流。-读apple和安卓的人机交互指南。
&&&&·&&·&&·&
625赞同反对，不会显示你的姓名
写在前面不缺钱，没有设计师熟人好友，找个培训班因该能少走不少弯路，节省不少时间。但是决定性因素在自己，就像上学同一个班，差别很大。就像2个差别很大的学校，也都有牛逼的学生。一、学习基础软件操作如果没有PS 基础，请百度搜索PS教程。（李涛的ps教程不错你可以看一下）（一边看，一边跟着做，动手很重要）（软件可以是别的比如AI，方法是一样的）二、磨练技能，动手练习找一些自己喜欢好看的图标、APP、网站截图下来，尽可能百分百临摹复制出来。（不懂就看教程，百度，进各种设计、UI群，问别人，问朋友。百度和教程是第一位的，尽量少问别人，问多了会烦的。尤其是重复的问题，新手有时候简单的操作记不住不会，因此勤做笔记，一个一个步骤细致一点，确保下次还能按照步骤重来一遍）这里临摹几套完整的APP很有必要，1、熟练你的软件操作能力2、对基本界面布局的理解3、发现很多不上手做就注意不到的问题最直接的效果就是你可以开始上手做东西，而不是做一些四不像的半成品。（因为你已经做了好几套成熟而完整的作品了，临摹的也是你做出来的）（很有必要强烈推荐）三、提高审美、拓展思路、开阔眼界浏览各种设计类的网站（站酷，优设、UI中国。。。）看别人的学习经验，下载收集设计类的素材。花瓣&&可以求粉么？&超大图标库可能这里是别人的飞机稿，练习，项目上线以后才发布的稿件、很多是对新趋势的尝试，产品的改版、还是相对完整的作品。这也是有一定价值的。而且网站还有更多的内容是别人的经验总结（快速解决某些问题，掌握某些知识的利器），教程和各种精美实用的素材。（不建议花太多精力学习——某些过于炫技的东西）四、规范自己的工作流程下载各平台的设计规范（安卓，苹果，WP）仔细研读，并在练习中加以注意，应用。这些东西，看个N遍都不为过。自己看着办。以上一 二 三 四 应同时穿插进行，没有优先级和那个更重要。自己觉得差不多了，就可以开始对已有的APP，网站进行修改设计，发现优点与不足。变成自己的东西。自己尝试做自己想法的东西，发表在 你经常浏览的设计网站上，接受别人的提意见，赞同，表扬。五、尝试自己做相对完整——图标、APP、网页这是对之前所学的总结，也是以后找工作的铺垫准备找实习的工作（这是一边工作一边学习的过程，私以为这个阶段学习比工资更为重要）如何找实习的工作？在这个阶段——这是一个技术活，作品可以展示很多东西1、创作的作品整理一下思路，可以附带一些文字内容。2、整理好你之前的临摹的作品简历应着重表现你单独完成的APP、网页的经历作品质量和数量体现-你学习的态度实习的工作&目的不是薪水，是学习。在实习中有了项目经验，公司对你好，有的学，那就好好干，对你不好，没啥好学的，那就跳槽。跳槽的重点，你仍然需要学习，所以尽量不要找只有一个你一个设计师的公司，没有交流没有学习不会愉快的。更具体的方法和资料以下为转载 ——以下为转载——&以下为转载——&以下为转载 ——以下为转载 ——&以下为转载 ———————————————————————————————————本人不是虎哥
写在之前：这篇教程内容比较多，如果你是新手，能坚持每个知识点都搞明白的话，起码要半年的时间~~！、如果你进来随便看一看就走了，那不能怪别人，是你自己不努力~！~~已经有很多新人在这里学完找到了高薪工作。
今天来谈谈这个话题，学UI第一阶段到底要掌握哪些知识和技能。我们先来划分一下啊，学UI要分几个阶段来学：
初级阶段——&&中级阶段——&&高级阶段
QQ群里大多数学生都还在入门阶段，感到很迷茫，不知道从哪里开始学起。网上的海量信息，全是教程，都不知道先看什么，后学什么。非常的无助。
小编拥有多年UI设计实战经验，大大小小也做了很多项目，借这个机会，给新人们指引一个方向，希望能帮助到大家。
入门阶段，就像一张白纸一样，干干净净，也很茫然。所以才会有那么多的培训学校，教给大家的都是最基础的入门的知识。
很多人在群里会问，我是自学还是报班啊。这个问题回答的嘴都软了。
答：你如果定性比较弱，需要人逼着才学的进去，又不差钱。那么就报班吧，这样入门比较快。选择学校的时候先去听听，在问问大家，不要被忽悠~！~如果你自学能力还不错，又差钱。那么还是自学好了。
下面我们来讲讲自学，因为小编从业多年都是自学。谁叫咱是穷孩子，交不起16800的学费。
话说这钱可以买一台高配的MACBOOK PRO 15
上边这2篇文章看完以后，是不是大致明白了一些什么了。先来说说UI设计入门阶段，用什么软件。工欲善其事，必先利其器
对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧。因为在日常工作中，用的最多的就是PS了，可以这么说，做UI界面基本上用它就够用了。所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧.软件安装（建议购买正版软件，以下下载仅供学习使用）
配置Photoshop参数，做UI更方便安装字体
还有这几个也要看看的：
好了，软件也安装好了，视频看了不少了。接下来就是要做各种练习了。前边UI到底是什么一文里面也说了，UI不光是画ICON,还要做界面。还有一些交互知识。
入门阶段，就先别想那么多，先画画简单的图标，做一些简单的界面吧。
这个时候，逮到什么画什么，比如打开百度的首页，这个界面不陌生吧，照着画一个出来。有人说了，这有什么好画的啊。你还别不服。很多入门级的新人，还真是做不出来。
有人连字体都做不出来，宋体12号 ，这个地方选无，就好了。
然后输入框的效果放大看看，用了内阴影。
然后是搜索按钮，用到了什么效果了。
渐变+描边+投影+内阴影做的白色高光（一个图层样式完成）
小小的一个按钮，尽然有这么多学问在里面。这就是UI的魅力所在。UI设计要先把什么搞明白，哪些PS技巧先学会
的知识点太多了，用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。
比如做CG原画的，做网页设计，照相馆处理照片的等等用到PS功能都不太一样。UI设计 入门阶段先要学会以下几个功能，一定要玩的很熟练第一：图层样式
上面做的百度这个页面，看着简单，却用到了好几种的图层样式。那么像下边这样的按钮。
用到的就更多了。所以想打怪升级，还是要把图层样式玩的很熟悉，入门阶段要分析的出来，用到了什么效果。
看到什么好的界面或是ICON，就立马分析一下，它用到什么图层样式？
相关的教程：
第二：图层的混合模式
第三：形状工具
第四：学会切图（常用的切图办法就在这里，先挨个学一遍，然后根据实际的情况选择相应的切图方法）
搞明白一些常规的界面尺寸和视觉规范移动端：
色彩的学习
PHOTOSHOP操作技巧开始做点什么（临摹阶段）
先来点励志的
开始练习！先学会技法。
常规UI切图(3种方法，各有各的好）移动端UI切图必备工具和教程
好了，差不多了，这些都挨个学一遍。就入门UI了。
学UI 要学的真的很多，这些都是基础的知识，这些掌握了，才能到达&中级阶段，加油！少年~~！
整理编写：
原文地址本人不是虎哥以上编辑于
&&&&·&&·&&·&
15赞同反对，不会显示你的姓名
我觉得对于非科班来说，主要的一个问题是：想得太多，做得太少。推荐几个网站吧，如果有心，你会自己发现更多有趣的东西。学UI网，，很适合新手。UI中国，，UI相关的作品。站酷，dribble，花瓣，behance，优设，dribble中国。另外，可以加一些QQ设计交流群，按照要求做作业，比如回音设计群。祝群主早些动手，成为大神。--------------------------------------------------------看了&的答案，请折叠我~~
&&&&·&&·&&·&
18赞同反对，不会显示你的姓名
看看我录给新手的视频，或许能解答你的疑问
&&&&·&&·&&·&
47赞同反对，不会显示你的姓名
推荐一个网站&从最基础的字体到界面体验交互视觉找工作都有相关课程没想到这么一个水答案也能混到不少赞，再推荐一个类似的网站吧请先去学好英语！请先去学好英语！请先去学好英语！其实多读读多背背单词就好了，都不需要学听说写的，而你能接触到的知识与信息量将会扩大不止几十倍。
&&&&·&&·&&·&
6赞同反对，不会显示你的姓名
先培养眼光，才能在临摹的时候发现自己的不足。只有和顶尖的人学习，才能成为优秀。有耐心，对齐像素比较恶心。有态度，做东西一定不要草草了事，比如临摹必须做到95%的相似，甚至超过原版效果。有想法，没事自己画点东西，做点东西。参见好作品的方法做一个自己的东西。有自己的东西才能成为顶级的嘛，跑远了。在工作中学习更好。站酷，追波，iconfans，在微博上关注他们更好。体验的话，去搜各个门户的用户体验中心，比如腾讯的cdc。另外500px虽然是摄影的但也很推荐，提高审美。书籍看大家都看的就行，一般只要看就能学到东西，（因为推荐的太多，而且自学肯定要看很多，所以懒得打了，请原谅）。
&&&&·&&·&&·&
170赞同反对，不会显示你的姓名
我的回答很短，只有五步：先学交互，再学设计软件，看大量设计案例，临摹案例，原创设计。1学交互：用app的时候看看人家的布局、功能。并自己用笔画画交互稿↓2看大量设计案例：、、&多看，看到你觉得自己眼高手低↓3看视频和教程学习PS等设计软件。↓4临摹案例：写实的拟物要临摹、扁平的设计要临摹、精彩的排版要临摹↓5原创设计：自己做一些虚拟案例，并发布到论坛和群里接受其他同行的评价。------------书籍推荐：（等我慢慢补充，书在公司里- -）这本《认知与设计》：讲交互基础的，内容比较接地气。我觉得挺无聊的，经常看睡着。但是有用，特别是看了以后再玩app，会有一些理论基础知识清晰地浮现。原研哉的《设计中的设计》这本书就是MUJI的设计师讲设计，提升逼格看看（初学者一定要眼高手低）因为案例好看，比较看得进去。
&&&&·&&·&&·&
5赞同反对，不会显示你的姓名
楼上回答的都很不错，刚写的总结，补充些UI设计注意事项：
一致性原则
坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。
-保持字体及颜色一致，避免一套主题出现多个字体;
-不可修改的字段，统一用灰色文字显示。
-保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。
-在包含必须与选填的页面中，必须在必填项旁边给出醒目标识(*);
-各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等，在用户输入有误时给出明确提示。
-可点击的按钮、链接需要切换鼠标手势至手型;
保持功能及内容描述一致
-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。
准确性原则
使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。
显示有意义的出错信息，而不是单纯的程序错误代码。
避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。
使用缩进和文本来辅助理解。
使用用户语言词汇，而不是单纯的专业计算机术语。
高效地使用显示器的显示空间，但要避免空间过于拥挤。
保持语言的一致性，如“确定”对应“取消”,“是”对应“否”。
布局合理化原则
在进行UI设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。
-保持菜单简洁性及分类的准确性，避免菜单深度超过3层。
-菜单中功能是需要打开一个新页面来完成的，需要在菜单名字后面加上“…”。【只适用于C/S架构，B/S请无视】。
确认操作按钮放置左边，取消或关闭按钮放置于右边。
-未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会。
-所有文字内容排版避免贴边显示(页面边缘)，尽量保持10-20像素的间距并在垂直方向上居中对齐;各控件元素间也保持至少10像素以上的间距，并确保控件元素不紧贴于页面边沿。
表格数据列表
-字符型数据保持左对齐，数值型右对齐(方便阅读对比)，并根据字段要求，统一显示小数位位数。
-页面布局设计时应避免出现横向滚动条。
页面导航(面包屑导航)
-在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导航结构，如：首页&新闻中心&欧科智能招商服务平台正式发布，其中带下划线部分为可点击链接。
信息提示窗口
-信息提示窗口应位于当前页面的居中位置，并适当弱化背景层以减少信息干扰，让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。
系统操作合理性原则
尽量确保用户在不使用鼠标(只使用键盘)的情况下也可以流畅地完成一些常用的业务操作，各控件间可以通过Tab键进行切换，并将可编辑的文本全选处理。
查询检索类页面，在查询条件输入框内按回车应该自动触发查询操作。
在进行一些不可逆或者删除操作时应该有信息提示用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。
信息提示窗口的“确认”及“取消”按钮需要分别映射键盘按键“Enter”和“ESC”。
避免使用鼠标双击动作，不仅会增加用户操作难度，还可能会引过用户误会，认为功能点击无效。
表单录入页面，需要把输入焦点定位到第一个输入项。用户通过Tab键可以在输入框或操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。
系统响应时间原则
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：
2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作;
5秒以上显示处理窗口，或显示进度条;
一个长时间的处理完成时应给予完成警告信息。
&&&&·&&·&&·&
107赞同反对，不会显示你的姓名
题主的问题是零基础自学UI设计1.学习PS因为零基础嘛，推荐李涛的ps教程，主要是讲的听的进去。2.临摹每天临摹一张自己喜欢的界面UI（dribbble很多），由简到繁！但是要坚持。临摹三个月，你就有90张了。3.实践比如把站酷尝试做成一个app飞机稿，做详细完整一点。这个阶段得找一个业内人士指点一下，一直修改到完整。4.找实习把之前的90临摹的排个版（应该比较壮观了），尝试的那个app也完整的梳理成一个文档。做成作品集开始找实习。这个作品集可以体现你两个特质：1.态度不错，有点基本功，有毅力。2.有点点产品的意识和感觉。不要在乎工资和公司规模，但是关注一下你的上司和工作内容。5.做真实项目找到实习后，就态度好一点，积极一点，没什么可说的了。实习结束，勉强简单的入门了吧。我女朋友就是这样，半年前还在一个景观公司做景观设计，目前已经在一个比较大的互联网公司做移动UI设计。其实机会也很重要，更重要的还是要勤奋一点！
&&&&·&&·&&·&
1赞同反对，不会显示你的姓名
先了解是什么。再了解怎么做。
&&&&·&&·&&·&
4赞同反对，不会显示你的姓名
啊，这个问题还挺多的，在另外一个问题里刚回答过昨天刚好从《给女朋友的 iOS 开发教程》里摘出来三期做了一下设计的合辑私以为作为入门应该是很不错的，Enjoy另外 《认知与设计——理解 UI 设计准则》那本书值得反复看一看
&&&&·&&·&&·&
2赞同反对，不会显示你的姓名
&&&&·&&·&&·&
8赞同反对，不会显示你的姓名
我看大家回答的五花八门，提这个问题的同学，基本上是想进入ui设计行业，说那些大道理什么提高审美没有任何帮助ok？？？让我来说：1，学会用设计软件，ps，ai，如果你的电脑是mac，可以试着学习sketch（ui设计的软件）；2，试着画一些图标，按钮，随便找个软件，看看里面的图标自己能不能画出来；3，上面两条如果没问题的话，就可以找ui设计的工作了，这个工作是需要自己去和安卓ios开发人员配合的工作，当你以新手的身份进入工作，开发人员会告诉你用什么尺寸的界面，用多大的切图，怎么命名，在这个初级阶段，学的很快，进步很快～～就这样！
&&&&·&&·&&·&
发表评论：
馆藏&76427
TA的推荐TA的最新馆藏