編輯導語：眾所周知首頁是產品最重要的部分之一，首頁呈現出來的效果往往與流量有著密切的關系。本文以vivo官網APP為案例，復盤了vivo官網首頁改版設計過程并給予分析，感興趣的朋友一起來看一下。

一、vivo 官網 APP是什么？

vivo 官網 APP（下簡稱官網）作為 vivo 手機內置的應用，是提供 vivo 產品 / 服務 / 權益 / 資訊 / 社區的線上官方陣地，也是陪伴 vivo 用戶「購機」至「換機」周期的重要角色。

因此，官網的產品體驗和設計品質，很大程度上決定了用戶對 vivo 品牌的認知，保證官網設計品質，是保證品牌正向認知的關鍵一環。

二、vivo 官網 APP 首頁為什么改版？

隨著業務的發展迭代，官網開始出現設計不統一、品質下降等問題，在首頁表現得尤其明顯，因此設計師發起了官網的設計升級，先從首頁入手，提升首頁界面的統一性和品質。

三、基于用戶業務視角看「品質」優化首頁容器是關鍵

官網首頁定位「精選」，聚合產品、權益、服務、社區等內容，滿足用戶需求。

從用戶視角看，首頁存在 2 種場景：

1. 頭部搜索、金剛區為「明確目的場景」；
2. 頭部以下內容區為「無目的場景」。前者提供功能入口，滿足用戶明確的需求；

后者展示內容，滿足用戶閑逛的需求。

明確且固定的「功能入口」，經過長期認知培養，轉化趨于穩定，優化空間較少；而時常更新的「內容」在呈現上的好壞，影響用戶對 vivo 品牌的印象及瀏覽欲望，決定首頁留存和轉化。因此優化「容器」，使內容更好地呈現給用戶，是本次設計升級的核心。

從業務視角看，今年官網首頁的內容運營將圍繞「人-貨-場」概念，通過分析用戶（人）特征，將信息（貨）推送給相應的用戶，「場」是最后呈現信息的地方，即「容器」。業務方希望用更精簡的容器規則去滿足不同的「人-貨」需求，做到「少樣式」對「多場景」，構建內容展示標準，用更精簡、易理解的樣式，讓用戶聚焦到信息本身。

四、亂，多，不全是首頁容器的核心問題

走查首頁，發現如下 3 個問題：

1. 容器樣式亂

首頁容器樣式多且亂，無章可循。需結合產品定位及功能訴求，梳理容器設計，定義標準。

2. 信息冗余

無效信息多，如「獨立顯示芯片」這種言之無物的信息，又如社區帖子密集的信息，都造成了信息過載。

3. 信息展示不全

首頁經常出現信息不全的狀態，對品質影響極大，用戶無法獲取有效信息。

五、頭部品牌的官方商城設計都崇尚「簡潔」美學

了解自身問題后，我們對各行業頭部品牌的官方商城進行分析，以此了解行業設計趨勢。

1. 簡潔的直觀印象

縱覽他們的首頁，撲面而來的是「簡潔」，這是最直觀的印象。

2. 簡潔從何而來

深入分析其設計，可發現簡潔背后 3 個核心共性：

有限的容器：限制了基礎容器樣式的數量，最多不超過 3 種。

有限的信息：限制內容在首頁展示時的信息數量和信息容量。

明確的優先級：圖片是界面視覺焦點，輔以簡潔的標題 / 價格 / 標簽等文字信息，多數品牌去掉冗長的賣點。

3. 簡潔背后的意義

「簡潔」是美的，但信息精簡、色彩素雅等特點也常被定性為「氣氛弱」、「吸引力低」，尤其在銷售領域。那為何這些品牌會將「簡潔」的設計美學引入商城界面設計呢？這背后隱含消費者的認知心理。

在追求功能性及性價比的消費領域，商品滿足消費者物質層面需求，購買動機是功能、賣點、價格等利益點，因而在傳統快消電商界面的設計中，更注重利益點、界面氣氛對消費欲望的刺激。

