<Symbols /> 1/3

符号、形状 · 语义形状

七个孟菲斯形状对内容下定义,全部取自 ai-era-tutorial 的概念。散落于空白——装饰即语义,无义不落。
▲ 靶子
目标——这一章要做成什么事
卡头打头,教程最前
● 积木
完成目标的零件;点列实心=已学
空心=未学
○ 预期
做成之后可观察、可核对的样子
16:9 相框角标
~ 代理区
无学习价值的过程,交给 agent
只给预期与验收
▬ 价值区
有学习价值,过程就地写清
露出认知基础
⌇ 脱靶
竖立颤抖——图形入口
追随图形进入阅读
+ 指派
位置给坐标、预期当尺子
场景管巩固
一横一竖对举
代理区=横波(蓝),脱靶=竖抖(红)。方向+色相双重区分,永不混淆。
词汇表 · 父子层级 与 ai-era-tutorial 词汇表对齐——父词统摄子词,图形落在子词上
父词 图形 · 子词 释义(skill 口径)
靶子▲ 目标做什么
○ 预期结果做成长什么样、怎么核对
● 积木清单要用到的零件——只列用到的;说零件不说知识
步骤分类~ 代理区过程无学习价值——交给 agent,只给预期与验收
▬ 价值区过程有学习价值——就地写清,露出认知基础
指派学习+ 三样(图形入口)教材只留三样,讲解交给读者的 agent
 └ 位置知识体系中的哪一部分——给坐标
 └ 预期实践完的结果应长什么样——当尺子
 └ 场景带回 agent 再做的练习——管巩固
脱靶提醒⌇ 图形标记不人为挖坑;跟在指派后——先见图形,再读文字
 └ 可能性 / 长相怎么脱靶 + 脱靶时什么样——撞上时认出缺哪块
认知基础底座纹(真机验收章)env / 库 / 运行环境——脚下的地,不是积木;就地露出,真机验收

散落规则

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

符号规则

1装饰即语义:无含义的形状不落版面。
2形状即内容定义:读者看到形状即知内容类型。
3黑描边 2px:形状一律描边(细线装饰除外)。
设计系统 · 02 符号形状 · stack idealjs
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 符号形状 · stack idealjs
02 / 03
<Symbols /> 3/3

符号、形状 · 票券

票券只做一件事:表达完成状态——完成=沿撕线打孔,未开始=实线无孔。站点与胶囊属 RouteLine(见 03 组件)。
票券 状态的载体——完成即打孔
🌐
快速开始
No. 001 · 已完成(打孔)
№01
🔗
全栈基础
No. 005 · 未开始(无孔)
№05
完成=沿撕线打双孔(上下半圆缺口);未开始撕线为实线、无孔。
撕线=4:2 点划,与虚线同节奏但语境不同(裁剪线非关系线)。票号=章程序号。票券只表达完成状态,不作其他用途。
实现规则 裁切式——单一描边的做法
项规格
结构216×70 · 描边 2px · 圆角 12 · 硬投影 5px 5px 0 ink · overflow hidden
头部色块章节色纯填充、无独立描边——由票体裁切出干净圆角(嵌套色块永不自带边框)
打孔⌀14 圆跨边 ±10px,被 overflow 裁成半圆缺口,内弧带描边
撕线stub 左缘 1.5px;完成=4:2 点划,未开始=实线

票券参数

元素规格
票体216×70 · 2px ink · R12 · 硬投影 5,5
头部色块56px 宽 · 章节色 · 无框(裁切式)
打孔⌀14 · 半圆缺口 ×2(撕线上下)
撕线完成 4:2 点划 · 未开始实线

状态规则

1打孔即完成:孔是唯一的完成信号,不引入颜色。
2无锁:未开始不打孔、不上锁,可随时进入。
3一票一章:票号=章程序号,不混合多章。
设计系统 · 02 符号形状 · stack idealjs
03 / 03