电站详情 8.0 改版设计说明

01

基础结构

变更类型：全局卡片纵向间距与页面左右边距调整

改动点

序号改动项具体说明
01卡片纵向间距统一调整页面内卡片与卡片之间的纵向间距由 12px 统一调整为 8px。
02页面左右边距统一调整页面主内容区左右边距由 12px 统一调整为 8px，内容宽度随父容器自适应。

7.0 / 8.0 页面结构对照

7.0 旧版

卡片纵向间距 12px · 页面左右边距 12px

8.0 新版

卡片纵向间距 8px · 页面左右边距 8px

结构与间距对照

对照项7.08.0开发处理
卡片纵向间距12px8px全局统一调整为 8px
页面左右边距12px8px主内容区左右统一调整为 8px
02

顶部导航栏

变更类型：视觉资源替换 · 内容区间距调整 · 星级站背景替换

改动点

序号改动项具体说明
01返回箭头全局替换7.0 返回箭头切换为 8.0 新版箭头资源。
02右侧三个 Icon 替换右侧三个功能入口全部换为 8.0 新版资源。
03内容区顶部间距调整导航栏底部至首个内容模块的间距由 12px 调整为 8px。
04星级站背景切图替换星级站背景由 375 × 400px 旧资源替换为 375 × 375px JPG。

7.0 / 8.0 图标对照

7.0 旧版
旧版图标资源

红框表示本次需要替换的资源范围

8.0 新版
新版图标资源

红框表示 8.0 新版替换资源

内容区顶部间距

7.0 旧版

导航栏底部 → 首个内容模块：12px

8.0 新版

导航栏底部 → 首个内容模块：8px

星级站背景切图

7.0 旧版
7.0 星级站背景切图 375 400

星级站bg · 375 × 400px

8.0 新版
8.0 星级站背景切图 375 375

星级站bg · 375 × 375px · JPG

结构与间距对照

对照项7.08.0开发处理
左侧返回箭头7.0 旧箭头资源8.0 新箭头资源替换切图
右侧三个 Icon7.0 旧版资源8.0 新版资源全部替换
导航栏与内容区间距12px8px调整为 8px
星级站背景切图375 × 400px375 × 375px · JPG替换切图
03

场站小喇叭

变更类型：由屏幕通栏改为内容区卡片 · 组件内间距与右侧箭头调整

7.0 / 8.0 页面结构对照

7.0 旧版

组件占满屏幕宽度，左右不保留页面边距。

8.0 新版

组件填充内容区，页面左右各保留 8px，不再贴合屏幕两侧。

改动点

对照项7.08.0开发处理
组件承载范围组件通栏，直接占满屏幕宽度组件位于页面内容区内，不再贴合屏幕两侧移入页面内容容器
页面左右间距0px左右各 8px由页面内容区提供 8px 边距，组件宽度填充父容器，不写死 359px
组件圆角无圆角8px新增 R8 圆角
组件水平内边距16px8px调整为 8px
内容元素间距8px4px调整为 4px
右侧箭头“箭头-下”切图，12 × 12px“箭头(线)”切图，8 × 8px替换资源并调整为 8 × 8px
04

电站图片区

变更类型：找桩指引容器透明度调整 · 容器位置调整

改动点

序号改动项具体说明
01容器背景透明度调整找桩指引容器背景由 #000000 40% 调整为 #000000 60%。
02容器位置调整由 right: 0px / top: 57px 调整为 right: 2px / top: 55px，新版等效 bottom: 8px。

7.0 / 8.0 容器对照

7.0 旧版

right: 0px · top: 57px

8.0 新版

right: 2px · top: 55px · bottom: 8px

结构与样式对照

对照项7.08.0开发处理
找桩指引背景#000000 40%#000000 60%调整透明度
找桩指引位置right: 0px / top: 57pxright: 2px / top: 55px调整位置
05

基础信息卡片

变更类型：星级站横幅重构 · 地址上方信息重构 · 标签体系重构 · 地址与导航重构

星级站横幅改动点

