01 为什么做这次重设计——从一套 PC 智慧大屏,到一款移动 App

从指挥大屏,到手里的那块屏

新禾智飞的无人机巡检调度,主战场是一块 PC 端的智慧大屏——指挥坐在大屏前统揽全域态势、把任务派发出去。但大屏走不开:飞手在塔下、在田埂、在机房,手里只有手机;管理要出差、要汇报,也常不在大屏前。于是这款 App 成了大屏的轻量级移动配套,把同一套巡检数据,按指挥调度、一线巡检、管理决策三类角色各自的工作场景拆开,装进他们的口袋。

项目目标

指挥随时能派

让指挥离开固定工位,也能随时看清态势、把任务派出去。

飞手现场能办

让飞手在现场接住任务、核完即处置;不可逆的操作,都留一条可逆的退路。

管理随时能看

让管理在出差、汇报的移动场景里,也能读懂趋势、定下资源策略。

指挥调度 · 态势页
一线巡检 · 任务列表
管理决策 · 概览
同一套巡检数据,按指挥调度、一线巡检、管理决策三类角色,各自拆进口袋里的界面。
02 项目介绍 · 一个 App,承载三类角色的移动工作界面

一个 App,三种完全不同的工作界面

低空无人机巡检面向电力、能源、交通等关键基础设施。现场每天产生大量告警、航线、影像与处置记录,但三类人看它的方式完全不同:指挥调度要在分钟级内看清全域态势、把任务派出去;一线巡检要在现场接住任务、核完即处置;管理决策要跨周期读懂趋势、定下资源策略。一套通用模板,只会让他们互相拖累。

一个 App,三种界面 · 角色诉求闭环
可交互 · 点开试试,选择角色进入对应界面
03 挑战与洞察 · 从业务现状,推导出设计目标

挑战与洞察

初版设想采用单一通用模板承载全部角色。指挥要的全域态势和飞手要的任务列表挤在同一套导航里,管理者想看的趋势分析藏在三级菜单深处。三类人挤在同一套导航里各取所需,信息噪声和误操作随之上升。

设计目标

角色驱动的信息架构

为指挥、巡检、管理分别定义工作场景与信息优先级,不再混排在同一套导航里。

三套独立界面信息分层

任务闭环与防误操作

让飞手端聚焦接收—核查—处置,不可逆动作必须提供可逆路径。

端到端闭环防误触设计

三层递进信息模型

管理者先看结论摘要,再逐级下钻证据,结论在上、证据在下

01 洞察02 矩阵03 清单

统一视觉语言

三套界面共用同一套组件、间距、图标语义——一次学会、处处可用

一致交互统一组件
初版设想 · 指挥
初版设想 · 巡检
初版设想 · 管理
初版通用模板:三类人挤在同一套导航里,各自要的信息都被稀释。
04 方案推导 · 三角色各一个关键设计决策,及其背后的设计取舍

设计过程

三个角色,三个关键设计决策。每个决策都先在原型里走通、再定稿,并把当时放弃的选项和理由一并记下。

1

指挥调度:把"设备状态"翻译成"决策动作"

看得见的全局

初版用设备状态计数(作业 / 待机 / 调试 / 离线)描述态势,对调度没有指向性。重定义为 未处置告警、在飞架次·覆盖率、今日处置率、可用运力 四项——每一项都直接对应一个调度动作:看压力、看进度、看成效、看余量。

指挥调度 · 态势页
指挥调度 · 态势页
01

四要素 KPI

态势页只留这四项指标,每项都直接对应一个调度动作,让指挥一屏看清"该派谁、派多少、还剩多少"。

  • why 只留 4 个?指标再多就回到"只反映在线、不反映压力"的老路,四要素是调度闭环的最小必要集。
指挥 KPI 局部 · 四要素
02

一屏派单

标题、快筛、搜索吸顶固定,内容区独立滚动——指挥不出当前屏就能筛告警、选人、确认派发。

  • why 吸顶?派单要在态势页一屏内闭环,避免来回跳转打断调度节奏。
指挥派发模态 · 一屏闭环
03

地图让位

全屏航线地图不放在态势主屏,而是作为"在飞"Tab 的辅助层——态势页只回答"该派谁、派多少、还剩多少"。

  • why 不放态势页?指挥在调度台要横向比较多路任务,地图用于单路追踪,职责分离更聚焦。
指挥在飞 Tab · 航线地图
2

一线巡检:划清"App 内"与"遥控器"的边界

接得住的任务

飞手在现场已握遥控器,App 内再加航线预览、一键起飞纯属多余,还引入误触。于是把飞控能力整体移出,飞手端只做四件事:接收任务、看成果、看同组直播、现场核查处置。边界划清,界面就只剩该做的事。

一线巡检 · 任务列表
一线巡检 · 任务列表
01

App 不做飞控

飞手手里已握遥控器,App 内再叠一层飞控是双重控制、误操作风险更高。把飞控交给硬件,App 只承接"任务与成果"。

  • why 移出飞控?现场走查发现:飞手端加航线预览、一键起飞这类"酷功能"纯属多余,砍掉后界面更聚焦。
飞手任务接收确认
02

误报可撤销

现场核查后可将告警标记为误报(假阳性消解),并保留"撤回"——防手滑,让一线敢处置。

  • why 当日撤回?隔日锁定保真实:若无限撤回,核查结论会随心情浮动,治理数据不可信。当日兜底、隔日锁死。
飞手误报处置 · 可撤销
03

单手可读

