前端设计入门

UI：全写User Interface，简称用户界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计。 前端：是创建Web页面或app等前端界面呈现给用户的过程。通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。通俗一点来讲，前端就是客服，主要跟顾客（用户）交流。

按照项目流程，一般是UI设计师设计好产品界面，前端工程师通过编码实现界面。通俗来说，UI设计师好比服装设计师，而开发工程师好比裁缝。

前端主要是需要掌握前端语言、框架等，都是编码的工作，而UI设计是属于视觉设计，需要具备设计基础、设计思维、设计技能，两者不是一个类别。

前端知识

UI框架

需要指出，Bootstrap虽然使用广泛，但只能作为UI框架。绝大多数的网站有自己的设计风格，因此也应该有自己的设计语言。前端开发和设计师可以参考这些产品的设计规范，在项目中逐渐形成自己的设计语言和设计规范。依据项目中的经验，设计规范越早形成，越能够提高开发和设计效率和质量。一般项目中都会有自己的样式规范Style Guide来指导和统一设计和开发规范，越庞大的项目越是如此。

目前比较成熟的关于设计语言的产品有谷歌的MaterialDesign和蚂蚁金服的Ant Design 。Material Design和Ant Design不仅具有严格的设计规范，而且也给出了设计框架。

• https://ant.design/docs/spec/introduce-cn
• https://material.io/design

组件化

另外值得一提的是组件化。组件化在项目中不仅作为驱动开发的方式，也是组成设计语言和设计规范的元素。在实现样式规范Style Guide的过程中，组件化越成熟，可复用程度越高，设计语言也越丰富。因此，目前大部分项目，设计语言和样式规范是相辅相承的。

如何学习

作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。

入门篇（HTML/CSS）

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

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

入门篇（JavaScript/jQuery）

推荐你使用 w3school 在线教程 与 http://www.codecademy.com/ 进行学习，如果学习得顺利，你还可以尝试使用各种丰富的 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。

渐进式编程。对于比较复杂的功能/需求。不要想着一气呵成。先实现一个核心，每次往上面加细节，有点像绘画。

一个是JS语言部分。语言要达到比较深入的程度（感觉精通很难），还是要看一些经典的书。推荐 You Don't Know Javascript系列和Eloquent Javascript，这两本推荐看原文。另外就是 JavaScript权威指南（这个其实比较基础，但是也是JS必读系列） 和 JavaScript高级程序设计 （这个自己还没看，内容有点多，不过也有前端朋友推荐）。这里没列出CSS，HTML，是由于问题是要达到精通水平，就默认已经懂了。

另一个框架语言部分。不需要全部都‘精通’，React，Angular4，Vue最好掌握一个框架（这里包括框架语言本身和衍生的框架，比如React，Redux，Jest等），其他再学起来也就非常容易上手了。框架学习自我感觉就两点：看文档、项目中实践！

还有就是各种第三方库和工具，这些就是平时项目中积累就好了，最好也关注和了解一下新的东西，可以随时拿来使用或者借鉴。

Web 前端设计师们都用什么工具和流程设计出好的 Web 页面

• sublime text 3
• 火狐 （Firebug 等等）
• Chrome及其相关插件
• Axure RP 设计原型稿工具
• Color Schemer Studio 配（取）色
• Adobe kuler 配（取）色
• 各种浏览器（IETester+原生）、虚拟机（用来测试各种操作系统和各种浏览器），也许还需要各种手机..
• F5自动刷新 (Web开发免刷新工具)

前端页面可视化设计工具总结

在进行网站设计时，我们可以通过借助现有的html模板，在适当地修改后，变为适合需求的web界面。

Bootstrap Designer

一个在线设计工具，可以帮你生成漂亮的基于Bootstrap框架的HTML5模板。

bootswatch

一个在线的html代码生成网站

https://bootswatch.com/cosmo/

Bootsnipp

相传是一个针对Web设计师和开发者的前端元素库，任何使用Bootstrap框架的开发者都可以找到所需的Web元素。

Layoutit

一个在线可视化拖动布局工具， 它可以简单而又快速搭建Bootstrap响应式布局，操作基本是使用拖动方式来完成，很简单，而元素都是基于Bootstrap框架集成的， 所以这工具很适合Web设计师和前端开发人员使用，快捷方便

更多工具： https://zhuanlan.zhihu.com/p/23505223

性能优化的方案

一般来说。性能优化没什么系统化的文档供人学习。完全靠一些经验和自己的实践。

我们常提到性能好坏是由什么来衡量呢？

访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长

非首次情况下，命中缓存的加载缓存数据 --> 渲染出完整页面的时长。

一般我从下面几个方面着手去做，一般问题都不大。

减小资源（静态资源，后端加载的数据）大小

• 压缩代码HTML/CSS/JS
• 压缩图片、音视频大小
• Tree-Sharking 消除无用代码

以上webpack都可以搞定

避免同一时间的过多次数请求

• CSS 实现雪碧图：使用background-position共享一张图
• 图片懒加载：监听滚动后offsetTop, 使用data-src 替换 src（真实路径）
• 列表懒加载（分批加载）：监听滚动后offsetTop， 发送请求加载下一页的数据
• 路由懒加载
• 代码分包分块加载（webpack）
• 预加载技术
• 小程序分包、预下载等。

利用缓存（空间换时间）

• CDN 内容分发：获取更近网络节点缓存下来的静态资源
• 浏览器缓存（自带）
• 部分资源保存在LocalStorage或者APP缓存中（手动操作）

其他

• SSR 服务端渲染：解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题。

这些都可以去实践的，难度不大。难度大的地方可能是 dom 节点成千上万的时候渲染的性能问题。这个场景遇到的很少，方案很多。不同人有不同解决方案，有功夫可以自己去尝试尝试。