引言

應用商店業務處于成熟期，設計改版并非易事。它如同一座繁華的城市，兼容著各個年齡段和口味的人群，如何更好的滿足不同人的需求？這是我們的首個挑戰。與此同時，需要確保商業化分發效率的穩定，這是第二個挑戰。

然而，我們在不斷的嘗試中找到了答案，這是一種借助科學方法去衡量和理解用戶體驗，并通過簡潔而內斂的設計來解決問題的方式。這是一次商業和藝術的結合，是我們對卓越體驗不斷的追求和承諾。

于是，在精心策劃的 9.0 版本更新中，我們成功地打破了傳統模式，將克制美學融入到商店的設計理念中，讓它成為一種有效的方法和我們堅持信仰的一部分。

這就是我們對應用商店業務的理解，一種更加深情、精致且優美的詮釋。

更多改版案例：

一、項目背景

1. 為什么要做 9.0 改版？

21 年商店經歷數次設計改版，灰度測試，最具有代表性的是《商店 UI9.0 視覺升級》及《動見創意探索專項》，致力于打造精彩的產品體驗，為商店業務提供創新的設計思路。但都因商業化數據下降，而未能成功上線。回望過去，商店未做大改版已有 3 年之久，8.0 版本號從 8.01 到了 8.99，即將破百。

前期商店改版探索

2. 為什么商店改版這么難？有兩個難點

難點 1：通過調研我們發現商店有四類用戶，且年齡與喜好跨度大，不同群體有不同訴求，年輕群體追求好逛、驚喜。而大齡用戶追求安心、易用；在設計時需要兼顧權衡。

難點 2：滿足大盤用戶訴求的同時，需要確保商業化分發效率的穩定，設計時需要保證內容展示效率，這也是導致產品形態不敢做較大變動的根本原因。

因為體量大、商業化重，做一點改動對數據波動就會很大，導致進入到擔心數據不好不敢改動，不敢改動就沒有變化的困境循環。

過程中我們深刻認識到，僅通過表層的視覺刷新，沒有整體產品形態和內容的改版，是無法達到用戶對商店好逛、驚喜的感知的。所以需要通過與業務側共創，對功能、框架、內容、表現層面尋求新的設計突破，并找到商業化和用戶體驗的平衡點，才有可能給用戶煥然一新的感知，達成 9.0 升級目標。

通過小伙伴們的不懈努力，歷經 200 多天，2 次規劃匯報、10+次共創工作坊、1 次完整提案，我們運用科學度量發現問題，通過克制美學解決問題，最終與業務通力合作，完成了這次 9.0 改版的突破。

二、設計目標推導

22 年，通過體驗度量模型兩期監測，我們精準定位到“吸引力、新穎、簡潔、一致性”四個低分指標，并且這些低指標項都涵蓋在之前用研定性訪談結論中。

業務側也針對不同訴求用戶制定了 9.0 整體產品規劃夯實基礎體驗；拓展服務邊界；分人群個性化；建立期待，希望通過以上策略，給用戶打造更安心、智慧、精彩的商店，滿足多樣化需求，基于業務側 9.0 規劃，設計會著重圍繞兩個部分來提升體驗。

1. 「框架及信息的升級」致力于讓用戶更好找、更快決策，對應業務規劃夯實基礎體驗的設計策略。
2. 「品牌形象重塑」致力于為用戶打造品牌一致性、有吸引力、新穎的商店，為用戶營造更加官方高效、懂我貼心、好逛驚喜的感受。總體設計策略與業務是相契合的，助力商店業務達成活躍分發的目標。

1. 框架優化思路

通過框架優化讓布局更合理，用戶需求路徑更好找。

①首頁框架優化

首頁框架問題主要有這三類：

1. 首頁模糊需求路徑較亂，主次場景歸類不太清晰。
2. 分類作為核心路徑，人均分發效率和滲透率高，但入口分散不明顯，用戶感知弱。
3. 沒有入口可以運營，整體框架可拓展性較弱。

基于以上，我們提煉出總體設計目標——通過合理區分主次模塊、構建合適的框架樣式，讓用戶更高效的找到功能模塊，達成易辨別、易理解、及分發指標的提升。

針對首頁框架層，用戶在商店有 4 種需求解決路徑，精準、模糊、潛在、管理，模糊需求目前占比最大，比如哪個視頻 app 更好？哪個自拍更好看？哪個養成游戲更好玩？模糊需求主要分為核心和次要場景，核心場景為搜索、分類、游戲、應用，需要強化路徑感知，讓用戶輕松觸達；次要場景為必備、排行、熱門、專題等，需要合理歸類方便查找。