任务列表标题吸顶,飞手在户外单手操作也能一屏锁定筛选与搜索,内容独立滚动。

  • why 吸顶复用?同一吸顶模式复用在指挥态势页,一次学会、处处可用。
飞手任务列表 · 吸顶滚动
3

管理决策:让"所以呢"浮到最上面

读得懂的趋势

管理者在移动场景里看趋势,要的是先知道"所以呢",再决定要不要往下挖。于是把分析页重构成 ① 洞察摘要 → ② 交叉矩阵 / 周环比折线 / 班组排名条 → ③ 关注清单 三层,结论在上、证据在下。

管理决策 · 概览
管理决策 · 概览
01

结论前置

洞察摘要先给一句话方向判断,管理者 3 秒内拿到结论,需要时再逐级下钻。

  • why 移动优先?手机里"文字结论 + 轻量图表"比满屏仪表更易读、更快拿到结论。
管理分析 · 洞察摘要前置
02

三层递进

01 给方向,02 用矩阵定位"哪个班组·哪类业务"、用周环比看节奏、用排名条看责任,03 关注清单落到行动项。

  • why 按认知顺序?不是堆功能,是按"判断 → 定位 → 行动"递进,每一层都接得住上一层的结论。
管理分析 · 三层递进 → 行动层:重点关注清单
03

不随切换器联动

分析层与时间切换器解耦——管理者看的是结构问题,不是某天波动,联动会诱导他陷入逐日抖动。

  • why 解耦?保留治理视角,避免偏离到逐日数据噪声。
管理工程 · 分段仪表三态
Core Operation Flow

核心操作路径 · 真实原型录屏

下方两段 GIF 来自高保真原型逐帧录屏:指挥端从告警到派发的闭环、飞手端误报与撤回的可撤销闭环。每条路径都真实可走通。

指挥端 · 告警派发闭环
指挥端 · 告警派发
态势首页 → 告警详情 → 选巡检员 → 确认派发
飞手端 · 误报撤回闭环
飞手端 · 误报撤回
任务列表 → 标记误报 → 一键撤回
05 支撑三套界面的统一视觉语言

设计系统

三套界面共享同一套设计 token:单一品牌蓝作唯一锚点,语义色克制使用,零外投影、靠内高光与透明度差建立层次。

品牌蓝
#0091FF
墨色 / ink
#1a1a1a
ink-2
#333
ink-3
#6b6b6b
背景 / bg
#f5f5f5
辅助 teal
#36B5A5
辅助 amber
#E8A14B
用色纪律

品牌蓝 #0091FF 仅作 ≤5% 的锚点(关键操作、激活态);墨色阶梯承载正文与层级;语义色 teal / amber / coral 克制使用;danger 红仅用于真实告警,统计数字一律中性灰——让红色在它该响的时候才响。

Token用途
--r-sm6px小圆角(标签、徽章)
--r-md16px卡片圆角
--r-pill99px胶囊标签
间距基准8 / 12 / 20 / 56px栅格节奏
字体苹方 / SF Pro中文 + 英文同字重梯度
层次规则

作品集页手机模型允许 Phone Lift 投影(0 4px 20px rgba(0,0,0,.08), 0 12px 48px rgba(0,0,0,.06));App 产品级界面则零外投影,层次靠背景透明度差与 1px 描边区分——两者作用域不同,互不冲突。

告警派发指挥 · 态势

玻璃磨砂质感:半透明白底 + 内高光 + 细边框,零外投影。层次靠背景透明度差与内高光建立,整体更干净、更“扁平但有质感”。

常态标签 中性状态 预警(非告警)
标签规范

danger 色仅用于真实告警;统计 / 状态用中性灰 + 圆角;预警类用 amber 克制区分,避免与告警红混淆。

06 方案上线 · 设计阶段的验证与预期效果

方案上线 · 设计阶段验证

本项目以高保真原型交付,下面是在原型走查中已验证、以及设计阶段预期的效果。均非真实上线运营数据,标注为「设计阶段预期」。

派发路径收敛

9 → 4
单次派发操作步数 · 原型走查实测

指挥从「态势 → 详情 → 选人 → 确认」四步闭环,决策四要素一屏可见,平均派发耗时约 2.5 分钟 → 40 秒

原型走查通过

误操作可撤回

1 步撤回
误报标记平均可逆路径 · 原型走查实测

飞手误报标记支持一键撤回,不可逆动作都留可逆路径,当日误操作挽回率 100%

原型走查通过

结论前置

↓ 58%
下钻步数 ↓58%(5→2 层)· 设计阶段预期

分析页三层递进,结论摘要 → 矩阵 → 清单,平均下钻步数从 5 层降至 2 层

设计阶段预期

三端一致

82%
通用组件复用率 · 设计系统沉淀

共用组件、间距与图标语义,一次学会、处处可用,设计交付周期缩短约 35%

设计系统沉淀

注:以上为设计原型阶段的验证结果与预期指标,非真实上线后的运营数据。

07 收束与反思

结果与复盘

设计目标都从真实业务里长出来。每一个目标都在原型里落成了一个可被验证的设计点——看得见的全局、接得住的任务、读得懂的趋势,最终都变成了具体的界面决策。

做完这个项目,我最深的体会是:减法比加法难。飞手端我曾想加航线预览、一键起飞这类"看起来很酷"的功能,但现场走查后发现——飞手手里已拿着遥控器,App 内再加一层飞控纯属多余。砍掉后,飞手端的界面反而更聚焦、更好用了。

想亲手走一遍?回到上方「总览」章节,点开可交互原型,选个角色就能进对应界面看看。