news 2026/4/24 21:50:04

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
鑫成誉-小黄鸭电动车小程序界面设计

项目背景

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

界面欣赏

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/24 21:49:38

AI Agent框架宝典:11个顶级框架对比与实战指南,小白也能上手

本文全面介绍了11个最佳AI Agent框架,包括LangChain、AutoGen、CrewAI等,详细分析了各框架的特性、优势、劣势及应用场景。文章对比了开源与商业解决方案,提供了评估框架的标准和选择建议,并探讨了AI Agent领域的发展趋势。这些框…

作者头像 李华
网站建设 2026/4/24 4:25:47

蓝凌EKP产品:关联机制浅析

在 EKP 系统中,“关联机制”是实现跨业务对象关联、文档互相关联的重要基础能力。本文将从实际项目落地角度,完整介绍关联机制的接入步骤、关键代码以及常见注意事项,帮助你一次性跑通整个流程。一、关联机制简介关联机制用于在主业务对象&am…

作者头像 李华
网站建设 2026/4/24 21:50:03

Web开发:使用C#的System.Drawing.Common将png图片转化为icon图片

1.安装第三方库 我的是.NET6,因此需要安装8.0.0版本的【System.Drawing.Common】,若版本太高会在.NET6平台跑不了 2.代码 using System; using System.Drawing; using System.Drawing.Imaging; using System.IO;namespace PngToIcoConverter {class Pro…

作者头像 李华
网站建设 2026/4/23 15:41:53

【故障诊断的归一化判别图嵌入】输出包括 NDGE 的最终投影矩阵、不同维度的准确率和每个样本对不同故障模式的概率附Matlab代码

✅作者简介:热爱科研的Matlab仿真开发者,擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。 🍎 往期回顾关注个人主页:Matlab科研工作室 🍊个人信条:格物致知,完整Matlab代码及仿真…

作者头像 李华
网站建设 2026/4/23 13:36:04

Vue组件转换为原生DOM元素后的数据更新方案

在Vue项目开发中,我们偶尔会遇到「将Vue组件手动渲染为原生DOM元素」的场景——比如集成Cesium、Leaflet等第三方DOM级别的可视化库时,需要把Vue组件转换成原生HTMLElement再挂载到指定容器。但直接渲染后会发现一个核心问题:无法触发组件的响应式数据更新。本文将详细分析问…

作者头像 李华
网站建设 2026/4/23 19:21:50

高效论文查重:8款AI工具功能与改写效果评测

学术写作中,查重率是衡量研究规范性的重要指标,但也常引发文本修改的困扰。现代自然语言处理技术驱动的智能工具能够精准识别文本相似度,并通过语义保留的重构算法提升内容原创性。这类解决方案既满足学术机构的规范性要求,又能显…

作者头像 李华