針對首頁框架，我們通過競品分析歸納出三種常見類型。入口分流是我們商店現有框架，金剛入口處于視覺焦點位置，感知強，拓展性較差；平行分流是華為、小米、應用寶的框架結構，底 tab 與頂 tab 權重區分較好，頂 tab 拓展性強；平行入口分流是電商類慣用結構，較復雜，比較適合于商品類目較多的產品。

最終我們從用戶和平臺視角認為「平行分流結構」更優，原因是布局簡潔，功能主次分區明確，能更好的兼顧拓展性和屏效比。

我們的框架設計方案也采用平行分流結構，首先，將入口改為 Tab，區分框架優先級，強化底 Tab 權重；

其次，將分類下移到底 Tab，加強全局性，強化模糊需求核心路徑感知，而排行則上移到頂 Tab 與推薦內容歸類；

再次，將頂部 Banner 下移，凸顯搜索入口。通過這些優化讓用戶模糊需求主次路徑歸類更清晰，凸顯分類權重和感知。

最后，在頂 Tab 中，我們預留出運營拓展空間，讓常規活動、精品內容、新內容在頁面內可以更靈活的嘗試，讓用戶方便的感知到高品質運營內容。

②分類頁框架優化

分類頁改版是本次 9.0 產品規劃中，有效提升活躍和轉化的重要場景。我們通過走查和競對發現有以下體驗問題

1. 一級分類展示不全，用戶不易察覺。
2. 頁面信息平鋪，與應用相關的信息少。
3. 任務路徑深，瀏覽內容須跳至二級頁面。

所以我們希望通過框架布局調整，讓用戶更高效找到目標類目，提升查找效率。通過調研，了解到分類用戶偏下沉，希望操作更簡單，信息更直觀。

根據業務目標及用戶訴求，提煉出分類頁改版的設計目標是，通過框架優化，讓操作短平快；通過結構優化，讓信息更易辨別。

針對分類框架，通過競品分析歸納出三種常見類型：

1. 側豎向導航，在單頁中切換 tab
2. 索引導航，用戶可快速定位二級類目，但下載路徑較長。
3. 平行分流導航，對特定類目信息曝光大，但一級類目切換路徑長。

從用戶視角和從平臺視角綜合來看，使用「側豎向導航」更優，原因是層級扁平，操作短平快，使用效率高，兼顧拓展性和屏效比。

最終，分類框架設計方案是，在框架層扁平化層級，通過設計側豎向導航，將雙級頁面變為一級頁面，縮短下載路徑，讓用戶切換類目下載更高效。

對于二級分類，我們也嘗試了多種方案，最終選擇「去掉排序功能，強化二級分類的方案」，為了讓切換二級頁更方便。

因為從后臺數據發現，二級類目的活躍和分發都比一級要高，需求強烈，排序的活躍和轉化很低；用戶希望快速觸達二級分類，且簡單直觀，易于理解；所以我們建議去掉排序，強化二級分類的方案，整體層級更簡化，用戶切換更直觀方便。經過科學的論證，也說服了產品側接納我們的方案建議。

同時也考慮到與游戲中心的統一性，讓兩個產品整體框架和基礎控件感知保持一致，避免差異化體驗，讓用戶在相同場景下能盡可能保持一致的操作習慣。最后，我們來看一下首頁和分類頁整體框架優化后的效果。

新版上線后，從體驗度量和數據層面都獲得了出乎意料的結果。從體驗度量檢測結果來看，框架優化讓操作步驟變得更簡單高效，用戶反饋更加簡單易學了。同時單場景度量結論中發現首頁、分類場景在操作簡單、易學、操作步驟短平快等指標都超過大盤平均分，這也充分驗證了前面對框架及信息的思考。

那我們再來看一下數據層面，首頁框架改版 + 頁面視覺體驗優化，讓翻屏率提升明顯，說明用戶對新版有較大的瀏覽興趣；分類頁的用戶訴求也被更好的滿足，分發量有了大幅增長。說明改版從產品和用戶層面都是符合預期的。

2. 全局決策信息優化思路

通過決策信息優化讓信息傳遞更加豐富貼心，方便用戶更快的下載決策。

首先，我們通過對用研反饋問題梳理，總結 2 點問題。

1. 幫助用戶高效下載決策的信息較少。
2. 一眼望去全是沒有重點的文字，信息枯燥，層次感是不夠的。

設計發力的核心是，通過信息分層，差異化凸顯，高效傳遞給用戶更有價值的決策信息。

總體按照信息歸類、重組、劃分優先級這樣一個思路來設計。