序号改动项具体说明
01横幅视觉样式重构背景渐变、顶部圆角、边框及权益文字颜色全部按照 8.0 样式实现。
02横幅结构重构由 7.0 的绝对定位结构改为横向 Flex：左侧固定 Icon 区，右侧权益区占据剩余宽度。
03高度与叠层关系调整横幅高度由约 52px 调整为 56px；与下方基础信息卡片的重叠区域由 12px 调整为 20px。
04左侧 Icon 区重构由 97 × 34px 的绝对定位区域调整为 104 × 36px 固定区域。
05右侧权益区重构调整为 Flex: 1、高 36px、内边距 8px。
06权益内容间距收紧内部元素统一使用 4px 间距；分隔线高度与右侧箭头均调整为 8px。

7.0 / 8.0 横幅对照

7.0 旧版

绝对定位 · 顶部圆角 16px · 下层重叠 12px

8.0 新版

横向 Flex · 顶部圆角 12px · 下层重叠 20px

8.0 新结构布局

新版基础信息卡片结构

上层横幅总高 56px；顶部内容行 36px；底部 20px 作为叠层衔接区

结构与样式对照

对照项7.08.0开发处理
横幅高度约 52px56px调整为 56px
布局方式元素绝对定位横向 Flex 布局按 8.0 重构
顶部圆角16px12px调整为 12px
边框1px #EDF8FF无移除旧边框
背景渐变#2C2E31 → #333C4C → #50658E#2A3542 → #2F3947 → #5A6A89替换渐变
与下层重叠12px20px调整为 20px
左侧 Icon 区97 × 34px，left 6px / top 3px104 × 36px 固定区域重构固定区域
右侧权益区152 × 37px，内边距 10pxFlex: 1 / H36 / P8重构自适应区域
权益内容间距文字组 6px，箭头间距 10px所有元素统一 4px统一为 4px
分隔线 / 箭头12px / 14px8px / 8px调整为 8px
权益文字12px 渐变文字12px / #D9CAB8调整文字颜色

最近充电动态

7.0 旧版
7.0 评分与最近充电动态

评分与最近充电动态位于同一行

8.0 新版
8.0 最近充电动态

移除评分，仅保留最近充电动态

改动项7.08.0开发处理
场站评分展示评分及分隔线不展示删除评分结构
动态文案“1小时前有人成功充过电”“几分钟前有人充过”调整文案逻辑
最近充电 Icon无新增 12 × 12px Icon新增切图
文字样式12px / #00ACE512px / #77849E调整文字颜色

场站通告

7.0 旧版
7.0 场站通告

旧版小喇叭切图与背景样式

8.0 新版
8.0 场站通告

新版小喇叭切图与背景样式

改动项7.08.0开发处理
小喇叭 Icon7.0 旧版切图8.0 新版切图，16 × 16px替换切图
背景样式7.0 旧版背景Icon 背景 #FEDACE；横幅 #FEECE6 渐变至透明按 8.0 更新色彩
内容间距Icon 与文字间距 5pxIcon 与文字间距 4px调整为 4px

限充横幅

7.0 旧版
7.0 限充横幅

旧版限充与问号 Icon

8.0 新版
8.0 限充横幅

新版限充与问号 Icon

改动项7.08.0开发处理
限充 Icon7.0 旧版切图8.0 新版切图，16 × 16px替换切图
问号 Icon7.0 旧版切图8.0 新版切图，12 × 12px替换切图
背景样式7.0 旧版背景Icon 背景 #DDE7F0；横幅 #EEF2F9 渐变至透明按 8.0 更新色彩
文字颜色#6F7173#77849E调整文字颜色
内部间距主要元素间距 5pxIcon 与内容 4px；文字与问号 2px按 8.0 重构间距

场站标签

7.0 旧版
7.0 场站标签

7 个标签 · 两行布局

8.0 新版
8.0 场站标签

4 个标签 · 单行布局

改动项7.08.0开发处理
标签数量示例 7 个，两行展示示例 4 个，单行展示具体保留及删除规则详见 PRD
标签容器0.5px #E4E5E7 描边、无填充#F2F5FA 填充、无描边重构容器样式
文字样式12px / #41434512px / #77849E调整文字颜色
内边距上下 2px / 左右 8px上下 2px / 左右 5px水平内边距调整为 5px
辅助箭头无可交互标签增加 6 × 6px 实心箭头按标签类型展示

整体结构与间距

