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

项目背景

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

界面欣赏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1196190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

循环神经网络与注意力机制

RNN:循环神经网络,它主要用于处理序列问题,常见的如文本序列(给出一段文本对下一个词进行生成),处理序列数据有一个问题,那就是组成序列的数据之间有很强的相关性,这就要求数据在前向传播进行训练的时候带上之前…

论 qys

注:本文非原创,由笔者改编自神秘 note.ms 小文章。侵权删。 球月深和samzhy的一天 声明:本人有想磕GTY的东西的行为。 对于七22班的球月深来说,这一天原本应该是个平淡无奇的周二中午。 正值盛夏,窗外的蝉鸣不知疲…

【故障诊断】动态系统的故障诊断和容错控制研究附Matlab代码

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

error: no matching function for call to ros::NodeHandle::param()

博客地址:https://www.cnblogs.com/zylyehuo/系统版本:ROS1 noetic原始版 nh.param("odom_topic", _odom_topic_, "/f_lio_localization_node/Odometry");odom_topic 的类型是 std::string &quo…

大模型学习宝典:10个Agent实战项目+90天系统学习路径,助你轻松拿下AI产品经理面试

文章提供了大模型AI的90天系统学习路径,分为初阶应用(10天)、高阶应用(30天)、模型训练(30天)和商业闭环(20天)四个阶段,涵盖提示工程、RAG系统搭建、模型微调及商业部署等实战技能,帮助学习者从零掌握AI大模型技术,提升职场竞争力…

导师严选9个AI论文网站,MBA论文写作必备!

导师严选9个AI论文网站,MBA论文写作必备! AI 工具如何重塑论文写作的效率与质量 在当前学术研究日益数字化的背景下,AI 工具正逐步成为 MBA 学生和科研工作者不可或缺的助手。尤其是在论文写作过程中,AI 技术不仅能够显著降低 A…

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

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

【故障诊断】基于WMSST结合MCNN-BiGRU-Attention的故障诊断研究附Matlab代码

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

【故障诊断】基于WMSST结合MCNN-BiGRU-Attention的故障诊断研究附Matlab代码

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

导师推荐9个AI论文网站,专科生轻松搞定毕业论文格式规范!

导师推荐9个AI论文网站,专科生轻松搞定毕业论文格式规范! AI 工具让论文写作变得轻松高效 在当前的学术环境中,越来越多的专科生开始借助 AI 工具来辅助完成毕业论文。这些工具不仅能够帮助学生快速生成初稿,还能在格式规范、语…

2026成都最新清水房装修企业top5评测!服务深度覆盖金牛区、新都区、青羊区、成华区等地优质公司权威榜单发布,定义成都品质居住新标杆.

随着成都房地产市场的持续发展,清水房装修需求日益多元化,从刚需公寓到别墅大宅,业主对装修品质、环保标准与个性化设计的要求不断提升。本榜单基于环保性能、设计实力、工程质量、服务覆盖四大维度(四川大晶装饰新…

让LLM听懂指令!利用现有模型生成高质量合成数据进行微调

文章介绍如何利用现有强大LLM生成高质量合成对话数据微调目标模型,通过Disilabel开源框架实现:准备指令/问题,让多个候选LLM生成回答,用更强的"评委LLM"评估质量,选择最优回答与指令配对,形成高质…

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

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

程序员收藏!35岁转行大模型开发完全指南:零基础也能学会,前景无限好

文章分析了35岁转行学习AI大模型的可行性、零基础学习路径及行业前景。35岁正值学习黄金期,零基础可通过在线资源和持续实践掌握技能。AI大模型开发作为技术热点,应用广泛,需求持续增长,掌握该技能能带来良好职业发展。文章提供7阶…

精通大数据领域Doris:高级操作技巧分享

精通大数据领域Doris:高级操作技巧分享 关键词:大数据、Doris、高级操作技巧、数据处理、性能优化 摘要:本文围绕大数据领域的Doris展开,旨在为读者深入介绍Doris的高级操作技巧。从背景知识入手,详细阐述Doris的核心概念与联系、核心算法原理及操作步骤,通过数学模型和公…

ubuntu设置CPU和GPU拉满

ubuntu设置CPU和GPU拉满CPU 拉满 sudo cpupower frequency-set -g performance GPU 功率 + 风扇 sudo nvidia-smi -pm 1 sudo nvidia-smi -pl <MAX_WATT> nvidia-settings -a "[gpu:0]/GPUFanControlState=…

2026固定式机械臂优质品牌推荐指南

2026固定式机械臂优质品牌推荐指南一、行业背景与筛选维度依据据《2026-2030年中国工业机械臂行业发展白皮书》数据显示,2026年国内固定式机械臂市场规模同比增长18.7%,矿山开采、建材生产、钢铁冶炼等行业的自动化升…

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

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

Java科技栈五要素:JDK/JRE/JVM/Tomcat/JAR包的关系详解

Java科技栈五要素:JDK/JRE/JVM/Tomcat/JAR包的关系详解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas&…

【光伏、风力、电池】基于准对立气味代理优化(QOBL-SAO)莱维飞行变体(LFQOBL-SAO)算法的光伏、风力、电池系统优化应用研究附Matlab代码

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