鼎味肉市 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为候选角色映射,现有原型保留经认可的局部实现,未声称所有组件已统一消费。