7.0 旧版

站名间距 2px · 底部内边距 16px

8.0 新版

站名间距 4px · 底部内边距 12px

间距项7.08.0开发处理
站名与最近充电动态间距2px4px调整为 4px
外层内边距上、左、右 12px；下 16px四周 12px底部调整为 12px

地址与导航

7.0 旧版

地图缩略图 + 两行地址信息 + 右侧独立导航

8.0 新版

单行地址状态 · 12px 内容间距 · 组合导航按钮

两行地址状态 · 导航按钮保持垂直居中

改动项7.08.0开发处理
附近电站入口显示“查看附近其他电站”及右箭头不展示删除入口及相关交互
底部背景7.0 旧版切图8.0 新版切图替换切图，随地址区域填充父容器
地址区高度由旧版地图缩略图与内容结构撑开不设置固定高度，随地址行数自适应使用内容自适应高度
地址结构地图缩略图 + 两行地址信息 + 独立导航一至两行地址 + 组合导航按钮按 8.0 重构布局
地图缩略图左侧独立展示 56 × 56px 地图不单独展示移除独立地图缩略图
地址文字12px / #14151711px / #77849E，支持一至两行；超长内容在第二行省略更新字号、颜色、换行及溢出规则
地址辅助箭头用于附近电站入口，12 × 12px8 × 8px 线性箭头，跟随地址末行文字替换 Icon 并跟随末行内容
导航方式导航 Icon 与距离上下分离导航 Icon 与距离横向放在同一按钮容器重构为组合按钮
导航按钮24 × 24px 圆形 Icon 容器最小宽度 50px / P6 / 圆角 8px / #00ACE5按新版按钮样式实现
导航内容Icon 与距离纵向排列12 × 12px Icon；与距离间距 1px；距离 10px Semibold / 白色调整 Icon、排布与文字样式
导航垂直对齐按旧版独立区域定位地址为单行或两行时均保持垂直居中父容器使用垂直居中对齐
地址与导航间距旧版独立布局12px设置为 12px
地址区内边距按旧版切图与三栏结构定位上、下、左、右均为 8px统一使用 Padding 8px
06

场站特色服务

变更类型：特色服务 Icon 全量重绘 · 右侧说明遮罩与样式重构

7.0 / 8.0 特色服务对照

7.0 旧版

Icon 与文字间距 4px · 局部模糊遮罩

8.0 新版

Icon 与文字间距 2px · 10px 横向渐变遮罩

结构与样式对照

改动项7.08.0开发处理
特色服务 Icon7.0 旧版完整 Frame，16 × 16px替换为 8.0 新版完整 Frame，16 × 16px尺寸不做放大，按服务类型替换新版 16 × 16px 完整 Frame 切图
Icon 与文字间距4px2px调整为 2px
服务文字12px / #14151712px / 行高 16px / #414345调整文字颜色与行高
整体高度44px40px调整为 40px
整体布局左侧服务列表固定定位，右侧说明区覆盖横向 Flex：服务列表 Flex: 1，说明区固定在右侧按 8.0 重构为自适应布局
右侧遮罩#A1B5C9 40% / Blur 4px，局部约 6.8 × 18px透明至白色的横向渐变，宽 10px、高度填满容器替换为 10px 渐变遮罩
“说明”文字12px / #41434512px / 行高 16px / #6F7173调整为三级文字色
“说明”箭头12 × 12px 旧版箭头8 × 8px 新版线性箭头替换 Icon 并调整尺寸
说明区内边距左 4px / 右 10px上下 12px / 左 6px / 右 12px按新版内边距实现
07

终端概览

变更类型：终端类型标签切图 · 箭头切图与尺寸 · 内边距及网格间距调整

7.0 / 8.0 终端概览对照

7.0 旧版 · 五类终端示例

外层 Padding 12px · 网格 Gap 8px

8.0 新版 · 五类终端示例

外层 Padding 8px · 网格 Gap 6px

箭头切图与尺寸

7.0 旧版箭头
14 14 7.0 终端概览箭头

旧版箭头切图 · 14 × 14px

8.0 新版箭头
6 6 8.0 终端概览实心箭头

新版实心箭头切图 · 6 × 6px

结构与样式对照

