【干貨】“垂直頻道視覺風(fēng)格五維定義法”—運(yùn)動健身頻道改版總結(jié)

在點(diǎn)評V9版倡導(dǎo)“發(fā)現(xiàn)品質(zhì)生活”的戰(zhàn)略影響下，垂直業(yè)務(wù)快速響應(yīng)市場，聯(lián)合設(shè)計(jì)開啟了一場體驗(yàn)創(chuàng)新之旅，運(yùn)動健身頻道借機(jī)進(jìn)行了品牌重塑與改版。

三步立項(xiàng) : 不打無準(zhǔn)備之仗  

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

循序漸進(jìn) : 從抽象到具象的演進(jìn)

1.需求理解&定義

 以業(yè)務(wù)為基石來思考平臺能為用戶提供的多維度價(jià)值，以用戶為向?qū)е敢l道界面設(shè)計(jì)的方向，通過設(shè)計(jì)塑造頻道頁的品牌，優(yōu)化導(dǎo)航信息分發(fā)效率，間接增加頻道流量和業(yè)務(wù)收入。

2.風(fēng)格發(fā)散&品牌

? 連接健康與品質(zhì)生活的品牌定位

 品牌是一種認(rèn)知，是消費(fèi)者對品牌商的價(jià)值聯(lián)想和綜合印象。我們通過分析馬斯洛的需求分層模型，結(jié)合運(yùn)動健身的實(shí)際情境，窺探用戶真實(shí)的心理需求。

? 連接線下VI到線上UI的風(fēng)格發(fā)散

風(fēng)格是聯(lián)系品牌的一種認(rèn)知、是營造品牌特質(zhì)與氣氛的表達(dá)方式。我們在前面的定義環(huán)節(jié)可以歸納得出體現(xiàn)品牌和產(chǎn)品的設(shè)計(jì)關(guān)鍵詞，再以此從風(fēng)格發(fā)散和風(fēng)格把握兩個維度去構(gòu)建情緒板。就此次運(yùn)動健身頻道的改版而言，我們得出了品牌關(guān)鍵詞為價(jià)值、精彩、燃；用戶關(guān)鍵詞為專業(yè)、健康；產(chǎn)品關(guān)鍵詞為品質(zhì)、連接、動。

? 以商業(yè)價(jià)格為橫軸的衡量標(biāo)尺

我們在構(gòu)建風(fēng)格情緒板的過程中，通過施加最大和最小限度的刺激來界定風(fēng)格具象化的合理值。在O2O領(lǐng)域中，通常以商業(yè)價(jià)格為橫向參考軸。

3.視覺推導(dǎo)&要素

結(jié)合定位，運(yùn)用視覺五要素的演繹法推導(dǎo)設(shè)計(jì)風(fēng)格。將抽象、理性的需求文檔轉(zhuǎn)化為富有感染力的圖稿。將界面的視覺表達(dá)還原到元素級，從形、色、質(zhì)、字、架五個要素去分析。

? 形

以跑鞋領(lǐng)域?yàn)槔龇治觥５投讼诞a(chǎn)品原創(chuàng)弱且過度依賴裝飾，品牌感知弱；而高端系產(chǎn)品形態(tài)更有設(shè)計(jì)感，品牌感知強(qiáng)，線條連貫且形體特征明顯。

? 色

    以運(yùn)動服裝領(lǐng)域?yàn)槔龇治觥５投讼诞a(chǎn)品的色彩體系混亂，單品色搭配欠佳，系列款缺少呼應(yīng)，產(chǎn)品系沒有統(tǒng)一的色彩規(guī)范，品牌感弱甚至近于無；而高端系產(chǎn)品強(qiáng)調(diào)品牌色系的應(yīng)用，產(chǎn)品細(xì)分和品牌色彩細(xì)分更顯專業(yè)。個性色彩or品牌專屬色的運(yùn)用更受年輕的專業(yè)用戶青睞。

? 質(zhì)

橫向?qū)Ρ容喕⑴苄⒏郀柗蚯驐U等產(chǎn)品，質(zhì)地能夠直觀地反應(yīng)在商品材料和工藝上。

? 字

對比運(yùn)動服上的字體可以得出結(jié)論，低端系產(chǎn)品的字體重裝飾，設(shè)計(jì)無規(guī)范；而高端系產(chǎn)品重視字體與場景的協(xié)調(diào)性，運(yùn)動中也易被識別，更有設(shè)計(jì)美感。

? 架

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

回顧產(chǎn)品與品牌定位，對照消費(fèi)的場景特征定位區(qū)間。反饋迭代、沉淀輸出指導(dǎo)視覺設(shè)計(jì)的風(fēng)格板。（ PS：考慮到消費(fèi)的行為特征及潛在心理，視覺風(fēng)格的定調(diào)可適度拔高 ）

4.設(shè)計(jì)方案&規(guī)范

?設(shè)計(jì)方向  燃力覺醒

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

依據(jù)設(shè)計(jì)推演，明確設(shè)計(jì)方向并做進(jìn)一步的沉淀，細(xì)化產(chǎn)出視覺元素和界面規(guī)范，同步至項(xiàng)目設(shè)計(jì)小組。

復(fù)盤總結(jié) : 沉淀設(shè)計(jì)經(jīng)驗(yàn)

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