首先，將列表決策信息劃分為兩類，一類是 Icon、標題等用戶了解應用的必備信息。另一類是極光獎、排行、福利等魅力信息。

接下來，將魅力信息按照用戶重要程度劃分為三類：

1. 頂部的極光獎、排行代表優質權威，需要差異化重點突出，可以看到友商都會做凸顯和強化。
2. 中間是精選評論、福利等差異化特色信息。基于用戶從眾、驅利等心理，可提升用戶下載動機，類似大眾點評的效果。
3. 第三類是標簽，更適合游戲用戶需快速甄別游戲類型，像 TapTap 會做差異化展示。

為了讓信息更高效的傳遞，我們制定了信息展示規則，將權威特色信息分層設計，幫助用戶更高效決策。

我們通過信息層級和視覺表現層級對不同權重的信息進行區別展示。

1. 針對極光獎、排行信息，會強化展示，凸顯權威。
2. 針對評論、福利信息，會做差異化凸顯，幫助用戶提升下載動機。
3. 針對標簽，會在游戲應用中強調，讓用戶快速區分差異化。

在詳情頁，同樣運用信息分層展示規則，通過對獎項、排行等信息分層和視覺強化，讓用戶一眼 Get 到重點信息，高效決策。我們再來看一下，決策信息優化后在頁面中的效果，在層級上會更舒適，感知上更權威可信。

以上就是框架及信息的升級的設計思路，我們運用科學的體驗度量發現問題，嚴謹全面的推導解決問題，完成了交互層面改版，也收獲了出乎意料的結果。

3. 品牌形象重塑

在前面的內容中，我們從交互視角闡述了「框架及信息的升級」的整體內容。現在，我們從視覺的角度來闡述「品牌形象重塑」的相關內容。

應用商店品牌形象重塑的目標是通過視覺調性的升級，提升商店的吸引力和新穎性，從而提升應用下載量，最終促成業務目標的達成。

應用商店品牌形象重塑包含三個方面的內容，分別是一致性、吸引力和新穎性。

①一致性

在 22 年 vivo 手機推出 originOS2.0 操作系統后，我們在視覺上進行了全面的升級。作為系統預裝應用的應用商店，我們需要保持與 OS 風格的一致性和品牌調性的認知，這有助于強化 vivo 官方應用商店的感知，也是相比第三方應用商店的最大優勢之一。

基于此，我們通過應用商店 9.0 大改版進行了一個全面的品牌形象升級，以保證視覺風格的一致性和認知傳遞。

此次 originOS2.0 的升級主要圍繞層級感、舒適性這兩個維度進行打造。下面，我們一起來看商店是如何從這兩個維度完成系統一致性適配的。

由于應用商店與 OS 工具產品屬于不同的業務類型，產品目標和定位有較大的差異，這直接決定了產品形態的不同。因此，OS 的設計表現手法并不能直接應用于應用商店產品。為了實現與系統感知的一致性和統一性，我們需要基于系統規范，結合產品特征，尋找平衡的設計策略。

「層級感」

應用商店產品形態主要以應用列表為主，樣式單調，層級感不夠強。為了提升列表的層級感，我們通過強化模塊分區和穿插內容的節奏感，來打破頁面單調感。

將應用商店首頁內容轉換成布局圖，就能清晰地看到模塊內容的相似性極高，內容也過于平淡，容易讓用戶產生疲勞感。

為了提升瀏覽的舒適性，我們在不影響首屏應用曝光數量的前提下，運用格式塔法則對結構進行了優化整合，建立視覺錨點，讓信息傳遞更有節奏感。同時，我們通過增加頁面邊距、加大容器圓角等手段，增加空白區域（負空間）的面積，來有效提升頁面的通透感，使頁面看起來更加簡潔整體。

格式塔原則

「舒適性」

這部分的主要是通過圖標風格調整和增加基礎動效來提升舒適性。因動效內容在后面還會講到，這里就制作圖標優化的講解。作為畫面五要素之一，圖標風格可以影響產品調性，傳遞品牌認知。與 OS2.0 圖標升級理念的思想相同，我們需要回歸到場景，根據每個產品的調性和重要級別去定義圖標的表現手法，以達到畫面平衡和舒適感。

在當前應用商店的場景中，圖標已經較長時間未做迭代，其視覺風格稍顯陳舊，且與應用圖標和安裝按鈕之間缺少明顯差異，優先級不明確，導致視覺動線模糊，影響了信息的傳達效率。因此，我們需要升級圖標風格，明確產品調性和視覺優先級，建立明確的瀏覽動線，提升瀏覽舒適性。

