&

汽車行業(yè)品牌視覺(jué)優(yōu)化案例

一、背景

2019年3月KCL車主服務(wù)平臺(tái)，整理過(guò)程中產(chǎn)品正處在從初創(chuàng)期到快速成長(zhǎng)期的過(guò)渡，從產(chǎn)品層面看，在Android和Ios版本上產(chǎn)品功能相對(duì)穩(wěn)定，處于開(kāi)始需要拓展小程序的前期。

從商務(wù)運(yùn)營(yíng)層面看，線上與線下活動(dòng)已具有部分用戶沉淀，需要確定品牌對(duì)外傳播的視覺(jué)形象是否匹配當(dāng)下的品牌定位。

從用戶體驗(yàn)層面看，提升APP使用體驗(yàn)，需要更好的優(yōu)化操作流程以及視覺(jué)信息流；為后期產(chǎn)品的即將迎來(lái)的高速成長(zhǎng)期做準(zhǔn)備，此時(shí)是產(chǎn)品回顧和優(yōu)化體驗(yàn)的最佳時(shí)機(jī)。

二、目的

項(xiàng)目背景：從視覺(jué)識(shí)別、用戶體驗(yàn)、運(yùn)營(yíng)推廣以及產(chǎn)品周邊等多渠道多視角的發(fā)掘開(kāi)車?yán)驳钠放坪诵膬r(jià)值，探索匹配的品牌思路，并為其優(yōu)化產(chǎn)品的設(shè)計(jì)語(yǔ)言，達(dá)成統(tǒng)一、有規(guī)律的產(chǎn)品體驗(yàn)。

三、需解決的問(wèn)題

設(shè)計(jì)策略：車主服務(wù)平臺(tái)有側(cè)向功能型也有側(cè)向內(nèi)容型，同質(zhì)化現(xiàn)象比較多，KCL目前的定位顆粒比較粗，暫時(shí)未需要到達(dá)服務(wù)戰(zhàn)略方向的層面，因此在設(shè)計(jì)思路上沒(méi)有非常確切的風(fēng)格傾向和表述，目前的設(shè)計(jì)風(fēng)格以滿足產(chǎn)品本身優(yōu)化的需求為主。

設(shè)計(jì)執(zhí)行：

視覺(jué)風(fēng)格統(tǒng)一：協(xié)助時(shí)各個(gè)設(shè)計(jì)師自帶不同的設(shè)計(jì)經(jīng)驗(yàn)和風(fēng)格；

架構(gòu)組件命名和認(rèn)知不一致，查找難度大，易發(fā)生篡改和沖突；

后期與開(kāi)發(fā)溝通成本高，視覺(jué)還原難度大；

四、前期調(diào)研

4.1 行業(yè)現(xiàn)狀梳理與分析

在整體設(shè)計(jì)策略不明確的前提下，嘗試提從整體的梳理中探索車后市場(chǎng)的發(fā)展趨勢(shì)，從設(shè)計(jì)思路上探索應(yīng)對(duì)此趨勢(shì)的解決方案。

KCL的業(yè)務(wù)功能和用戶數(shù)據(jù)顯示目前加油是用戶在平臺(tái)最大的需求；初步判斷開(kāi)車目前是處于車后市場(chǎng)中基礎(chǔ)服務(wù)的層面，以滿足用戶對(duì)用車的周邊配套的消費(fèi)平臺(tái)，其功能展示包含但不限于洗美、加油、預(yù)約停車等；車后中級(jí)市場(chǎng)主要體現(xiàn)在用車娛樂(lè)、車生活方面，包含但不限于大型國(guó)際車戰(zhàn)、組裝車聚會(huì)、自駕游等等；頂級(jí)車后市場(chǎng)以汽車運(yùn)動(dòng)為代表，例如國(guó)際汽車?yán)惖取?

從車后市場(chǎng)的層級(jí)上，初級(jí)基礎(chǔ)市場(chǎng)主要以商品服務(wù)為主，中級(jí)主要以商品+內(nèi)容，其中內(nèi)容為主。

4.2 同業(yè)車主服務(wù)平臺(tái)視覺(jué)品牌形象和功能調(diào)研

主要以17、18年中國(guó)汽車工具行業(yè)月活用戶規(guī)模排行top前10的應(yīng)用平臺(tái)為分析對(duì)象。

自有品牌視覺(jué)的平臺(tái)主要以品牌的風(fēng)格定位和調(diào)性來(lái)進(jìn)行延展，在界面組件上也有明顯的品牌痕跡，例如平安好車主，易車，汽車之家；這三家分別以保險(xiǎn)、購(gòu)車資訊、為市場(chǎng)切入點(diǎn)來(lái)提供車主服務(wù)的平臺(tái)。

