地图 App · 差异化视觉设计系统

3 种交互架构 × 3 种极具辨识度的 UI 设计语言

不只是改变配色！切换下方设计风格，观察**形状（圆角/直角/切角）、边框阴影（柔和双重阴影/2px硬阴影/全息微光）、地图 Markers 与排版构架**的质感变蜕。

切换视觉设计语言 (Design Language)：

无缝抽屉流

轻决策，不打断地图浏览

搜索：附近高分咖啡馆

Top 3 以极简气泡呈现，其余缩为微型锚点。点击后气泡保持高亮、地图平移居中，底部半屏抽屉补充图集轮播、神评与叫车导航；上滑抽屉即展开全屏、地图虚化。

附近高分咖啡馆3 个结果

适合餐饮、咖啡和便利店等需要快速对比、偶尔查看详情的高频场景。

地图仍是舞台，卡片成为焦点

搜索：128 元快捷酒店

结果态只散落干净的价格 Marker。点击后原地膨胀成大图悬浮卡、地图暗化聚焦；图片区左右滑切图，下滑看房型菜单，左右滑卡片直接在原地切换下一个 POI，点空白处瞬间收回价格点。

128 元快捷酒店5 个结果

适合酒店、民宿和景点等依赖图片种草、需要在多个点位间快速横扫的场景。

深决策，地图提供位置上下文

搜索：三里屯西餐 vs 日料

并排呈现对比气泡卡便于横向对比。点击后气泡收成圆点、下方全量卡接管并复刻升级头部；在卡片头部横滑，地图联动平移、焦点自动跳到下一个 POI，上滑则卡片全屏化。

三里屯西餐 vs 日料3 个结果

适合套餐、正餐和需要读评价对比的复杂消费场景，能容纳最多信息与行动入口。

01. 灵动流光胶囊Apple Spatial UI

极致超椭圆 (Squircle)、软阴影、液态玻璃倒影与灵动岛扩张形态，轻盈优雅。

02. 粗野报刊排版Editorial Neo-Brutalism

2px 粗黑边框、硬核位移阴影、撞色高饱和印章、大号对比度字号，极具视觉张力。

03. 赛博战术终端Holographic Cyber HUD

准星定位雷达、战术切角、青绿微光、等宽系统代码与 AI 算力匹配指示条。