起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識復盤：第三方車主服務APP品牌視覺優化設計
編輯導讀：汽車是人們出行最常用的交通工具之一，車主服務平臺也借此迅猛發展，給用戶帶來了很大的便利。本文作者從自身從工作經驗出發，對第三方車主服務APP品牌視覺優化設計進行六個方面的分析，希望對你有幫助。
一、背景
2019年3月KCL車主服務平臺，整理過程中產品正處在從初創期到快速成長期的過渡， 從產品層面看，在Android和Ios版本上產品功能相對穩定，處于開始需要拓展小程序的前期。
從商務運營層面看，線上與線下活動已具有部分用戶沉淀，需要確定品牌對外傳播的視覺形象是否匹配當下的品牌定位。
從用戶體驗層面看，提升APP使用體驗，需要更好的優化操作流程以及視覺信息流；為后期產品的即將迎來的高速成長期做準備，此時是產品回顧和優化體驗的最佳時機。
二、目的
項目背景：從視覺識別、用戶體驗、運營推廣以及產品周邊等多渠道多視角的發掘開車啦的品牌核心價值，探索匹配的品牌思路，并為其優化產品的設計語言，達成統一、有規律的產品體驗。
三、需解決的問題
設計策略：車主服務平臺有側向功能型也有側向內容型，同質化現象比較多，KCL目前的定位顆粒比較粗，暫時未需要到達服務戰略方向的層面，因此在設計思路上沒有非常確切的風格傾向和表述，目前的設計風格以滿足產品本身優化的需求為主。
設計執行：
- 視覺風格統一：協助時各個設計師自帶不同的設計經驗和風格；
- 架構組件命名和認知不一致，查找難度大，易發生篡改和沖突；
- 后期與開發溝通成本高，視覺還原難度大；
四、前期調研
4.1 行業現狀梳理與分析
在整體設計策略不明確的前提下，嘗試提從整體的梳理中探索車后市場的發展趨勢，從設計思路上探索應對此趨勢的解決方案。
KCL的業務功能和用戶數據顯示目前加油是用戶在平臺最大的需求；初步判斷開車目前是處于車后市場中基礎服務的層面，以滿足用戶對用車的周邊配套的消費平臺，其功能展示包含但不限于洗美、加油、預約停車等；車后中級市場主要體現在用車娛樂、車生活方面，包含但不限于大型國際車戰、組裝車聚會、自駕游等等；頂級車后市場以汽車運動為代表，例如國際汽車拉力賽等。
從車后市場的層級上，初級基礎市場主要以商品服務為主，中級主要以商品+內容，其中內容為主。
4.2 同業車主服務平臺視覺品牌形象和功能調研
主要以17、18年中國汽車工具行業月活用戶規模排行top前10的應用平臺為分析對象。
上圖表信息整理時間為19年3月，橙色為已開通的業務功能
自有品牌視覺的平臺主要以品牌的風格定位和調性來進行延展，在界面組件上也有明顯的品牌痕跡，例如平安好車主，易車，汽車之家；這三家分別以保險、購車資訊、為市場切入點來提供車主服務的平臺。
依附類型的車主小程序，以支付寶、京東金融、微信等大的流量平臺為主體，鏈接第三方車主小程序，在此類場景下的小程序視覺主要以平臺主體視覺風格為參考進行延展；
專業細分業務功能平臺，此類平臺主要以某一類基礎服務為主體，例如滴答打車、途虎養車等等，品牌屬性強。
4.3 KCL用戶分析
Q1：了解我們的業務在做什么？
A1：車主權益平臺，主要提供汽車娛樂階段的需求。
Q2： 觸達的受眾用戶群是？
A1：以男性為主導用戶，28-48歲之間。
Q3：我們的業務能為用戶提供？
A3：優質的用車福利（提供優惠券/折扣/等權益）
Q4:：當前的用戶使用功能流程和業務重點是？
A4：接入小程序當前違章查繳與代駕目前優先級最高，后期將引入汽車金融等等;
Q5：有哪些是需要通過設計解決的問題？
A5：展示出平臺權益的豐富性，品質感；給用戶帶來的生活尊享感；需要兼顧平臺有一定的延展性；
五、產品品牌核心梳理和功能模塊優先級的調整
5.1 產品類型
車主服務應用
5.2 品牌主張
開車是一件帶來快樂的事情，不僅使得生活更加便捷，而且會帶來更多不同精彩和歡樂的生活經歷。
5.3 品牌定位
根據個性化用車數據，為車主打造基于其地理位置和用車場景的“附近”生態圈，提供便捷、優惠、安心的用車體驗。
5.4 Slogan
用車，不用太貴
5.5 核心關鍵詞
快速服務、經濟實惠、用車生活、溝通疏導
5.6 視覺情緒版
安全舒適、品質感、創新活力、
5.7 產品觸點
關注某一種用車功能僅僅是車后服務周期中的一段具體而分散的經歷，現今天多觸點、多渠道、隨時在線的消費市場讓用戶對產品的滿意度不僅僅只依賴某個特殊觸點，更在意客戶端從開始到結束，閉環的整體流程體驗。只有透過用戶的視角，關注整個車后生活，才能理解如何大幅優化用戶對品牌的體驗感。
5.8 功能模塊調整
由原有以運營活動為主導的界面布局轉為以用戶權益為主導的界面布局：業務快速導流模塊 —— 用戶權益卡模塊 —— 重點業務模塊；
六、視覺策略
品牌視覺設計-完善VI手冊
6.1 logo優化>標準化制圖
完整的VI規范方便后期元素拓展時保持視覺傳達的統一性。
6.2 梳理優化已有粒子元素
設計原則：以字體，色彩，icon為粒子，以用戶體驗為重點，配合交互設計整體形成一個完整的分子組件，再以分子為組件為單位，構成模塊，最后以模塊為單位組合成界面。
圖片以及參考鏈接：https://fusion.design/design/doc/13
- 模塊/基礎系統——如果用人體系統比喻一套產品設計系統，人類體常規六大模塊，分別為運動系統、內臟學、脈管系統、感覺器、神經系統、內分泌系統；類似APP中通用功能：登錄退出功能、消息通知功能、外部分享功能、支付功能等；
- 組件——支持系統能達到其功效的零件，比如消化系統里由細胞我們的DNA決定了我們同樣的系統功能是不一樣的功效和外表；大模塊就是上肢體頭部、身軀、手臂、字體、色彩就是組成簡單組件的粒子；
- 交互與視覺——依骨畫肉再附皮，從交互層面
- 開發與交互——這里是指前端開發再網頁原生布局的方法，會決定一部分組件的交互方式；
6.3 色彩
品牌色系、主視覺色系、輔助色系、運營色系：
6.4 字體
字體采用同樣的組件思維來設計，主要字體粒子分為中文、英文、數字；
6.5 ICON
ICON的設計法則：主要傳達信息的權重（語意 > 層級 > 一致性 > 風格）；
形：icon在基于本身的業務前提下對已有的圖標語意進行梳理，從不同競品平臺相同的業務中收集對某一業務共識的icon表達：
并確定icon主要造型，進行風格探索：
式：根據已確定的風格進行形式延續，其層級權重為：面 > 線面 > 線 > 細線，使其成為一組層級清晰有系統的icon系列：
KCL icon的梳理一共分為四個層級（Icon design by 1m）；
6.6 組件
前期經過對眾多系統的參考和分析，大致從以下思路來進行內容梳理和設計。
設計元素（UI design elements）在整理過程中設計元素可以分為兩部分，一部分是這些元素使用的設計通則，例如8px原則，色彩三原色等；另一部分是通過這些設計通則形成的設計元素規范，是產品在實際研發過程中所使用的具體的設計元素規范；例如用的統一字體家族、產品的品牌色、輔助色以及上面icon內容所設計的圖標層級，使用的范圍等。
有機組件(Components of organisms)此部分的內容更多是從Ant design systemCarbon design system 中獲取設計指引和參考，并結合其他UX博客上的一些實際案例分析后的個人總結。
如下：
6.7 總結
- 完成了KCL的品牌視覺整理，結合后期拓渠道的需求優化現有的VI手冊規范。
- 完成了KCL主界面的視覺優化，更好的在首頁模塊分流、引導用戶進入其他業務功能，提升各業務模塊的DAU;
- 統一了KCL APP小程序端的設計規范整理，為后期協同提供確切的設計參考。
以上內容為個人對線上案例的整理分析，產品名稱全部采用拼音縮寫替代。圖片參考采為本人設計過程稿件，并非最終上線稿件。
本文由 @bell-wang 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
