请关注不错研究室
在公司项目中，设计师了解前端，会极大提升和程序员的协作效率，减少技术信息不对称的现象。如果在一个网站项目中，程序员还在跟设计师讲解最基本的html、css、盒子模型知识，那开发效率就可想而知了。
很多公司的项目，都采用了前端框架来开发，如果设计师了解这些框架，能在框架的结构基础上进行UI设计，那无疑会提高项目整体的开发效率。下面就一起了解下常见的前端框架，说不定面试的时候能帮大忙。
Ant Design
https://ant.design/index-cn
蚂蚁金服出品，非常著名的框架。就算你不了解前端，也会在公司的项目中多少听到程序员说起过。目前很多公司都在用，已经很成熟。而且提供了对设计师友好的Sketch规范文件，可以直接拿来用。
Ant Design是基于React开发的，并不是传统的html。React 起源于 Facebook 的内部项目，现在已经成了一个很流行的开发工具。
理想的项目开发流程是，设计师和程序员一起熟悉Ant Design的各种样式，设计师不再随意设计，而是基于框架的基础样式进行设计创新。这样程序员在进行UI设计稿还原的时候，能极大提高开发效率。
现在很多项目都使用了Ant Design，一些公司在招聘UI设计师的时候甚至会写上：了解Ant Design规范的优先考虑。所以这个框架建议设计师都好好看一下。
Bootstrap
http://www.bootcss.com/
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
很多设计师在学前端的时候，都会接触到这个框架，甚至培训机构有专门的课程，所以重要性可见一斑。
Taro UI
https://taro-ui.aotu.io/
Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
现在一个产品要求在iOS、安卓、小程序、h5等多端运行，针对不同的客户端开发不同的代码会产生巨大的成本，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro，就可以只写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码，节约成本。
iView
https://www.iviewui.com/
一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
在网站中可以看到数量众多的UI组件和对应代码，本质上和我们制作UI规范是一样的。
LuLu UI
https://l-ui.com/
LuLu UI，是一个基于jQuery，针对PC网站，兼容ie8、ie7的前端UI框架，包含很多静态或动态UI组件。对设计师非常友好，只需要简单的html、css知识就能快速上手使用。
区别于Ant design面向中后台开发，LuLu UI非常适合面向外部用户的网站开发。会简单HTML和jQuery就可以上手了，不像一些流行框架，需要较多的学习成本。
QMUI
https://qmuiteam.com/
QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装，设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。
Element
http://element-cn.eleme.io/#/zh-CN
饿了么出品，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，很适合开发后台产品。有意思的是里面的默认图文数据很多都是食物……
Fusion Design
https://fusion.design/
阿里推出的一个适合设计、技术共同使用的设计规范框架。基本目的也是为了让设计师在一个标准框架内设计界面，同时也提供了Sketch插件，让设计的组件直接转化为代码，技术直接调用。
WeUI
https://weui.io/
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
这个小巧的框架提供了微信页面常用的组件，我们在设计微信风格的项目时，可以参考使用。
Framework 7
http://www.framework7.cn/
一个简单、免费的HTML框架，主要用来构建移动端web应用，分为iOS和安卓两种风格。
其本身的结构非常简单，使用了最基础的html、css和js构建，很容易上手使用。也可以用来作为原型开发工具，迅速创建一个应用的原型。
总结
此外还有很多其他的前端框架，以上10个框架其实不需要设计师非常深入去了解，最基本的要求是设计师对其内容、样式、组件有个大致的认知即可。在和技术协作的过程中，知道哪些组件不需要额外设计，哪些组件可以进行样式扩展。
就比如设计师去学习前端，并不是去代替前端的工作，而是对UI界面有个更深层次的认知。设计的同时会考虑到界面的交互性、扩展性、可用性。犹如庖丁解牛，透过表象看到结构本质，提高自己的界面把控能力。
作者：hanxu121103（微信号）
未经作者许可，禁止转载。
如果你觉得这篇文章有所帮助
一定记得分享给身边的朋友哈~
哦，对了
别忘了关注「不错研究室」公众号
每一篇，都不错。
关于不错研究室
一个能看•直播，能看•干货的组织。一个定期推荐不错的全球设计师•行业大咖进行直播分享的圈子。一个每天分享设计干货的自媒体。每一篇都很不错。
