&

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

一、背景

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

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

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

二、目的

項目背景：從視覺識別、用戶體驗、運營推廣以及產(chǎn)品周邊等多渠道多視角的發(fā)掘開車啦的品牌核心價值，探索匹配的品牌思路，并為其優(yōu)化產(chǎn)品的設(shè)計語言，達成統(tǒng)一、有規(guī)律的產(chǎn)品體驗。

三、需解決的問題

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

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

視覺風格統(tǒng)一：協(xié)助時各個設(shè)計師自帶不同的設(shè)計經(jīng)驗和風格；

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

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

四、前期調(diào)研

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

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

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

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

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

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

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

依附類型的車主小程序，以支付寶、京東金融、微信等大的流量平臺為主體，鏈接第三方車主小程序，在此類場景下的小程序視覺主要以平臺主體視覺風格為參考進行延展；

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

4.3 KCL用戶分析

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

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

Q2：觸達的受眾用戶群是？

A1：以男性為主導用戶，28-48歲之間。

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

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

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

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

Q5：有哪些是需要通過設(shè)計解決的問題？

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

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

5.1 產(chǎn)品類型

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

5.2 品牌主張

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

5.3 品牌定位

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

5.4 Slogan

用車，不用太貴

5.5 核心關(guān)鍵詞

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

5.6 視覺情緒版

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

5.7 產(chǎn)品觸點

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

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

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

六、視覺策略

品牌視覺設(shè)計-完善VI手冊

6.1 logo優(yōu)化>標準化制圖

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

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

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

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

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

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

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

6.3 色彩

品牌色系、主視覺色系、輔助色系、運營色系：

6.4 字體

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

6.5 ICON

ICON的設(shè)計法則：主要傳達信息的權(quán)重（語意 > 層級 > 一致性 > 風格）；

形：icon在基于本身的業(yè)務(wù)前提下對已有的圖標語意進行梳理，從不同競品平臺相同的業(yè)務(wù)中收集對某一業(yè)務(wù)共識的icon表達：

并確定icon主要造型，進行風格探索：

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

KCL icon的梳理一共分為四個層級（Icon design by 1m）；

6.6 組件

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

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

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

6.7 總結(jié)

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

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

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

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

上海多更品牌全案策劃

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

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

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

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

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

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