BlendUI:提升webapp体验与交互的关键技术

0 下载量 171 浏览量 更新于2024-08-27 收藏 418KB PDF 举报
BlendUI是一种旨在提升Web应用程序用户体验和交互性的技术解决方案。随着百度轻应用的推广,虽然其渠道分发能力受到认可,但开发者注意到Webapp在体验上与Native app存在显著差距,尤其是在处理复杂应用时。过去,移动Web站点会尝试通过无刷新的跳转和换页效果来提升用户体验,但这样的做法在低端设备上表现不佳,导致开发者转向更简单的特效或原生功能。例如,许多产品线放弃了JavaScript实现的局部滚动,转而采用原生滚动。 在寻求缩小Webapp与Nativeapp之间差距的过程中,一项来自W3C的任务组报告指出了Webapp的优势和劣势。研究发现,性能问题是阻碍开发者选择HTML5技术的主要原因,其次是API的缺乏和与Native元素的整合问题。性能瓶颈尤其突出,因为不流畅的用户体验会影响用户对应用程序的接受度。此外,一些功能如语音和定位在Webapp中实现起来较为困难,即使能用原生代码实现,也难以与Webapp完美融合。 另一项来自DeveloperEconomics的调查进一步分析了30339个Google Play应用,结果显示,如果排除性能因素,Webapp与Nativeapp在功能实现上的差距并不大。这表明,通过优化性能和技术,Webapp有可能达到与Nativeapp相当的用户体验水平。 在这种背景下,BlendUI应运而生,它的目标是提供一套工具和框架,使得Webapp可以实现更流畅的交互、更快的响应速度以及更丰富的功能集,从而提高用户体验。BlendUI可能包括优化的JavaScript库、高性能的渲染机制、更好的API集成策略以及针对移动设备特性的定制化解决方案。通过这种方式, BlendUI致力于让Webapp不仅在视觉上,而且在实际操作中都能与Nativeapp相媲美,提升用户的满意度和留存率。 为了实现这一目标,开发者需要关注以下几个关键点: 1. 性能优化:通过减少不必要的渲染,改进网络请求处理,以及利用硬件加速等手段,提升Webapp的运行效率。 2. API集成:将更多的原生功能通过Web技术封装,提供统一的接口供Webapp调用,如GPS定位、蓝牙通信等。 3. 用户界面:设计符合移动设备使用习惯的交互模式,提供平滑的过渡动画和无缝的导航体验。 4. 设备兼容性:确保Webapp在各种设备和浏览器上都能稳定运行,包括低端设备和较旧的操作系统版本。 5. 持续更新:随着Web技术的不断发展,持续跟踪并引入新的标准和最佳实践,以保持Webapp的先进性和竞争力。 BlendUI作为提升Webapp体验的关键技术,将通过解决性能、功能和整合问题,助力开发者打造与Nativeapp相竞争的高质量Web应用程序。通过采用BlendUI,开发者不仅能利用Web的便捷性和跨平台优势,还能为用户提供接近Native的沉浸式体验,进一步提升轻应用的市场竞争力。
2019-07-16 上传
BlendUI 是百度公司的一个 Web 前端 UI 框架。BlendUI 能让Webapp的体验和交互与Native媲美。 具体而言,里面包括了两项关键能力: 多Webview控制能力。让一个Webapp拆到多个webview中运行,并能用Javascript来调度。搞定了业务无解的难题:页面过大导致卡顿,页面切换不流畅, Native组件嵌入能力。能将Native控件嵌入Webview中,这样就能让页面中那些性能较差的部分用Native来实现,以最大化地提高体验和交互。 与此同时,开发者看到的是Web API,不仅能快速上手,更由于BlendUI为普通浏览器完成了降级和替代方案,一套代码能同时在BlendUI环境和浏览器中同时运行。 最后再简单说说BlendUI的背景和目标。 在webapp和Native app之间,有一条无法逾越的鸿沟:体验和性能的差距。轻应用是webapp的延伸,同样存在此问题。为弥补这条鸿沟,我们要有一套方案,能让开发者使用web API,做出体验和性能与原生应用差距不大的应用。 经过一番调研,我们发现几个重要的现实问题,这些问题导致了webapp和native app之间的体验差距。 webapp缺少淡入淡出动画、转场动画、滑动动画,或者因此引起的不流畅,以及某些组件的弹力体验与原生有差距等。 浮动元素的处理。顶部、右侧、底部的固定位置的元素可能会有抖动,或者弹出菜单无法点按页面其他位置关闭,点按不流畅等。 输入框的问题。包括输入法无法正常展开收起,框内部滚动问题。 本地缓存能力。包括已浏览的图片本地缓存,静态资源缓存出现脏数据等问题。 DOM变化后的渲染抖动。包括无限下拉时的渲染抖动,无刷新翻页的闪烁 此外,vision mobile的调研数据显示,开发者之所以不选用html5的前三大原因是: 性能问题:45.7% 硬件接口有限:37.3% 难以集成原生组件:29.2% 因此,轻组件的首要目标是:弥补轻应用的体验劣势,包括页面间、页面内的转场动画,浮动元素处理,一些对性能要求较高的组件原生化等。 我们将面对的用户主要是高级web开发者。因此,库需要有足够的扩展性和灵活性,同时API必须是web化的。 标签:BlendUI  CSS框架