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