diff --git a/design-refs/mockup/design-system/02-symbols.html b/design-refs/mockup/design-system/02-symbols.html index 0b09fb2..7209eea 100644 --- a/design-refs/mockup/design-system/02-symbols.html +++ b/design-refs/mockup/design-system/02-symbols.html @@ -45,13 +45,12 @@ .sec-label { font-size: 13.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; } .sec-label i { font-style: normal; font-weight: 400; font-size: 11.5px; color: #6b6b6b; margin-left: 8px; } .shapechip .box { - width: 52px; height: 52px; margin: 0 auto; border-radius: 12px; background: #ffffff; + width: 46px; height: 46px; margin: 0 auto; border-radius: 11px; background: #ffffff; border: 2px solid #111111; display: flex; align-items: center; justify-content: center; } .shapechip .sn { font-size: 12px; font-weight: 800; margin-top: 6px; text-align: center; } - .shapechip .sm { font-size: 10px; color: #6b6b6b; margin-top: 2px; line-height: 1.4; text-align: center; } - .shapechip .src { font-size: 9px; color: #8a8a8a; margin-top: 3px; text-align: center; } - .msline { stroke: #111111; stroke-width: 2.5; fill: none; } + .shapechip .sm { font-size: 10px; color: #6b6b6b; margin-top: 2px; line-height: 1.3; text-align: center; } + .msline { stroke: #111111; stroke-width: 2.5; fill: none; } .msstation { stroke: #111111; stroke-width: 2; } .msticket { width: 216px; background: #fff9f0; border: 2px solid #111111; border-radius: 12px; @@ -88,48 +87,41 @@
-
+
▲ 靶子
目标——这一章要做成什么事
卡头打头,教程最前
-
skill · 靶子先行
● 积木
完成目标的零件;点列实心=已学
空心=未学
-
skill · 积木清单
○ 预期
做成之后可观察、可核对的样子
16:9 相框角标
-
skill · 预期结果
~ 代理区
无学习价值的过程,交给 agent
只给预期与验收
-
skill · 每步先分类
▬ 价值区
有学习价值,过程就地写清
露出认知基础
-
skill · 每步先分类
⌇ 脱靶
竖立颤抖——图形入口
追随图形进入阅读
-
skill · 脱靶提醒
+ 指派
位置给坐标、预期当尺子
场景管巩固
-
skill · 指派学习
一横一竖对举
@@ -137,32 +129,36 @@
-
散落规则 形状如何落在空白里
- +
词汇表 · 父子层级 与 ai-era-tutorial 词汇表对齐——父词统摄子词,图形落在子词上
+
- + + + - - - - + + + + + + + + + + + +
规则说明父词图形 · 子词释义(skill 口径)
密度 ≤ 8 / 屏散落形状总数控制,避免噪化。
只在空白永不压字、压卡、压线;与内容保持 ≥ 8px 间距。
语境相关页面里的散落形状应与附近内容语义呼应(脱靶内容旁放 ⌇)。
尺寸阶梯主标记 28-44px;装饰散落 16-24px;线内标记跟随线规格。
靶子▲ 目标做什么
○ 预期结果做成长什么样、怎么核对
● 积木清单要用到的零件——只列用到的;说零件不说知识
步骤分类~ 代理区过程无学习价值——交给 agent,只给预期与验收
▬ 价值区过程有学习价值——就地写清,露出认知基础
指派学习+ 三样(图形入口)教材只留三样,讲解交给读者的 agent
 └ 位置知识体系中的哪一部分——给坐标
 └ 预期实践完的结果应长什么样——当尺子
 └ 场景带回 agent 再做的练习——管巩固
脱靶提醒⌇ 图形标记不人为挖坑;跟在指派后——先见图形,再读文字
 └ 可能性 / 长相怎么脱靶 + 脱靶时什么样——撞上时认出缺哪块
认知基础底座纹(真机验收章)env / 库 / 运行环境——脚下的地,不是积木;就地露出,真机验收
-

形状 → 语义

- - - - - - - - - -
形状语义出处
▲ 三角目标靶子先行
● 实心圆积木(已学)积木清单
○ 圆环预期结果可核对的样子
~ 横波代理区交给 agent
▬ 实心条价值区就地写过程
⌇ 竖抖脱靶警示图形入口
+ 十字指派学习位置/预期/场景
+

散落规则

+
1密度 ≤ 8 / 屏:散落形状总数控制,避免噪化。
+
2只在空白:永不压字、压卡、压线;间距 ≥ 8px。
+
3语境相关:与附近内容语义呼应(脱靶内容旁放 ⌇)。
+
4尺寸阶梯:主标记 28-44px;装饰散落 16-24px。
-
+

符号规则

1装饰即语义:无含义的形状不落版面。
2形状即内容定义:读者看到形状即知内容类型。
diff --git a/design-refs/mockup/design-system/02-symbols.pdf b/design-refs/mockup/design-system/02-symbols.pdf index 6fd1f22..a1a8a70 100644 Binary files a/design-refs/mockup/design-system/02-symbols.pdf and b/design-refs/mockup/design-system/02-symbols.pdf differ