设计语言与借鉴边界
BitzOrcas 的视觉原则浓缩为一句话:
Swiss 国际主义排版克制 + Fluent 中性材质深度 + shadcn 语义化简洁 + 国产 ToB 组件库的信息密度。
这不是四套视觉风格的拼贴,而是四类职责:
| 来源 | 吸收 | 不吸收 |
|---|---|---|
| Swiss | 网格、对齐、层级、留白和文字秩序 | 海报式夸张比例 |
| Fluent | 表面、边界、遮罩、浮层与轻量动效 | 大面积玻璃和品牌发光 |
| shadcn | 语义变量、可组合原语、开放源码边界 | 默认主题即最终品牌 |
| 国产 ToB | 高密度表格、检索、批量操作与效率 | 满屏边框、极小字号和拥挤顶栏 |
商业品质标准
- 先让任务、状态、风险和下一行动清晰,再谈装饰。
- 默认工作面靠表面差与分隔线建立层级,阴影只用于真实抬升。
- 每屏最多一个签名元素,例如案件阶段、证据链、关键期限或风险带。
- 中文正文默认 14px;Compact 表格可以 13px,但操作热区不能随之缩小。
- 品牌色承担定位和动作,不承担所有链接、状态、焦点与导航。
- 真实长文本、金额、案号和错误态必须进入样张,避免只在“漂亮假数据”下成立。
法律行业参考
律智荟、案件云、iCourt、Matteroom 和旧 BitzOrcas 原稿可帮助识别:
- 案件、客户、利冲、工时、期限、审批、财务的真实信息规模;
- 律师在多个案件之间切换和对照的工作方式;
- 橙金、深蓝、章红、青绿在专业服务行业的接受度;
- 高级筛选、保存视图、批量操作和审计追踪的重要性。
明确不继承:
- 顶栏无限堆模块、图标栏与树形栏同时常驻;
- 四列或八字段筛选器永久占据列表首屏;
- 浅金背景配白字、重边框、灰底和极小文字遍布全屏;
- 把天平、法槌、柱廊或羊皮纸当成“法律感”;
- 逐页改变导航、滚动容器和操作位置。
反 AI 模板红线
以下模式默认不通过 Design Guardian:
- 每个区块都是大圆角悬浮卡片;
- 紫蓝渐变、彩色发光或玻璃拟态成为默认背景;
- 固定套用“大标题 + 三个 KPI + 一张趋势图”;
- 无意义的胶囊标签、
01/02/03编号和英文营销短句; - 通用插画替代真实业务状态;
- 为显得“高级”而把所有控件做得宽松、所有留白做得巨大;
- 用生成图片承载需要准确阅读的界面文字。
高级感来自一致的比例、材料、信息层级和细节状态,不来自装饰效果的堆叠。
当前源码落点
| 设计职责 | 当前 owner | 评审重点 |
|---|---|---|
| 人工维护 Token Source | frontend/packages/materials/src/tokens/source | Reference → System → Component 单向依赖 |
| CSS / TypeScript / schema | packages/materials/src/tokens/generated | 只由确定性生成器写入,generate:check 无 diff |
| 基础交互原语 | @bitz/components | 消费语义 Token,覆盖焦点、禁用和加载状态 |
| 壳层与复合 Pattern | @bitz/widgets | Side/Top、工作区、筛选和操作面保持统一 |
| 产品页面 | frontend/apps/* | 只编排 SDK、权限、字段、列、文案和业务动作 |
| 例外与完成门禁 | ADR 0801、conformance ledger、UI checklist | 例外有 owner、退出条件和视觉/无障碍证据 |
源码里仍登记了组件兼容与高级 Pattern 的待收敛项。Frozen 表示稳定 ID、所有权和行为契约不随页面漂移,不表示任意页面已经自动符合。评审必须同时查看实际组件状态、代表视口和 conformance ledger。
设计评审方法
- 先说清用户任务、风险和下一步,再讨论颜色或材质。
- 把新增值追溯到现有 Token;找不到时判断它应属于 Reference、System 还是 Component。
- 检查页面是否重复发明 Shell、筛选器、表格、操作面或状态表达。
- 使用真实长文本、权限差异、空数据、失败、窄屏、键盘和 reduced-motion 场景。
- 对行业主题只评审品牌表达,不允许它改变权限、导航、密度或 SDK 契约。
- 新 Pattern 必须证明至少三个稳定场景的复用价值,并先进入 Design Guardian 与架构评审。
- 把结论写成可复查的
pass或changes-required,附上例外台账而不是口头豁免。