城市跑步轨迹 App

运动类 App 的设计稿，难点不在好看，而在「数据可视化能不能用纯界面元素拼出来」——很多人一遇到图表就想塞图片或图表引擎，质感全失。 这个案例展示设计创意模式在数据可视化 + 硬朗运动风上的能力：跑步轨迹用 SVG path 折线 + 起终点、配速分段用 frame 色块柱状图、心率区间用 frame 占比条、目标进度用 SVG 环，全部用界面元素绘制。视觉走 Kinetic Brutalism 街头运动风——0 圆角、2px 实边框、无阴影无渐变；大字冲击用 Barlow Condensed 压缩字体撑超大数字；撞色系统是近黑底 + 荧光绿主色（呼应跑鞋）+ 橙色强调。AI 生图克制，仅首屏 1 张跑者氛围实拍图定调能量。4 屏动线：首页概览→跑步进行中→运动详情→训练计划（375×812）。产物为 Ardot 设计稿。 适合做运动健康类 App、数据看板、训练计划产品的设计师与产品。