成熟的针对html5的UI框架是哪些，优缺点如何

10大html5前端框架

1、Bootstrap

首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各 种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得 Bootstrap 美的让人烦躁， 但好在它的每个版本都会有很大的改变，不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数，了解他们痛的结果 )，以至于是个小前端都可以快速上手，几乎没什么学习成本。

2、AUI

第三个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主 要面向混合开发的 CSS 框架。看起来作者比较猖狂，各种高级 CSS3 遍地使用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多 复杂的让我骂娘的布局，现在可以直接拿走就用。

3、Amaze UI

第二个介绍的是妹子UI，最初使用它是因为本尊遇到了一个爱纠结细节设计士，有一次她跟我的字体较上真了，结果一句顶万句的 BOOS 夸了她，我只好根据她的想法去解决，结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫 )，按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

4、Frozen UI

有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 混合开发，其中QQ会员前端用的是 Frozen UI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手试了一遍，初体验感觉基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰 富。

5、Frozen UI

第三个是Frozen UI，有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 HTML 混合开发，其中QQ会员前端 就是用的 Frozen UI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍就开始试用，初体验的就是基础样式效果简单色调清 爽，有个比较活跃的社区所以组件什么的也比较丰富。

6、WeUIi

第四个是WeUI和同 FrozenUI都属于 差不多的 WeUi了，也是一个比较专一的框架，WeUI应该说比FrozenUI前者更专一，话 说连个官网都不搞，所有答疑都在 gitHub Issues 解决了，这个框架极其简单，体积当然就不用说了，模块也就 7 个左右，不过体量虽然小做 的却不错，口碑看 star 就够了，框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄所以都跑 到 git 上来，哈哈。

7、SUI

“SUI 是一套基于bootstrap开发的前端组件库，同时它她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。 果然 还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… )，当然了就像广告说的，如果你之前用过 Bootstrap， 那么可以轻松转 向 SUI，这可能就是淘宝给前端屌丝们的福利了。。

8、AUI

第六个是最近刚起来的最近刚起来的 AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的 普遍问题，是它主要面向混合开发的 CSS 框架。，所以看起来作者比较猖狂，各种高级 CSS3 遍地使用，这也使得我不得不去查查这些 个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组 件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。

9、MUI

曾经一直使用 Android 系统的我，后来见到 IOS，果断移情别恋了，不知道为什么苹果每次调整系统我都特别喜欢，后来一段时间因为缺设计 我专门模仿 IOS 系统做 UI，但始终不能够做到很好，无意间就发现了 MUI 这个框架，这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度，然后便试着 更深入的了解和使用一段时间。

10、Semantic UI

倒数第三个是 Semantic UI，接触这个框架还是因为 Bootstrap，Semantic UI 刚上线 github 就受到大量开发者的关注，以至于很多人拿它俩对比各种挑刺各种夸，是好是坏不能单凭别人三句四句就抬起手指开始赞，用了以后感觉 UI 上跟 Bootstrap 没太多的区别，不过代码命名规范上却相差甚大，本人认为 Semantic UI 是不是就想做的不一样，它的命名全是采用复合的方式，类名特别的离散，用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。

Foundation

Foundation 算是框架界的元老啦，都说框架去的早，而这个框架一直到现在依然这么的热门，如果你比较介意 Bootstrap 开发撞脸的尴尬事情，那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像，就像官方说的给开发者更灵活的框架体验。

UiKit

UIkit是YOOtheme团队开发的，在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者，那么这个框架应该比较适合深究)，并且框架能够通过GUI编辑器和手动编辑，所以它提供了一个灵活、强大的自定义机制。框架借助LESS、 jQuery、normalize.css及FontAwesome开源项目的独有特点，整合成了这么一款轻量级、模块化的前端框架。

Pure

终于最后一个了，我和你一样好开森 (～￣▽￣)～)，这个框架是我在做管理系统时接触的，选择使用也是因为框架小巧，并且是纯 CSS，没有太多的牵扯，好用来与其他框架快速结合使用。

微信的公众平台还不是HTML5游戏可适应的生态环境

现在手机网页游戏(duopaogame)公众号日均PV在4000左右，日活跃用户1500人，这个数据并不理想，感觉目前的微信平台尚未为HTML5游戏做好准备，通过分析可得知用户流失的主要原因如下：

