用户通常通过应用商店或下载软件包并安装来获取应用(尤其是平台应用)。如今,即使是桌面设备体验也在转向通过集中式商店提供应用的方式。
对于 Web 应用,此模式有所不同:用户不必访问集中式应用库即可获得 Web 应用,因为从设计上讲,并非所有 Web 体验都可以安装,在不同平台和浏览器之间安装应用的方式可能不同,浏览器甚至具有不同的菜单和 surface 来安装应用。用户点击该安装选项后,默认对话框就不会包含任何额外信息,如下所示:
![桌面版浏览器默认安装对话框。](https://developer.chrome.google.cn/static/blog/richer-install-ui-desktop/image/the-browser-default-insta-3c6ce3fa8766e.png?authuser=5&hl=lv)
![适用于移动设备的浏览器默认安装对话框。](https://developer.chrome.google.cn/static/blog/richer-install-ui-desktop/image/the-browser-default-inst-14907440251fd.png?authuser=5&hl=lv)
创建可以安装并能提供与平台应用相同的交互的 Web 应用,不仅需要开展技术工作,还需要实现此类体验,还需要为用户提供充分的指导,以便充分利用这种不同的安装流程。
借助更丰富的安装界面,网络开发者有了新的机会,在安装应用时向用户提供有关其应用的特定背景信息。Chrome 94 及更高版本的移动设备和 Chrome 108 及更高版本的桌面设备均提供此界面。虽然 Chrome 会继续为可安装的应用提供简单的安装对话框,但这个更大的界面为开发者提供了突出显示其网络应用的空间。这也使安装过程更加熟悉,因为它与应用商店中的对话框类似。
![桌面设备和移动设备上更丰富的安装界面的屏幕截图。](https://developer.chrome.google.cn/static/blog/richer-install-ui-desktop/image/screenshots-richer-insta-56c432a76a62c.jpg?authuser=5&hl=lv)
启用更丰富的安装界面
如要显示“富媒体安装界面”对话框,开发者需要在 screenshots
数组中为相应设备类型添加至少一个屏幕截图。description
字段不是必需的,但建议使用,它使用这两个字段的内容构建内容对话框,使体验更接近于应用商店安装。这有助于用户识别他们是否是在向自己的设备添加应用,并且有更多可用的空间,开发者可以在安装应用时为其用户提供具体的背景信息。
例如,开发者可以使用 description
字段来突出显示那些激励用户在其设备上保留该应用的功能。借助 screenshots
,他们可以将 Web 应用的外观和风格呈现为独立应用,并获享平台应用所具有的所有轻松访问功能。
如需查看详细规范以及将其添加到应用的指南,请访问富媒体安装界面模式。
旧版安装提示只提供很少的信息和上下文。这与用户的信息因为他们对安装含义的预期,并可能对具体发生的情况感到困惑。许多人完全拒绝了安装请求,这对构建这类应用的企业而言也很糟糕。
更丰富的安装方式可让您打造更接近于操作系统的体验。
您可以按照 Squoosh 应用清单文件中的示例构建自己的对话框,也可以访问 https://squoosh.app/ 尝试实际运行该对话框。
反馈 我们正在考虑通过其他选项来丰富安装体验,包括类别和应用评分。为了做出此决定,我们需要您的反馈。 向我们介绍设计 Richer Installs UI 是不是有什么功能无法按预期运行?或者,您需要提供哪些具体数据才能将您的想法付诸实施?有问题或意见?填写此表单
照片由 Kaboompics .com 在 Pexels 提供