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

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

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

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

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

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

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

從用戶(hù)視角看，首頁(yè)存在 2 種場(chǎng)景：1. 頭部搜索、金剛區(qū)為「明確目的場(chǎng)景」；2. 頭部以下內(nèi)容區(qū)為「無(wú)目的場(chǎng)景」。前者提供功能入口，滿足用戶(hù)明確的需求；后者展示內(nèi)容，滿足用戶(hù)閑逛的需求。

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

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

亂，多，不全是首頁(yè)容器的核心問(wèn)題

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

1. 容器樣式亂

首頁(yè)容器樣式多且亂，無(wú)章可循。需結(jié)合產(chǎn)品定位及功能訴求，梳理容器設(shè)計(jì)，定義標(biāo)準(zhǔn)。

2. 信息冗余

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

3. 信息展示不全

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

頭部品牌的官方商城設(shè)計(jì)都崇尚「簡(jiǎn)潔」美學(xué)

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

1. 簡(jiǎn)潔的直觀印象

縱覽他們的首頁(yè)，撲面而來(lái)的是「簡(jiǎn)潔」，這是最直觀的印象。

2. 簡(jiǎn)潔從何而來(lái)

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

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

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

明確的優(yōu)先級(jí)：圖片是界面視覺(jué)焦點(diǎn)，輔以簡(jiǎn)潔的標(biāo)題 / 價(jià)格 / 標(biāo)簽等文字信息，多數(shù)品牌去掉冗長(zhǎng)的賣(mài)點(diǎn)。

3. 簡(jiǎn)潔背后的意義

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

在追求功能性及性?xún)r(jià)比的消費(fèi)領(lǐng)域，商品滿足消費(fèi)者物質(zhì)層面需求，購(gòu)買(mǎi)動(dòng)機(jī)是功能、賣(mài)點(diǎn)、價(jià)格等利益點(diǎn)，因而在傳統(tǒng)快消電商界面的設(shè)計(jì)中，更注重利益點(diǎn)、界面氣氛對(duì)消費(fèi)欲望的刺激。

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

用「至簡(jiǎn)」的理念重塑vivo 官網(wǎng) APP 首頁(yè)

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

1. 容器樣式梳理

基于「至簡(jiǎn)」理念，經(jīng)過(guò)梳理和方案嘗試，首頁(yè)的基礎(chǔ)容器被優(yōu)化為 3 類(lèi)：

廣告容器

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

產(chǎn)品容器

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

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

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

內(nèi)容容器

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

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

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

產(chǎn)品信息

以熱銷(xiāo)產(chǎn)品樓層為例：信息布局不合理導(dǎo)致手機(jī)型號(hào)展示不完整；可配置副標(biāo)題但文案較多；通過(guò)顏色強(qiáng)調(diào)價(jià)格但價(jià)格并無(wú)優(yōu)勢(shì)。

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

社區(qū)、品牌信息

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

因此新版首頁(yè)做了大幅度精簡(jiǎn)，只露出最核心的「標(biāo)題/來(lái)源/互動(dòng)情況」 信息，在有限的界面里露出更多的社區(qū)帖子。

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

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

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

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

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

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

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

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

是結(jié)語(yǔ)，但不是結(jié)束

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

但這并不是結(jié)束，首頁(yè)改版后，將基于全新的設(shè)計(jì)語(yǔ)言，對(duì)全局界面進(jìn)行翻新，全面提升官網(wǎng)設(shè)計(jì)品質(zhì)。賦能 vivo 品牌，我們?cè)诼飞稀?/p>

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」