强大的界面交互引擎介绍.doc

强大的界面交互引擎 为什么采用基于H5的页面设计 移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。 就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。 除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。 在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。 通过HTML5实现交互效果时，通常比原生应用要更消耗设备资源，因此设备性能就成为H5页面效果的一大瓶颈。现在，这个瓶颈正在消除：2014年7月的一项调查表明，中国手机用户换机周期已由2011年的29个月缩短到18个月。而近两年上市的智能手机，大都运行着较新的操作系统和浏览器，性能上也能基本达到展示H5页面的要求。 FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。 更显灵动的JS插件FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。 普通小按钮 3.1.2 带进度的按钮 普通大按钮 3.1.4普通按钮组 3.1.5 底部按钮组 3.2.2 简单版 3.3 头像 3.4 消息提示红点 3.4.1 默认样式 3.5 徽标 3.5.1 带数字和文字的徽标 3.6 标签 3.6.1 默认样式 3.7 角标 3.7.1 角标样式 3.8 搜索框 3.8.1 带文字和图标的搜索框 3.9 列表 3.9.1 简单列表 3.9.2 带内容的列表 3.9.3 文字列表 3.9.4 带图片的文字列表 3.9.5 带头像的图文列表 3.10 表单 3.10.1 命令表单 3.10.2 展示项表单 3.10.3 链接项表单 3.10.4 输入项表单 3.10.5 开关项表单 3.10.6 下拉项表单 3.10.7 单项选择表单 3.10.8 多选项表单 3.10.9 带输入框表单 3.11 表格 3.11.1 默认样式 3.11.2 带框是表格 3.12 通知 3.12.1 错误通知 3.12.2 提示条通知 3.12.3 带处理的工具条提示通知 3.12.4 消息提示通知 3.12.5 浮层提示通知 3.13 进度条 3.13.1 默认进度条 3.13.2 文件上传进度条 3.14 加载提示 3.14.1 页面局部加载提示 3.14.2 全部页面加载提示 3.15 菜单 3.15.1 操作提示菜单 3.16 对话框 3.16.1 确认提示框 3.17 标签栏 3.17.1 tab标签页