新版圖標在圖形上使用更大的圓角，更加圓潤舒適。結合系統升級后的明亮色彩，整體看起來更年輕，同時不再使用漸變質感，而是通過簡潔的純色讓圖標更加平整簡潔。再結合前景的圖層透疊，讓圖標感覺更加通透、輕盈、更加舒適。

基于應用商店產品的定位，我們通過圍繞系統的層級感、舒適性來打造全新的商店體驗。在實現與 OS 統一的基礎上，我們強化了商店年輕化的品牌調性，整個產品煥然一新。與 OS 風格的一致性進一步提升了應用商店的官方感知。

②吸引力

「容器豐富度」

首先，我們對商店線上的容器現狀進行了盤點。圖中展示了一些出現頻次較高、有代表性的容器。然而，這些容器在頁面上的定位和差異并不明顯，同時也無法判斷這些容器的內容是與哪里相關聯的。整體來看這些容器也缺乏品質感。因此，我們提取了這 4 個容器的結構圖，并發現它們具有很高的共性特征。

整體而言，這些容器可以分成兩大類：banner + 橫排列表 和 banner + 縱排列表。我們完全可以對它們進行樣式整合，減少容器的種類，這樣可以降低用戶的認知成本，提升效率。

基于容器的美觀度和信息傳達效率兩大目標，我們運用格式塔法則對容器進行了重構，通過構成的方法讓容器的層級更加分明，內容展示更加清晰。為了讓容器更具有設計感和點擊欲望，我們引入了空間維度層的概念，并運用透疊的手法，讓整個容器更具有立體空間感，同時也更加簡潔舒適、通透。新版容器將物料和應用信息完美地融合為一個整體，既滿足了美觀度，同時也保證了信息傳遞的高效性。

針對不同場景的容器，我們會根據該路徑下的用戶需求進行特殊考量。例如，在游戲場景中，游戲用戶非常注重游戲畫面品質。因此，在設計上我們通過游戲精致大圖來提升吸引力，同時運用互動彈幕和用戶評論信息等來進一步強化游戲屬性。這樣，用戶就可以從容器本身輕松判斷其內容定位，并激發他們的點擊和下載欲望。

基于不同場景的用戶需求，我們打造了專屬的內容容器，無論在內容定位還是頁面的豐富度上都有了明顯的改善。這樣做不僅提升了產品的吸引力，還能夠更好地滿足用戶的需求。

③新穎性

在過去的幾年里，由于應用商店業務處于迅速成長期，產品更注重發版速度和商業化收益，而對于動效這種投入高但收益不顯著的設計需求并不太關注。然而，隨著應用商店已經成為一個成熟的產品，提升產品體驗變得尤為重要。因此，我們借 9.0 改版的機會對動效進行全面優化，以提升整體產品體驗。

我們重新定義了動效曲線，采用模擬真實物理運動感受的動畫效果，讓用戶的體驗更加自然順滑。特別是商店的幾個主要場景的點擊跳轉，我們讓用戶更直觀地感受到了絲滑般的場景轉場，在操作中帶來新穎的體驗感知。

除了主要場景跳轉之外，我們還基于系統提供的小場景的操作動效來設計商店全場景的動效。有創意的動效可以給用戶帶來驚喜，而流暢的動效則能夠帶來足夠多的體驗提升。在每一個細節上讓用戶感受到我們產品的用心，這不僅有助于提升用戶的整體使用感受，還能增強用戶對平臺的信賴。

最后

本次應用商店 9.0 改版是一次從功能到設計全面的升級，經過項目組各角色的通力協作，完成了本次大改版上線，最終產品核心數據指標都有顯著提升。雖然整體數據表現不錯，但這并不能直接論證設計價值，對于設計來說目標的達成如何？改版后的體驗怎么樣？都需要我們進一步的論證。

從數據維度上拆分，我們通過重要改動點的埋點監測，提取與設計直接相關的指標，如局部的點擊率和頁面的翻屏率等。這些指標的提升可以從數據維度有效論證設計吸引力的提升帶來的核心指標提升。

同時，我們通過體驗度量的前后監測結果看，在前期發現問題的“吸引力、新穎、簡潔、一致性”這幾個指標上都有較大的提升，完全符合改版前制定的預期目標，也說明我們對于設計問題定位是精準的，同時采取的設計策略是有用的。

由于項目時間緊任務重，部分設計效果在策劃評審時有所刪減，只保留了 80%左右的改動效果。但對于成熟期的應用商店來說，有如此大的改動量且有較大的數據提升已經是一項值得欣慰的成果了。

歡迎關注作者微信公眾號：「VMIC UED」