改动项7.08.0开发处理
终端类型标签7.0 旧版标签切图全部替换为 8.0 新版标签切图按终端类型替换完整 Frame 切图
标签 Frame高 20px；短标签宽 32px，长标签宽 56px高 20px；短标签宽 32px，长标签宽 57px使用切图原始 Frame，不自行重绘文字
外层内边距12px8px统一调整为 Padding 8px
终端卡片网格间距横向、纵向均为 8px横向、纵向均为 6px统一调整为 Gap 6px
箭头切图与尺寸7.0 旧版箭头，14 × 14px8.0 新版实心箭头，6 × 6px替换切图并调整为 6 × 6px
箭头位置双列卡片中独立位于右上区域统一跟随功率文案显示调整到功率文案末尾
功率与箭头间距通栏卡片为 4px；双列卡片非相邻布局通栏卡片 2px；双列卡片 1px按卡片类型设置间距
空闲数量分母12px / #14151712px / #141517 40%降低分母及分隔符颜色层级
功率文字行高14px16px调整为 16px
08

页面 Tab

变更类型：顶部圆角收紧 · 删除评论 Tab · 等分布局重构 · 背景渐变调整

7.0 / 8.0 Tab 对照

7.0 旧版

外层渐变：#FFFFFF 0% → #F4F6F8 4.235%

8.0 新版

Tab 内渐变：#FFFFFF 0% → #F4F6F8 100%

结构与样式对照

改动项7.08.0开发处理
顶部圆角左上、右上 R24左上、右上 R16调整为 16px
Tab 数量价格、终端、电站、评论、周边，共 5 项价格、终端、电站、周边，共 4 项删除“评论”Tab
组件承载层级圆角与渐变位于页面外层容器，Tab 菜单位于其内部Tab 使用独立容器并填充父级，圆角与渐变直接作用于 Tab按 8.0 组件层级重构
水平内边距左右 12px左右 20px调整为 20px
Tab 排列方式每项固定宽 40px，相邻间距 12px，整体居中4 项使用 Flex: 1 等分可用宽度，不设置固定项宽改为四等分自适应布局
背景渐变页面外层：#FFFFFF 0% → #F4F6F8 4.235%Tab 容器：#FFFFFF 0% → #F4F6F8 100%渐变改为覆盖完整 Tab 高度
09

充电价格

变更类型：总卡片拆分 · 子模块从嵌套结构调整为页面同级结构

7.0 / 8.0 整体结构对照

7.0 旧版

所有业务块均嵌套在“价格信息”父卡片内部，由父卡片统一承载。

8.0 新版

取消“价格信息”总卡片，各业务块进入页面内容流并作为同级独立卡片排列。

超时占用费同样脱离充电价格，当前新版示例中不再位于该容器内。

结构变更对照

改动项7.08.0开发处理
外层结构使用一个“价格信息”父卡片统一包裹全部内容取消总父卡片，各业务模块直接进入页面内容流删除总卡片嵌套层级
充电价格职责价格卡片同时承载价格及其他关联业务入口充电价格卡片只承载充电价格相关内容收敛充电价格组件职责
卡券 / 套餐作为价格信息卡片的内部子节点抽出为页面同级独立卡片移出充电价格容器
停车参考价 / 充电爱车作为价格信息卡片的内部子节点抽出为页面同级独立卡片移出充电价格容器
超时占用费作为价格信息卡片的内部子节点不再隶属于充电价格模块移至对应独立模块承载
模块间距层级由价格信息父卡片的内部布局控制由页面内容流统一控制同级卡片间距改为页面级同级布局
10

停车

变更类型：卡片 UI 重构 · 停车说明由不限行改为最多两行

7.0 / 8.0 停车区域对照

7.0 旧版

停车说明完整展示，有几行显示几行；说明区及外层容器随内容同步增高。

8.0 新版

停车说明最多展示两行，超出内容隐藏。

改动点

改动项7.08.0开发处理
卡片样式灰色背景，圆角 8px白色独立卡片，圆角 12px背景与圆角按 8.0 重构
标题字号13px / Semibold15px / Semibold标题字号调整为 15px
停车 Icon使用 7.0 停车参考价 Icon替换为 8.0 新版停车 Icon，14×14px直接替换新版切图
右侧箭头无右侧箭头新增 8×8px 线性箭头使用 8.0 箭头切图及尺寸
说明文案展示不限制行数，有几行显示几行，容器随内容增高最多展示两行，超出部分隐藏与终端文案规则保持一致，使用两行截断
11