依附類型的車主小程序，以支付寶、京東金融、微信等大的流量平臺(tái)為主體，鏈接第三方車主小程序，在此類場(chǎng)景下的小程序視覺(jué)主要以平臺(tái)主體視覺(jué)風(fēng)格為參考進(jìn)行延展；

專業(yè)細(xì)分業(yè)務(wù)功能平臺(tái)，此類平臺(tái)主要以某一類基礎(chǔ)服務(wù)為主體，例如滴答打車、途虎養(yǎng)車等等，品牌屬性強(qiáng)。

4.3 KCL用戶分析

Q1：了解我們的業(yè)務(wù)在做什么？

A1：車主權(quán)益平臺(tái)，主要提供汽車娛樂(lè)階段的需求。

Q2：觸達(dá)的受眾用戶群是？

A1：以男性為主導(dǎo)用戶，28-48歲之間。

Q3：我們的業(yè)務(wù)能為用戶提供？

A3：優(yōu)質(zhì)的用車福利（提供優(yōu)惠券/折扣/等權(quán)益）

Q4:：當(dāng)前的用戶使用功能流程和業(yè)務(wù)重點(diǎn)是？

A4：接入小程序當(dāng)前違章查繳與代駕目前優(yōu)先級(jí)最高，后期將引入汽車金融等等;

Q5：有哪些是需要通過(guò)設(shè)計(jì)解決的問(wèn)題？

A5：展示出平臺(tái)權(quán)益的豐富性，品質(zhì)感；給用戶帶來(lái)的生活尊享感；需要兼顧平臺(tái)有一定的延展性；

五、產(chǎn)品品牌核心梳理和功能模塊優(yōu)先級(jí)的調(diào)整

5.1 產(chǎn)品類型

車主服務(wù)應(yīng)用

5.2 品牌主張

開(kāi)車是一件帶來(lái)快樂(lè)的事情，不僅使得生活更加便捷，而且會(huì)帶來(lái)更多不同精彩和歡樂(lè)的生活經(jīng)歷。

5.3 品牌定位

根據(jù)個(gè)性化用車數(shù)據(jù)，為車主打造基于其地理位置和用車場(chǎng)景的“附近”生態(tài)圈，提供便捷、優(yōu)惠、安心的用車體驗(yàn)。

5.4 Slogan

用車，不用太貴

5.5 核心關(guān)鍵詞

快速服務(wù)、經(jīng)濟(jì)實(shí)惠、用車生活、溝通疏導(dǎo)

5.6 視覺(jué)情緒版

安全舒適、品質(zhì)感、創(chuàng)新活力、

5.7 產(chǎn)品觸點(diǎn)

關(guān)注某一種用車功能僅僅是車后服務(wù)周期中的一段具體而分散的經(jīng)歷，現(xiàn)今天多觸點(diǎn)、多渠道、隨時(shí)在線的消費(fèi)市場(chǎng)讓用戶對(duì)產(chǎn)品的滿意度不僅僅只依賴某個(gè)特殊觸點(diǎn)，更在意客戶端從開(kāi)始到結(jié)束，閉環(huán)的整體流程體驗(yàn)。只有透過(guò)用戶的視角，關(guān)注整個(gè)車后生活，才能理解如何大幅優(yōu)化用戶對(duì)品牌的體驗(yàn)感。

5.8 功能模塊調(diào)整

由原有以運(yùn)營(yíng)活動(dòng)為主導(dǎo)的界面布局轉(zhuǎn)為以用戶權(quán)益為主導(dǎo)的界面布局：業(yè)務(wù)快速導(dǎo)流模塊 —— 用戶權(quán)益卡模塊 —— 重點(diǎn)業(yè)務(wù)模塊；

六、視覺(jué)策略

品牌視覺(jué)設(shè)計(jì)-完善VI手冊(cè)

6.1 logo優(yōu)化>標(biāo)準(zhǔn)化制圖

完整的VI規(guī)范方便后期元素拓展時(shí)保持視覺(jué)傳達(dá)的統(tǒng)一性。

6.2 梳理優(yōu)化已有粒子元素

設(shè)計(jì)原則：以字體，色彩，icon為粒子，以用戶體驗(yàn)為重點(diǎn)，配合交互設(shè)計(jì)整體形成一個(gè)完整的分子組件，再以分子為組件為單位，構(gòu)成模塊，最后以模塊為單位組合成界面。

模塊/基礎(chǔ)系統(tǒng)——如果用人體系統(tǒng)比喻一套產(chǎn)品設(shè)計(jì)系統(tǒng)，人類體常規(guī)六大模塊，分別為運(yùn)動(dòng)系統(tǒng)、內(nèi)臟學(xué)、脈管系統(tǒng)、感覺(jué)器、神經(jīng)系統(tǒng)、內(nèi)分泌系統(tǒng)；類似APP中通用功能：登錄退出功能、消息通知功能、外部分享功能、支付功能等；

