MagicBubble 产品站 · 三版风格

Three registers,
one product

同一套产品事实,三种体裁。三版都从 MagicBubble 已有的视觉世界出发:平涂机壳 + 纸白图纸场 + 三条信号色 + 零圆角零投影零渐变,Archivo Black 与 JetBrains Mono。变的不是配色,是这份页面决定怎么说话。

A 风格 A 首屏:浅色图纸场,左侧标题与产品说明,右侧软件对矢量件的真实识别输出

Drawing Field

图纸场

浅色外观。纸白图纸场是全场最亮的东西,机壳退成图板灰。首屏直接摆软件对一张矢量件的真实输出:23 个尺寸全部读出、全部框出、全部编号。往下是三张图纸的实测对账(矢量件 / 扫描件 / 手写件),每张都给出真实召回与准确率。

基调
亮 · 文件感
首屏主张
图自己会读
版式
非对称分栏
实测
三张图真实对账
图板灰纸白信号三色
B 风格 B 首屏:暗色机壳,左侧读数轨滚动落行,右侧被照亮的图纸场与扫描线

The Chassis

机壳

暗色外观。图纸白场成为机壳里唯一被照亮的东西,扫描线正走过它,左侧读数轨按节拍逐条落行。这一版把「机器正在工作」作为首屏命题:你不是在读介绍,你是在看它干活。

基调
暗 · 仪表感
首屏主张
引擎正在读图
版式
读数轨 + 图纸台
运动
扫描线循环 + 读数落行
机壳抬起面信号三色
C 风格 C 首屏:一张纸上的规格说明,抬头为真实图纸标题栏式布局,下接条款目录

Specification

规格书

把产品讲成一份检验员签字前会读的技术文件:桌面上一张连续的纸,抬头是图纸标题栏的语法,正文用条款编号组织论证,表格、运行条件、不适用项、修订记录全是这份文件本来就该有的块。

基调
亮 · 文件体裁
首屏主张
读完之后凭什么信
版式
标题栏 + 目录 + 条款
运动
几乎静止
图板纸信号三色

The shared ground三版共用的不是配色表,是产品的世界。

MagicBubble 的界面世界里只有两种材料:平涂机壳与纸白图纸场。图纸永远是全场最亮的东西,因为图纸就是纸。层次只靠明度拉开,不靠色相。一切分隔都是 1px 发丝线,一切端点是方形。

三条信号色各只有一个含义,不允许挪用:绿 = 在用 / 已识别 / 已就绪,琥珀 = 待定 / 待裁决,红 = 必须停下。零圆角、零投影、零渐变是硬纪律,三版都遵守。

产品站不另起一套视觉。它把软件里的世界搬到页面上,所以访客打开软件时不会觉得走进了另一个产品。

机壳(暗)
#000000
机壳(亮)
#ececec
图纸白场
#ffffff
在用 / 已识别
#00ff66 · #007a38
待裁决
#ffb000 · #8a5f00
必须停下
#ff2020 · #c41414
标题字
Archivo Black
标签与数值
JetBrains Mono
中文
Noto Sans SC
圆角 / 投影 / 渐变
0 / 0 / 0

Material

页面里的图都是真东西:三张展示图纸是软件对真实图纸的识别输出(红色虚线 ROI 框、气泡编号、引线都是软件原样画的),界面裁片取自产品真实运行截图。对账用的真值来自客户 FA 首件报告与图面清点。

矢量件 ES-01031-1 的识别输出,23 个尺寸全部框出
矢量件ES-01031-1 Rev.AB,23 个尺寸全部读出,召回与准确均 100%
扫描件 39B0854 的识别输出,尺寸与形位公差框被框出
扫描件39B0854 Rev.A,真值 21 条读出 17 条,召回 81%
1954 年手写图纸 1A3444 的识别输出
手写件1A3444 Rev.D(1954),真值 18 条读出 16 条,召回 89%
矢量件识别输出局部
局部矢量件:每个尺寸带 ROI 框与气泡编号
扫描件识别输出局部:形位公差框
局部扫描件:形位公差框按 ASME Y14.5 读
证据面板:单条读数的区域裁片与识别通道
界面单条读数的区域裁片、区域坐标与识别通道
尺寸表:规格、上下偏差、最大最小
界面尺寸表落行结果,含上下偏差与最大最小
低置信复核行
界面低置信行自动进复核,不静默通过
Prusa MINI 散热片零件图整页
备用素材ID4046-1P 散热片(Prusa Research,开源硬件)