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