AffectiveDesign Lab 情感设计研究室
KOEN

设计

本站为自己排版所定的规则，以及这样定的理由。

以测量立身的研究室，也该测量自己的屏幕。本页的色值与对比度在构建时从实际样式表读取计算，下面的决定是制作过程中撞到的问题的记录。

两种底色

日间与暗色。跟随访客的系统设置，若亲自选择则以选择为准。强调色在两种底色下是同一种黄 — 随底色而变的颜色就不是同一种颜色。会变的只是这种黄要充当文字的时候。

日间

  • 底色#f7f6f2
  • 卡片#fff
  • 浅面#eae8df
  • 细线#b0b0a1
  • 辅助文字#4a4a41
  • 正文文字#14140f
  • 强调色#ffc600
  • 作为文字的强调色#7d5c00
  • 强调色上的文字#0f0f0f
  • 辅助色#1a5f58

正文 17.08:1 / 辅助 8.27:1 / 强调色之上 12.17:1

暗色

  • 底色#0f0f0f
  • 卡片#1a1918
  • 浅面#161615
  • 细线#333130
  • 辅助文字#9a9691
  • 正文文字#f1eeea
  • 强调色#ffc600
  • 作为文字的强调色#ffc600
  • 强调色上的文字#0f0f0f
  • 辅助色#6fb3a6

正文 16.57:1 / 辅助 6.52:1 / 强调色之上 12.17:1

字体

心

Cormorant Garamond + Gowun Batang / 300 / 标题与大字

正文用无衬线，长列表里也读得动。

Pretendard / 400 / 正文

SCIE Q1 / 2026-08 / DOI

IBM Plex Mono / 供机器读取的部分 — 索引、日期、数值

字号

只有五级。右侧数字为桌面端与手机端。在手机上每一级都会变大 — 因为放得更远的屏幕上，同样的字号读起来更小。

labels测量情感，并把它变成形状12 / 12index tags and role names — marks rather than prose
marginalia测量情感，并把它变成形状13.5 / 13.5dates, counts, short glosses
secondary测量情感，并把它变成形状14.5 / 15captions and footnotes
body测量情感，并把它变成形状16 / 16.5paragraphs, lists, buttons
lead测量情感，并把它变成形状17 / 17.5page ledes and definitions

留白与宽度

首页与各页面使用统一的内容宽度。桌面两侧留白至少为屏宽的7%，1,100px以下为5%，760px以下为24px。长篇正文另设行宽限制。

间距

只有十二级，中间的值不用。小的几级是元素内部的留白，大的几级是章节之间的呼吸。右侧数字为桌面端与手机端 — 手机上只有大的几级会缩小，因为窄屏需要更少的是章节之间的空气，而不是按钮内部的留白。

sp-12 / 2a hair beside a rule
sp-24 / 4inside a chip
sp-38 / 8between chips, between lines
sp-412 / 12inside a card
sp-516 / 16between paragraphs
sp-620 / 20
sp-724 / 24between columns
sp-832 / 24between groups
sp-940 / 32
sp-1048 / 40before a heading
sp-1164 / 48
sp-1280 / 56between sections

形状

胶囊形 — 可以按的东西 8px — 用于容纳 9px 圆点 — 章节的标记

标志

空心圆是测得的当下状态，实心圆是设计所瞄准的状态。研究室所做的一切，就是这两个圆之间的距离。

决定

韩文不沿用拉丁字母的字号

把拉丁文的 96px 标题原样搬过来，韩文显得沉重得多 — 两者填满字面的程度不同。标题因此从 124px 降到 82px。

混排两种文字的行不用等宽体

没有收录韩文的等宽字体，参与者名单在同一行里字体就裂开了 — 只有拉丁文名字落进等宽体。

强调色上的文字由令牌决定

强调色在日间偏暗、在暗色下偏亮，写死为白字的按钮在暗底上只有 1.9:1 的对比。

整面铺满强调色的区块，一屏只有一个

