以下文章來源於VMIC UED，作者劉曉峰
01 vivo官網APP是什麼？
vivo官網APP（下簡稱官網）作為vivo手機內置的應用，是提供 vivo產品 / 服務 / 權益 / 資訊 / 社區 的線上官方陣地，也是陪伴vivo用戶「購機」至「換機」周期的重要角色。因此，官網的產品體驗和設計品質，很大程度上決定瞭用戶對vivo品牌的認知，保證官網設計品質，是保證vivo品牌正向認知的關鍵一環。
02
vivo官網APP首頁為什麼改版？
隨著業務的發展迭代，官網開始出現設計不統一、品質下降等問題，在首頁表現得尤其明顯，因此設計師發起瞭官網的設計升級，先從首頁入手，提升首頁界面的統一性和品質。
03
基於用戶&業務視角看「品質」優化首頁容器是關鍵
官網首頁定位「精選」，聚合產品、權益、服務、社區等內容，滿足用戶需求。
從用戶視角看，首頁存在2種場景：1.頭部搜索、金剛區為「明確目的場景」；2.頭部以下內容區為「無目的場景」。前者提供功能入口，滿足用戶明確的需求；後者展示內容，滿足用戶閑逛的需求。明確且固定的「功能入口」，經過長期認知培養，轉化趨於穩定，優化空間較少；而時常更新的「內容」在呈現上的好壞，影響用戶對vivo品牌的印象及瀏覽欲望，決定首頁留存和轉化。因此優化「容器」，使內容更好地呈現給用戶，是本次設計升級的核心。
從業務視角看，今年官網首頁的內容運營將圍繞「人-貨-場」概念，通過分析用戶（人）特征，將信息（貨）推送給相應的用戶，「場」是最後呈現信息的地方，即「容器」。業務方希望用更精簡的容器規則去滿足不同的「人-貨」需求，做到「少樣式」對「多場景」，構建內容展示標準，用更精簡、易理解的樣式，讓用戶聚焦到信息本身。
04亂，多，不全是首頁容器的核心問題
走查首頁，發現如下3個問題：1.容器樣式亂首頁容器樣式多且亂，無章可循。需結合產品定位及功能訴求，梳理容器設計，定義標準。
2.信息冗餘無效信息多，如「獨立顯示芯片」這種言之無物的信息，又如社區帖子密集的信息，都造成瞭信息過載。
3.信息展示不全首頁經常出現信息不全的狀態，對品質影響極大，用戶無法獲取有效信息。
05
頭部品牌的官方商城設計都崇尚「簡潔」美學
瞭解自身問題後，我們對各行業頭部品牌的官方商城進行分析，以此瞭解行業設計趨勢。1.簡潔的直觀印象縱覽他們的首頁，撲面而來的是「簡潔」，這是最直觀的印象。
2.簡潔從何而來深入分析其設計，可發現簡潔背後3個核心共性：1）有限的容器：限制瞭基礎容器樣式的數量，最多不超過3種。
2）有限的信息：限制內容在首頁展示時的信息數量和信息容量。
3）明確的優先級：圖片是界面視覺焦點，輔以簡潔的 標題 / 價格 / 標簽 等文字信息，多數品牌去掉冗長的賣點。
3.簡潔背後的意義「簡潔」是美的，但信息精簡、色彩素雅等特點也常被定性為「氣氛弱」、「吸引力低」，尤其在銷售領域。那為何這些品牌會將「簡潔」的設計美學引入商城界面設計呢？這背後隱含消費者的認知心理。在追求功能性及性價比的消費領域，商品滿足消費者物質層面需求，購買動機是功能、賣點、價格等利益點，因而在傳統快消電商界面的設計中，更註重利益點、界面氣氛對消費欲望的刺激。
而在追求高品牌溢價的消費領域，商品滿足精神層面需求，如身份&價值認同，購買動機圍繞商品的設計品質、是否符合自己的社會屬性等方面，過分強調利益點及界面氣氛反而會影響品牌調性，使品牌優勢被減弱。這類品牌商品的展示更聚焦在商品本身，「簡潔」的設計美學就與品牌目標相得益彰。
06
用「至簡」的理念重塑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品牌藍為官網重新定義標準色卡，包括常規色階、材質色階及灰色階，系統指導顏色使用。
基於新的容器規則及整體視覺規則，首頁刷新後效果如下圖。
07是結語，但不是結束
本次vivo官網APP的首頁改版，從預研、推動、落地到驗證花費近半年時間，付出瞭相當「復雜」的努力。而我們的「復雜」，是為瞭給用戶提供「至簡」的設計品質和產品體驗。但這並不是結束，首頁改版後，將基於全新的設計語言，對全局界面進行翻新，全面提升官網設計品質。賦能vivo品牌，我們在路上。
* 核心界面延展效果