Xcode 配置多套 App 圖標(biāo)的方法 --- AppStore 圖標(biāo) A/B Test 實(shí)踐

image.png

最近蘋果推出 App Store 產(chǎn)品頁的新功能，其中在 app 產(chǎn)品頁的不同版本上使用不同的圖標(biāo)，通過 A/B Test 找出效果最佳的版本。但是蘋果文檔并沒有給出詳細(xì)的教程，怎么在 Xcode 中集成多套圖標(biāo)呢？這就是本文要講解的內(nèi)容，適合 iOS 技術(shù)開發(fā)同學(xué)閱讀。

一、背景

2021 年 12 月 08 日，蘋果推出 App Store 產(chǎn)品頁的新功能[1]，在 App Store 中開發(fā)者可以針對(duì) app 產(chǎn)品頁的不同版本上使用不同的圖標(biāo)、截屏和 app 預(yù)覽，通過 A/B Test 找出效果最佳的版本。

有部分讀取可能知道我們?cè)谥暗奈恼?a target="_blank">解讀 AppStore 新功能：自定義產(chǎn)品頁面和 A/B Test 工具，當(dāng)時(shí)留下這個(gè)一個(gè)問題：測(cè)試不同的 app 圖標(biāo)，提交新圖標(biāo)的 app 審核流程是怎么樣？

在Get ready to optimize your App Store product page - WWDC21[2]視頻中有這樣一段話：

And remember, to test a variation of your app icon, you'll need to include the icon assets in the binary of your app version that is currently live, so make sure to prepare your app releases accordingly. 請(qǐng)記住，要測(cè)試 app 圖標(biāo)的變體，您需要將圖標(biāo)集包含在當(dāng)前上線的 app 版本的二進(jìn)制文件中，因此請(qǐng)確保相應(yīng)地準(zhǔn)備應(yīng)用版本。

1.1 Xcode 集成多套測(cè)試 App 圖標(biāo)

怎么包含不同的圖標(biāo)集到 app 中呢？首先，想到的是 Xcode 13 beta 版本，然后在蘋果的文檔Xcode 13 Beta 3 Release Notes | Apple Developer Documentation[3]中找到這樣一段話：

Asset Catalogs

New Features

At runtime, your app can now use iOS app icon assets from its asset catalog as alternate app icons. A new build setting, “Include all app icon assets,” controls whether Xcode includes all app icon sets in the built product. When the setting is disabled, Xcode includes the primary app icon, along with the icons specified in the new setting, “Alternate app icon sets.” The asset catalog compiler inserts the appropriate content into the Info.plist of the built product. (33600923) 在運(yùn)行時(shí)，您的 app 現(xiàn)在可以使用其資產(chǎn)目錄中的 iOS app 圖標(biāo)資產(chǎn)作為備用 app 圖標(biāo)。新的構(gòu)建設(shè)置“包括所有 app 圖標(biāo)資產(chǎn)”控制 Xcode 是否包含構(gòu)建產(chǎn)品中的所有 app 圖標(biāo)集。當(dāng)該設(shè)置被禁用時(shí)，Xcode 包括主 app 圖標(biāo)，以及在新設(shè)置“備用 app 圖標(biāo)集”中指定的圖標(biāo)。資產(chǎn)目錄編譯器將適當(dāng)?shù)膬?nèi)容插入到構(gòu)建產(chǎn)品的 Info.plist 中。(33600923)

先說結(jié)論：實(shí)現(xiàn)多套App圖標(biāo)集成，是要依賴Xcode 13!Xcode 13!Xcode 13!

二、正文

在 Xcode 13 之前，如果要實(shí)現(xiàn) iOS App 動(dòng)態(tài)切換圖標(biāo)，需要在 Info.plist 中添加CFBundleAlternatelcons相關(guān)字段來聲明對(duì)應(yīng)的備用圖標(biāo)。如果要多套 App 圖標(biāo)，那么需要添加很多標(biāo)簽，不夠直觀和高效。

