目前從事webAPP開發(fā)和移動UI設(shè)計的人很多啦，同時也很多公司推出了比較好用的移動webAPP UI前端框架。

下面25學(xué)堂跟大家來普及下webAPP 前端UI的構(gòu)成部分。

移動UI的話，分為基礎(chǔ)樣式和基礎(chǔ)組件兩部分。

基礎(chǔ)樣式:

建議這一部分可以用一些輕量級的庫如Purecss（http://purecss.io），采用其Grid的部分即可，需要定制的部分，建議自行配置，或者是直接采用grid.css，grid960.css這樣的柵格來處理。

基礎(chǔ)組件:

基礎(chǔ)組件主要是button,input,form等，可以在http://bootcss.com看到很多的組件庫，按照需要選擇一部分，在做下自定義修改配色，陰影，邊框什么的，動畫的話就用animate.css吧。

交互設(shè)計:

是webapp的難點和問題所在，個人建議，在移動端還是盡可能的減少復(fù)雜的交互內(nèi)容，更多的做內(nèi)容呈現(xiàn)和基礎(chǔ)的功能實現(xiàn)（考慮兼容問題和移動網(wǎng)絡(luò)流量，移動網(wǎng)絡(luò)質(zhì)量等因素）

附加內(nèi)容:

響應(yīng)式設(shè)計也是要分場合的，在簡單的內(nèi)容呈現(xiàn)如博客，可以考慮響應(yīng)式，不過針對業(yè)務(wù)系統(tǒng)，還是建議做一套移動版本和對應(yīng)的桌面版本，這是個人的一些看法，希望有用。

目前來說好用的webAPP框架很多。25學(xué)堂跟大伙推薦幾個：

1、Jingle ?酷站官網(wǎng)?Jingle-html5 webapp framework

Jingle UI是一個基于html5、css3開發(fā)輕量級的移動 webapp 框架，提供一些基本交互方式，常用的組件(scroll,actionsheet,sidemenu,toggle,push2refresh......)，幫助您更方便的開發(fā)移動應(yīng)用。

2、jqMobi也是輕量級框架、它的語言基于jquery語言。并對其進行了簡化，更有利于在移動設(shè)備上進行應(yīng)用，并且速度很流暢。上手很容易。

官方網(wǎng)址：http://www.jqmobi.com/

具體移動webAPP開發(fā)案例：http://blog.sina.com.cn/s/blog_3f1fc8950101h4nf.html

3、app-UI?是一個免費開源的可重用 UI 組件容器的集合，對開發(fā)移動的 Web 應(yīng)用非常有用，可使用 HTML+JavaScript 開發(fā)交互式的移動 Web 應(yīng)用。app-UI 可很好的跟?PhoneGap?集成。

App-UI是一個網(wǎng)絡(luò)和移動開發(fā)人員創(chuàng)建HTML和JavaScript時可重復(fù)使用的“application container”用戶界面組件，App-UI是那些針對移動設(shè)備的交互式應(yīng)用程序可能會有所幫助的集合。App-UI與PhoneGap的應(yīng)用有些雷同，App-UI可以很容易地使用CSS樣式/自定義。

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

4、jQTouch框架

jQTouch也是輕量級框架、它的語言基于jquery語言。上手容易。加載時間比較快，優(yōu)點是動畫切換很流暢、在Android和IOS上表現(xiàn)都不錯。缺點是與其搭配的插件較少，需要一些外包插件來進行某些效果的支持,無法自定義布局樣式等。

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

具體webAPP開發(fā)案例使用教程：http://blog.sina.com.cn/s/blog_3f1fc8950101hb3h.html