2019年,UI设计师应该了解的这10个前端框架

用户头像
北京/UX设计师/7年前/1390浏览
2019年,UI设计师应该了解的这10个前端框架
用户头像
UI黑客

现在越来越多的公司开始要求UI设计师掌握基本的前端技能,本文给大家列举了2019年10个比较常用的前端框架,一起了解下。

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


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


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


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


undefined

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


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



Ant Design

https://ant.design/index-cn

undefined

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


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


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


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



Bootstrap

http://www.bootcss.com/

undefined

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

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


Taro UI

https://taro-ui.aotu.io/

undefined

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


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


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



iView

https://www.iviewui.com/

undefined

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


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



LuLu UI

https://l-ui.com/

undefined

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


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



QMUI

https://qmuiteam.com/

undefined

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



Element

http://element-cn.eleme.io/#/zh-CN

undefined

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



Fusion Design

https://fusion.design/

undefined

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



WeUI

https://weui.io/

undefined

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


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



Framework 7

http://www.framework7.cn/

undefined

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

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



总结


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


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


END


15
阅读原文
|
举报
|
53
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
中国传统纹样创新图案设计
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
活动,优惠,平面,海报,特惠
牛奶乳液层次平面平铺平面
倒计时,海报,平面
金色颗粒质地的平面
海底世界插画
平面风格黄绿色系花朵装饰
平面设计 吊牌设计
空的平台平面和自然景观
水蜜桃和李子的平面水果图案
平面男孩喝咖啡插画设计
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
平面书法字手写
金色颗粒质地的平面
空的平台平面和自然景观
金色颗粒质地的平面
金色颗粒质地的平面
城市园林平面布局航拍
金色颗粒质地的平面
古风平面仕女与瓷器
城阙凡花
你可能喜欢
大家都在看
登录注册