更豐富的 PWA 安裝使用者介面

簡介

行動裝置和裝置供應商應用程式商店問世後,改變了使用者探索、評估及安裝軟體的心理模型。使用者現在已熟悉應用程式商店,以及透過應用程式商店提供的額外資訊,例如應用程式的相關資訊、社交意見回饋、評分等,您會發現電腦版作業系統 (包括 ChromeOS、Mac 和 Windows) 中的應用程式商店隱喻功能出現了。

各種安裝途徑面臨的挑戰

現今,如果使用者想安裝 PWA,資訊列和互動視窗會盡量顯示少量資訊。如果使用者繼續安裝,則表示程序過快且未提供使用者背景資訊。這不符合使用者對安裝應用程式的期望,他們可能會對此感到困惑。

PWA 安裝使用者介面示例。
PWA 安裝使用者介面示例

為了讓開發人員提供與原生體驗相媲美的安裝體驗,Chrome 推出了全新的安裝介面「更豐富的安裝」功能,可讓開發人員在資訊清單檔案中加入說明和螢幕截圖,並將螢幕截圖顯示在 Chrome for Android 的底部功能表對話方塊中。

Chrome 的底部功能表 UI 範例。
Chrome 的底部功能表 UI 範例。

這讓開發人員有機會建立更具吸引力的安裝程序,提供更符合使用者期望,且能模擬他們現有的已安裝體驗心理模型。

展開的安裝使用者介面更豐富。
已展開更豐富的安裝使用者介面。
已收合資訊更豐富的安裝使用者介面。
已收合更豐富的安裝使用者介面。

回溯相容性

如果網站的資訊清單檔案中沒有至少一張螢幕截圖,網站會繼續接收現有提示。視開發人員社群的認同及使用者的回應而定,日後這可能會改變。

預覽使用者介面

這個使用者介面適用於 Android 裝置的 Chrome 94 和 Chrome 108 電腦版

這項功能已在 squoosh.app 上啟用,但可前往該頁面預覽。

導入作業

如要顯示內容更豐富的安裝 UI 對話方塊,開發人員必須在 screenshots 陣列的相應板型規格中新增至少一張螢幕截圖。description 並非必要欄位,但建議使用。內容對話方塊會使用 screenshotsdescription 欄位的內容建立,以便提供與應用程式商店安裝體驗更類似的體驗。這個 UI 有助於使用者識別他們要將應用程式新增至裝置,此外,開發人員還可以在安裝時提供更多可用空間,供使用者查看具體的背景資訊。

舉例來說,開發人員可以使用 description 欄位醒目顯示應用程式的功能,鼓勵使用者將該應用程式保持在裝置中;而 screenshots 則可將網頁應用程式的外觀和風格呈現為獨立狀態,並提供平台應用程式的所有簡便存取方式。

如需詳細規格和指南,瞭解如何將這些內容加入應用程式,請參閱更豐富的安裝 UI 模式

意見回饋:

我們日後會考慮加入其他資料,例如類別和應用程式評分,但這是以開發人員和使用者的意見回饋為根據。

在未來幾個月內,我們希望看到開發人員如何探索新的 UI 模式,並希望獲得您的意見回饋。請填寫這份表單與我們聯絡