目前從事webAPP開發和移動UI設計的人很多啦,同時也很多公司推出了比較好用的移動webAPP UI前端框架。
下面html5模版網(www.suosuyi.cn)跟大家來普及下webAPP 前端UI的構成部分。
移動UI的話,分為基礎樣式和基礎組件兩部分。
基礎樣式:
建議這一部分可以用一些輕量級的庫如Purecss(http://purecss.io),采用其Grid的部分即可,需要定制的部分,建議自行配置,或者是直接采用grid.css,grid960.css這樣的柵格來處理。
基礎組件:
基礎組件主要是button,input,form等,可以在http://bootcss.com看到很多的組件庫,按照需要選擇一部分,在做下自定義修改配色,陰影,邊框什么的,動畫的話就用animate.css吧。
交互設計:
是webapp的難點和問題所在,個人建議,在移動端還是盡可能的減少復雜的交互內容,更多的做內容呈現和基礎的功能實現(考慮兼容問題和移動網絡流量,移動網絡質量等因素)
附加內容:
響應式設計也是要分場合的,在簡單的內容呈現如博客,可以考慮響應式,不過針對業務系統,還是建議做一套移動版本和對應的桌面版本,這是個人的一些看法,希望有用。
目前來說好用的webAPP框架很多。html5模版網(www.suosuyi.cn)跟大伙推薦幾個:
1、Jingle ?酷站官網?Jingle-html5 webapp framework
Jingle UI是一個基于html5、css3開發輕量級的移動 webapp 框架,提供一些基本交互方式,常用的組件(scroll,actionsheet,sidemenu,toggle,push2refresh……),幫助您更方便的開發移動應用。
2、jqMobi也是輕量級框架、它的語言基于jquery語言。并對其進行了簡化,更有利于在移動設備上進行應用,并且速度很流暢。上手很容易。
具體移動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