鼎味肉市DESIGN ATELIER
← 资料目录docs/design/design-language.md阅读原文

鼎味肉市 Design Grammar

DESIGN.md@v0.3.0 · provisional。当前消费者暖肉色,后台继承关系而非同色皮肤。

1. Dimension coverage

<!-- foundation-contract:v1 dimensions -->
维度 状态 依据约束 继承源或DEBT Proof
Information active LAW-CC-01, LAW-CC-02 — PROOF-CC-01
Composition active LAW-CC-01, LAW-CC-04 — PROOF-CC-02
Color active LAW-CC-05 DEBT-CC-02 PROOF-CC-04
Typography active LAW-CC-03, INV-CC-02 DEBT-CC-03 PROOF-CC-01
Shape & Surface active LAW-CC-04 — PROOF-CC-01
Image & Icon active LAW-CC-03, LAW-CC-04 DEBT-CC-05 PROOF-CC-01
Interaction active LAW-CC-02, LAW-CC-06 DEBT-CC-04 PROOF-CC-02
Content active LAW-CC-03, INV-CC-01 — PROOF-CC-03
Motion active LAW-CC-06 只约束使用边界,参数局部 PROOF-CC-02

2. Grammar

<!-- foundation-contract:v1 grammar-rules -->
ID Dimensions Source constraints 条件/任务 优先采用 避免 允许变化 Bindings Proof
GR-CC-01 Information, Composition LAW-CC-01, INV-CC-02 进入页面 首要任务、必要事实、明确去向 推荐替代采购、空白代替功能 首页/我的可表达;付款/后台更集中 ROLE-task-focus PROOF-CC-01
GR-CC-02 Information, Interaction LAW-CC-02 多属性共同定义商品 同一区域、统一选中语法、同步摘要 零散互斥感,建议冒充规格 选项数、长标签和大字体可重排 PAT-composed-choice PROOF-CC-02
GR-CC-03 Content, Typography LAW-CC-03, INV-CC-01 情绪与事实并存 生活短句少量衬线;数字/动作清楚;证据可查 连续问句、口号堆叠、无凭据保证 叙事可长,操作必须短且完整 ROLE-factual-voice PROOF-CC-01
GR-CC-04 Shape & Surface, Composition LAW-CC-04 区分承托关系 纸面环境、开放选择区、同源柔影 强高光、密闭套框、不可见纹理却自称有效 便笺/选择/固定栏各有材质力度 PAT-quiet-surface PROOF-CC-01
GR-CC-05 Image & Icon LAW-CC-03, LAW-CC-04 食欲和识别 食物真实、商标温润、辅助图形轻于标签 卡通粗边、假尺寸、生成食物失真 导航可少量常驻彩色,选中另行表达 ROLE-food-image PROOF-CC-01
GR-CC-06 Color, Interaction LAW-CC-05, INV-CC-01 动作与状态 深暖墨数值,消费者深胭脂主动作,低饱和辅助层 所有信息同红、冷暖强撞、颜色代替状态 后台保留其密度与配色,风险不降级 ROLE-action-promise PROOF-CC-03
GR-CC-07 Interaction LAW-CC-06, INV-CC-02 等待/失败/小屏 状态有后续,返回可继续,内容自然可达 假保存、过时反馈、强行裁切 理想首屏完整,长内容允许滚动 ROLE-recovery PROOF-CC-02
GR-CC-08 Motion LAW-CC-06, ANTI-CC-01 非紧急探索邀请 柔散底色缓慢呼吸、文字稳定、减少动态 颗粒下落如浮尘、急闪、金额/风险/后台呼吸 动效只在适用场景,不形成全站背景 PAT-quiet-invitation PROOF-CC-02

3. Semantic roles

<!-- foundation-contract:v1 bindings -->
ID 含义 Source GR-* Token / pattern 状态
ROLE-task-focus 当前首要任务 GR-CC-01 标题/事实/去向的关系 provisional
ROLE-action-promise 当前可执行且结果明确的主动作 GR-CC-06 color.action.promise provisional
ROLE-factual-voice 事实准确、帮助可选 GR-CC-03 brand/01-brand.md provisional
ROLE-food-image 食物承载食欲,图形服务识别 GR-CC-05 模块素材;正式摄影待验证 provisional
ROLE-recovery 状态与后续连续 GR-CC-07 失败/返回/待办 provisional
PAT-composed-choice 多项共同定义一份 GR-CC-02 详情局部,不发布通用组件 provisional
PAT-quiet-surface 内容/操作有层次、无玻璃炫光 GR-CC-04 color.surface.page/raised/quiet provisional
PAT-quiet-invitation 轻度唤起探索 GR-CC-08 首页局部雾面底色 local

4. 应用边界

同一品牌允许不同密度和情绪力度。我的页身份信息可以成为主角;订单/后台必须让事实成为主角。短线、圆底箭头、4.8秒周期不自动推广;内容较长、风险较高、减少动态或低性能时可去装饰,不得去信息。 旧绿版和高对比候选只作历史,不应再从其截图派生新页面。token为候选角色映射,现有原型保留经认可的局部实现,未声称所有组件已统一消费。