网页部件 Specimen

打开实际组件状态矩阵 ↗

查看本网站使用的颜色、字阶、动效、标签、按钮、表格和状态。预览数字只用于说明样式，不代表当前档案。

颜色 tokens

--ef-paper
页面
--ef-panel
纸、板、输入框
--ef-ink
字和重要的线
--ef-ink-2
次要文字
--ef-rule
1px 细线
--ef-chip
安静的填充
--ef-signal
这里 / 可操作 / 注意
--ef-trace
"这里"的线
--ef-danger
只用于删除
--ef-hatch
斜线纹
--ef-tri-*
页缘识别条

字体 界面 / 阅读 / 代码

KNOWLEDGE 界面 800

--ef-font-ui：宽体几何英文（Saira）+ 思源黑体。导航、按钮、标签、标题。

阅读 --ef-font-text

思源黑体常规字重，行高放宽，用于正文。

字段 .ef-field │ v1.0.249 │ 2026.11.03 │ 04 项调整

Section title prefix

ESSAYS随笔　英文小字在上，中文粗体在下

入口 .ef-tag .ef-kv .ef-chip

v1.0.196 v1.0.249 分类记录 实验 2 全部 16 hover

切掉一个角 = 可以点进去。黄色 = 当前所在。

按钮 .ef-btn

红色只在删除按钮被指向时擦入。

状态与提示 .ef-state .ef-notice

已发布 草稿 待审

需要注意的事，前面插一面黄旗。

实线 = 生效；虚线 = 还在后台；黄块 = 要看一眼。没有红色。

记录字段 .ef-field .ef-facts .ef-marker

  • 2026.11.03
  • v1.0.249
  • 04 项调整

一句话说明这是什么

每个字段都是真实数据。用竖线分隔，不用中间点。

看板 .ef-panel（hover：页签伸开）

16已发布 2待审 7草稿

列表行 .ef-records

  1. v1.0.249补上数据安全、性能与分享04 项调整
  2. v1.0.248首页新增成果影像墙03 项调整

表单 .ef-form

展示 .ef-hollow-no .ef-bar-title

024 017

斜线纹带标题

空心大编号被指向时，墨色从左灌满（右边是灌满后）。

数据表 .ef-table

版本更新项日期
v1.0.249042026.11.03
v1.0.196012026.10.28
v1.0.195012026.10.28

柱图 .ef-bars

  1. 10.11
  2. 10.12
  3. 10.13
  4. 10.14
  5. 10.15
  6. 10.16
  7. 10.17

灰柱；当前或被指向的一根是"这里"色；超过阈值的挂黄色小方块。

字阶 type scale

主体数值与 tokens.json 的 type 级一致；示例按真实字号和行高渲染。英文与数字使用 Saira，中文使用思源黑体。display 只用于字标和分区扉页，正文页最多用到 h1；micro 是站内刻度标签的补充级。

  1. KNOWLEDGEDISPLAYclamp(48, 10vw, 176) / 1字标 · 扉页
  2. 一级标题：把想到的写下来H140 / 1.25页面标题
  3. 区块标题：最近的档案TITLE30 / 1.35区块与卡片主标题
  4. 次级标题：内容概览H222 / 1.45次级区块
  5. 正文用它承载长句；行高 1.85，一行约 38 个汉字，阅读时不必来回找行。BODY17 / 1.85measure 640
  6. 导航与按钮 15 / 1.6UI15 / 1.6导航 · 按钮 · 表单
  7. 2026.11.02　/　v1.0.249　/　03 项调整FIELD13 / 1.5字段 · 辅助信息
  8. Field archive / 个人档案EYEBROW11 / .14em英文与编号标签
  9. 01 — HOME　/　2026.11.02MICRO10 / .13em刻度 · 页码 · 状态

动效 motion tokens

时长与曲线来自 tokens.json。每页只允许一个入场演出，其余动效只回答点击、悬停和状态变化；循环装饰不在样张里出现。

  1. press100ms
  2. row200ms
  3. figFill220ms
  4. wipe280ms
  5. edge300ms
  6. sheetIn360ms
  7. stroke420ms
  8. fill450ms
  9. power520ms
  10. drive620ms
SNAP cubic-bezier(.16, 1, .3, 1) 到位快、收得住：列表落位、卡片出现、位置追赶。
MECH cubic-bezier(.7, 0, .2, 1) 起步慢、停得硬：遮罩、擦除、抽屉，以及所有退场。
EASE cubic-bezier(.2, .7, .1, 1) 普通过渡：颜色变化、细线扫过、当前项切换。

指针移入任一曲线卡，18px 方块用 520ms 走完；这是本页唯一需要手动触发的演示。系统开启减少动态效果时，方块直接跳到终点。

影像 media rules

证据图先做低饱和预览，打开原图看全彩；不裁切证书、不生成假封面，无图时保留文字与线稿。中间一格是悬停或打开原图后的还原状态。

低饱和预览saturate(.45) contrast(.94)：首页「最近成果」的证据图在卡片内使用。
指针移入 / 打开原图恢复全彩；档案阅读与详情仍显示未处理的原图。
无图虚线框 + 斜纹占位，说明真实原因，不用奖章、AI 图或截图冒充。

两块渐变色块只用于演示滤镜，不代表真实成果图片；真实证据图不裁切、不改比例。

回到顶部 ↑