MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素

之前由MIP团队维护的《移动 Web 加速技术月报》从本期开始,正式升级为《MIP 技术月报》,与以往不同的是,《MIP 技术月报》将会与大家分享包含移动加速技术以外的其他移动应用开发的技术,从移动用户体验、开发体验出发来分享 MIP 的更多技术点,技术面也将涉及更广的范围。更重要的是,每期会与大家分享 MIP 项目的当月重大技术进展。

本期看点

  • MIP 为开发者提供熊掌号登录组件。在提升使用 MIP 开发的熊掌号站点用户登录体验的同时,也大幅提升站点登录功能的接入效率。
  • MIP 页面滑动时悬浮元素展现优化。用户上下滑动时隐藏/展现悬浮元素,优化用户页面浏览体验。

MIP 页面支持熊掌号登录

登录是移动中最常见的应用场景之一,但也是目前 Web 体验最不佳的功能点之一,其中有以下原因:

  • 缺少统一封装,API 不够友好;
  • 登录都是同步跳转,页面状态无法保持,体验不流畅;
  • 每个站点的流程与交互体验不统一,用户习惯无法培养。

MIP 熊掌号登录示例

MIP 团队针对以上体验不佳的情况,为开发者提供了 Native Like 体验的熊掌号登录组件,用户在 MIP 中能够体验到一致的登录流程。已经接入百度熊掌号的 MIP 站点,可以快速的使用登录组件向用户提供登录功能。登录效果示例如下:

登录示例

如何使用

我们在 Github issue 中记录了关于熊掌号登录组件相关的文档和讨论,链接如下:

https://github.com/mipengine/mip-extensions/issues/1096

可以通过此文档查看更多示例与用法:

https://github.com/mipengine/mip-extensions-platform/tree/master/mip-login-xzh

如果对使用熊掌号登录组件有任何疑问或问题,请在 issue 中进行留言!

MIP 页面悬浮元素优化,让用户浏览更沉浸

移动中另一个重要的体验特性是沉浸式浏览,经过 MIP 团队调研,目前移动 Web 页面中存在大量头部与底部的悬浮功能,开发者使用悬浮的初衷是为用户提供更便捷的其他功能入口,但大多数站点并没有考虑悬浮功能与沉浸式浏览体验的冲突。

悬浮优化示例

MIP 团队为此提供了通用的页面悬浮元素优化,开发者可通过简单配置即可完成页面悬浮元素的体验优化,用户向上滑动阅读页面时,头部与底部悬浮元素可被隐藏,露出更多页面阅读面积,让用户浏览更加沉浸!

具体效果示例如下:

悬浮优化示例

如何使用

MIP 团队在原来悬浮组件文档基础上,新增了悬浮配置项。可以通过以下代码配置悬浮元素自动隐藏。

<mip-fixed type="top" data-slide>
    顶部悬浮 - 向上滑动隐藏
</mip-fixed>

更多内容可查看:

https://www.mipengine.org/examples/mip-extensions/mip-fixed.html

下期预告

全站 MIP 化技术方案即将对外发布

移动 Web 的体验问题从来不是开发一个页面就能解决的,2018 年以来,MIP 团队从聚焦移动页面的速度转向聚焦整个移动站的整体体验。MIP 团队希望通过一系列的技术革新,让开发者不仅拥有的是快速、流畅的单个移动 Web 页面,更能够利用 MIP 轻松搭建体验与性能俱佳的移动网站。

2018年4月,MIP 团队启动了全站 MIP 化的技术方案讨论与设计,目前已经有内部案例。我们将在不久对外发布这一技术升级,让大家通过使用 MIP 开发一个完整的站点!

其他技术升级预告:

  • MIP 预渲染技术,让用户享受极致的速度体验
  • MIP 助力熊掌号,让熊掌号站点更容易地开发MIP
posted @ 2018-05-04 16:04  MIP官方博客  阅读(1305)  评论(0编辑  收藏  举报