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

穆斯塔法庫爾杜杜
Mutafa Kurtuldu
阿德里亞納賈拉
Adriana Jara

簡介

行動裝置和裝置供應商應用程式商店引進,改變了使用者在尋找、評估及安裝軟體的心理模式。現在,使用者對應用程式商店感到相當熟悉,也能瞭解應用程式商店提供的額外資訊,比如應用程式的內容、社會意見、評分等,在電腦作業系統 (包括 ChromeOS、Mac 和 Windows) 中即看到應用程式商店隱喻。

對今日安裝途徑的挑戰

現在,如果使用者想安裝 PWA,資訊列和強制回應重疊會顯示的資訊不足。如果使用者繼續安裝作業,程序速度會太快,但並未提供使用者背景說明。這不僅符合使用者對安裝應用程式的期望,也可能讓他們對執行情況感到困惑。

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

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

Chrome 底部功能表使用者介面範例。
Chrome 底部功能表 UI 範例。

這讓開發人員有機會建立更具吸引力的安裝程序,更符合使用者期望,並模仿現有的已安裝體驗的心理模式。

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

回溯相容性

如果網站未在資訊清單檔案中至少加入一張螢幕截圖,則會繼續收到現有的提示。日後這可能會根據開發人員社群和使用者的回應情況改變。

預覽 UI

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

這項功能在 squoosh.app 上啟用,並可在該處預覽。

導入作業

如要顯示更豐富的安裝 UI 對話方塊,開發人員需要為 screenshots 陣列中的對應板型規格新增至少一張螢幕截圖。description 為選用欄位,但建議使用。內容對話方塊是使用 screenshotsdescription 欄位的內容建立,目的是讓使用者體驗更類似於應用程式商店安裝。此使用者介面可協助使用者辨識自己正在在裝置上新增應用程式。開發人員的可用空間越多,可以在安裝時為使用者提供特定情境。

舉例來說,開發人員可以使用 description 欄位醒目顯示應用程式功能,吸引使用者繼續使用裝置;而 screenshots 則能單獨呈現網頁應用程式的外觀與風格,而且方便存取平台應用程式具備的所有功能。

如需詳細的規格和指南,以及說明如何將這些內容新增至應用程式,請參閱「更豐富的安裝 UI 模式」。

意見回饋

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

我們希望在未來幾個月內,瞭解開發人員如何探索這種新的 UI 模式,因此希望收到您的寶貴意見。請填寫這份表單與我們聯絡