实习日志 / 中文 / 界面重构 / 给理赔界面找一个人设：燕麦色高领毛衣，配一块好表

给理赔界面找一个人设：燕麦色高领毛衣，配一块好表

中文 | English

9 月初重做报案端的界面时，我手上有一个很具体的难题：这个界面长什么样，没有一个能拿来做判断的依据。

旧版是一个白底绿色渐变的入口页，下面排着三张理赔类型卡片，点进去是分步骤的表单。它看起来像一个保险公司的官网，也像任何一个 SaaS 的落地页。问题在于，讨论要不要改某个颜色、某个按钮的时候，大家只能凭感觉说"好看"或"不好看"，谁也说服不了谁。

先找到一个人

转机来自行业 mentor 分享的一个观察：用户真正信任的，是一个有专业素养、站在自己这边考虑问题的私人客户经理，"保险公司"这几个字本身给不了这种信任。这个人冷静但不严肃，有格调但不张扬，可靠但不谄媚，见过很多世面，却不会让你有压力。

这句话本来是在讲产品定位，我把它直接拿来当视觉的起点。界面要像这个人。

光有形容词还不够落地，我又给这个人配了一身衣服：燕麦色的高领毛衣，配一块不显眼但很好的表。整体是暖的、低调的，细节里有品味。从这以后，每个视觉上的选择都可以问同一个问题：那个人会这样穿吗？

从一件毛衣推出一套颜色

第一个决定是底色。屏幕默认的冷白是科技产品的选择，办公室的白也是。可打开这个界面的人刚出了事故，第一眼看到的东西不该是冷的。所以底色定成燕麦白 #F7F4EF，像一张好纸的颜色。侧栏和面板在同一个暖色调上每级加深一点，区域之间靠色差分开，不画边框。文字也跟着用带黄调的暖炭黑，冷灰放在暖底上会显脏。

背景三级之间每级加深约 7% 到 8% 的明度，不引入新的色相。文字分三层，差值要拉得够开，不要出现两档"差不多深"的灰。

第二个决定是强调色，这一步花的时间最多。保险行业几乎都在用蓝色或绿色：蓝代表信任，绿代表安全。正因为人人都用，这两个颜色已经没有辨识度了，看上去只剩模板感。我换了个问法：哪个颜色在这个行业里没人用，情绪却是对的？答案是鼠尾草绿，一种不饱和、带点灰调的绿。它冷静、有生命力、不张扬，在安静的房间里看到会觉得舒服。

锚点定在 #5F8F80，往两头推出一个色阶。往浅推时微微偏黄，往深推时微微偏蓝，这样推出来的色阶有温度，比机械地加白加黑自然：

语义色只多定了一个错误红 #B83228，一种收着的红。"已确认"直接复用鼠尾草绿，不另起一个成功绿，免得颜色越用越碎。

选完之后马上出现一个新风险。燕麦色加鼠尾草绿，很容易滑向度假风，慵懒、松弛，像一家民宿。那个客户经理此刻是在工作的。所以绿色的用量要收紧：它只出现在有明确功能的地方，Agent 消息左边的竖线、发送按钮、本轮新记下的字段、输入框获得焦点时的光圈。别的地方全靠暖炭黑和燕麦白撑着。颜色很少，每次出现都有原因，辨识度也就从这里来。

字体：差点给 Agent 换了一种声音

我一度想给 Agent 的消息用一款衬线字体，让人一眼分清是谁在说话。试下来放弃了。衬线自带一股书卷气，读起来像有人在给你写信。这个场景里，用户需要的感觉是有人在认真处理你的事。最后全站只用 Inter 一种无衬线字体，Agent 的消息比用户的大一号（17px 对 16px），说话者的区别靠字号就够了。

字号和字重也按这个思路排，最小可读字号定在 14px，再小的只给徽标里的字：

字重上，正文 400，导航和标签 500，标题和发送按钮 600。表的两端各留了一个例外：11px 只给徽标里的字和右侧面板折叠后那个竖排的展开标签，18px 预留不用。

衬线最后在全站只出现在一个地方：入口页的那张配图。配图打算用 photo-abstract-editorial 的做法，把一张真实照片做成上半是原照片、下半是抽象色块面板的编辑式作品，面板上的一行英文标题用 Source Serif 4。这张图的配色同样只许从上面几张 token 表里取，不允许带出别的色相。一处衬线放在插画里是点缀，放进对话里就成了 Agent 的声音，这条线我划得很清楚。在照片到位之前，hero 区先放一个内联 SVG，用三个几何色块占位。

越重要的控件越方

剩下的规则都从同一个形象里来。

圆角整体偏小，最大不过 10px。圆角越大越像消费品，越小越像工具，这个界面是工具。工具栏按钮 4px，快捷回复按钮 6px，发送按钮、输入框和用户气泡 8px，列表项悬停时的背景 10px。没有任何胶囊形的按钮。