1) 游戏太简单，比原生游戏比还有差距

不少用户反馈手机网页游戏的公众账号里的游戏过于简单，觉得恐怕无法与原生游戏相比。其实我们挑选这批游戏确实以简单，上手较快，量级轻便于打开为目的，方便玩家快速体验。其实随着手机和浏览器的发展，HTML5能够表现出来的东西已经足够丰富。而在下阶段我们会陆续推出画面精美，体验感更强的联网大型社交类游戏。

2) 打开时间过长，网络不好时候需要等待

部分用户感觉打开游戏的时候加载时间过长，尤其是在网络不好的情况下，很多玩家因为无耐心等待而流失。这让我们后来会尽力去想办法在这方面有所改善，例如压缩游戏资源和脚本，尽量使用离线能力，今后的网游也会考虑分阶段下载图像资源。

3) 公众号用户 *** 作繁琐，纯文字菜单的交互方式导致不少用户失去耐心

用户进入公众号后，首先需要输入数字才能得到游戏菜单，在选择类型后打开游戏的图文介绍，还需要点击逗阅读原文地才能进入游戏页、这一系列 *** 作已经让很多玩家失去了耐心。针对这个问题，我们随后想出了不少办法来优化。例如用在文字信息中嵌入短域名链接，设置游戏编号让玩家快速记忆等等。我们非常期待的底栏Tab菜单能够早日启用，让玩家可以直接点击菜单找到自己想要的游戏内容，同时也提个小建议，是否支持回复文字信息内嵌入游戏图标，以便让用户体验更好。

4) 微信内置浏览器无法全屏，也无法控制屏幕旋转

苹果的Safari浏览器和不少第三方浏览器已经都实现了全屏和控制屏幕旋转的接口，但微信内置的浏览器目前还不行。这样非常影响了手机网页游戏玩家的体验，尤其是一些需要横屏控制的游戏，画面的可视部分就会变得很窄小，甚至遮挡了部分 *** 作导致游戏无法继续。我们呼吁微信内置浏览器可以尽快提供全屏和控制屏幕翻转的API接口。

5) 从游戏切换回聊天界面，却无法再直接返回游戏状态

手机网页游戏主要是利用玩家在社交平台的逗沉默时间地来进行的，这点与原生app游戏不同。这些时间多数是指玩家暂时没有聊天信息，而又不愿意离开社交平台。这些时间往往是以碎片方式存在的。而用户在进行微信游戏时，如果接到好友消息就会返回到聊天界面，结束聊天后再回到游戏就必须重新加载。我们希望今后的微信的内置浏览器可以在这方面优化。在后台挂起状态，而用户返回后再重新恢复，以方便玩家在聊天界面和游戏之间自由切换。

6) Andriod手机自带浏览器对HTML5支持太差

很多用户反应部分游戏出现无法启动，白屏或者性能太差等问题，经过回访和调查却发现都是Andriod自带浏览器惹的祸。由于Andriod系统过于开放，各家厂商针对ROM进行了程度不一的改造导致浏览器标准非常不统一，对HTML5的支持很差。建议微信可以考虑在Andriod版本中摒弃系统自带浏览器而采用第三方浏览器，性能更好，对HTML5支持更加彻底，从而缩短与iOS平台的差距，确保用户体验的一致。当然在谷歌内部也会出现Chrome OS部门合并Andriod，这对HTML5继续普及都是利好消息。

7) 开发平台接口较弱，无法满足社交游戏需求

当前微信公众平台开放的接口还是比较弱，用现在的平台提供的能力无法承担作为手机网页游戏平台的需求，尤其是希望开放账号登录，游戏内发送微信，朋友圈，添加好友等社交接口，甚至还包括支付接口。我们下阶段希望在休闲游戏内实现用户登陆后可以将自己在微信中的社交关系链带入游戏，该社交关系链的价值是可以让玩家可以看到好友在这款游戏的排名，甚至双方也可以互相交换和赠送游戏道具。此外游戏内设置的积分排名也对刺激用户玩游戏起到推动作用。当你看到自己的伙伴能够玩很高的积分时，用户的攀比心理会让他陷入到游戏的竞争乐趣中。用户的积分如果超过了朋友，他还可以将这些信息一键分享到微信中，以此向朋友进行一番炫耀这些能力来提升游戏的可玩性和粘性。

---