返回主页

教育行业 LTC 一体化平台

ETP教育业务交易平台

LEAD TO CASH · UI/UX DESIGN

ETP 是面向教育行业的业务交易平台,把商机、方案、报价、合同评审、备发货与经营分析放进同一个工作台,覆盖从线索到回款的完整链路,服务销售、方案、商务、财务、履约与管理层等 6 类角色。

LTC 经营驾驶舱总览界面 AI 方案需求编辑器界面 报价单制作界面 合同决策界面

设计流程

DESIGN PROCESS

  1. 项目立项
  2. 业务流程
  3. 产品功能
  4. 交互原型
  5. 视觉设计
  6. 跟进开发
  7. 测试走查
  8. 上线复盘
  1. 理解业务业务分析用户分析功能架构项目立项 → 产品功能 · 与产品协同
  2. 定义问题设计目标业务流程 → 交互原型 · 设计主导
  3. 建立规范设计规范组件交互原型 → 跟进开发 · 设计主导
  4. 页面设计核心页面全部页面视觉设计 → 测试走查 · 设计主导
  5. 交付落地AI 产品迭代跟进开发 → 上线复盘 · 与研发协同

设计主导协同推进

业务分析

BUSINESS ANALYSIS

一条链路,从线索走到回款

LTC(Lead to Cash)覆盖从线索到回款的全流程,各环节由不同角色接力。

教育信息化项目的特点:金额大、周期长、软硬件混合交付、多级审批。

ETP 将各环节串为连续业务流:数据自动流转,各角色可查看单据进度、处理人与利润健康度。

  1. 商机
    销售
    线索立项
  2. 方案
    销售
    提交需求
    方案经理
    编制方案
  3. 报价
    销售
    制作报价
    方案经理
    成本概算
    管理层
    价格审批
  4. 合同评审
    合同商务
    条款评审
    财务
    风险评审
    管理层
    评审决策
  5. 备发货
    销售
    发起申请
    运营履约
    备货发货
  6. 履约回款
    运营履约
    交付验收
    财务
    回款确认

本案例设计范围关联平台

用户分析

USER ANALYSIS

从源系统到角色,四步定位问题

  1. 01

    源系统走查

    走查 5 条业务线、82 个页面,记录字段与操作路径。

  2. 02

    流程拆解

    按 LTC 6 个环节拆解单据流转与角色分工。

  3. 03

    角色访谈

    访谈 3 类典型角色,还原任务与卡点。

  4. 04

    问题归类

    按「角色 × 环节」归并问题,依频次与影响排序。

功能架构

FUNCTION ARCHITECTURE

5 条业务线,82 个页面

功能 1:1 对齐源系统,视觉与交互按规范重做;一级菜单承载业务线,二级页面按处理动线组织。

ETP教育业务交易平台
合同评审
  • 评审工作台
  • 发起合同评审
  • 评审单详情
  • 合同决策
  • 合同解析
  • 模板 / 要素配置
方案
  • 我的方案需求
  • AI 需求编辑器
  • 需求工作台
  • 方案评审
  • 协同任务
备发货 OTC
  • 备货单
  • 发货申请
  • 备货 / 发货审批
  • 缺货管理
  • 备货统计
  • 小额订单
LTC 经营分析
  • 驾驶舱总览
  • 盈利性分析
  • 项目明细 / 详情
  • 利润率配置
  • AI 问答配置
报价与概算 ECPQ
  • 报价单制作
  • 检查价格
  • SPU 配置 / 模板
  • 版本查询
  • 价格审批
  • 回收站

设计目标

DESIGN GOALS

NORTH STAR让用户更快、更准确地获取信息并采取行动

快EFFICIENCY

减少录入与查找成本

  • 智能带出
  • 筛选收纳
  • 表单导航
准ACCURACY

信息可信、可追溯

  • 语义色统一
  • 来源可追溯
  • 变更可见
清PRIORITY

主次一眼可辨

  • 视觉降噪
  • 主操作唯一
  • 风险前置
统CONSISTENCY

一套骨架统一全局

  • 页面骨架
  • 组件库
  • 设计 Token

设计规范

DESIGN SYSTEM

情绪板

MOODBOARD

  • 关键词

    B 端重信任与效率,教育行业需亲和力。

