鑫成誉-小黄鸭电动车小程序界面设计

0 阅读4分钟

项目背景

2025 年,共享两轮车进入“3.0 时代”:政策对电池安全、车辆秩序、数据合规提出更高要求;用户侧则希望“随借随还、一眼找到、一秒换电”。小黄鸭出行需要在 6 个月内完成一次品牌升级,既要守住“亲民、可爱”的视觉资产,又要在“找车-用车-还车-换电”全链路体验上建立差异化技术壁垒。

本次兰亭妙微参与小黄鸭电动车界面设计工作,以“萌酷工业风”视觉语言统一品牌心智,亮黄主色延续品牌记忆,深空灰中和廉价感,圆角矩形贯穿大灯、坐垫与图标,让“萌”与“质感”同框;信息层级被压缩成一眼可读的三色电量环,找车、还车、换电三步即可完成,现场嘉宾抬头即见的立体箭头指引,把“可爱小黄鸭”瞬间转译为“高效、可靠、值得信任”的出行伙伴。

02

项目概述

产品定位

小黄鸭电动车瞄准城市 3–8 km 中短途机动需求,以“1 张卡 N 个人骑、1 次换电跑 80 km”的灵活经济模型,切入亲子、情侣、合租三大细分场景。产品通过降低心理门槛、扩大使用半径,把电动车从“个人通勤工具”重新定义为“家庭共享设施”

目标用户

通勤情侣、合租室友、高校宿舍、亲子家庭、银发轻旅——凡是“同一屋檐下、同一段路、同一份账单”的多人场景,都能用一张家庭时长卡把小黄鸭变成随借随走的共享出行搭子。

设计风格

“轻量未来感”——以极简几何与圆润转角包裹信息,让界面像一片会呼吸的金属:无负担的留白、瞬时响应的动效、一步即达的交互,把前沿科技的冷静注入指尖,把下一程的速度提前呈现在此刻的屏幕。

小黄鸭电动车小程序UI设计全案-项目概述与风格定位

03

设计亮点

地图即首页 – 把决策压缩到 3 秒

打开 App 就是一张“活地图”,可用车、还车点、换电柜被折叠成三层优先级最高的卡片,按距离与电量智能排序;首屏只保留一个「立即用车」主按钮,视觉焦点被强制锁在屏幕中心 1/4 区域。信息架构上,我们将“发现-对比-选择”三段思维合并为“一眼即点”的单次决策,用户无需进入列表页、无需横滑对比,3 秒内完成心理确认;同时,地图底图饱和度降低 30%,让品牌黄在灰度城市背景中自动跳脱,车辆图标因此成为屏幕内唯一高亮色,形成“先看到车、再决定行动”的直觉动线,显著降低新用户首次骑行流失率。

小程序UI界面:地图找车与信息展示

设计前后对比

UI设计公司案例展示:设计效果对比指示图标

医疗流程图设计

运维信息实时呈现

运营Banner用「悬浮视差卡层」将信息折叠成微动叠卡,静止时像一叠触手可及的卡片,滑动时上层缓慢漂移,暗示额度可叠加、可共享,把“家庭共用”概念提前写进动势;整张Banner仅保留主标题「全家一起骑」与副标「低至2元·随时退」,其余信息全部图形化,在320*160 dp的有限画布内完成「时间共享—价格优势—即时行动」的完整叙事,实现运营广告也能讲出产品理念的高密度传达。

UI设计细节:小程序运维信息卡片与实时状态展示

卡片式任务面板

卡片化设计让“车型-价格-订单-网点-车辆”五类信息在同一屏幕内形成天然视觉隔断:每块内容独占一张卡片,用户无需阅读标题即可通过轮廓差异快速识别信息属性;附近网点与附近车辆则共用横向滑动容器,左右切换时保持卡片高度一致,避免页面跳动。通过“一卡一任务”的信息架构,用户视线始终被锁定在单张卡片内完成决策,减少横向对比带来的认知负荷;同时,卡片之间预留间距,形成可触知的叠层效果,强化“可点击”心智,使找车、比车、下单、导航四大核心路径在拇指范围内即可闭环,实现“信息分明、结构清晰、一眼即操作”的轻量化体验。

UI设计中的卡片式任务面板:清晰的信息层级与交互

一步即达的「零思考」操作带

快捷操作区把「扫码-租车-故障-预约」等高频动线集成在一张卡片中,核心功能突出,操作便捷;图标采用面性+填充设计,优雅美观同时信息传递准确高效;信息架构上,按使用频次自左至右、由上而下递减排布,【用车】【租车】核心功能大面积展示,其余功能浓缩在卡片中,手指无需离开下半屏即可完成80%任务,实现“看见即操作”的零思考体验;理念层面,整个区域像一条柔软的工具带,随时展合却从不喧宾夺主,把复杂留给系统、把简单还给用户,让每次用车从「想下一步」变成「直接到达」。

UI设计提升操作效率:一步即达的快捷操作带设计

04

界面欣赏

兰亭妙微UI设计作品:小黄鸭电动车小程序首页界面高清展示