【干貨】“垂直頻道視覺風格五維定義法”—運動健身頻道改版總結

在點評V9版倡導“發現品質生活”的戰略影響下，垂直業務快速響應市場，聯合設計開啟了一場體驗創新之旅，運動健身頻道借機進行了品牌重塑與改版。

三步立項 : 不打無準備之仗  

首先，問清目標，了解項目背后的原因和目的。在與需求方保持溝通的同時，快速收集相關意見并領會其意圖；再者，認真反思當前頁面設計的不足，收集相關產品數據和可供參考的調研資料，有利于充分理解需求方輸入的產品信息；此外，召集專項設計小組成員，說明項目背景以及計劃，同步人員分工和進度節點，確保項目的順利推進～

循序漸進 : 從抽象到具象的演進

1.需求理解&定義

 以業務為基石來思考平臺能為用戶提供的多維度價值，以用戶為向導指引頻道界面設計的方向，通過設計塑造頻道頁的品牌，優化導航信息分發效率，間接增加頻道流量和業務收入。

2.風格發散&品牌

? 連接健康與品質生活的品牌定位

 品牌是一種認知，是消費者對品牌商的價值聯想和綜合印象。我們通過分析馬斯洛的需求分層模型，結合運動健身的實際情境，窺探用戶真實的心理需求。

? 連接線下VI到線上UI的風格發散

風格是聯系品牌的一種認知、是營造品牌特質與氣氛的表達方式。我們在前面的定義環節可以歸納得出體現品牌和產品的設計關鍵詞，再以此從風格發散和風格把握兩個維度去構建情緒板。就此次運動健身頻道的改版而言，我們得出了品牌關鍵詞為價值、精彩、燃；用戶關鍵詞為專業、健康；產品關鍵詞為品質、連接、動。

? 以商業價格為橫軸的衡量標尺

我們在構建風格情緒板的過程中，通過施加最大和最小限度的刺激來界定風格具象化的合理值。在O2O領域中，通常以商業價格為橫向參考軸。

3.視覺推導&要素

結合定位，運用視覺五要素的演繹法推導設計風格。將抽象、理性的需求文檔轉化為富有感染力的圖稿。將界面的視覺表達還原到元素級，從形、色、質、字、架五個要素去分析。

? 形

以跑鞋領域為例做分析。低端系產品原創弱且過度依賴裝飾，品牌感知弱；而高端系產品形態更有設計感，品牌感知強，線條連貫且形體特征明顯。

? 色

    以運動服裝領域為例做分析。低端系產品的色彩體系混亂，單品色搭配欠佳，系列款缺少呼應，產品系沒有統一的色彩規范，品牌感弱甚至近于無；而高端系產品強調品牌色系的應用，產品細分和品牌色彩細分更顯專業。個性色彩or品牌專屬色的運用更受年輕的專業用戶青睞。

? 質

橫向對比輪滑鞋、跑鞋、高爾夫球桿等產品，質地能夠直觀地反應在商品材料和工藝上。

? 字

對比運動服上的字體可以得出結論，低端系產品的字體重裝飾，設計無規范；而高端系產品重視字體與場景的協調性，運動中也易被識別，更有設計美感。

? 架

對比專賣店面的陳列，低端系品牌空間利用率高，展架琳瑯滿目；而高端系品牌善于利用空間營造氛圍，有大量留白面積。 

回顧產品與品牌定位，對照消費的場景特征定位區間。反饋迭代、沉淀輸出指導視覺設計的風格板。（ PS：考慮到消費的行為特征及潛在心理，視覺風格的定調可適度拔高 ）

4.設計方案&規范

?設計方向  燃力覺醒

?風格描述  享受運動的精彩，充滿力量的形勢積蓄在體內一觸即發，沉浸的氣氛和醒目的視覺沖擊力，喚醒最原始的悸動。

依據設計推演，明確設計方向并做進一步的沉淀，細化產出視覺元素和界面規范，同步至項目設計小組。

復盤總結 : 沉淀設計經驗

就這次運動健身頻道的品牌升級與改版而言，我們基于O2O的業務場景，應用“視覺五要素”的演繹方法，從線下環境、商戶品牌、奧運宣傳和垂直應用等方面汲取營養，以線下VI設計反哺線上UI視覺，對齊點評的品質戰略對頻道頁進行重塑，在風格統一的基礎上找出符合運動健身品牌調性，指導最終的視覺設計。在細節上，采用增強正負形、背景的對比以及加強標題字等方式來平衡ICON的點擊感和二級類目的層次感。同時，基于H5開發的技術特點，我們這次擯棄耗資源的動效，測試靜態素材營造2.5D的視效，預留缺省機制以保證在不同城市下不同導航類目的適配形式，保證用戶體驗的完整。