最近,一直在做移动端 web 开发,记录一下使用的前端框架。
目前使用过两个,一个是 Amaze UI,一个是 WeUI 。
UI 是什么意思 ?
这是百度百科的定义:UI 即 User Interface( 用户界面)的简称。泛指用户的操作界面,UI 设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的 UI 不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
UI 框架又是什么意思 ?
UI 是用户界面的英文简称,那么 UI 框架又是什么呢?框架又可以理解为模板,UI 框架也就是 UI 模板。这和编程里的封装有些类似,就是说一些 UI 设计的常用效果已经被别人封装成了 UI 框架,你想实现哪个效果只要直接调用就行,不需要太纠结于底层实现。例如:一个提示框。
以下转自知乎,地址如下: https://zhuanlan.zhihu.com/p/22707913 ,感谢原作者!
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。在移动Web开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2016年最流行的移动Web前端UI框架分享给大家。
Amaze UI
Amaze UI是一个轻量级(所有CSS和JS gzip后100kB左右)、Mobile first的前端框架, 基于开源社区流行前端框架编写。
Amaze UI Github地址:GitHub - amazeui/amazeui: Amaze UI, a mobile-first and modular front-end framework.
Amaze UI官网:Amaze UI | 中国首个开源 HTML5 跨屏前端框架
Frozen UI
Frozen UI 是一个简单易用,轻量快捷,为移动端服务的前端框架,专注于移动web的UI框架,基于腾讯手机QQ规范。
Frozen UI Github地址:FrozenUI - 专注于移动web的UI框架
SUI
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。
SUI官网:http://sui.taobao.org/
ZUI
ZUI是一个开源前端实践方案,帮助你快速构现代跨屏应用。
ZUI Github地址:GitHub - easysoft/zui: ZUI is an HTML5 front UI framework.
H-ui
H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站。
H-ui Github地址:jackying (辉哥) · GitHub
pure.css
pure.css 一组小,响应CSS模块,您可以使用在每一个web项目
pure.css Github地址:GitHub - yahoo/pure: A set of small, responsive CSS modules that you can use in every web project.
UIkit
UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架,可快速构建强大的前端web界面。UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式设计可在多种环境中使用等特点。UIkit中文网为广大国内开发者提供详尽的中文文档、代码实例等,帮助开发者快速掌握并使用这一框架。
UIkit Github地址:GitHub - uikit/uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces.
Bootstrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。
Bootstrap中文网:Bootstrap中文网
拼图
拼图号称中国版的Bootstrap,优秀的跨屏响应式布局前端开发框架(CSS框架),国内前端框架先驱及领导者,能自动适应电脑、平板、手机等设备,让web前端开发更简单、快速、便捷。
拼图官网:http://www.pintuer.com/
Plane UI
Plane UI是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。
Plane UI Github地址:Plane UI - HTML5 跨终端响应式前端界面框架
Foundation
Foundation 5是我们最快、最好的构建。多用的功能来帮助编写代码和学习比以往任何时候都要快。
Foundation官网:Foundation | The most advanced responsive front-end framework in the world.
mui
mui是最接近原生APP体验的高性能框架。
mui Github地址:GitHub - dcloudio/mui: 最接近原生APP体验的高性能框架
WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。
WeUI Github地址:GitHub - weui/weui: A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
Arale
Arale 立足于支付宝的前端需求和国内前端社区,基于Sea.js和spm生态圈,致力发展小而美的前端模块架构,建立了一套从编码测试到部署的开发体系, 是一个开放、简单、易用的前端解决方案。Arale 模块均兼容于 IE6+ 以及 Chrome/Firefox/Safari/Opera 的最新稳定版。
Arale官网:http://aralejs.org/
Semantic UI
Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
Semantic UI Github地址:GitHub - Semantic-Org/Semantic-UI-pt-br: Semantic dá poder a designers e desenvolvedores através da criação de um vocabulário comum para UI
Jingle UI
Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh……),帮助您更方便的开发移动应用。
Jingle UI Github地址:GitHub - shixy/Jingle: Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......),帮助您更方便的开发移动应用。
CMUI
CMUI 是一个专攻移动网页的 UI 框架,它提供了丰富的组件和简洁的接口,开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰,从而腾出更多精力投入到业务开发中。
CMUI Github地址:GitHub - CMUI/CMUI: Lightweight UI solution for mobile web.
以上是在长期工作中总结出来的移动WEB UI框架资源,大家可以根据自己的业务需求去选择合适的WEB UI框架。在此不评价任何一个框架的好坏,存在就有他的合理性,总有他适合的场景。感谢这些项目的贡献者,感谢开源力量!