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