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

作者 | Brilliant Open Web 团队 编辑 | 媛媛

本期看点

MIP 为开发者提供熊掌号登录组件。在提升使用 MIP 开发的熊掌号站点用户登录体验的同时,也大幅提升站点登录功能的接入效率。

MIP 页面滑动时悬浮元素展现优化。用户上下滑动时隐藏/展现悬浮元素,优化用户页面浏览体验

MIP 页面支持熊掌号登录

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

缺少统一封装,API 不够友好;

登录都是同步跳转,页面状态无法保持,体验不流畅;

每个站点的流程与交互体验不统一,用户习惯无法培养。

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

登录示例

如何使用

我们在 Github issue 中记录了关于熊掌号登录组件相关的文档和讨论, 可以通过此文档查看更多示例与用法: https://github.com/mipengine/mip-extensions-platform/tree/master/mip-login-xzh

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

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

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

悬浮优化示例

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

具体效果示例如下:

悬浮优化

如何使用

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


顶部悬浮 - 向上滑动隐藏

更多内容可查看:

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

下期预告

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

移动 Web 的体验问题从来不是开发一个页面就能解决的,2018 年以来,MIP 团队从聚焦移动页面的速度转向聚焦整个移动站的整体体验。MIP 团队希望通过一系列 MIP 技术革新,让开发者通过 MIP 构建良好体验与性能的移动 Web 站,而不仅仅是单个移动 Web 页面。

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

其他技术升级预告:

MIP 预渲染技术,让用户享受极致的速度体验

MIP 助力熊掌号,让熊掌号站点更容易地开发MIP