目前从事webAPP开发和移动UI设计的人很多啦,同时也很多公司推出了比较好用的移动webAPP UI前端框架。
下面25学堂跟大家来普及下webAPP 前端UI的构成部分。
移动UI的话,分为基础样式和基础组件两部分。
基础样式:
建议这一部分可以用一些轻量级的库如Purecss(),采用其Grid的部分即可,需要定制的部分,建议自行配置,或者是直接采用grid.css,grid960.css这样的栅格来处理。
基础组件:
基础组件主要是button,input,form等,可以在看到很多的组件库,按照需要选择一部分,在做下自定义修改配色,阴影,边框什么的,动画的话就用animate.css吧。
交互设计:
是webapp的难点和问题所在,个人建议,在移动端还是尽可能的减少复杂的交互内容,更多的做内容呈现和基础的功能实现(考虑兼容问题和移动网络流量,移动网络质量等因素)
附加内容:
响应式设计也是要分场合的,在简单的内容呈现如博客,可以考虑响应式,不过针对业务系统,还是建议做一套移动版本和对应的桌面版本,这是个人的一些看法,希望有用。
目前来说好用的webAPP框架很多。25学堂跟大伙推荐几个:
1、Jingle 酷站官网Jingle-html5 webapp framework
Jingle UI是一个基于html5、css3开发轻量级的移动 webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......),帮助您更方便的开发移动应用。
2、jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化,更有利于在移动设备上进行应用,并且速度很流畅。上手很容易。
官方网址:
具体移动webAPP开发案例:
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样式/自定义。
4、jQTouch框架
jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快,优点是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少,需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。
在线演示:
具体webAPP开发案例使用教程:
暂无评论内容