移动webapp前端UI构成和四个好用的移动UI框架

目前从事webAPP开发和移动UI设计的人很多啦，同时也很多公司推出了比较好用的移动webAPP UI前端框架。

下面25学堂跟大家来普及下webAPP 前端UI的构成部分。

移动UI的话，分为基础样式和基础组件两部分。

基础样式:

建议这一部分可以用一些轻量级的库如Purecss（http://purecss.io），采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。

基础组件:

基础组件主要是button,input,form等，可以在http://bootcss.com看到很多的组件库，按照需要选择一部分，在做下自定义修改配色，阴影，边框什么的，动画的话就用animate.css吧。

交互设计:

是webapp的难点和问题所在，个人建议，在移动端还是尽可能的减少复杂的交互内容，更多的做内容呈现和基础的功能实现（考虑兼容问题和移动网络流量，移动网络质量等因素）

附加内容:

响应式设计也是要分场合的，在简单的内容呈现如博客，可以考虑响应式，不过针对业务系统，还是建议做一套移动版本和对应的桌面版本，这是个人的一些看法，希望有用。

目前来说好用的webAPP框架很多。25学堂跟大伙推荐几个：

1、Jingle  酷站官网 Jingle-html5 webapp framework

Jingle UI是一个基于html5、css3开发轻量级的移动 webapp 框架，提供一些基本交互方式，常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......)，帮助您更方便的开发移动应用。

2、jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手很容易。

官方网址：http://www.jqmobi.com/

具体移动webAPP开发案例：http://blog.sina.com.cn/s/blog_3f1fc8950101h4nf.html

3、app-UI 是一个免费开源的可重用 UI 组件容器的集合，对开发移动的 Web 应用非常有用，可使用 HTML+JavaScript 开发交互式的移动 Web 应用。app-UI 可很好的跟 PhoneGap 集成。

App-UI是一个网络和移动开发人员创建HTML和JavaScript时可重复使用的“application container”用户界面组件，App-UI是那些针对移动设备的交互式应用程序可能会有所帮助的集合。App-UI与PhoneGap的应用有些雷同，App-UI可以很容易地使用CSS样式/自定义。

http://triceam.github.com/app-UI/

4、jQTouch框架

jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快，优点是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少，需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。

在线演示：http://www.jqtouch.com/preview/demos/main/

具体webAPP开发案例使用教程：http://blog.sina.com.cn/s/blog_3f1fc8950101hb3h.html