01 / NIO SPACE · ENERGY RESOURCE EXPERIENCE
NIO SPACE从 0 到 1 构建可交互的
能源资源展示体验
NIO SPACE 以蔚来能源资源网络为核心展示对象，围绕门店接待、品牌活动及车展等场景，将分散的充换电资源、网络覆盖与建设成果，转化为具备空间认知和交互探索能力的数字化体验。
设计重点并非简单呈现资源规模，而是建立从全国网络概览、城市资源分布到具体站点信息的分层认知路径，通过地图可视化、信息层级与交互反馈的协同设计，降低复杂能源信息的理解成本。
在项目从 0 到 1 的设计过程中，重点关注资源数据的视觉转译、不同展示场景下的信息密度控制，以及大屏环境中的可读性与交互连续性，使能源网络从静态信息展示转变为可探索、可讲解的品牌体验载体。
项目概况
Project overview- 项目目的
- 缓解用户旅程中的补能焦虑，建立对蔚来补能网络的信心，辅助门店销售讲解与试驾、购车决策。
- 主要功能
- 展示全国充换电资源，支持搜索 POI、充换电站、门店与服务中心，查看附近资源、规划补能路线；提供心愿站地图与地址提交、试驾及分享入口。
- 支持设备
- PC移动端门店大屏iPad
产品目标
Design objective从 0 到 1 打造可交互的能源资源展示产品。
传播能源网络与资源布局，建立品牌信心。
门店日常展示 · PowerDay · 车展高效讲解充换电覆盖，回应补能顾虑，辅助试驾与购车决策。
门店接待 · 一对一讲解直观看懂生活圈与目的地的补能资源，降低出行焦虑。
到店体验 · 自主浏览设计目标
Design objective建立清晰的资源认知、浏览路径与查询反馈。
- 看懂布局统一地图视觉与资源编码，清晰呈现能源网络。
- 逐层探索从全国总览进入城市与站点，保持浏览上下文。
- 完成查询通过搜索、筛选、路径规划和详情卡片承接不同场景需求。
困难与挑战
Difficulties and challenges团队从设计到研发缺少地图类产品经验，需要从 0 到 1 快速学习并验证方案。
需求沟通
- 需求模糊，需要共同定义场景
- 将设计设想转化为可验证方案
- 以设计推动跨团队共识
设计难点
- 垂类竞品少，直接参考有限
- 地图地理表达与规范要求
- 资源点、高速路线与热力表达
- 大屏与地图工具的交互组织
研发难点
- 大量资源点渲染与性能
- 数据更新与状态同步
- 图标随缩放层级变化
- 热力图实现与位置隐私保护
项目难点
- 全团队从 0 到 1 探索
- 专业知识学习成本难预估
- 试错成本与交付节奏平衡
02 / CONTEXT & GOALS
典型场景
围绕品牌展示、销售讲解与用户探索三类需求，建立兼顾全局感知与局部查询的地图体验。
门店销售与到店客户
回答生活圈在哪里补能，建立购车信心。
- 特征
- 销售操作、客户跟随观看，围绕居住地与出行路线查询。
- 关注
- 覆盖范围附近站点讲解效率
PowerDay/车展
短时间看懂网络规模与品牌服务能力。
- 特征
- 多人远距离观看，停留时间短，依赖清晰的视觉重点。
- 关注
- 网络规模区域分布远距辨识
官网访客与潜在购车用户
自主确认家、公司与目的地的补能便利性。
- 特征
- 带着具体地点浏览，自主搜索、筛选并查看服务详情。
- 关注
- 查询效率资源匹配信息清晰
已购车主与出行关注者
了解异地与新增资源，降低出行不确定性。
- 特征
- 关注目的地周边服务，常在多个地点之间切换比较。
- 关注
- 目的地覆盖服务详情浏览连续性
用户触点
01资源密集，难以快速理解覆盖范围
02从全国收敛到与自己相关的区域
03换电、充电与其他资源容易混淆
04密集点位中，需要明确当前选中目标
05位置与服务信息需要就近关联
06判断生活圈与目的地的补能便利性
03 / DESIGN EXPLORATION
竞品分析
以特斯拉为直接竞品，结合谷歌地图、高德地图与链家网的地图产品体验，分析工具布局、图层层级与资源标识，为能源资源展示建立设计参照。
特斯拉
搜索与分类工具位于顶部左侧，右侧集中地图操作，大面积留给地图本身。
中性底图，资源图标使用品牌色。
借鉴：让品牌色集中在资源点，建立明确的视觉焦点。
谷歌地图
搜索与分类工具位于顶部，地图保持主要展示空间。
道路、水域与不同资源类型通过色彩形成层次。
借鉴：把地图基础信息与资源类型的视觉编码分开。
高德地图
左侧列表补充资源信息，地图承担空间定位与浏览。
道路层级与资源标识区分明显，列表顺序与地图编号建立对应。
借鉴：通过列表与点位的对应关系连接空间与信息。
链家网
搜索与筛选位于顶部，左侧列表与地图上的文字气泡共同展示资源。
中性底图上突出品牌绿色，文字气泡直接表达资源信息。
借鉴：在需要比较具体资源时，用气泡减少反复打开详情的成本。设计策略
产品侧
- 战略层建立补能信心
从资源覆盖出发，回应用户“在哪里补能”的核心疑问。
- 范围层围绕资源查询
聚焦总览、搜索、筛选与站点详情，按场景组织功能。
- 结构层信息逐层展开
全国 → 城市 → 站点；地图、列表与详情保持关联。
设计侧
- 框架层地图优先，工具靠边
搜索、筛选与操作集中在边缘，为地图保留连续空间。
- 表现层底图克制，资源突出
以品牌色强调资源类型，用文字气泡与状态区分辅助识别。
信息分级与设计关键词
按大屏展示与查询任务组织视觉优先级：底图提供空间背景，工具辅助探索，核心资源与当前反馈优先呈现。
辅助地理信息
弱化视觉权重，保留空间辨识。
查询与浏览工具
按需出现，维持稳定操作路径。
核心资源与反馈
优先识别，连接位置与服务信息。
100″ DISPLAY / INDIRECT INPUT
交互规则
大屏负责看，触控板负责操作。
门店百英寸屏幕通过外接无线触控板控制。用户站在屏幕前约 1.5 米，需要在看清信息、定位光标与完成动作之间切换；布局因此既要服务远距离讲解，也要降低间接输入的操作负担。
空间限制 → 设计策略
从空间限制到布局策略
屏幕大，视线移动距离长
搜索、筛选与详情保持稳定区域，地图保留连续浏览空间。
稳定区域 · 连续浏览光标行程长，精确点击费力
扩大有效点击范围、拉开控件间距，减少贴边小按钮与密集操作。
扩大目标 · 拉开间距手不在视线中心
用悬停、按下和选中反馈确认当前目标，关键任务避免只依赖隐蔽手势。
明确状态 · 即时反馈讲解与操作同时发生
反馈尽量靠近当前点位，减少来回扫视；关闭详情后保留原有地图上下文。
就近反馈 · 保留上下文布局与交互方案
触控交互
让每次操作，都有明确的起点与反馈。
用户通过无线触控板间接控制大屏。围绕移动、选择、平移、缩放与详情浏览，建立一致的操作和反馈规则，支持销售讲解与客户探索连续进行。
连续拖动与光标回中
绿点标记屏幕中心。拖动时资源图标随地图移动，松手后地图和图标停在新位置，光标回到绿点。
- 01
双指轻点放大
双指轻点地图，地图以绿点为中心放大一次，资源图标按地图缩放比例移动，图标大小保持一致。
- 02
滑动
光标向右上拖动，地图和资源图标向左下平移。
- 03
松手回中
光标回到屏幕中心，成为下一次操作的起点。
光标回中，地图不复位。减少连续拖动时寻找光标、重新调整位置的负担。
| 操作任务 | 用户操作 | 系统反馈与状态 |
|---|---|---|
| 移动与悬停 | 手指在触控板上滑动，控制光标移动。 | 光标保持清晰可见；悬停时突出可操作目标，帮助远距离确认位置。 |
| 点击选择 | 移动到站点或控件后，点击确认。 | 站点进入选中态，名称气泡与详情卡片同步展示；按钮以状态变化回应操作。 |
| 按住平移 | 按住触控板并滑动，带动地图平移。 | 地图跟随手势移动；松手后光标回到屏幕中心，地图保留拖动后的位置。 |
| 缩放地图 | 双指缩放，或点击地图上的“＋／－”。 | 缩放连续过渡；按钮缩放围绕可视区域中心展开，已选中的目标保持可见。 |
| 切换筛选 | 点击资源类型，或进入筛选面板调整条件。 | 控件状态与地图点位同步更新，用户能够确认当前展示的资源范围。 |
| 查看与返回 | 点击点位查看详情，再返回列表或关闭卡片。 | 保留地图位置、缩放层级和筛选条件，便于连续比较多个站点。 |
| 滚动卡片 | 光标进入详情卡片，通过触控板滚动浏览内容。 | 只滚动卡片内容；背景地图保持稳定，卡片操作不会穿透到底图。 |
让连续操作保持可预期
点击与拖动分离
按下后的移动距离用于区分点击与拖动，拖动结束不触发站点选择，避免浏览地图时误开详情。
按场景触发回中
仅在地图拖动结束后复位光标。点击、筛选和卡片滚动后，光标保留当前位置，支持连续操作。
地图与卡片分区
操作由光标所在区域接收：地图负责平移与缩放，卡片负责内容滚动、选择及详情操作。
保留上下文与退路
返回列表、关闭详情时保留地图与筛选状态；首页入口提供主动复位，方便重新开始探索。
动效解释状态变化
地图平移、缩放与卡片展开保持短促、连续的过渡，反馈紧随操作，兼顾门店讲解节奏。
门店大屏
间接输入 · 一人操作多人观看优先信息辨识、稳定工具分区和明确选中反馈。
桌面官网
鼠标／触控板 · 自主浏览保持搜索、筛选与详情路径一致，兼顾键盘与指针操作。
移动端
直接触摸 · 单人近距离使用以底部卡片承载详情，避免照搬大屏侧栏，保留核心任务。
VISUAL
SPECIFICATIONS
视觉规范以统一的色彩、字体与图标建立清晰的地图视觉语言，在门店大屏与移动端保持一致的资源识别和信息层级。
CONSISTENT COLORS, TYPOGRAPHY AND ICONS.ONE VISUAL LANGUAGE ACROSS MAP EXPERIENCES.
FONT
SETTINGS
字体设置PingFang SC
中文 / 标题与正文Semibold / Aa / 24
Medium / Aa / 20
Medium / Aa / 16
Regular / Aa / 12
BLUE SKY NOTE
英文 / 数字展示Semibold / Aa / 24
Medium / Aa / 20
Medium / Aa / 16
Regular / Aa / 12
MAP &
PAGE ICONS
地图与页面图标
蔚来门店
服务中心
试驾点
换电站
充电桩
把尺度、类型与交互状态分开表达。
全国资源总览
以圆点与线路表达网络分布，避免在远景中展开全部站点标签。
城市级探索
进入城市后，以资源类型、选中状态和详情面板承接主动探索。
图层与视觉编码
以底图承载空间关系，以线路表达网络连接，以资源点和卡片呈现类型与详情，形成清晰的信息优先级。
06 / INTERACTIVE MAP｜交互地图
点击下方「查看实时加电地图」进入演示，尝试搜索、筛选资源、拖动缩放与查看站点详情；右上角可切换手机展示。
- 换电站
- 3,028 座
- 其中高速公路换电站
- 950 座
- 超充站
- 2,614 座 / 12,088 根
全场景化的加电服务
蔚来充换电网络持续布局中，满足各种出行补能需求。
- 4,186
- 蔚来换电站
- 31,619
- 蔚来充电桩
- 1,791,729
- 接入第三方充电桩
- 蔚来换电站
- 蔚来充电站
- 第三方充电桩
- 高速换电网络
- Power Journeys 加电风景线
交互演示范围：全国网络概览与上海区域探索，资源点及统计数据为模拟数据。
门店实景图
多尺度探索
全国总览建立网络印象；进入上海后缩放浏览。所有资源保持独立点位展示，通过缩放查看资源分布与单点细节。
资源类型筛选
门店、服务中心、换电站与充电站独立切换，保留已有类型与车型筛选。
资源点交互
从点位进入详情，返回列表继续探索；附近资源、心愿地址与换电演示继续可用。
跨设备设计
大屏将工具布局在地图边缘，移动端以底部卡片承载详情。资源编码与核心流程保持一致，信息密度随屏幕尺寸调整。
07 / IMPLEMENTATION
工程落地
地图层级：分别定义图层职责与缩放规则。
图层决定“谁在上面”，缩放层级决定“何时出现”。底图、版图、线路、心愿密度与资源点各司其职，再随全国、省市、站点尺度调整信息量。
从底图到资源，逐层建立信息秩序。
资源 PIN 点
蓝色与绿色点位，表达资源分布。
中国版图
独立版图图层，承载地理关系。
路网与线路
以连接关系组织道路与网络。
点状热力
用疏密、色阶表达需求热度。
简约地图底图
低干扰的空间底层，衬托上方信息。
全国尺度
优先呈现版图、资源覆盖与网络连接，减少细节标签干扰；检查边界完整性，避免资源符号遮挡关键边界。
省市尺度
逐步展开区域、主干道路和资源类型，保持定位参照；道路不能出现过晚，否则用户难以理解资源位置。
站点尺度
突出选中点、地址与服务详情；核对缩放切换时点位、文字和卡片是否保持对应。
腾讯地图自定义：从编辑参数到环境绑定。
按提供的腾讯皮肤教程，先创建样式副本，调整地理要素颜色、显隐及显示层级；确认后发布，并通过样式应用绑定到对应环境，交由研发核对实际效果。
- 01
创建副本
在个人或测试样式中调整，保留历史版本，避免直接影响线上。
- 02
设置参数
统一同类要素的参数，设置陆地、水系、绿地、道路与文字的颜色和显示层级。
- 03
发布与绑定
保存、发布样式，确认 test / prod 影响范围；已绑定样式更新后无需反复绑定，保留原有样式编号和顺序。
- 04
终端走查
在测试包和真实设备核对道路、路名、边界与色彩，再确认正式环境效果。
心愿地图：我通过手动调整代码，校准聚合与色阶。
心愿地址密度与已有站点是两种信息：站点表达服务供给，心愿方块表达需求分布。我按缩放区间反复联动聚合半径、方块尺寸和颜色阈值，兼顾全国轮廓与城市局部差异。
先划分尺度
以全国 → 省份 → 城市设置 zoom 分界；N 个分界对应 N＋1 个显示区间。
再调整密度
分别配置每个区间的聚合半径和方块大小。过密时增大聚合范围或减小方块，过疏时反向调整，缩放后重新检查轮廓与分布。
最后校准颜色
固定五级颜色，再根据各区间的最小、最大聚合数调整映射；避免全国视图全部同色，或城市视图因少量高值丢失差异。
| 代码参数 | 配置规则 | 检查重点 |
|---|---|---|
| zoom 分界 | N 个边界，划分 N＋1 个区间 | 全国、省份与城市之间切换连贯 |
| 聚合半径 | 每个区间分别设置 | 相邻需求合理聚合，保留区域轮廓 |
| 基础尺寸 / 缩放系数 | base_size / zoom_rate | 方块可见，放大后不过度遮挡 |
| 区间方块尺寸 | 按区间配置 N＋1 个值 | 密度与可读性兼顾 |
| 五级颜色 | 固定 5 个颜色值 | 低需求与高需求可辨 |
| 聚合数下限 / 上限 | 每个区间设置 min / max | 避免颜色全部挤在同一级 |
缩放尺寸计算
size = ((zoom - min_zoom) / (max_zoom - min_zoom)) * base_size * zoom_rate + base_size将当前 zoom 映射为尺寸增量，再叠加基础尺寸；多值配置按英文逗号分隔，并检查区间参数数量一致。
08 / PROJECT OUTCOMES
项目成果
平台使用与试驾入口表现
覆盖近 9.7 万访问用户，展示平台持续承接能源网络浏览。
Mobile 端当日 898 次访问；平台同时承接 PC 与移动设备的浏览需求。
展示浏览延伸到试驾入口，记录了用户进一步了解产品的行为。
首页数据为 12 月月度统计；分平台和试驾数据为图中对应日期的单日值。按钮点击不等同于完成留资、试驾或下单。
09 / REFLECTION
复盘
规范沉淀
从地图尺度、资源类型和交互状态三个维度组织视觉规则，为新增资源与后续界面扩展提供一致的表达方式。
复用价值
全国到城市的浏览路径、点线编码与工具分组，可延展至门店、品牌活动及移动端等展示场景，保持连贯的认知体验。
未来改进
持续优化高密度资源的可读性、跨设备操作效率与无障碍体验，使地图在更复杂的资源规模与使用环境下保持清晰。