终端列表

变更类型：筛选控件重绘 · 终端信息结构重构 · 剩余时间位置调整 · 快捷按钮样式调整

筛选区域

7.0 旧版

标签间距 8px，筛选入口使用文字与旧版下箭头。

8.0 新版

标签间距收紧为 4px，筛选入口改用新版筛选 Icon。

筛选区域改动点

改动项7.08.0开发处理
筛选标签样式胶囊标签，圆角 R100，高 27px替换为 8.0 弱底色标签，高 28px统一使用新版标签组件
标签间距8px4px相邻标签 Gap 调整为 4px
数量文案数量使用括号包裹，如“空闲 (4)”取消括号，如“空闲 6”按 8.0 文案格式输出状态数量
筛选入口“筛选”文字后跟 12×12px 旧版下箭头16×16px 新版筛选 Icon 后跟“筛选”文字替换 Icon，并调整图文顺序

终端信息结构

7.0 旧版

左侧为 112px 固定区域；车位号等标签位于规格信息上方。

8.0 新版

圆环与右侧内容使用 12px 间距；规格重组后，标签移动到规格下方。

终端信息结构改动点

改动项7.08.0开发处理
左右结构左侧状态区固定宽 112px，右侧单独设置 16px 右内边距状态圆环与信息区直接横向排列，间距 12px，信息区自适应剩余宽度按 8.0 重构为圆环＋自适应内容区
状态圆环56×56px，描边 3px，状态色 20% 透明度58×58px，描边 4px，状态色 10% 透明度同步调整尺寸、描边宽度及颜色透明度
终端类型标签使用 7.0 旧版切图，位于标题行最右侧替换为 8.0 新版完整 Frame，紧跟终端名称显示替换标签切图并调整所在层级
规格信息功率与电压一行；充电类型与“国标2011 / 国标2015”另起一行充电类型、最高功率、电压范围重组为同一信息组合并规格层级，并删除国标提示
车位及能力标签位于规格信息上方，水平内边距 8px移动到规格信息下方，水平内边距 4px下移标签并收紧内部留白
标签顺序车位号在前，即插即充在后即插即充在前，车位号在后按 8.0 顺序重新排列

充电中剩余时间

7.0 旧版

剩余时间跟随左侧圆环显示，长文案会占用左侧状态区域。

8.0 新版

剩余时间改为右侧横幅，左侧圆环区域只展示状态与进度。

剩余时间改动点

改动项7.08.0开发处理
信息位置圆环下方展示“剩余 22小时5分钟”等长提示圆环下方不再展示提示，剩余时间移动到右侧信息区底部删除左侧时间标签，改由右侧横幅承载
时间横幅白底胶囊标签，边框 #E4E5E7高 23px，Padding 4px，R6，主题色 10% 向透明渐变新增 8.0 剩余时间横幅样式
横幅内容仅展示文字新增 14×14px 实时活动 Icon，图文间距 2px，文字 11px使用新版 Icon 与图文结构
充电中行高111px91px按新版内容结构收紧终端行高度

带交互终端

7.0 旧版

按钮使用 29px 固定高度与胶囊圆角。

8.0 新版

按钮改为 8px 内边距与 8px 圆角，整体随内容区填充。

交互按钮改动点

改动项7.08.0开发处理
按钮圆角R100 胶囊样式R8圆角调整为 8px
按钮尺寸固定高 29px，上下 6px、左右 8px四周 Padding 8px，宽度填充右侧内容区取消旧版固定高度，按新版内边距计算
按钮描边主题色 40% 描边主题色 20% 描边降低描边透明度
所在结构位于右侧信息区末尾，继承旧版两行规格结构跟随重组后的规格信息排列，占满信息区可用宽度按 8.0 信息层级重新排布按钮

后续模块

收到下一条改动说明后，会按同一结构继续向下补充。

12 电站信息待补充
13 电站印象待补充
14 周边服务待补充
15 底部操作区待补充