专业|高效|克制|有温度

蓝色玻璃幕墙建筑
专业PROFESSIONAL
专业可信 · 蓝

信赖蓝 · 仅用于行动点

隧道中的高速光轨
高效EFFICIENT
高效 · 密度

紧凑排版 · 高信息密度

光影中的白色花瓶
克制RESTRAINED
克制 · 留白

卡片分区 · 大面积留白

双手捧着暖光灯串
有温度WARM
有温度 · 插画

线性插画 · 缓和冷硬感

颜色规范

COLOR SPECIFICATION

  • 色彩选择

    三层 token 结构:原始色板 → 语义 token → 组件 token。语义色仅按业务阈值判定,不作装饰。

品牌色Brand
  1. Brand-05#F0F4FE
  2. Brand-10#E8EFFE
  3. Brand-20#D0DFFD
  4. Brand-30#A3BFFB
  5. Brand-40#769FF8
  6. Brand-50#5486F6
  7. Brand-60主色#3673F5
  8. Brand-70#1A5EE8
  9. Brand-80#1552D0
  10. Brand-90#0C3CA0
中性色Gray
  1. Gray-00#FFFFFF
  2. Gray-10#F5F7FA
  3. Gray-20#F0F2F5
  4. Gray-30#DADCE0
  5. Gray-40#BDC1C6
  6. Gray-50#80868B
  7. Gray-60#5F6368
  8. Gray-70#3C4043
  9. Gray-80#202124
  10. Gray-90#171717
成功色Green
  1. Green-10#F0FCE3
  2. Green-20#D9F7BE
  3. Green-30#B7EB8F
  4. Green-40#95DE64
  5. Green-50成功#52C41A
  6. Green-60#389E0D
  7. Green-70#237804
  8. Green-80#135200
  9. Green-90#092B00
  10. Green-100#042100
警告色Orange
  1. Orange-10#FFF7E6
  2. Orange-20#FFE7BA
  3. Orange-30#FFD591
  4. Orange-40#FFC069
  5. Orange-50#FFA940
  6. Orange-60警告#FA8C16
  7. Orange-70#D46B08
  8. Orange-80#AD4E00
  9. Orange-90#873800
  10. Orange-100#612500
危险色Red
  1. Red-10#FFF1F0
  2. Red-20#FFCCC7
  3. Red-30#FFA39E
  4. Red-40#FF7875
  5. Red-50危险#FF4D4F
  6. Red-60#F5222D
  7. Red-70#CF1322
  8. Red-80#A8071A
  9. Red-90#820014
  10. Red-100#5C0011

字体规范

FONT SPECIFICATION

  • 字体:苹方 / 微软雅黑

    按文字在信息流中的角色定字号。标题用 600;不用 500:微软雅黑无 Medium,会回退为 400。

数字 Bebas Neue 仅 ≥20px 指标大数 · 默认 32 · 不加粗

0123456789

品牌 庞门正道 仅用于品牌标识

教育业务交易平台

字号阶梯
示例字号行高字重用途
  • 科大讯飞48px1.2600一级标题
  • 科大讯飞32px1.2600二级标题
  • 科大讯飞24px1.5600三级标题
  • 科大讯飞20px1.5400大号正文
  • 科大讯飞18px1.5600页面标题
  • 科大讯飞16px1.5400正文
  • 科大讯飞14px1.57400默认正文
  • 科大讯飞13px1.5400骨架文字
  • 科大讯飞12px1.5400内部标注

间距 · 圆角 · 阴影

SPACING · RADIUS · ELEVATION

  • 间距

    4px 基准,10 档。
    元素内 4–12,模块间 16–24,区块间 32–64。

4
8
12
16
20
24
32
40
48
64
  • 圆角

    8 档,层级越高圆角越大。
    控件 4,卡片与弹窗 8,大型浮层 16,胶囊 full。

0
2
4
6
8
12
16
full
  • 阴影

    5 档,越重浮起越高;白卡默认无阴影。
    输入框 xs,下拉 md,弹窗 lg。

xs
sm
md
lg
xl

页面布局

