看你的描述里写的基本是 mobile app,UI 框架可以分为两种,一种也是跑在普通手机浏览器上的网站,还是需要走网络;另一种是与 PhoneGap/Appcelerator/Titanium 这些桥接器配合做成真正的手机应用。
之所以要分这两种就在于要通过网络传输的 app 要慎重考虑体积大的 UI 框架,放一坨 jquery mobile 到手机网站上不是一般人可以接受的,而 PhoneGap 之类的直接放在手机本地,基本可以忽略 UI 框架本身的 JS/CSS 的大小。
我觉得 UI 框架的优缺点要从本身的几个特点来看:
- UI 框架应该有的基本功能,比如各种浏览器内核的适配,比如 touch/swipe 的封装,即使没有 swipe 也要能够方便接入别人的插件,目前敢放出来推广的框架都做到了这些。
- 手机特有的 layout/交互/UI Pattern,有的框架会模仿 iOS 原生应用的 UI,有的专为 Android 而做,也有兼顾的,因为不管是 iOS 还是 Android 一年之后都会变换风格,所以 UI 框架默认提供的 UI 虽然重要(很多人很懒或者没有能力自己设计),但是提供的 UI 易以定制更重要。
- 上手难度和开发方式,是指 UI 框架内部是如何设计来满足你开发、增加新模块的需求的,比如你的 app 要增加一个侧边栏,分别对应几个栏目,要写什么代码,需不需要自己写代码。
- 是否有一些小亮点,比如 icon 全部是 icon font,内置复杂的 carousel plugin 等等。
然后介绍几个我接触过的几个基本功能比较全、略有特色的 Mobile UI 框架:
1.
Fries高度精仿 Android UI,控件齐全,曾经想选它做我的 app,只因我嫌 Android 本身的 UI 不好看。
2.Junior相比 Fires Junior UI 比较雍容华贵,走的 iOS 路线,提供了很流畅的轮播插件,可以配合 Backbone 使用(其实在我眼里这个是缺点,这意味着用它来开发复杂一点的模块要由很多开发量)。
3.老牌 jQuery Mobile / Sencha Touch / Foundation,莫名抵触,没实践过就不介绍了,Google 一下应该有不少资料。
4.隆重介绍一下 Lungo - HTML5 Cross-Device Frameworkupdate: Lungo 最近已经开始收费,看来创始人对这个框架很有信心。最大的优点是 lungo 非常注重 web 标准和语义化,如果是你一名前端,你会觉得用 Lungo 来写一个 app 很优雅、很自然,支持 Data Binding,可以通过桥接器和 Angular 一起使用。说它优雅就要举一个例子了,在 native app 中常见到 的 sidebar,Lungo 只要加一个 aside 标签就可以实现,section > article 这样的层级来支持模块和内容分层,具体感受可能要亲身体验才知道。
官方还宣称他们的 API 很强大,实则是不敢恭维,Lungo 一大缺点就是依赖
soyjavi/QuoJS ¡ GitHub,喜欢 jQuery 风格的会疯掉。
Lungo 的 css 用
Stylus 完成,UI 定制比较方便,另外 icon font 也不少(对我来说还是少了,另外新增一个 icon 成本巨高)。
Lungo 最大的缺点是貌似作者最近很少更新了,而且曾经被人骂它是一个满是 bug 的项目,而且官方的代码 和 Github 代码与官方案例提供的代码不一致,导致我花了不少时间在整理他们的代码,不过 Lungo 提供的官方案例也算是业界良心,是个前端就很容易入手,这就是:
KitchenSink - Lungo 2.0。
其实 UI 框架还是要看具体做出来的 app 长什么样子,使用体验如何,大家可以鉴定一下我自己开发的 Android app,用 PhoneGap + Lungo 开发,可以直接在
豌豆荚 中搜索「
蘑菇」下载,由于排名靠后请认准这个 icon:
或者访问网站:
蘑菇安卓版 v1.1.1 免费下载。
最后,评价 UI 框架的优缺点的时候要考虑自己要做的 app 的特征,单独去搜每一个框架都会看到有推荐的理由,都很优秀,也有各自的粉丝,还有一点是往往是自己用过一两个觉得不错的,就会看不上其他框架,这其实是不对的,现在这个领域发展很快,应该还会不断地有新的框架出来,拭目以待吧。