很多公司项目中,都采用了前端框架进行开发,而设计师了解前端,能在框架结构基础上进行设计,会极大提升和程序员协作的效率,提高项目整体开发啊效率,减少信息不对称的现象。
下面整理了常见的前端框架,一起了解一下吧~
Ant Design
网站链接: https://ant.design/index-cn
蚂蚁金服出品,非常著名的框架,基于React开发。提供了很多对设计师友好的sketch、psd规范源文件,以及Axure组件,可以直接拿来用。
Element
网站链接:http://element-cn.eleme.io/#/zh-CN
饿了么出品,基于Vue2.0的桌面组件库,很适合开发后台产品。
Bootstrap
网站链接:http://www.bootcss.com/
Bootstrap是Twitter推出的一个用于前端开发的开源工具包,是一个CSS/HTML框架,目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
Taro UI
网站链接: https://taro-ui.aotu.io/
Taro UI,一套基于 Taro 框架开发的多端 UI 组件库,可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
使用 Taro,就可以只写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码,节约成本。
iView
网站链接:https://www.iviewui.com/
一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。
在网站中可以看到数量众多的UI组件和对应代码,本质上和我们制作UI规范是一样的。
WeUI
网站链接:https://weui.io/
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
这个小巧的框架提供了微信页面常用的组件,我们在设计微信风格的项目时,可以参考使用。
LuLu UI
网站链接:https://l-ui.com/
LuLu UI,是一个基于jQuery,针对PC网站,兼容ie8、ie7的前端UI框架,包含很多静态或动态UI组件。区别于Ant design面向中后台开发,LuLu UI非常适合面向外部用户的网站开发。对设计师非常友好,只需要简单的html、css知识就能快速上手使用。
QMUI
网站链接:https://qmuiteam.com/
QMUI,腾讯出品,分为Web、iOS、安卓三个端,都有相应的dome下载安装,设计师可以下载安卓和iOS应用,经常看看里面的组件,熟悉后,和技术的协作会更有效率。
Fusion Design
网站链接:https://fusion.design/
阿里推出的一个适合设计、技术共同使用的设计规范框架。基本目的也是为了让设计师在一个标准框架内设计界面,同时也提供了Sketch插件,让设计的组件直接转化为代码,技术直接调用。
Framework 7
网站链接:http://www.framework7.cn/
一个简单、免费的HTML框架,主要用来构建移动端web应用,分为iOS和安卓两种风格。
其本身的结构非常简单,使用了最基础的html、css和js构建,很容易上手使用。也可以用来作为原型开发工具,迅速创建一个应用的原型。
总结:
设计师了解这些框架之后,对其内容、样式、组件有个大致认知,在工作中不需要在花大力气去额外设计组件,而是基于框架的基础样式去设计创新,程序员在实现UI效果时也方便,极大提高工作效率。
另外,设计的同时要多与对接的程序员产品沟通,考虑界面的交互性、可扩展性等,提升自己对界面的把控能力。
PS:请大力点赞分享,随手点击“看一看“,么么扎~