所以，在 Xcode 13 開始，可能通過項(xiàng)目的Assets.xcassets里創(chuàng)建 AppIcon 圖標(biāo)模板的形式，直觀又方便管理圖標(biāo)。

2.1 如何添加多套 App 圖標(biāo)

首先，我們直接來說一下怎么做，其實(shí)也不復(fù)雜。最后文章，在來總結(jié)一下注意事項(xiàng)。

圖片

跟添加 App 圖標(biāo)一樣，把所有需要的圖標(biāo)集都添加到Assets.xcassets中就可以。

然后將Include all app icon assets改為YES。（注意，需要 Xcode 13 以上才有這個(gè)字段?。?/p>

圖片

選項(xiàng)Include all app icon assets配置的作用是打包時(shí)決定 Asset Catalogs 編譯器要不要把所有的備用圖標(biāo)也編譯到 asset 集中。

所以，簡(jiǎn)單來總結(jié)：

  1. 使用 Xcode 13
  2. 在Assets.xcassets創(chuàng)建多套測(cè)試的圖標(biāo)，并添加對(duì)應(yīng)的圖標(biāo)
  3. 在Include all app icon assets設(shè)置為YSE

2.2 原理分析解答

如何驗(yàn)證多套圖標(biāo)是否添加成功

要驗(yàn)證是否成功，就要知道 Xcode 做了什么。將Include all app icon assets改為YES，Xcode 做了幾件事：

  • 把每套 icon 的 60x60@2x 和 60x60@3x 兩張 iOS App 圖標(biāo)打包到Assets.car文件中
  • 把每套 icon 的 60x60@2x 和 60x60@3x 兩張 iOS App 圖標(biāo)放到包體目錄中
  • 在 Info.plist 的CFBundleAlternateIcons字段下添加備用圖標(biāo)為名字的 key-value

所以，從這 3 個(gè)方面可以驗(yàn)證。

打包后，可以查看包體下的 Info.plist 文件下 Icon files (iOS 5) 配置下是否有CFBundleAlternateIcons對(duì)應(yīng)的多套圖標(biāo)的名字：

圖片

查看Assets.car文件里的是否包含圖標(biāo)也可以驗(yàn)證，這里就不重復(fù)了。

只使用部分備用的圖標(biāo)

可以通過Alternate App Icon Sets設(shè)置只使用的備份圖標(biāo)。前提條件時(shí)，Include all app icon assets要設(shè)置為NO。

圖片

通過上圖，就可以指定只設(shè)置 3 套備用圖標(biāo)。需要特別注意：

  • 填寫的圖標(biāo)集名字，一定要與Assets.car里的名字一致
  • 如果填寫了錯(cuò)誤或者不存在的名字，Xcode 會(huì)忽視并且不會(huì)報(bào)錯(cuò)

所以，可以通過上面說到的驗(yàn)證方法確定名字沒有填寫錯(cuò)。

注：當(dāng)Include all app icon assets要設(shè)置為YSE時(shí)，Xcode 會(huì)忽視Alternate App Icon Sets設(shè)置的內(nèi)容。

不要用有透明的圖標(biāo)
圖片

如上圖所示，使用有透明區(qū)域的圖片，最終顯示的圖標(biāo)，背景將會(huì)變成黑色：

圖片
1024 圖標(biāo)不要用 JPG 格式

1024x1024 的商店圖片，作為主圖標(biāo)時(shí)可以用jpg。如果用 png 格式，則不能有透明區(qū)域，否則上傳 ipa 包體時(shí)會(huì)報(bào)錯(cuò)，無法上報(bào)。

圖片

而備用的圖標(biāo)，則不能使用 jpg！不能使用 jpg！不能使用 jpg！

上報(bào)時(shí)會(huì)報(bào)錯(cuò)：

Dear Developer,