颜色要有意义就必须稀少。在本站，强调色只用于三处：此刻所在、目标情感，以及加入我们。

对比不靠主张，而靠测量

本页数值在构建时从 style.css 读取并计算，文档不可能与实物脱节。

在手机上所有字号都会变大

在一臂之遥观看的屏幕上，同样的字号读起来更小。小于 15px 的文字从 77% 降到 14%，剩下的只有标签与日期。

投入的时间

建这个网站花掉的时间。纵轴是当天亲自投入的小时数 — 阅读、判断、输入。等待的时间不计入。发布动态、修改成员属于运营而非建设，因此单独计算，共 4.0 小时。

0246 08/21 — 0.28 小时 — 14 次发言2108/24 — 0.78 小时 — 15 次发言2408/25 — 4.57 小时 — 71 次发言2508/26 — 1.52 小时 — 24 次发言2608/27 — 1.0 小时 — 18 次发言2708/28 — 1.32 小时 — 26 次发言2808/29 — 1.02 小时 — 22 次发言2908/30 — 0.61 小时 — 8 次发言3008/31 — 2.3 小时 — 33 次发言3109/01 — 3.01 小时 — 45 次发言0109/02 — 0.63 小时 — 18 次发言0209/04 — 0.91 小时 — 17 次发言0409/06 — 0.42 小时 — 8 次发言0609/07 — 0.23 小时 — 2 次发言0709/08 — 1.28 小时 — 23 次发言0809/09 — 1.87 小时 — 41 次发言0909/10 — 0.13 小时 — 4 次发言1009/11 — 0.63 小时 — 18 次发言1109/12 — 1.33 小时 — 44 次发言1209/13 — 0.34 小时 — 11 次发言1309/14 — 0.61 小时 — 14 次发言1409/15 — 1.14 小时 — 36 次发言1509/16 — 0.51 小时 — 11 次发言1609/17 — 0.57 小时 — 61 次发言1709/18 — 1.42 小时 — 78 次发言1809/19 — 0.12 小时 — 4 次发言1909/20 — 0.44 小时 — 9 次发言204.57
8月 / 9月 — 小时
以表格查看
日期 建设 内容 挂钟 发言
2026-08-210.28 0.00.2114
2026-08-240.78 0.20.9415
2026-08-254.57 1.226.4471
2026-08-261.52 0.081.9524
2026-08-271.0 0.461.3918
2026-08-281.32 0.151.5526
2026-08-291.02 0.11.4922
2026-08-300.61 0.00.978
2026-08-312.3 0.242.6833
2026-09-013.01 0.534.4145
2026-09-020.63 0.00.918
2026-09-040.91 0.01.2317
2026-09-060.42 0.080.798
2026-09-070.23 0.00.622
2026-09-081.28 0.31.9323
2026-09-091.87 0.092.1741
2026-09-100.13 0.00.414
2026-09-110.63 0.140.8418
2026-09-121.33 0.191.4344
2026-09-130.34 0.00.2111
2026-09-140.61 0.00.6514
2026-09-151.14 0.01.5736
2026-09-160.51 0.00.7211
2026-09-170.57 0.170.6961
2026-09-181.42 0.01.1978
2026-09-190.12 0.00.094
2026-09-200.44 0.00.389

从 2026-08-24 到 2026-10-16，共 675 次发言。提交数与时间跨度和本页其他数值一样，在构建时从 git 读取。时数则不同 — 它测自不在本仓库中的工作会话记录，构建无法重新计算，因此测量日期与方法一并写在 data/buildlog.yml，并由 scripts/measure_worklog.py 重新测量。间断超过 15 分钟视为另一段工作，发言间隔超过 12 分钟视为离开。区分建设与内容的依据，是该时段的提交所改动的文件。内容工作从未单独成段 — 它总是夹在建设之中 — 所以内容时数是按提交比例分摊的，不是测得的。作为校验，473 个提交全部落在检测到的工作段内。