組件——支持系統(tǒng)能達(dá)到其功效的零件，比如消化系統(tǒng)里由細(xì)胞我們的DNA決定了我們同樣的系統(tǒng)功能是不一樣的功效和外表；大模塊就是上肢體頭部、身軀、手臂、字體、色彩就是組成簡(jiǎn)單組件的粒子；

交互與視覺(jué)——依骨畫肉再附皮，從交互層面

開(kāi)發(fā)與交互——這里是指前端開(kāi)發(fā)再網(wǎng)頁(yè)原生布局的方法，會(huì)決定一部分組件的交互方式；

6.3 色彩

品牌色系、主視覺(jué)色系、輔助色系、運(yùn)營(yíng)色系：

6.4 字體

字體采用同樣的組件思維來(lái)設(shè)計(jì)，主要字體粒子分為中文、英文、數(shù)字；

6.5 ICON

ICON的設(shè)計(jì)法則：主要傳達(dá)信息的權(quán)重（語(yǔ)意 > 層級(jí) > 一致性 > 風(fēng)格）；

形：icon在基于本身的業(yè)務(wù)前提下對(duì)已有的圖標(biāo)語(yǔ)意進(jìn)行梳理，從不同競(jìng)品平臺(tái)相同的業(yè)務(wù)中收集對(duì)某一業(yè)務(wù)共識(shí)的icon表達(dá)：

并確定icon主要造型，進(jìn)行風(fēng)格探索：

式：根據(jù)已確定的風(fēng)格進(jìn)行形式延續(xù)，其層級(jí)權(quán)重為：面 > 線面 > 線 > 細(xì)線，使其成為一組層級(jí)清晰有系統(tǒng)的icon系列：

KCL icon的梳理一共分為四個(gè)層級(jí)（Icon design by 1m）；

6.6 組件

前期經(jīng)過(guò)對(duì)眾多系統(tǒng)的參考和分析，大致從以下思路來(lái)進(jìn)行內(nèi)容梳理和設(shè)計(jì)。

設(shè)計(jì)元素（UI design elements）在整理過(guò)程中設(shè)計(jì)元素可以分為兩部分，一部分是這些元素使用的設(shè)計(jì)通則，例如8px原則，色彩三原色等；另一部分是通過(guò)這些設(shè)計(jì)通則形成的設(shè)計(jì)元素規(guī)范，是產(chǎn)品在實(shí)際研發(fā)過(guò)程中所使用的具體的設(shè)計(jì)元素規(guī)范；例如用的統(tǒng)一字體家族、產(chǎn)品的品牌色、輔助色以及上面icon內(nèi)容所設(shè)計(jì)的圖標(biāo)層級(jí)，使用的范圍等。

有機(jī)組件(Components of organisms)此部分的內(nèi)容更多是從Ant design systemCarbon design system 中獲取設(shè)計(jì)指引和參考，并結(jié)合其他UX博客上的一些實(shí)際案例分析后的個(gè)人總結(jié)。

6.7 總結(jié)

完成了KCL的品牌視覺(jué)整理，結(jié)合后期拓渠道的需求優(yōu)化現(xiàn)有的VI手冊(cè)規(guī)范。

完成了KCL主界面的視覺(jué)優(yōu)化，更好的在首頁(yè)模塊分流、引導(dǎo)用戶進(jìn)入其他業(yè)務(wù)功能，提升各業(yè)務(wù)模塊的DAU;

統(tǒng)一了KCL APP小程序端的設(shè)計(jì)規(guī)范整理，為后期協(xié)同提供確切的設(shè)計(jì)參考。

以上內(nèi)容為個(gè)人對(duì)線上案例的整理分析，產(chǎn)品名稱全部采用拼音縮寫替代。圖片參考采為本人設(shè)計(jì)過(guò)程稿件，并非最終上線稿件。

上海多更品牌全案策劃

從品牌視覺(jué)設(shè)計(jì)到品牌全案戰(zhàn)略落地

多更企業(yè)的品牌視覺(jué)管家

業(yè)務(wù)范圍：品牌診斷、品牌定位、品牌命名、品牌策劃、品牌設(shè)計(jì)（vi設(shè)計(jì)，logo設(shè)計(jì)，畫冊(cè)設(shè)計(jì)，包裝設(shè)計(jì)，空間設(shè)計(jì)，文創(chuàng)產(chǎn)品設(shè)計(jì)，網(wǎng)站設(shè)計(jì)等），網(wǎng)絡(luò)推廣，市場(chǎng)推廣，品牌年度管理

團(tuán)隊(duì)一對(duì)一服務(wù)，助力品牌新發(fā)展

全國(guó)品牌咨詢熱線：19512151615 （王總監(jiān)）

汽車品牌視覺(jué)優(yōu)化