PAGE LAYOUT

  • 页面构成框架

    页面分为四层,每层职责单一,研发与 AI 可据此确定取舍。

  1. 4弹层对话框 · 抽屉 · 消息,动态触发,置于最上层
  2. 3全局控制层顶栏导航 · 页头标题与暂存 / 提交
  3. 2内容层指标卡 · 表格 · 表单,承载业务信息
  4. 1背景层gray-10 画布,用留白分区

栅格与骨架

GRID & SKELETON

组件规范

COMPONENT SPECIFICATION

49 个组件,这里展示最典型的 7 个

以下组件为实时渲染,非截图,覆盖默认、悬停、按下、聚焦、禁用、加载、错误、空态 8 种状态。

按钮

/ Button

主按钮每屏唯一,危险操作独立配色。

交互状态
提交默认
提交悬停
提交按下
提交聚焦
提交禁用
提交中加载
按钮类型
发布报价单检查价格折扣分析删除已归档

表单项

/ Form Item

提示放在输入框下方,报错同时给出修改方法。

智慧校园二期建设项目合同12 / 90
请选择商机

选中商机后自动带出最终客户、项目所在地与团队成员。

-280万元

预算金额需大于 0,请检查是否误输入负号。

滨海一中

来源:商机带出 · 查看原文

状态

/ Status

语义色最多 5 档,同一语义始终同一颜色。

表格行内 status-dot:低权重,便于扫读

进行中待审核已完成已驳回已关闭

标题旁 Tag:强标识,表明对象状态

进行中待审核已完成已驳回已关闭

页级提示 Alert:说明状态 + 给出下一步

待决策风险 2 项:回款风险、毛利风险。逐项结论在「去决策」里录入。
当前流程类型:常规评审流程 查看原因

指标块

/ Stat

大数用 Bebas,语义色只按业务阈值判定。

项目 LTC 利润率18.6%↓ 较上月 1.2pp
LTC 利润¥2,842,060
KPI 利润率23.60%
合同毛利率25.80%

步骤条

/ Steps

已完成、进行中、未开始三态区分。

  1. ✓提交06-20
  2. ✓评审06-21
  3. 3决策进行中
  4. 4归档

表格

/ Table

ID 可复制,名称可跳转详情,行操作 4 个及以上收进 ⋯。

评审单号评审单名称状态合同金额(元)操作
PS202607337公安视频智能研判合同待审核4,286,000.00查看催办⋯
PS202609928园区数字孪生底座补充协议进行中1,920,500.00查看撤回⋯
PS202606847医共体信息化建设合同已完成12,860,000.00查看下载⋯
共 36 条
‹12›

审批日志

/ Timeline

当前节点带光晕,意见原文直接展示。

  • 二级决策进行中

    待王振(wangzhen)处理

  • 商务评审通过

    李婷 · 2026-06-21 14:02

    回款节点已调整为 30/40/25/5,同意进入决策。
  • 财务评审驳回

    周敏 · 2026-06-20 16:40

  • 提交评审

    高洪达 · 2026-06-20 10:24

缺省页

DEFAULT PAGE

  • 空状态 = 原因 + 下一步

    空态须说明成因并提供后续操作,不留空白。

还没有报价单报价单关联商机后生成新建报价单
当前账号无查看权限可向合同管理员申请申请权限
没有找到相关结果换个关键词或清空筛选清空筛选
网络连接失败请检查网络后重试重新加载
暂无新消息审批动态会在这里提醒消息设置
提交成功评审已提交,等待处理查看详情
提交失败必填项未填完,请补充返回修改
报价低于成本价提交前需确认价格检查价格
数据同步中断上游数据暂未返回手动同步
功能建设中该模块即将上线返回首页

核心页面

KEY SCREENS

6 个场景,逐处标注决策

悬停说明可定位至截图对应位置;数据均为演示数据。

01

LTC 经营驾驶舱

DASHBOARD

管理层首屏。目标:5 秒内回答三个问题——利润是否健康、问题出自哪个业务群、数据时效如何。

  1. 1
    口径透明筛选栏声明数据更新频率(商机与合同每 20 分钟,交付 T+1),先回答数据是否可信。
  2. 2
    结论先行5 个核心指标横排置顶,附同比与上年对照;红色仅用于指标恶化。
  3. 3
    直接标注,免查图例趋势线末端直接标注名称与数值;「整体」线品牌蓝加粗,其余灰化。
  4. 4
    增减值上柱顶年度对比柱顶直接标注 +1.62% / -2.44%,涨跌一目了然。
  5. 5
    逐级下钻表格按核算单元展开,逐级下钻至项目明细与项目详情。
