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

簡介

行動裝置,隨著裝置供應商應用程式商店問世,使用者心理模型 來瞭解如何探索、評估及安裝軟體使用者現在已非常熟悉應用程式商店, 從應用程式商店提供的額外資訊,例如應用程式的背景資訊 社交意見回饋、評分等資訊在電腦版平台上推出 包括 ChromeOS、Mac 和 Windows

各種安裝途徑面臨的挑戰

現今,如果使用者想安裝 PWA,資訊列和互動視窗會盡可能減少顯示 可能不準確或不適當如果繼續安裝,安裝程序太快 相關資訊這違反他們安裝應用程式的期望,可能會讓他們退出應用程式 好像不太對這是什麼事感到困惑。

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

協助開發人員提供與原生體驗相當的安裝體驗 Chrome 推出全新的安裝介面,安裝更豐富,讓開發人員可以 說明和螢幕截圖,並顯示在底部功能表對話方塊中 。

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

這將為開發人員創造更引人入勝的安裝程序 較符合使用者期望,且模仿現行的思維模式 成長歷程

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

回溯相容性

網站如未在資訊清單檔案中至少加入一張螢幕截圖,網站仍會繼續接收 或現有提示視開發人員社群的參與情況而定,日後可能會有所變動 和使用者回應。

預覽使用者介面

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

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

導入作業

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

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

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

意見回饋

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

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