适用于 PhoneGap App 的 UI 框架

之前为自己的一个 PhoneGap 挑选框架,中间走过不少弯路,也试过几款,回想一下,其实选一个适合自己的框架比无脑上一个 jQuery Mobile 会科学很多。

Mobile App UI 框架可以分为两种,一种是跑在普通手机浏览器上的网站,依赖 HTTP(s) 请求获取静态资源;另一种是与 PhoneGap/Appcelerator/Titanium 这些桥接器配合,做成真正或者说模拟 Native 体验的手机应用。

之所以要分这两种就在于要通过网络传输的 app 要慎重考虑静态文件体积大的 UI 框架,放一坨  jquery mobile 到手机网站上不是一般人可以接受的,而 PhoneGap 之类的直接放在手机本地,基本可以忽略 UI 框架本身的 JS/CSS 的大小。

选择 Mobile App UI 框架,可以从本身的几个特点来看:

  1. UI 框架是否有符合移动场景的基本功能,比如各种浏览器内核的适配,比如 touch/swipe 的封装,即使没有 swipe 也要能够方便接入别人的插件,目前敢放出来推广的框架都做到了这些。
  2. 移动端特有的 layout/交互/UI Pattern,有的框架会模仿 iOS 原生应用的 UI,有的专为 Android 而做,也有兼顾的,因为不管是 iOS 还是 Android 一年之后都会变换风格,所以 UI 框架默认提供的 UI 虽然重要(很多人很懒或者没有能力自己设计),但是提供的 UI 易以定制更重要。
  3. 上手难度和开发方式如何,这个也是我自己做看重的,主要是指 UI 框架内部是如何设计,来满足你开发、增加新模块的需求的,比如你的 app 要增加一个侧边栏,包含几个栏目,要写多少代码才能实现,以及进入进行 framework 本身的版本升级。
  4. 是否有一些小亮点,比如 icon 全部是 icon font,内置 UI 组件 carousel plugin 等等。

 

然后介绍几个我接触过的几个基本功能比较全、略有特色的 Mobile UI Framework:

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 Framework
Lungo 最大的优点是非常注重 web 标准和语义化,如果是你一名前端,你会觉得用 Lungo 来写一个 app 很优雅、很自然,它支持 Data Binding,可以通过桥接器和 Angular 一起使用。

说它优雅就要举一个例子了,在 native app 中常见到 的 sidebar,Lungo 只要加一个 aside 标签就可以实现,section > article 这样的层级来支持模块和内容分层,具体感受可能要亲身体验才知道。

官方还宣称他们的 API 很强大,实则是不敢恭维,Lungo 一大缺点就是依赖 soyjavi/QuoJS ¡ GitHub,因为这个框架也是 Lungo 的作者参与开发的,喜欢 jQuery 风格的会疯掉。

Lungo 的 css 用 Stylus 完成,UI 定制比较方便,另外 icon font 也不少(对我来说还是少了,另外新增一个 icon 成本巨高,需要去 Github 给他们提 issue,然后他们心情好了就给你加一个,否则呵呵)。

Lungo 最大的缺点是貌似作者最近很少更新了,而且在社区里的讨论也不够多,这也许也反映了大家并不觉得它是一个多好的框架,只是比较符合我目前的需求而已。而且 Lungo 曾经被人骂它是一个「 full of bugs」 的项目,官方的代码、Github 上的代码与官方教程案例提供的代码居然是不一样的,导致我花了不少时间在整理他们的代码。值得一提的是,Lungo 提供的官方案例真算是业界良心,是个前端就很容易入手,这就是:KitchenSink – Lungo 2.0

其实 UI 框架还是要看具体做出来的 app 长什么样子,使用体验如何,大家可以鉴定一下我自己开发的 Android app,用 PhoneGap + Lungo 开发,可以直接在 豌豆荚 中搜索「蘑菇」下载,由于排名靠后请认准这个 icon:

或者你也访问网站:蘑菇安卓版 v1.1.1 免费下载

最后,评价 UI 框架的优缺点的时候要考虑自己要做的 app 的特征,单独去搜每一个框架都会看到有推荐的理由,都很优秀,也有各自的粉丝,还有一点是往往是自己用过一两个觉得不错的,就会看不上其他框架,这其实是不对的,现在这个领域发展很快,应该还会不断地有新的框架出来,拭目以待吧。

Published by

Z.J.T

Product Designer from Wandou Labs

  • 南瓜小米粥

    我觉得ionicframework挺好用,当然优化是必须的。

    • aobo711

      看了一下官网,果然高大上啊