We identified one or more issues with a recent delivery for your app, "斗羅大陸：魂師對(duì)決" 2.3.1 (2.3.1). Please correct the following issues, then upload again.

ITMS-90033: Invalid Image - - Image found at the path 'TestAIcon-1x~marketing-0-7-0-85-220.jpeg' referenced under key 'CFBundleAlternateIcons' is not a valid PNG file

所以，備用圖標(biāo)的 1024x1024 一定要用 PNG 格式！

代碼進(jìn)行圖標(biāo)切換

最后，因?yàn)橐呀?jīng)配圖和驗(yàn)證了備用圖片已經(jīng)生效，那么也可以用代碼來調(diào)用，切換備用圖標(biāo)測(cè)試：

設(shè)置某個(gè)備用圖標(biāo)時(shí)，傳入圖標(biāo)集的名字就可以，一句代碼：

UIApplication.shared.setAlternateIconName("Rainbow")

設(shè)置回默認(rèn)圖標(biāo)的代碼：

UIApplication.shared.setAlternateIconName(nil)

最后，我們將以上配置示例，上傳到 GitHub 上，提供了 ObjC、Swift、SwiftUI 的版本，大家可以參考。

  • 37iOS/Assets-Alternate-App-Icons - GitHub[4]
圖片
更靈活的配置

Include all app icon assets在 Xcode 的對(duì)應(yīng) buildSettings 的名字是ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS，而Alternate App Icon Sets對(duì)應(yīng)的字段是ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES。還有一個(gè)設(shè)置 App 主圖標(biāo)的字段Primary App Icon Set Name對(duì)應(yīng)是ASSETCATALOG_COMPILER_APPICON_NAME。

其實(shí)這些字段，在 Xcode 13 有映射成了 GUI 界面：

圖片

這有什么好處？通過多套圖標(biāo)測(cè)試后的數(shù)據(jù)，可能需要使用某個(gè)備用圖標(biāo)設(shè)為主圖標(biāo)，通過General面板上，可以快速把備用的圖標(biāo)集改成主圖標(biāo)。

蘋果后臺(tái)的配置

需要注意，包含多套圖標(biāo)的包，需要按包體送審的流程過審后，才能在蘋果后臺(tái)產(chǎn)品頁優(yōu)化標(biāo)簽下看到多套圖標(biāo)，App Icon分標(biāo)簽下：

圖片

具體，如果配置多套圖標(biāo)的測(cè)試方案，可以參考蘋果文檔：配置處理方案 - App Store Connect 幫助[5]。這里就不展開了。

總結(jié)

Xcode 13 支持通過Assets.xcassets配置多套備用圖標(biāo)，減少了開發(fā)者以前繁瑣的配置，提升開發(fā)體驗(yàn)，希望后續(xù)有更多開發(fā)者來嘗試，多套圖標(biāo)能一定程度上滿足用戶的自定義需求。

對(duì)多套 App 素材進(jìn)行 A/B 測(cè)試，找出效果最佳的素材，是一個(gè)優(yōu)秀的產(chǎn)品迭代優(yōu)化的手段。大家都可以馬上嘗試一下，找出最具吸引力的版本，更吸引更高效的 App Store 產(chǎn)品頁！

參考資料

[1]

推出 App Store 產(chǎn)品頁的新功能:https://developer.apple.com/cn/news/?id=2xnhx92t [2]

Get ready to optimize your App Store product page - WWDC21:https://developer.apple.com/videos/play/wwdc2021/10295 [3]

Xcode 13 Beta 3 Release Notes | Apple Developer Documentation:https://developer.apple.com/documentation/Xcode-Release-Notes/xcode-13-beta-release-notes [4]

37iOS/Assets-Alternate-App-Icons - GitHub:https://github.com/37iOS/Assets-Alternate-App-Icons [5]

配置處理方案 - App Store Connect 幫助:https://help.apple.com/app-store-connect/#/devb53f12312

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容