为何称之为手稿,而非界面
我们不想再做一款神秘学应用。我们想做一部恰好住在浏览器里的书——一部你一次翻一张牌的书,墨色在草稿之间慢慢变干,页边带着十六世纪印刷工人会签字认可的那种细线装饰。把它叫作「手稿」而不是「界面」,并非诗意的修辞。它改变了之后每一个下游决定。
界面以吞吐为优化目标。它要让你从意图到结果之间,敲击次数尽可能少。手稿则以注意力为优化目标。它要让你在合适的时刻慢下来——抽牌前的那一口静心呼吸、卡牌翻转时安静的两秒、解读开始落墨之前的那段停顿。把吞吐量调到最高的那个版本的 Lunarcana 会更快、更小,而你再也不会回头来用它。
黑曜石之上的象牙色,是这种姿态向我们提的第一个请求。深色页面读起来像被烛光从下方点亮的羊皮纸,像那一刻——蜡烛被靠近书脊。这种调性也在一个早已被紫色渐变与水晶球摆拍过度照亮的品类里,发出一点点严肃的信号。我们希望 Lunarcana 第一眼看上去,像一处可以认真做内在功课的地方,而不是一场客厅戏法。
三件事我们一开始就拒绝。我们拒绝任何形式的「神秘风」素材图——飘动的丝巾、发光的手掌、紫色星云,全都不要。我们拒绝在仪式时刻使用弹窗——静心在流中、揭牌在流中,没有任何中断。我们拒绝把这件事框定为「占卜」。Lunarcana 是数字手稿,是一件书写工具。它是镜子,不是神谕。下文所有的规矩,都为这三条拒绝服务。
「吞吐属于工具,注意力属于仪式。」
色彩 · 象牙、黑曜石、金箔
调色板上只有三个音。象牙是默认的墨——每一段正文、每一处标签、每一行安静的元数据,都是象牙色或它略微淡去的变体。黑曜是页面——纯黑,不被柔化为靛或炭,因为背景一旦升温几度,金的「门槛性」便失守,手稿便开始像营销页。金是第三个音,定量供给。
金,仅作为门槛信号。它标记注意力应当转换形态的那些时刻——文档顶部的品牌印记、长段开首的首字下沉、章节标题下方的细线、按钮可触达的悬停态、卡牌翻转时的明亮一缘、刚刚被翻开的位置标签、外壳里的月相符号。除此之外,金是被禁止的。一整页可以一像素金都不出现,而那正是设计的本意。
限量供给的理由不是审美,而是信息论。若金到处都是,金便无处可在——它失去信号,沦为材质。把它留给那些真正改变读者与页面关系的瞬间,便能让一束温暖的火花,做完十道渐变也做不到的事。「门槛规则」是这份文档里最重要的一条,也是在功能压力下最容易被悄悄违反的一条。
金可被允许的所在
- 文档头顶的 Lunarcana 印记。
- 长段开首的首字下沉。
- 章节标题下的细线。
- 可交互控件的悬停与聚焦态。
- 塔罗牌翻转时的明亮一缘。
- 刚刚被翻开的位置标签。
- 外壳里的月相符号。
我们不用紫色。不在渐变里、不作强调色、不作悬停态、哪里都不用。紫色是整个神秘学应用品类的视觉俗套,绕开它,是最高效地说明 Lunarcana 在做另一件事的方式。
字型 · 层级、对比、呼吸
手稿里有八枚字型令牌,每一枚都只做一件事。Display 是字标与极少数仪式性标题。H1 是章节起首。Section 是引出一块内容的小眉。Body 是你此刻正在读的长篇正文。Body-CJK 是同一段正文的中日变体,字面被针对纵向韵律调过。Eyebrow 是小号大写标签。Quiet 是页边的元数据。Numeral 是用于计数的等宽数字。
正文通过 bodyClass(locale) 选择——这只助手在拉丁场景返回 t-body,在 zh/ja 场景返回 t-body-cjk——因为中文与日文的字面与拉丁字面呼吸方式不同:在英文里读起来宽裕的行高,在中文里却会显得局促。永远不要在 JSX 里直接写 locale === 「zh」|| 「ja」 这种判断。助手就是边界。
字型层叠里有一个值得记下的小坑。globals.css 中的 .t-* 类是无层级的,这意味着 Tailwind 的随写工具如 text-[1rem] 无法覆盖 .t-display 或 .t-h1 上的字号、字距与行高。当你需要对这三者做响应式覆盖时,请直接落到内联 style 里,配合 clamp()——内联样式同时压过两层。Header 字标曾经被它咬过一次,不会有第二次。
.t-display · 仪式性
LVNARCANA
.t-h1 · 章节起首
我们如何手抄这部书
.t-eyebrow · 章节小眉
美学元志
.t-body · 长篇正文
解读是一场仪式,而非一次查询。
这四个示例使用的,正是手稿其余部分所用的同一组 .t-* 类,而非截图。任何令牌的声调若发生漂移,会先在这里显形。
动态 · 仅以透明度淡入淡出
Lunarcana 的相位过渡是淡入淡出。它不滑、不跳、不在 y 轴上弹簧。整条解读流——提问、静心、抽牌、揭牌、解读——都发生在同一个 AnimatePresence 的 wait 模式之内,每一相以透明度入场,再以透明度退场。只有一个例外:卡牌本身在翻转时绕 Y 轴旋转,因为卡是卡,卡会翻。其余每一处过渡,都是墨在页面上慢慢浸入或淡出。
首版之后我们移除了 layoutId。layoutId 在技术上很美——它让 Framer 在两套布局之间执行 FLIP 动画——但在我们的场景里,它在揭牌后牌阵重排时,会带来细微的位移抖动。我们用 left 上的 CSS 过渡 + 新外壳上独立的透明度淡入替代了那次飞行,手稿便不再痉挛。不变量是「永不出现位移抖动」。如果两个状态之间页面尺寸有变,新状态必须在变化前先把空位占好。
「降低动态偏好」在每一层都被尊重。在 prefers-reduced-motion 下,呼吸圆停止呼吸,卡牌翻转退化为 300ms 的透明度切换,牌堆停止颤动,烛光停止闪烁,翻转时的金光被静默。可达性在这里不是一个勾选框——对于一件冥想工具而言,那就是它本身的表面积。
相位过渡的透明度时序
我们不做的事
大多数设计系统描述自己「会做什么」。更难写的、也是我们最常重读的那份文档,是「我们拒绝做什么」的清单。负空间即教义。下面五件事,我们立下界限。
我们不预测未来。
Lunarcana 的定位是数字手稿、是一件书写工具、是一面内在的镜子——而不是占卜服务。这种定位是承重的:既因为支付提供方的可接受使用条款要求如此,更因为——更要紧地——一旦把卡片框定为「预测」,它为读者所做的内在功课便在那一刻被掏空。我们说手稿、说书写、说镜子。我们不说神谕。
我们不用神秘风素材图。
没有紫色渐变,没有水晶球渲染图,没有飘动的丝巾,没有发光的手掌,没有牌堆背后的星云。整部手稿里的「神秘风」图像,只来自牌面本身;包裹它的外壳故意保持严峻,好让牌面以自己的声音发声。
我们不在核心仪式上设付费墙。
免费档永远可以读。两种日常用的牌阵不限量,其余按月计配额。墙——若出现——围在「次数」与「导出」周围,绝不围在静心、抽牌、揭牌或解读本身。仪式是属于读者的。
我们不在仪式时刻打断式弹窗。
静心在流中,揭牌在流中,解读在流中流入。在这些时刻冒出一个弹窗,就把节律击碎了。弹窗只为工具性场景保留——确认、设置、支付——绝不为仪式本身。
我们不自动播放声音。
在许多语境里,静音才是默认。环境音床与音效都通过外壳手动开启,并记住读者上一次的选择。在安静的列车上忽然惊吓到读者的音频,是失去他们最快的方式;手稿宁可保持沉默,也不愿失礼。
源流与致谢
Lunarcana 没有一处是凭空发明出来的。这部手稿站在一长排缓慢、手作、细心装饰的工作之上,向那一排长架致谢,是这份纪律的一部分。下面是我们在漫长迭代里始终放在心里的影响。它们不是为了「掉书袋」而被列出——每一项都给了这部最终的书一种具体的姿态。
- 威廉·莫里斯与凯姆斯科特出版社
- 一种信念:页面不是布局,而是一块织物;页边与正文同等重要;手装订的工作有权比工业竞争对手更慢。
- 奥伯利·比亚兹莱
- 黑白线条工作的纪律,以及一种胆量——敢于让一整片页面留空,好让一处装饰承担全部叙述。
- 1909 年韦特塔罗的彩色石版印刷
- 牌面本身的图像学与色彩逻辑,并提醒我们:被印刷的神秘学,反而在它停止「看上去神秘」、开始「看上去像一本严肃的书」时,最清晰地抵达读者。
- 伏尼契手稿
- 一种气质——一页知道得比它解释的更多。页边注。细线装饰。允许读者在意义沉淀之前,先在「读不懂」里待上一阵。
- 当代慢设计运动
- 一份许可——拒绝主导现代应用的「参与回路、滑屏喂养、多巴胺节奏」模式,转而为那位选择坐下来、与一念独处的读者来设计。
邀约
若一份教义在做它该做的事,它会在被吸收之后消失。上面写的大部分东西,几分钟之后,对你来说会只是「你正坐着的这间屋子」的样子。这正是用意。表层之下的规矩在那里,只是为了让表层得以保持安静。
当你准备好了,抽一张牌。牌堆在隔壁。指南在它上方那一架。「关于」一页会告诉你是谁在守这部手稿。愿装订处依然结实。