Skip to content
bitzorcas
中EN

Concept

设计语言与借鉴边界

Design System 1.2 的视觉配方、法律行业借鉴边界与反模板化设计红线。

Last updated

设计语言与借鉴边界

BitzOrcas 的视觉原则浓缩为一句话:

Swiss 国际主义排版克制 + Fluent 中性材质深度 + shadcn 语义化简洁 + 国产 ToB 组件库的信息密度。

这不是四套视觉风格的拼贴,而是四类职责:

Reference:网格、比例、原始尺度

System:语义角色

Component:状态与密度

Pattern / Recipe

Product Page

ADR 0801 + Frontend Design Guardian

来源吸收不吸收
Swiss网格、对齐、层级、留白和文字秩序海报式夸张比例
Fluent表面、边界、遮罩、浮层与轻量动效大面积玻璃和品牌发光
shadcn语义变量、可组合原语、开放源码边界默认主题即最终品牌
国产 ToB高密度表格、检索、批量操作与效率满屏边框、极小字号和拥挤顶栏

商业品质标准

  • 先让任务、状态、风险和下一行动清晰,再谈装饰。
  • 默认工作面靠表面差与分隔线建立层级,阴影只用于真实抬升。
  • 每屏最多一个签名元素,例如案件阶段、证据链、关键期限或风险带。
  • 中文正文默认 14px;Compact 表格可以 13px,但操作热区不能随之缩小。
  • 品牌色承担定位和动作,不承担所有链接、状态、焦点与导航。
  • 真实长文本、金额、案号和错误态必须进入样张,避免只在“漂亮假数据”下成立。

法律行业参考

律智荟、案件云、iCourt、Matteroom 和旧 BitzOrcas 原稿可帮助识别:

  • 案件、客户、利冲、工时、期限、审批、财务的真实信息规模;
  • 律师在多个案件之间切换和对照的工作方式;
  • 橙金、深蓝、章红、青绿在专业服务行业的接受度;
  • 高级筛选、保存视图、批量操作和审计追踪的重要性。

明确不继承:

  • 顶栏无限堆模块、图标栏与树形栏同时常驻;
  • 四列或八字段筛选器永久占据列表首屏;
  • 浅金背景配白字、重边框、灰底和极小文字遍布全屏;
  • 把天平、法槌、柱廊或羊皮纸当成“法律感”;
  • 逐页改变导航、滚动容器和操作位置。

反 AI 模板红线

以下模式默认不通过 Design Guardian:

  • 每个区块都是大圆角悬浮卡片;
  • 紫蓝渐变、彩色发光或玻璃拟态成为默认背景;
  • 固定套用“大标题 + 三个 KPI + 一张趋势图”;
  • 无意义的胶囊标签、01/02/03 编号和英文营销短句;
  • 通用插画替代真实业务状态;
  • 为显得“高级”而把所有控件做得宽松、所有留白做得巨大;
  • 用生成图片承载需要准确阅读的界面文字。

高级感来自一致的比例、材料、信息层级和细节状态,不来自装饰效果的堆叠。

当前源码落点

设计职责当前 owner评审重点
人工维护 Token Sourcefrontend/packages/materials/src/tokens/sourceReference → System → Component 单向依赖
CSS / TypeScript / schemapackages/materials/src/tokens/generated只由确定性生成器写入,generate:check 无 diff
基础交互原语@bitz/components消费语义 Token,覆盖焦点、禁用和加载状态
壳层与复合 Pattern@bitz/widgetsSide/Top、工作区、筛选和操作面保持统一
产品页面frontend/apps/*只编排 SDK、权限、字段、列、文案和业务动作
例外与完成门禁ADR 0801、conformance ledger、UI checklist例外有 owner、退出条件和视觉/无障碍证据

源码里仍登记了组件兼容与高级 Pattern 的待收敛项。Frozen 表示稳定 ID、所有权和行为契约不随页面漂移,不表示任意页面已经自动符合。评审必须同时查看实际组件状态、代表视口和 conformance ledger。

设计评审方法

  1. 先说清用户任务、风险和下一步,再讨论颜色或材质。
  2. 把新增值追溯到现有 Token;找不到时判断它应属于 Reference、System 还是 Component。
  3. 检查页面是否重复发明 Shell、筛选器、表格、操作面或状态表达。
  4. 使用真实长文本、权限差异、空数据、失败、窄屏、键盘和 reduced-motion 场景。
  5. 对行业主题只评审品牌表达,不允许它改变权限、导航、密度或 SDK 契约。
  6. 新 Pattern 必须证明至少三个稳定场景的复用价值,并先进入 Design Guardian 与架构评审。
  7. 把结论写成可复查的 pass 或 changes-required,附上例外台账而不是口头豁免。

100%

滚轮或按钮缩放 · 放大后拖动画面 · 双击切换 100% / 200%