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

一、vivo 官網(wǎng) APP是什么？

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

因此，官網(wǎng)的產(chǎn)品體驗和設計品質(zhì)，很大程度上決定了用戶對 vivo 品牌的認知，保證官網(wǎng)設計品質(zhì)，是保證品牌正向認知的關(guān)鍵一環(huán)。

二、vivo 官網(wǎng) APP 首頁為什么改版？

隨著業(yè)務的發(fā)展迭代，官網(wǎng)開始出現(xiàn)設計不統(tǒng)一、品質(zhì)下降等問題，在首頁表現(xiàn)得尤其明顯，因此設計師發(fā)起了官網(wǎng)的設計升級，先從首頁入手，提升首頁界面的統(tǒng)一性和品質(zhì)。

三、基于用戶業(yè)務視角看「品質(zhì)」優(yōu)化首頁容器是關(guān)鍵

官網(wǎng)首頁定位「精選」，聚合產(chǎn)品、權(quán)益、服務、社區(qū)等內(nèi)容，滿足用戶需求。

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

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

后者展示內(nèi)容，滿足用戶閑逛的需求。

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

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

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

走查首頁，發(fā)現(xiàn)如下 3 個問題：

1. 容器樣式亂

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

2. 信息冗余

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

3. 信息展示不全

首頁經(jīng)常出現(xiàn)信息不全的狀態(tài)，對品質(zhì)影響極大，用戶無法獲取有效信息。

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

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

1. 簡潔的直觀印象

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

2. 簡潔從何而來

深入分析其設計，可發(fā)現(xiàn)簡潔背后 3 個核心共性：

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

有限的信息：限制內(nèi)容在首頁展示時的信息數(shù)量和信息容量。

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

3. 簡潔背后的意義

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

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

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

六、用「至簡」的理念重塑vivo 官網(wǎng) APP 首頁

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

1. 容器樣式梳理

基于「至簡」理念，經(jīng)過梳理和方案嘗試，首頁的基礎容器被優(yōu)化為 3 類：

（1）廣告容器

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

（2）產(chǎn)品容器

即展示產(chǎn)品的容器，新版的產(chǎn)品容器統(tǒng)一了信息架構(gòu)的邏輯，文案限制在 3 階之內(nèi)，提供了「組合型」和「橫排型」兩種形式，對應不同的場景。

組合型容器提供 2 種規(guī)格，擁有同樣的信息量，根據(jù)業(yè)務需求自由組合。

橫排型容器提供 1 種規(guī)格，根據(jù)業(yè)務需求選擇「橫排」或「橫滑」。

（3）內(nèi)容容器

即展示品牌、社區(qū)內(nèi)容的容器。該容器統(tǒng)一使用上圖下文的信息架構(gòu)，可隨場景進行不同形式的拓展。

2. 信息展示優(yōu)化

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

（1）產(chǎn)品信息

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

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

（2）社區(qū)、品牌信息

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

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

3. 視覺規(guī)則優(yōu)化

基于容器的優(yōu)化策略，進一步制定了詳細的視覺規(guī)則。

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

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

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

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

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

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

七、是結(jié)語，但不是結(jié)束

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

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

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

本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議