鑫成譽(yù)-小黃鴨電動車小程序界面設(shè)計(jì)
發(fā)表于：
01
項(xiàng)目背景
2025 年，共享兩輪車進(jìn)入“3.0 時(shí)代”：政策對電池安全、車輛秩序、數(shù)據(jù)合規(guī)提出更高要求；用戶側(cè)則希望“隨借隨還、一眼找到、一秒換電”。小黃鴨出行需要在 6 個(gè)月內(nèi)完成一次品牌升級，既要守住“親民、可愛”的視覺資產(chǎn)，又要在“找車-用車-還車-換電”全鏈路體驗(yàn)上建立差異化技術(shù)壁壘。
本次蘭亭妙微參與小黃鴨電動車界面設(shè)計(jì)工作，以“萌酷工業(yè)風(fēng)”視覺語言統(tǒng)一品牌心智，亮黃主色延續(xù)品牌記憶，深空灰中和廉價(jià)感，圓角矩形貫穿大燈、坐墊與圖標(biāo)，讓“萌”與“質(zhì)感”同框；信息層級被壓縮成一眼可讀的三色電量環(huán)，找車、還車、換電三步即可完成，現(xiàn)場嘉賓抬頭即見的立體箭頭指引，把“可愛小黃鴨”瞬間轉(zhuǎn)譯為“高效、可靠、值得信任”的出行伙伴。
02
項(xiàng)目概述
產(chǎn)品定位
小黃鴨電動車瞄準(zhǔn)城市 3–8 km 中短途機(jī)動需求，以“1 張卡 N 個(gè)人騎、1 次換電跑 80 km”的靈活經(jīng)濟(jì)模型，切入親子、情侶、合租三大細(xì)分場景。產(chǎn)品通過降低心理門檻、擴(kuò)大使用半徑，把電動車從“個(gè)人通勤工具”重新定義為“家庭共享設(shè)施”
目標(biāo)用戶
通勤情侶、合租室友、高校宿舍、親子家庭、銀發(fā)輕旅——凡是“同一屋檐下、同一段路、同一份賬單”的多人場景，都能用一張家庭時(shí)長卡把小黃鴨變成隨借隨走的共享出行搭子。
設(shè)計(jì)風(fēng)格
“輕量未來感”——以極簡幾何與圓潤轉(zhuǎn)角包裹信息，讓界面像一片會呼吸的金屬：無負(fù)擔(dān)的留白、瞬時(shí)響應(yīng)的動效、一步即達(dá)的交互，把前沿科技的冷靜注入指尖，把下一程的速度提前呈現(xiàn)在此刻的屏幕。
03
設(shè)計(jì)亮點(diǎn)
地圖即首頁 – 把決策壓縮到 3 秒
打開 App 就是一張“活地圖”，可用車、還車點(diǎn)、換電柜被折疊成三層優(yōu)先級最高的卡片，按距離與電量智能排序；首屏只保留一個(gè)「立即用車」主按鈕，視覺焦點(diǎn)被強(qiáng)制鎖在屏幕中心 1/4
區(qū)域。信息架構(gòu)上，我們將“發(fā)現(xiàn)-對比-選擇”三段思維合并為“一眼即點(diǎn)”的單次決策，用戶無需進(jìn)入列表頁、無需橫滑對比，3 秒內(nèi)完成心理確認(rèn)；同時(shí)，地圖底圖飽和度降低
30%，讓品牌黃在灰度城市背景中自動跳脫，車輛圖標(biāo)因此成為屏幕內(nèi)唯一高亮色，形成“先看到車、再決定行動”的直覺動線，顯著降低新用戶首次騎行流失率。
設(shè)計(jì)前后對比
設(shè)計(jì)前后對比
運(yùn)維信息實(shí)時(shí)呈現(xiàn)
運(yùn)營Banner用「懸浮視差卡層」將信息折疊成微動疊卡，靜止時(shí)像一疊觸手可及的卡片，滑動時(shí)上層緩慢漂移，暗示額度可疊加、可共享，把“家庭共用”概念提前寫進(jìn)動勢；整張Banner僅保留主標(biāo)題「全家一起騎」與副標(biāo)「低至2元·隨時(shí)退」，其余信息全部圖形化，在320*160
dp的有限畫布內(nèi)完成「時(shí)間共享—價(jià)格優(yōu)勢—即時(shí)行動」的完整敘事，實(shí)現(xiàn)運(yùn)營廣告也能講出產(chǎn)品理念的高密度傳達(dá)。
卡片式任務(wù)面板
卡片化設(shè)計(jì)讓“車型-價(jià)格-訂單-網(wǎng)點(diǎn)-車輛”五類信息在同一屏幕內(nèi)形成天然視覺隔斷：每塊內(nèi)容獨(dú)占一張卡片，用戶無需閱讀標(biāo)題即可通過輪廓差異快速識別信息屬性；附近網(wǎng)點(diǎn)與附近車輛則共用橫向滑動容器，左右切換時(shí)保持卡片高度一致，避免頁面跳動。通過“一卡一任務(wù)”的信息架構(gòu)，用戶視線始終被鎖定在單張卡片內(nèi)完成決策，減少橫向?qū)Ρ葞淼恼J(rèn)知負(fù)荷；同時(shí)，卡片之間預(yù)留間距，形成可觸知的疊層效果，強(qiáng)化“可點(diǎn)擊”心智，使找車、比車、下單、導(dǎo)航四大核心路徑在拇指范圍內(nèi)即可閉環(huán)，實(shí)現(xiàn)“信息分明、結(jié)構(gòu)清晰、一眼即操作”的輕量化體驗(yàn)。
一步即達(dá)的「零思考」操作帶
快捷操作區(qū)把「掃碼-租車-故障-預(yù)約」等高頻動線集成在一張卡片中，核心功能突出，操作便捷；圖標(biāo)采用面性+填充設(shè)計(jì)，優(yōu)雅美觀同時(shí)信息傳遞準(zhǔn)確高效；信息架構(gòu)上，按使用頻次自左至右、由上而下遞減排布，【用車】【租車】核心功能大面積展示，其余功能濃縮在卡片中，手指無需離開下半屏即可完成80%任務(wù)，實(shí)現(xiàn)“看見即操作”的零思考體驗(yàn)；理念層面，整個(gè)區(qū)域像一條柔軟的工具帶，隨時(shí)展合卻從不喧賓奪主，把復(fù)雜留給系統(tǒng)、把簡單還給用戶，讓每次用車從「想下一步」變成「直接到達(dá)」。
04
界面欣賞
咨詢我們
您是否有此類頁面的設(shè)計(jì)需求？歡迎聯(lián)系我們
立即咨詢