而在追求高品牌溢價的消費領域，商品滿足精神層面需求，如身份價值認同，購買動機圍繞商品的設計品質、是否符合自己的社會屬性等方面，過分強調利益點及界面氣氛反而會影響品牌調性，使品牌優勢被減弱。這類品牌商品的展示更聚焦在商品本身，「簡潔」的設計美學就與品牌目標相得益彰。

六、用「至簡」的理念重塑vivo 官網 APP 首頁

用戶認知規律、業務訴求及行業趨勢的分析結果，都直指關鍵詞「簡潔」，它帶來了邏輯嚴謹、規則明確、標準統一的有序體驗，隱于簡潔的表象之中，讓用戶更沉浸地體驗內容。這種追求簡潔表現、有序體驗的理念，我們稱之為「至簡」，它將指導官網首頁改版。

1. 容器樣式梳理

基于「至簡」理念，經過梳理和方案嘗試，首頁的基礎容器被優化為 3 類：

（1）廣告容器

即傳統意義上的 Banner，本次改版統一了首頁所有 Banner 的規格、元素組成、文案排版，包括頭部 Banner / 新品 Banner / 穿插 Banner。

（2）產品容器

即展示產品的容器，新版的產品容器統一了信息架構的邏輯，文案限制在 3 階之內，提供了「組合型」和「橫排型」兩種形式，對應不同的場景。

組合型容器提供 2 種規格，擁有同樣的信息量，根據業務需求自由組合。

橫排型容器提供 1 種規格，根據業務需求選擇「橫排」或「橫滑」。

（3）內容容器

即展示品牌、社區內容的容器。該容器統一使用上圖下文的信息架構，可隨場景進行不同形式的拓展。

2. 信息展示優化

梳理完容器類型后，對信息展示做進一步優化，解決「信息冗余」和「信息展示不全」的問題。

（1）產品信息

以熱銷產品樓層為例：信息布局不合理導致手機型號展示不完整；可配置副標題但文案較多；通過顏色強調價格但價格并無優勢。

新版的信息做了如下優化：優化信息布局為手機型號騰出更多空間，保證展示完整；精煉副標題的核心賣點，轉用限制字數的標簽進行強調；不強調價格，引導用戶關注產品及賣點。

（2）社區、品牌信息

以社區樓層為例：首頁社區樓層通過精選內容為官網社區引流，其定位是「入口」，舊版首頁將社區內容直接平鋪，露出了過多的信息，不符合定位的同時，也在首頁造成信息冗余的問題。

因此新版首頁做了大幅度精簡，只露出最核心的「標題/來源/互動情況」 信息，在有限的界面里露出更多的社區帖子。

3. 視覺規則優化

基于容器的優化策略，進一步制定了詳細的視覺規則。

官網首頁由不同大小的容器組成，為了更科學地定義容器規格，引入了柵格。

字體上，使用 OriginOS 的定制字體 — 漢儀旗黑，保證可讀性及統一性。

在設計界面時，在準確體現信息層級的前提下克制使用字號。如容器的文案展示，僅使用了 2 種字號，保持極致的統一和簡潔。

圖形語言同樣值得考究。官網的內容信息優先級更高，圖形是輔助角色。因此圖形設計更關注語義是否明確、元素是否統一、形式是否簡潔，而不過分追求差異化?；?vivo 品牌及產品體現出來的圓潤親近屬性，對官網的卡片圓角、圖標、標簽、按鈕等元素做了統一的設定，保證整體的協調一致。

色彩體系也從 0 到 1 構建起來。過往迭代中，顏色使用僅憑執行設計師的個人感受，沒有標準化。對此，基于vivo品牌藍為官網重新定義標準色卡，包括常規色階、材質色階及灰色階，系統指導顏色使用。

基于新的容器規則及整體視覺規則，首頁刷新后效果如下圖。

七、是結語，但不是結束

本次 vivo官網APP的首頁改版，從預研、推動、落地到驗證花費近半年時間，付出了相當「復雜」的努力。而我們的「復雜」，是為了給用戶提供「至簡」的設計品質和產品體驗。

但這并不是結束，首頁改版后，將基于全新的設計語言，對全局界面進行翻新，全面提升官網設計品質。賦能 vivo 品牌，我們在路上。

作者：劉曉峰；公眾號：VMIC UED

本文由 @VMIC UED 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議