盈利性分析
LTC 经营驾驶舱总览 12345
02

AI 方案需求编辑器

AI · FORM

销售习惯口述而非填表。将整张需求表改为对话式采集:AI 实时填充,用户负责确认。

  1. 1
    对话式采集方案助手按序提问,优先采集关键人及其立场。
  2. 2
    回执卡片每次提炼后以卡片回执(如「已填入 汇报对象」),明示 AI 的操作。
  3. 3
    来源可追溯字段下标注来源(对话提取、文件解析、商机带出),支持一键查看原文。
  4. 4
    主数据锁定关联商机后自动带出客户与区域并锁定,与主数据保持一致。
AI 方案需求编辑器 1234
03

发起合同评审

HEAVY FORM

8 个分区、35 个必填项的重型单据。设计重点不在字段排布,而在让用户随时掌握待填项。

  1. 1
    操作前告知页首说明评审流程类型并提供「查看原因」,提交前即知审批链。
  2. 2
    分区完成度右侧锚点显示各分区「已填 / 必填」计数,如 2/7。
  3. 3
    随时可存页头吸顶放置「暂存 / 提交」,任意位置均可保存。
  4. 4
    校验前置字段内置字数上限与实时计数,输入时即时校验,而非提交后报错。
发起销售合同评审表单 1234
04

合同决策

APPROVAL

决策人面对千万级合同。页面按「对象 → 风险 → 盈利 → 变更」顺序组织。

  1. 1
    先确认对象标题、状态标签与单号副标题,进入即确认单据与所处节点。
  2. 2
    风险前置待决策风险汇总为页级提示,列明风险项并指向「去决策」。
  3. 3
    最重要的数字合同金额为全页最大数字,「已变更」标签提示与上一版本不一致。
  4. 4
    结论 + 构成LTC 利润率作主数字,利润、KPI 利润率、毛利率等权排列其下。
  5. 5
    变更可对比汇总「较上一版本有 6 项变更」,并提供变更对比入口。
合同预览
合同决策审批页 12345
05

报价单制作

EDITABLE TABLE

销售改价时需同步关注折扣与限价。所有汇总随编辑实时联动,无需提交后复核。

  1. 1
    汇总置顶报价总额、指导总价、整体折扣率、突破限价项数 4 项指标常驻顶部。
  2. 2
    说明选择的后果销售类型下方说明其决定比对基准:「直销限价」或「渠道指导价」。
  3. 3
    就近操作模块标题旁显示项数与小计;批量改价、添加产品置于模块工具栏。
  4. 4
    即时判定申请单价支持行内编辑,价格判定列即时给出「未突破 / 突破」结论。
报价单发布成功
报价单制作 1234
06

合同评审工作台

LIST

评审人的日常入口。以导航承载待办:页签即队列,计数即工作量。

  1. 1
    按处理动线分组一级页签:我的待办 / 进展追踪 / 我的已办 / 已结束,括号内标注数量。
  2. 2
    筛选恒定一行筛选项超过 3 个时,其余收入「展开」,筛选栏高度恒定。
  3. 3
    队列页签待办按流程节点细分为 9 个队列,处理动线即导航。
  4. 4
    一行一个入口单号用于识别,名称承接跳转,每行仅一个跳转入口,降低误触。
  5. 5
    分页信息完整提供总条数、每页条数与跳页,长队列可快速定位。
合同评审工作台 12345

全部页面

ALL PAGES

AI 赋能下的产品迭代

AI-POWERED ITERATION

从反馈到交付,AI 驱动迭代闭环

  1. 01

    反馈转为任务

    走查、访谈与埋点反馈汇总为问题清单,Claude Code 定位到对应页面与组件。

  2. 02

    规范驱动修改

    规范写入 CLAUDE.md,含触发条件与判断点;Claude Code 先读规范再改,同类页面同步修改。

  3. 03

    自检脚本拦截

    同类问题第二次出现即写成自检脚本,每次修改自动运行,未通过不交付。

  4. 04

    截图验收

    Claude Code 输出改动前后截图,设计师审定结论,决定是否回流规范。