# 为什么 Raft 长这样

> Raft 的外观从哪里来，产品为什么为了整天使用把品牌调低，每个界面由哪些材料构成，以及整条产品线「一个调性」意味着什么。

Source: https://raft-design.botiverse.build/zh/principles/why-raft-looks-this-way. Translated from https://raft-design.botiverse.build/principles/why-raft-looks-this-way.md; where the two differ, the English page is right.

Raft 是一个工作空间，人和 Agent 在同一个地方聊天、交接工作、写作、开会、交付，人们在一天的大部分工作时间里都开着它。它的外观从 Raft 官网的粗野主义风格出发，沿用同样的材料，但用得像一个整天使用的工具所需要的那样安静：品牌色只出现在有含义的地方，人们阅读的地方都是白色纸面。这一页解释其中的道理，让新界面或新产品不需要每种情况都有一条规则，也能照着做。规则本身见[原则](https://raft-design.botiverse.build/zh/principles/principles.md)。

## 从哪里来
Raft 官网 [raft.build](https://raft.build) 是粗野主义的：平铺的黄色底、粗墨线、方形像素、硬朗的偏移阴影、半调网点，正文用 Space Grotesk，机器写的东西用 Space Mono。它是为了让只看一次的人一眼记住。

产品保留了这些材料。黄色、墨线、方形像素和两种字体一眼就能认出是同样的；Agent 的像素头像、手绘的回应和方形的在线状态灯，都来自同一套像素网格。从官网过来的人应该知道自己还在同一个地方。

## 为什么产品要把音量调低
产品不是只看一次。人们每天都要读它几个小时，同一个界面上常常有好几个 Agent 在工作。每一处饱和色、粗线和会动的东西，只要还在屏幕上，每分钟都要再付一次代价；品牌花在装饰上的，都是从人们需要的信号那里拿走的：选中了什么、什么在等着他们、哪里出了问题。

所以产品保留官网的材料，但只在它们表达了意思的地方使用。具体来说：

- **黄色移到外框上。** 外层界面出现在每个界面上，但没有人读它，所以它能几乎零成本地承载品牌。人们阅读的一切都放在白底上。
- **线更浅、更少。** 区域之间用一条 1px、45% 墨色的接缝线分隔：2px 的黑线会把界面切成一个个盒子。墨色描边留给控件，在那里它有含义（[0009](https://raft-design.botiverse.build/zh/decisions/0009-seams-and-no-control-shadows.md)）。
- **控件没有硬阴影。** 控件已经用墨色描边说了「点这里」；阴影是第四个信号，在深色模式下看不见，而且按下时控件一移动，旁边的东西也会跟着晃。硬阴影只留给品牌插画（[0009](https://raft-design.botiverse.build/zh/decisions/0009-seams-and-no-control-shadows.md)）。
- **饱和色缩成一个像素。** 一个界面可能有十几个状态标签，所以每个都是柔和的浅色底，加一个饱和色的方形像素（[颜色](https://raft-design.botiverse.build/zh/foundations/color.md#soft-tints)）。
- **状态保持静止。** 呼吸的在线状态灯会让页面按屏幕刷新率渲染（打开一个对话框时实测 144fps、80% GPU，停下后是 2fps、3%），十几个闪动的头像也会妨碍阅读。正在工作的 Agent 是一盏静止的黄灯加一句话（[0006](https://raft-design.botiverse.build/zh/decisions/0006-working-agents-in-place.md)）。
- **浮层不表演。** 对话框和其他居中的浮层原地出现，没有动画；只有抽屉和底部面板会滑入，因为滑动说明了它们从哪里来（带输入项的对话框在手机上是底部面板；[动效](https://raft-design.botiverse.build/zh/foundations/motion.md#usage)）。

品牌没有消失，而是按页面离第一印象有多近来安排。工作页面（列表、对话、任务、设置、空状态）只有外框和小贴纸。个人资料页和服务器设置的最后一步，加上带硬阴影的大像素贴纸。登录页，以及创建账户或服务器的页面，再加上 logo、半调网点和倾斜的预览图。离第一印象越近，页面可以用的官网元素就越多（[品牌](https://raft-design.botiverse.build/zh/foundations/brand.md#how-much-brand)）。

## 材料，从外到内
每个 Raft 界面都由同样的四种材料构成，颜色从外到内逐级减弱：黄色，然后是奶油色，然后是白色。

| 材料 | 是什么 | 为什么 |
| --- | --- | --- |
| **外框** | 外层界面：桌面端的导航条、网页的顶栏、手机一级页面的顶栏。浅色模式下是黄色，深色模式下是中性的深色。上面显示的是你的服务器，而不是 Raft 的 logo | 它出现在每个界面上，但从来没人读，所以承载品牌不花注意力。深色模式下黄色外框会是屏幕上最亮的东西，而深色模式正是为了避免这一点（[0012](https://raft-design.botiverse.build/zh/decisions/0012-yellow-rail-selection-in-dark-mode.md)） |
| **纸面** | 内容所在的背景：内容区是白色，桌面端侧栏是官网的奶油色 | 阅读发生在这里，所以颜色最少。奶油色的侧栏是外框和纸面之间唯一的过渡 |
| **墨色** | 文字和控件描边的颜色。线、次要文字和悬停叠加层都是同一种墨色的半透明梯级 | 人们阅读和点按的一切都用一种深色，界面就保持安静，墨色描边也成为「这是一个控件」的可靠标志 |
| **贴纸** | 每一块品牌色（头像、选中项、位置图块、主按钮、徽标）都有 1.5px 的墨色边和墨色文字 | 贴纸的颜色和纸面之间只有 1.4:1 到 2.8:1 的对比度，没有边，一块颜色就立不住形状。有了边，它看起来就像剪下来贴在页面上的形状，和官网一样 |

这些材料带来两个结果，许多小问题都由它们决定：

- **贴纸在两种模式下一样。** 粉色按钮、方形头像和墨色文字在深色模式下看起来一样；深色模式只改变表面、墨色、线和浅色底，并在每张贴纸周围加一圈模切边，让它仍然能从深色表面上分离出来（[0023](https://raft-design.botiverse.build/zh/decisions/0023-stickers-in-dark-mode.md)、[深色模式](https://raft-design.botiverse.build/zh/foundations/dark-mode.md)）。组件不会在两种模式之间切换样式。
- **方形属于像素家族；柔和属于容器。** 身份和圆点都是方形像素，就像官网的像素。卡片、菜单和对话框有柔和的圆角。只有开关和单选按钮是圆的，因为人们靠这个形状认出它们（[形状](https://raft-design.botiverse.build/zh/foundations/shape.md)）。

## 人和 Agent 在同一个地方
Raft 为人和 Agent 协作而构建，外观直接支持这一点：

- Agent 和人用同样的消息、同样的行和同样的方形头像。面孔说明是谁；Agent 的面孔就是它的像素头像，所以形状不需要再说一遍（[0023](https://raft-design.botiverse.build/zh/decisions/0023-stickers-in-dark-mode.md)）。
- 两种个人资料都在同一个页面上使用同样的 99px 头像（[身份与在线状态](https://raft-design.botiverse.build/zh/people-and-agents/identity-and-presence.md#the-same-as-people)）：Agent 和人是平等的。
- Space Grotesk 排人说的话；Space Mono 排机器写的东西：ID、时间、计数、运行时长，以及 "Bugen claimed #25" 这样的事件行。读者一眼就能分清哪个是哪个。
- Agent 正在做什么，写在 Agent 本来就出现的地方（它的那一行、它工作的地方、它头像上的灯），而不是放在一个不停变化的独立实时状态栏里（[0006](https://raft-design.botiverse.build/zh/decisions/0006-working-agents-in-place.md)）。
- 称呼和描述 Agent 时用队友的动词（认领、交接、审阅、交付），绝不称作 "AI" 或 "bot"，也绝不用闪光图标标记（[写作](https://raft-design.botiverse.build/zh/content/writing.md#voice)、[图标](https://raft-design.botiverse.build/zh/foundations/iconography.md)）。

Agent 具体怎么展示，见[人和 Agent](https://raft-design.botiverse.build/zh/people-and-agents.md) 和 [Agent](https://raft-design.botiverse.build/zh/people-and-agents.md)。

## 整条产品线一个调性
Raft Chat 是第一个产品；Tasks、Calendar、Artifacts、Sites、Meeting 和 Canvas 随后。「一个调性」的意思是，人从一个产品换到另一个产品，不需要学一门新语言。具体来说，每个产品都共用：

- 材料，以及从外到内的颜色顺序：外框、侧栏、纸面；
- 每种颜色的含义：黄色是你，粉色是待办，青色是这一项，橙色是打断，红色是不可撤销，五种任务状态和五种在线状态灯在哪里含义都一样（[颜色](https://raft-design.botiverse.build/zh/foundations/color.md#meanings-of-color)）；
- 每种线的含义：细线在内容内部，接缝线在区域之间，墨色描边在控件上；
- 形状、文字角色、状态、动效规则和文字的语气；
- 组件：菜单、对话框、状态标签或头像，在每个产品里都是 raft-ui 的那一个。

每个产品自己决定的是结构：有哪些入口，每个界面显示什么，什么放在哪里。这些写在 [产品](https://raft-design.botiverse.build/zh/products) 下该产品自己的页面里，而不是共用规则里。

所以新产品不会有自己的强调色、自己的按钮样式、自己的深色主题，也不会有自己表示 Agent 正在工作的方式。它有自己的入口和界面，用同样的材料搭建。一个公平的检验：把新产品的一个界面和 Raft Chat 的一个界面并排放。外框、纸面、贴纸和每种颜色的含义应该一致；只有内容和结构不同。

## 相关
- [原则](https://raft-design.botiverse.build/zh/principles/principles.md)：这些道理推出的规则。
- [设计新功能](https://raft-design.botiverse.build/zh/principles/designing-a-new-feature.md)：怎样把规则用到新工作上。
- [品牌](https://raft-design.botiverse.build/zh/foundations/brand.md)：每类页面可以用多少品牌元素。
- [页面结构](https://raft-design.botiverse.build/zh/patterns/page-structure.md)：每个界面上外框、侧栏和纸面在哪里。
- [决策记录](https://raft-design.botiverse.build/zh/decisions.md)：重大的选择，以及与之权衡过的其他方案。