阴影几乎不用，层级靠背景色差建立。全站只有一处阴影，是输入框聚焦时的那圈光：

box-shadow: 0 0 0 3px var(--sage-tint);

边框分两级重量。区域之间的分界统一 2px，组件内部统一 1.5px，不用 1px，因为 1px 在高分屏上太细，显得不够踏实：

间距全部是 4 的倍数，从 4px 到 40px。消息之间 28px，对话区在桌面上留 36px（上）和 40px（左右）的内边距。

状态的表达也压低音量。还没填的字段用斜体加 --t-faint 的浅色，不用红色，用户已经够紧张了，界面不该再添一层。本轮新记下的字段要让人一眼看到：字段名换成 --sage-deep，值加粗到 500，再挂一个 new 徽标。只标这一轮新增或改动的，之前记下的不标，否则满屏都是绿色，标记就失去了意义。

三栏工作区

对话开始以后，界面进入工作区。桌面上是三栏网格，以 768px 为界切到移动布局：

中间那一栏是主视觉，也是唯一的主入口。右侧面板让用户随时核对、修改系统记下的信息，但不和对话抢注意力。手机上没有并排三栏的空间，记下的信息就直接放回对话里，用户不用离开正在读的那条消息去别处找。

组件上的几条规矩都是为了让那个人设站得住。Agent 的消息没有气泡、没有头像，只有左边一条 2px 的鼠尾草绿竖线和一个 Claims assistant 的小标签，读起来像一段正在被认真写下的话。用户的消息靠右，放在 --bg-sidebar 底色的气泡里。传统的网页表单和"找人工"两个入口仍然保留，做成 14px、--t-muted 颜色、浅色下划线的文字链接，低调地待在辅助导航里，用户找得到，但它们不和 Agent 争主入口。滚动条全局隐藏。

入口页只做三件事

有了这套语言，入口页也就好设计了。它的任务很朴素：让用户进得来，认得出自己上次没写完的记录，找得到登录入口。所以页面上没有功能介绍卡片，没有"三步完成理赔"的流程图，也没有理赔类型的选择卡。中间一个输入框，提示一句 Tell us what happened，上面一行品牌主张 Understand insurance. Understand you better. 这两句我刻意分开放：品牌主张是一句态度，输入提示是一个动作，拼成一段长文案，两边都会变弱。入口页没有新增任何 token，全部复用前面那套。

已经登录的用户不经过这一页，直接进工作区。这一页只服务没登录的人，它有四个状态：

用户在输入框里打字、回车以后，输入框从页面中央平滑地滑到底部，就像 Claude 和 ChatGPT 网页版那样，页面随之变成工作区，Agent 主动发出第一条开场白。没登录的用户在工作区里也能正常聊天，右侧字段面板照常工作，左侧的对话记录栏换成一个带锁形图标的占位，写着登录以后可以看到历史。

How it works 也没有做成一个独立的引导链接，它复用输入框旁边那行提示的位置。还没开始报案时点它，直接打开教学页；已经在工作区里时点它，由 Agent 发一条说明消息，末尾带一个 See more →，再链到同一个教学页。

背后是一条分工：

页面只负责静态的、结构性的东西；引导的话交给 Agent 在对话里说。道理还是那个人设：迎面而来的应该是一个在认真听你说话的人，营销文案替代不了他。

摘要卡片上有三个动作：继续、登录保存、重新开始一单。"重新开始"这一项我没有把它做弱。很多产品喜欢把不想让你点的选项做成灰色小字，可在一个刚出过事的人面前，任何让他犹豫"我是不是点错了"的设计都是多余的压力。

视觉稿和后端契约各管什么

这套设计最早落在一个静态的 HTML 草图里。往仓库前端复刻的时候，我给它定了一条边界：视觉结构、排版、间距和调性以草图为准；业务行为、字段、状态、权限和 API 调用，一律以仓库现有的代码、规格和后端契约为准。

划这条线，是因为草图画得出来的东西，后端未必支持。比如草图里输入栏上有文件、语音、无障碍几个按钮，当时有的还没有后端能力。这种控件可以出现在界面上，但必须明确标成不可用，并写出原因；拿一个静态的演示效果冒充已经实现的功能是不允许的。视觉稿负责"它应该长什么样"，契约负责"它现在真的能做什么"，两者冲突时，界面要如实反映后者。

后来

这套规范后来搬进了代码，变成前端共享的 token 文件，一些数值在实现时又调过，比如绿色调浅了一点。但讨论方式一直没变：有人提议加一个颜色、一个动效、一张卡片时，大家问的已经是另一件事：那个穿燕麦色毛衣的客户经理会不会这样做。

给界面找一个人设，最大的用处就在这里。它让每一个视觉决定都能说出理由，也让团队在争论时有一个共同的参照。