Voltera 新能源停車充電系統 UI 全案深度拆解
北京蘭亭妙微 UI 設計公司,成立 16 年來,始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢,從中提煉可落地的設計方法論,分享給同樣熱愛設計的你。今天,我們來深度拆解一套雙端停車充電系統的ui設計,從信息架構、配色策略、移動端適配到數據敘事的視覺表達,逐一解析其背后的設計決策。
Voltera 是一套服務于新能源停車場的一體化智能管控系統,主要面向兩大使用群體:停車場運營管理人員、新能源車主。
在傳統模式下,雙方都存在明顯使用困擾:車場管理者無法直觀查看車位狀態、充電樁使用數據,場地利用率難以把控;新能源車主尋找空閑充電車位費時費力,充電進度、能耗情況也無法實時了解,雙方使用體驗都大打折扣,信息不通暢成為最大問題。
1. 面向車場運營者:把繁雜的運營數據簡化呈現,支持全天候實時監控、數據趨勢查看、車位預約管理,讓管理工作更高效;
2. 面向新能源車主:簡化操作步驟,快速找到合適的充電車位,實時查看充電狀態與能耗,打造便捷的用車體驗;
3. 全場景視覺與體驗統一:電腦管理后臺、手機 App、線下廣告屏保持體驗一致,線上線下服務無縫銜接。
系統支持多設備使用,包含 PC 端管理后臺、蘋果移動端 App、戶外立式信息屏,全面適配不同場景下的使用需求。
整套系統根據兩類人群的使用習慣,規劃了專屬操作流程:車主可完成登錄、查找車位、在線預約、實時查看充電狀態等操作;車場管理人員可查看全場車位數據、統計使用趨勢、管理充電訂單。
使用優勢:
1. 功能分區明確:系統劃分為登錄首頁、全場數據總覽、車位篩選、充電數據查看、系統設置幾大板塊,功能劃分清晰,上手零門檻;
2. 體驗持續優化:結合大量真實用戶的使用反饋反復調整流程,規避操作卡頓、查找困難等問題,適配不同年齡、操作習慣的使用者;
3. 人群需求區分:管理端側重全場宏觀數據,車主端聚焦個人用車需求,功能不冗余,每個人都能快速找到自己需要的內容。
電腦端專為車場管理人員打造,布局規整合理:左側為常用功能入口,中間展示車位信息,右側搭配全場停車場全景視圖,底部呈現各類運營數據。
使用特點:
1. 信息主次分明:首頁優先展示空閑車位、占用車位、充電車位等核心數據,再延伸至車位詳情、月度 / 周度使用率等輔助信息,查看邏輯循序漸進;
2. 操作靈活便捷:支持全景地圖縮放、鼠標懸停查看車位詳情,還可自由切換年、周、日不同時間維度的數據,滿足多樣化管理需求,適配長時間辦公查看的使用場景。
(2)手機 App:輕量化設計,隨手即用
手機屏幕空間有限,系統遵循 “核心功能優先展示” 的原則,打造極簡使用體驗:
1. 底部設置固定導航欄,將充電這一高頻功能放在核心位置,點擊即可直達;
2. 首頁優先展示停車場全景與推薦車位,充電頁面重點突出充電進度,能耗數據也以簡易圖表呈現,一目了然;
3. 全設備體驗統一:手機端沿用電腦端的信息展示樣式,僅精簡內容,用戶切換設備使用時,無需重新適應,學習成本極低。
整套界面采用簡約商務風格,以易用性為核心打造視覺體驗:
· 整體以白色、淺灰色為基底,色調柔和,長時間查看屏幕也不易產生視覺疲勞;
· 用不同顏色區分設備與車位狀態:綠色代表車位空閑、充電運行正常,藍色專屬標識新能源充電樁,橙色提示使用高峰,黑色按鈕標注主要操作選項,無需閱讀文字,僅憑顏色就能快速判斷狀態;
· 品牌視覺統一:簡約品牌標識貫穿所有設備,線下宣傳物料也保持同款風格,整體觀感整潔專業。
文字大小區分明確,核心數據放大展示,輔助說明文字簡潔精煉;頁面預留充足留白,內容排布疏密得當,不會出現信息擁擠的情況。
系統搭配實景圖片、簡易圖表輔助展示:用車場、車輛實拍圖讓場景更直觀;用折線圖、柱狀圖展示數據變化;用彩色區塊區分不同車位類型,告別密密麻麻的文字描述。
系統將各類信息整合為標準化展示模塊,分類清晰:
1. 車位信息模塊:清晰標注車位位置、步行距離、收費標準、充電標識與預約按鈕,電腦端多列展示、手機端單列排布,查閱方便;
2. 數據統計模塊:突出核心數據,搭配簡易圖表,使用率、能耗等數據直觀可見;
3. 充電詳情模塊:整合車輛狀態、充電功率、剩余時長等信息,電腦端、手機端均可靈活查看。
規整的展示形式,讓信息查找更快捷,大幅提升使用效率。
1. 重點數據放大呈現,車位占用率、充電進度、使用漲幅等核心信息第一眼就能捕捉;
2. 支持多維度數據對比,管理人員可清晰區分普通車位與充電車位的使用差異,為運營決策提供參考;
3. 懸浮提示功能:鼠標點擊或懸停即可查看數據解讀,不用反復跳轉頁面,查看數據更省心。
1. 智能推送貼心便捷:車主打開 App,系統會自動推薦距離最近的空閑充電車位,省去手動篩選的麻煩;車場管理后臺首頁直接展示全場運營數據,無需層層點擊查找;
2. 數據實時同步:電腦后臺與手機 App 數據實時聯動,車位狀態、充電進度毫秒級更新,信息零延遲;
3. 操作流程極簡:從找車位、預約、充電到結束訂單,全程僅需幾步核心操作,無多余彈窗與繁瑣表單,使用流暢;
4. 線上線下體驗聯動:線下戶外信息屏與手機 App、電腦后臺使用同款視覺與內容,服務體驗保持統一。
1. 兼顧管理與使用雙重需求:一套系統同時滿足車場運營的大數據管理需求,和車主輕量化的用車需求,幫助停車場降低運營成本,提升整體服務效率;
2. 用數據賦能智慧運營:系統將車位空置率、充電樁使用率等運營數據直觀呈現,幫助車場管理者合理調整定價、規劃充電樁布局,實現精細化運營;
3. 貼合新能源行業調性:整體風格簡約大氣,契合新能源汽車科技、高端的行業定位,區別于傳統老舊的停車系統,提升車場整體形象。
1. 多設備無縫適配:電腦、手機、線下屏體驗統一,不同場景使用都順手;
2. 數據展示通俗直觀:不管是管理人員還是普通車主,都能輕松看懂各類數據;
3. 流程前置優化:結合真實使用習慣規劃操作路徑,從源頭減少操作麻煩;
4. 精準區分人群需求:針對管理者、車主打造專屬功能,各司其職,實用性拉滿。
轉載自Behance

蘭亭妙微(藍藍設計)m.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。
