<Symbols /> 1/3
符号、形状 · 语义形状
七个孟菲斯形状对内容下定义,全部取自 ai-era-tutorial 的概念。散落于空白——装饰即语义,无义不落。
▲ 靶子
目标——这一章要做成什么事
卡头打头,教程最前
skill · 靶子先行
● 积木
完成目标的零件;点列实心=已学
空心=未学
skill · 积木清单
○ 预期
做成之后可观察、可核对的样子
16:9 相框角标
skill · 预期结果
~ 代理区
无学习价值的过程,交给 agent
只给预期与验收
skill · 每步先分类
▬ 价值区
有学习价值,过程就地写清
露出认知基础
skill · 每步先分类
⌇ 脱靶
竖立颤抖——图形入口
追随图形进入阅读
skill · 脱靶提醒
+ 指派
位置给坐标、预期当尺子
场景管巩固
skill · 指派学习
一横一竖对举
代理区=横波(蓝),脱靶=竖抖(红)。方向+色相双重区分,永不混淆。
散落规则 形状如何落在空白里
| 规则 | 说明 |
| 密度 ≤ 8 / 屏 | 散落形状总数控制,避免噪化。 |
| 只在空白 | 永不压字、压卡、压线;与内容保持 ≥ 8px 间距。 |
| 语境相关 | 页面里的散落形状应与附近内容语义呼应(脱靶内容旁放 ⌇)。 |
| 尺寸阶梯 | 主标记 28-44px;装饰散落 16-24px;线内标记跟随线规格。 |
形状 → 语义
| 形状 | 语义 | 出处 |
| ▲ 三角 | 目标 | 靶子先行 |
| ● 实心圆 | 积木(已学) | 积木清单 |
| ○ 圆环 | 预期结果 | 可核对的样子 |
| ~ 横波 | 代理区 | 交给 agent |
| ▬ 实心条 | 价值区 | 就地写过程 |
| ⌇ 竖抖 | 脱靶警示 | 图形入口 |
| + 十字 | 指派学习 | 位置/预期/场景 |
符号规则
1装饰即语义:无含义的形状不落版面。
2形状即内容定义:读者看到形状即知内容类型。
3黑描边 2px:形状一律描边(细线装饰除外)。
01 / 03
<Symbols /> 2/3
符号、形状 · 线条形式
形式即含义:实线=先后、虚线=相关、点线=同族、波浪带=代理交接。拓扑规则全形式通用。
实线 = 先后
推荐顺序,主线。2.5px ink。唯一带站点的线形;分流/并线用直角步进。
虚线 = 相关
内容互参,无顺序。2px,4:2 点划。无站点,两端直抵卡边。
点线 = 同族
同一积木家族的章节互连(教一块带一族)。圆点端帽 6px 间距。无站点。
波浪带 = 代理交接
agent 边界的区域标记(蓝),不连线——是地带不是路径。与 ~ 形状同源。
拓扑规则 全形式通用——线的几何纪律
| 规则 | 规格 |
| 横平竖直 | 走向只有水平与垂直;无斜线、无大弧。 |
| 转角 R8 | 转折用 R8 小圆角直角步进。 |
| 并行不合并 | 多条并行线逐条渲染,间距 4px,不合成一条。 |
| 线止于卡边 | 起止都落在卡边或站点/胶囊边界,不钻入、不悬空。 |
| 不共享线段 | 分流的两线只在分岔点相触,随即分开(避免 T 形合流感)。 |
线形速查
| 形式 | 含义 | 站点 |
| 实线 2.5px | 先后 | 有(四色轮换) |
| 虚线 4:2 | 相关 | 无 |
| 点线 6 间距 | 同族 | 无 |
| 波浪带 | 代理交接 | —(区域) |
同两张卡可以同时存在实线(先后)与虚线(相关)——顺序与互参不互斥。
用线原则
1线不可缺:章节之间必有关系可读。
2先实后虚:主链走实线;相关/同族是补充。
3一屏一线形不超 3 类:实+虚+点已满,波浪带另算区域。
02 / 03
<Symbols /> 3/3
符号、形状 · 站点、胶囊与票券
关系上的铆钉与凭证:站点半嵌卡边(左贴描边、右骑黑影外缘),多线卡口用胶囊,完成用打孔票。
站点 只上先后线——r6 描边圆点,四色轮换
半嵌卡边:圆心落在卡边上。
左贴描边(图左卡右侧无投影);右骑硬投影外缘(图右)——描边外有 7px 黑影带,站点放在描边会被吞没。
线从卡边/影缘出发;同色不相邻。
胶囊 多线入同一卡口时的站点形态
四条规则:① 竖向 6×20,端头半圆(rx=3,胶囊体非椭圆);② 沿线束排列方向拉伸;③ 端头距最外侧线 ≥ 2× 线宽;④ 线止于胶囊边界——圆弧自最外侧线起弯,线沿半径抵达弧起点。
票券 状态的载体——完成即打孔
完成=沿撕线打双孔(上下半圆缺口);未开始撕线为实线、无孔。
撕线=4:2 点划,与虚线同节奏但语境不同(裁剪线非关系线)。票号=章程序号。票券只表达完成状态,不作其他用途。
参数速查
| 元素 | 规格 |
| 站点 | r6 · 描边 2px · 四色轮换 · 半嵌卡边 |
| 胶囊 | 6×20 · rx3 · 线止于边界 · 距线 ≥2× 线宽 |
| 并行线 | 间距 4px · 逐条渲染 |
| 票券 | 216×~70 · 撕线 4:2 · 打孔 ⌀13 |
为什么半嵌
1圆心骑卡边=「到达」的物理感:像铆钉钉入卡片。
2黑影外缘规则是实测教训:描边上的右站点会被投影带吞没。
3虚线/点线无站点:相关与同族是「参考」不是「到达」。
03 / 03