2019年最流行的10个前端框架

旧城等待， 2021-12-20 07:09 428阅读 0赞

From: [http://blog.sina.com.cn/s/blog\_18337e9c40102yt1x.html][http_blog.sina.com.cn_s_blog_18337e9c40102yt1x.html]

[![0075EqBSzy7rMtWRHPpf7][]][0075EqBSzy7rMtWRHPpf7 1] 2019年最流行的10个前端框架

从去年下半年开始，互联网行业慢慢进入寒冬，一些设计师也不得不重新找工作。关于求职这个事情，UI黑客之前写过一篇文章《面试了50多位UI设计师，我总结了这些求职技巧！》，大家可以参考下。打铁还需自身硬，找工作最重要的还是靠自身的能力。

那么究竟需要具备什么样的能力能得到公司的青睐呢？

就拿市面上众多的 UI 培训班来说吧，作为盈利性机构，培训班的课程结构肯定是和当下公司实际需求挂钩的。毕业的学生被公司录用越多，口碑效应就会出现，那么报班的生源也会越多，培训机构自然赚的越多。

越来越多的培训机构开设了前端课程，这就说明公司实际需求大概也是这样的。现在求职，不说自己会点前端都不好意思面试，UI设计师学前端也是时下的趋势。

实际上，在公司项目中，设计师了解前端，会极大提升和程序员的协作效率，减少技术信息不对称的现象。如果在一个网站项目中，程序员还在跟设计师讲解最基本的 html、css、盒子模型知识，那开发效率就可想而知了。

很多公司的项目，都采用了前端框架来开发，如果设计师了解这些框架，能在框架的结构基础上进行 UI 设计，那无疑会提高项目整体的开发效率。下面就一起了解下常见的前端框架，说不定面试的时候能帮大忙。

## Ant Design ##

网站链接：https://ant.design/index-cn

[![0075EqBSzy7rMtf8kDT89][]][0075EqBSzy7rMtf8kDT89 1]Ant Design

蚂蚁金服出品，非常著名的框架。就算你不了解前端，也会在公司的项目中多少听到程序员说起过。目前很多公司都在用，已经很成熟。而且提供了对设计师友好的 Sketch 规范文件，可以直接拿来用。

Ant Design 是基于 React 开发的，并不是传统的 html。React 起源于 Facebook 的内部项目，现在已经成了一个很流行的开发工具。

理想的项目开发流程是，设计师和程序员一起熟悉 Ant Design 的各种样式，设计师不再随意设计，而是基于框架的基础样式进行设计创新。这样程序员在进行 UI设计稿还原的时候，能极大提高开发效率。

现在很多项目都使用了 Ant Design，一些公司在招聘 UI设计师的时候甚至会写上：了解 Ant Design 规范的优先考虑。所以这个框架建议设计师都好好看一下。

## Bootstrap ##

网站链接：[http://www.bootcss.com/][http_www.bootcss.com]

[![0075EqBSzy7rMtijFi46c][]][0075EqBSzy7rMtijFi46c 1]Bootstrap

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包，是一个 CSS/HTML 框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。

很多设计师在学前端的时候，都会接触到这个框架，甚至培训机构有专门的课程，所以重要性可见一斑。

## Taro UI ##

网站链接：https://taro-ui.aotu.io/

[![0075EqBSzy7rMtkIBK47c][]][0075EqBSzy7rMtkIBK47c 1]Taro UI

Taro UI，一套基于 Taro 框架开发的多端UI组件库，可以在微信小程序/H5/ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。

现在一个产品要求在 iOS、安卓、小程序、h5 等多端运行，针对不同的客户端开发不同的代码会产生巨大的成本，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，就可以只写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码，节约成本。

## iView ##

网站链接：https://www.iviewui.com/

[![0075EqBSzy7rMtolvxf41][]][0075EqBSzy7rMtolvxf41 1]iView

一套基于 Vue.js 的高质量 UI组件库。Vue.js 是一个 JavaScriptMVVM 库，是一套构建用户界面的渐进式框架。

在网站中可以看到数量众多的 UI组件和对应代码，本质上和我们制作 UI规范是一样的。

## LuLu UI ##

网站链接：https://l-ui.com/

[![0075EqBSzy7rMtqDA6652][]][0075EqBSzy7rMtqDA6652 1]LU LU UI

LuLu UI，是一个基于 jQuery，针对 PC 网站，兼容 ie8、ie7 的前端 UI 框架，包含很多静态或动态 UI 组件。对设计师非常友好，只需要简单的 html、css 知识就能快速上手使用。

区别于 Ant design 面向中后台开发，LuLu UI 非常适合面向外部用户的网站开发。会简单的 HTML 和 jQuery 就可以上手了，不像一些流行框架，需要较多的学习成本。

## QMUI ##

网站链接：https://qmuiteam.com/

[![0075EqBSzy7rMtt9aOwcc][]][0075EqBSzy7rMtt9aOwcc 1]QMUI

QMUI，腾讯出品，分为 Web、iOS、安卓三个端，都有相应的 dome 下载安装，设计师可以下载安卓和 iOS 应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。

## Element ##

网站链接：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]

[![0075EqBSzy7rMtvO7hQae][]][0075EqBSzy7rMtvO7hQae 1]Element

饿了么出品，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，很适合开发后台产品。有意思的是里面的默认图文数据很多都是食物……

## Fusion Design ##

网站链接：https://fusion.design/

[![0075EqBSzy7rMtytJPb31][]][0075EqBSzy7rMtytJPb31 1]Fusion Design

阿里推出的一个适合设计、技术共同使用的设计规范框架。基本目的也是为了让设计师在一个标准框架内设计界面，同时也提供了 Sketch 插件，让设计的组件直接转化为代码，技术直接调用。

## WeUI ##

网站链接：https://weui.io/

[![0075EqBSzy7rMtzm5Wb8b][]][0075EqBSzy7rMtzm5Wb8b 1]WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

这个小巧的框架提供了微信页面常用的组件，我们在设计微信风格的项目时，可以参考使用。

## Framework 7 ##

网站链接：[http://www.framework7.cn/][http_www.framework7.cn]

[![0075EqBSzy7rMtAArla8c][]][0075EqBSzy7rMtAArla8c 1]Framework 7

一个简单、免费的 HTML 框架，主要用来构建移动端 web 应用，分为 iOS 和安卓两种风格。

其本身的结构非常简单，使用了最基础的 html、css 和 js 构建，很容易上手使用。也可以用来作为原型开发工具，迅速创建一个应用的原型。

## 总结 ##

此外还有很多其他的前端框架，以上10个框架其实不需要设计师非常深入去了解，最基本的要求是设计师对其内容、样式、组件有个大致的认知即可。在和技术协作的过程中，知道哪些组件不需要额外设计，哪些组件可以进行样式扩展。

就比如设计师去学习前端，并不是去代替前端的工作，而是对 UI 界面有个更深层次的认知，设计的同时会考虑到界面的交互性、扩展性、可用性。犹如庖丁解牛，透过表象看到结构本质，提高自己的界面把控能力。

转载自：https://www.uisdc.com/2019-10-front-frame

[http_blog.sina.com.cn_s_blog_18337e9c40102yt1x.html]: http://blog.sina.com.cn/s/blog_18337e9c40102yt1x.html
[0075EqBSzy7rMtWRHPpf7]: /images/20211220/5641a12bd6584cf2a30a37f755b025da.png
[0075EqBSzy7rMtWRHPpf7 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtWRHPpf7
[0075EqBSzy7rMtf8kDT89]: /images/20211220/d7ee97deec95448197c3fa11c54de4c1.png
[0075EqBSzy7rMtf8kDT89 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtf8kDT89
[http_www.bootcss.com]: http://www.bootcss.com/
[0075EqBSzy7rMtijFi46c]: /images/20211220/f958b41028d444b7973250bf46ba6881.png
[0075EqBSzy7rMtijFi46c 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtijFi46c
[0075EqBSzy7rMtkIBK47c]: /images/20211220/e76c3ad7df4d446b9abf3514b240b565.png
[0075EqBSzy7rMtkIBK47c 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtkIBK47c
[0075EqBSzy7rMtolvxf41]: /images/20211220/d9b54c6a934547e8b28615b5611a4f00.png
[0075EqBSzy7rMtolvxf41 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtolvxf41
[0075EqBSzy7rMtqDA6652]: /images/20211220/353b1f230cba40f1a9bd2f323286f4d1.png
[0075EqBSzy7rMtqDA6652 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtqDA6652
[0075EqBSzy7rMtt9aOwcc]: /images/20211220/78e7042f3f834c06a1bb73221cb04477.png
[0075EqBSzy7rMtt9aOwcc 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtt9aOwcc
[http_element-cn.eleme.io_zh-CN]: http://element-cn.eleme.io/#/zh-CN
[0075EqBSzy7rMtvO7hQae]: /images/20211220/af29fe8a3d3c4b3eb58be69ba8340d76.png
[0075EqBSzy7rMtvO7hQae 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtvO7hQae
[0075EqBSzy7rMtytJPb31]: /images/20211220/e9fcc89c4bbd4b8a9876d38c97e7a72a.png
[0075EqBSzy7rMtytJPb31 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtytJPb31
[0075EqBSzy7rMtzm5Wb8b]: /images/20211220/3e072bf21fdf49149194592de96bcf41.png
[0075EqBSzy7rMtzm5Wb8b 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtzm5Wb8b
[http_www.framework7.cn]: http://www.framework7.cn/
[0075EqBSzy7rMtAArla8c]: /images/20211220/113596c7e1a746b783c954f3a229ae94.png
[0075EqBSzy7rMtAArla8c 1]: http://blog.photo.sina.com.cn/showpic.html#url=http://album.sina.com.cn/pic/0075EqBSzy7rMtAArla8c