← 回参考板 · 回评审台

个人工作台视觉参考板（实拍截图版）

性质：本文提案，待白晨定。2026-10-11 起草，数据截止 2026-10-11（当日抓取）。入口：index.html（断网可开，图片在 img/）。

目的：上一轮 视觉风格参考调研 没拿到截图和色值，方向是从文字推出来的；这一轮补上实拍截图和像素取样，给设计师重做配色与界面细节用，也给白晨直接看。只调研，没有改原型、没有提交、没有碰看板。

版权：截图来自各产品官网、产品页与苹果设计规范，只作内部设计参考，不对外发布、不入对外文档，版权归各产品方。

术语：L* ＝ Lab 色彩空间的明度（0 黑 100 白），两个 L* 差 3 左右是肉眼刚好看出台阶；C* ＝ 色度（颜色有多「彩」，0 是纯灰）；ΔL* ＝ 两块颜色的明度差；tint ＝ 把一个颜色以很低的不透明度铺在底上。

0. 先说结论

1011 补充：白晨追加两点反馈——「暗色尤其丑」「整体布局还是很素」。已加第 4 节（暗色，8 个暗色参考）与第 5 节（不素，8 个补充参考），方向三、五据此改写为「晨光玻璃桌面」与「暗夜玻璃」，硬规则 8、10 同步改写。index.html 随之增加第二、三节。

  1. 我们的诊断基本成立，但有一处要修正。 成立的是：桌面由五种填色卡拼成，五种色的明度几乎一样（亮色 L* 90.5～92.1，暗色全是 23.9～24.0），所以眼睛只能靠色相分辨，读不出主次；还有柠檬卡其、棕与橄榄这类浑浊中间调。要修正的是「页面底、卡片明度接近」这一条：亮色里页面 L*95.8、卡 L*90.9，差 5.2，和 Things（4.5）、Notion Calendar（3.5）、Todoist（3.8）同一量级，差得不小；真问题是这一步明度差被五种色相摊薄了，而且卡内半透明白面板又折回到页面底的亮度（约 L*96.5），层次是「亮→暗→亮」来回折返。
  2. 好看的效率产品几乎都是「中性底＋一个强调色」：25 个截图里，界面本体的色相大色块（面积 ≥2.5% 的不同色相）只有 0～2 种；我们是 3 种且每种面积都大。
  3. 彩色要么在卡外、要么在卡内的一小块，不会整卡换色。 例外是苹果小组件的「着色」外观，但它的做法是先去饱和、再统一成一个颜色。
  4. 证据局限：取色是对裁图的像素统计，圆角、阴影、描边是目测；部分裁图含营销背景（卡片上有标注）；国内产品（滴答、飞书、flomo、钉钉）只拿到官网页的产品图，不是应用内全貌；教师群体的审美证据仍然没有（和上一轮一样，仍待验证）。

1. 拿到与没拿到

拿到并收录（25 个）：Things 3、Sunsama、Amie、Linear、Raycast、Dia（The Browser Company）、Arc、苹果小组件三种外观与玻璃图块（开发者设计规范「Widgets」页，2 张）、苹果 macOS 27 玻璃面板、Craft、Reflect、Superhuman、Akiflow、Motion、Todoist、Tana、Fantastical、Structured、飞书日历、滴答清单、flomo、钉钉、Notion Calendar、Capacities。

抓了但没收录：Bear、Notion 首页、有道云笔记、Cron 与 Arc 日历旧站（重定向到别的页，没有界面图）。

没拿到：

2. 共同规律（有图为证，见 index.html 第四节）

规律一　中性底＋单一强调色。 25 个里营销背景（Dia 的芥黄、Structured 的桃红、Arc 的钴蓝、Craft 与 Tana 的多色渐变）可以很花，产品界面本体则基本是白或近白（L* 95～100）加一个按钮色：Things 蓝、Amie 蓝、Todoist 珊瑚红 #E46359、飞书蓝、flomo 绿、Capacities 暖黄。强调色出现在主按钮、选中项和一两个小标记里，面积通常不到 5%。

规律二　状态色是小信号，不是卡片底色。 Linear、Todoist、Sunsama 的状态都是 8px 圆点、勾选圈或日历里一小块时间块；Linear 的看板卡所有状态同一个暗色卡底，只有左上的状态图标带色。苹果小组件的「着色」外观官方做法是：先对内容去饱和，再统一施加用户选的一个色（见 HIG 截图正文：clear 外观「desaturates the widget and adds translucency」，tinted 外观「desaturates … then applies a person’s selected tint color」）。

规律三　层次靠明度与留白，而且是单向的。 页面底 → 面板 → 浮层依次变亮或变暗，不折返。亮色里页面与面板的差集中在 3～6 个 L*（Things 4.5、Linear 暗色 4.6、Todoist 3.8、Akiflow 3.2、Notion Calendar 3.5、飞书 3.0）；描边多为 1px 低对比，阴影只给「浮起来的窗口」，列表和卡内内容不加。

规律四　中性色有一个固定色温，且不「黄叠灰」。 Things、Akiflow、飞书是偏冷白灰（#F1F2F4、#EBF4FB、#F3F5FB）；Todoist、Capacities、Dia 是暖白（#FDFCFB、近白、#FBFAF6）。没有任何一个参考把暖黄色铺在灰面上，这正是白晨说的「黄叠灰成芥末」。

规律五　字号阶梯短。 参考产品界面里可读文字集中在 4～6 档（标题、小标题、正文、辅助、标签），相邻档差 ≥2px 或字重不同。（说明：这一条是读截图与产品页得出的目测结论，没有逐个量 DOM；我们原型的 12 档是读源码得出的实测。）

规律六　图标与标签只用一种手法。 Linear 的标签是「小圆点＋灰字」，Things 是「单色线性图标」，Craft 与 Tana 的标签是浅色小胶囊，没有哪个同时叠圆点、胶囊、进度条和角标。

规律七　暗色不是亮色压暗。 Linear 暗色面板 #111213 对页面 #1B1C1D（ΔL* 4.6，色度接近 0）；Raycast 页面 L*2.2、面板靠 1px 描边与提亮一档；Reflect 深靛底只有一处辉光。暗色里的彩色只出现在光和小信号里，没有「大块棕、橄榄、深蓝」。

规律八　玻璃只给功能层（前提说明见下）。 苹果 macOS 27 的玻璃面板、Superhuman 的浮层、Raycast 的窗口都是「内容之上的一层」，玻璃本身没有颜色，质感来自背后的光与边缘高光；内容卡不做玻璃（与上一轮调研 1.1 节引的苹果原则一致）。

　　内容卡也做成玻璃的前提（苹果 iOS 小组件 clear 外观是先例）：苹果规范写明 clear 外观会「desaturate the widget and add translucency, highlights, and glow」，即玻璃卡成立要同时满足四件事：① 背景是有内容的氛围层（光、照片、渐变），不是白纸；② 卡内只放少量大字与大数字，不放长文本和表格；③ 整个桌面统一一种玻璃材质（同模糊、同提亮、同边），状态色不上玻璃本体，只上圆点和文字；④ 给用户一个「实体」开关（不透明纸面外观），可读性优先时一键回退。长文本、表单、确认卡（「等你定」）仍用不透明或高不透明度面板。

3. 我们的原型违背了哪几条（逐条对照，截图见 index.html 第一节）

# 违背的规律 我们的实际情况（取自源码与截图） 严重度
1 规律一、二 五种整块填色：桃 #F7E0C9、柠檬 #ECEACC、浅蓝 #DAE7F3、浅绿 #D4EADB、灰 #E7E5DF；最大三块（课表、待办、「等你定」整栏）面积都很大；一屏里同时出现 3 种色相的大块 最重
2 规律三 五种填色 L* 在 90.5～92.1（极差 1.6）：区分全靠色相；卡内半透明白面板约 L*96.5，回到页面底 L*95.8 的亮度，折返；全站无阴影、无描边 重
3 规律四 柠檬卡其色相 106°、C*15.4，是黄叠灰的实例；暗色橄榄 #3D3A15（L*23.9，C*23.5，色相 101°）同样脏 重
4 规律七 暗色四块底 L* 全是 23.9～24.0（棕 #4E331A、橄榄、深蓝 #1A3C55、灰褐 #3A3935），色度 19～23，页面 L*5.7，台阶 18 个 L*，是「大块深色拼贴」，不是 Linear 那种 4.6 的轻台阶 重
5 规律五 可见文字 12 档（10.5／11／11.5／12／12.5／13／13.5／14／14.5／15／20／30），10.5～15px 之间 10 档、相邻差 0.5px 中
6 规律六 同一张卡里叠彩色圆点、药丸标签、进度条、角标（课表卡里的「落后 1 课时」是标签＋圆点，旁边还有一条进度条） 中
7 强调手法 黑色实心药丸按钮（记下、确认、复制）在每张卡里都有，是整页最重的元素 中
8 演示控制 底部约 100px 黑色带占视口 11%，自带黄色主按钮，和桌面抢注意力 中（只在演示态）
9 规律八 内容卡没有玻璃，这一条没违背；但「玻璃与动效」是白晨点名要的，现在只有漫开动效，没有材质 缺口

没有违背、应当保留的：流程主线、「颜色表示状态」的叙事（见第 5 节如何换承载方式）、确认后从点击处漫开的签名动效。

4. 暗色专章：顶级产品怎么做，我们差在哪里（补充，白晨 1011「暗色尤其丑」）

取样对象（8 个，截图见 index.html 第二节；Arc、Things、Notion Calendar、飞书、Superhuman 的暗色界面没有公开的官网暗色图，没拿到，苹果暗色小组件见方向参考中的小组件三种外观，全彩外观即暗色）：Linear、Obsidian、Resend、Raycast、Reflect、Copilot Money、Mercury、Oura，另有苹果 macOS 27 的玻璃面板。

4.1 好的暗色怎么做（实测）

对象 页面底 L* 逐级中性明度 L* 每级台阶 色度 C* 强调色（亮度 L*／色度 C*，面积）
Linear 8.3 8.3 → 10.5 → 13.6 +2.2、+3.1 ≤1.5 无大面积强调
Obsidian 7.8 7.8 → 11.7 → 15.4 +3.9、+3.7 0 紫，仅按钮
Resend 0.8 0.8 → 3.5 → 6.0 → 8.6 每级约 +2.6 0 无
Oura 9.2 9.2 → 11.1 → 14.1 → 15.9 +1.9、+3.0、+1.8 2～3 各屏一种低饱和色，面积小
Mercury 11.6 11.6 → 13.5 → 16.1 → 18.6 → 21.4 每级 +2～3 7.5～9.5（统一靛调） 靛 L*41／C*52，0.1%
Copilot Money 2.1 2.1 → 3.3 → 3.9 每级约 +1 10～14（统一海军蓝） 绿 L*52.7／C*61，0.5%
Raycast 2.1 2.1 → 3.8 → 5.8 +1.7、+2.0 ≤2.3 红光 L*26／C*58，1%
Reflect 0.9 单层深靛 — 10 紫 L*32／C*66，5.4%
我们（暗色） 5.8 5.8 → 9.1 → 13.4 → 23.9 → 28.6 页面到卡面一步 +18 卡面 19～23.5（灰卡 2.7） 取样暖色 L*39／C*22，约 8%

由此得出六条规律：

  1. 底色明度 L* 1～12，不用纯黑当大面积（Resend 的 L*0.8 配了光源与描边）；色相要么中性（C* ≤1.5：Linear、Obsidian、Resend），要么整页统一一个冷调（Copilot 海军蓝、Mercury 靛），不会每块卡一个色。
  2. 卡片靠明度阶梯分层，3～5 级，每级只高 2～4 个 L*。卡面最亮也不过 L*15～26。
  3. 卡面不带色：色度 ≤3，或整页统一冷调。彩色放在图表线、小徽章和发光点里。
  4. 强调色在暗底上要亮且饱和，面积要小：参考里有效的强调色 L* ≥40、C* ≥50，面积不到 6%（Copilot 绿 #079140、Mercury 靛 #4C5AB0；Reflect 紫 L*32 稍暗，但只出现在一团辉光里）。
  5. **暖色只能当「光」。**橙在 L*24 就是棕、黄在 L*24 就是橄榄，这是色彩规律；暖色要用就用在 L*≥50 的小发光点，或者是白晨接受的暗色琥珀（回修七）那种一角的光。
  6. **质感来自光与边，不来自填色。**Raycast、Resend、Reflect 是一个斜射光源加一处辉光；Mercury 把靛灰面板做成半透明玻璃浮在风景照上；卡面上缘或四周 1px 的白描边（不透明度约 6%～10%）。苹果的玻璃面板同理：质感来自背后的光与边缘高光，面板本身无色。

4.2 逐条对照我们的暗色（?free&theme=dark#teacher）

# 对照 我们 参考
1 台阶 页面 L*5.8 → 彩卡 L*23.9，一步 +18 每级 +2～4
2 卡面带色 棕 #4E331A（C*22.5，色相 66°）、橄榄 #3D3A15（C*23.5，101°）、深蓝 #1A3C55（C*19） 卡面 C* ≤3，或统一冷调
3 暖色低明度 橙与黄压到 L*24，必成棕与橄榄 暖色只在 L*≥50 的小发光点
4 光与边 大卡 0 处阴影、0 处描边、0 处背景图或渐变，整页平涂 一个光源＋1px 高光边（Raycast、Resend、Mercury）
5 强调色 取样暖色 L*39、C*22，面积约 8% L*≥40、C*≥50，面积 <6%
6 层级 四块卡 L* 全是 23.9～24.0，只靠色相分 3～5 级明度阶梯

一句话诊断：我们的暗色是把亮色的五种色相整体压暗，得到一排同亮度的深色板；好的暗色是「一个中性（或统一冷调）的明度阶梯，加一处光」。 （修正：白晨 0920 回修七说暗色琥珀是想要的气质，所以琥珀本身不动，要改的是「大块填色」与「同亮度」，琥珀只作一角的光与主按钮。）

5. 「不素」专章：丰富而不乱靠什么（补充，白晨 1011「整体布局还是很素」）

5.1 我们为什么素（实测，教师版亮色首屏 1440×900）

81 个文字节点；最大字号 30px，只用在一个「0」上，页面标题「今天」20px；图标 30 个，中位数 14px；图片、视频、画布 0 个；背景图或渐变 0 处；测到的正在运行的动画 0 个。即：没有主视觉、没有大数字、没有小图表、尺寸近等宽、图标没有存在感、没有材质与景深、不动。

5.2 好的个人工作台与仪表盘怎么做（截图见 index.html 第三节）

没拿到的：Raycast 新标签页、Arc 起始页、macOS 桌面小组件与 iOS 主屏的官方实拍（官网无图或 404）、Apple 天气页（404）。Notion 首页只拿到营销页，没有应用内首页。已补：Bonjourr（起始页）、Apple 健康卡片；Things「今天」见 25 个参考里的 Things 截图。

手法 参考（截图为证） 做法 我们
首屏主视觉 Momentum（风景照＋大时钟＋一句话＋小天气）、Dia（金色光＋超大衬线字）、Mercury（照片上浮暗面板） 一屏一个焦点，其余留白；背景是照片、光或渐变，加暗层或磨砂保证读字 一排 chip 加三列文字卡，0 背景
大数字 Oura「5,203」、Copilot「$1,000」、Apple 小组件「247.77」 关键数字 ≥ 正文 3 倍，下面只留一句话 「下一节 08:00」「待办 5 件」被做成 14px chip
小图表 Copilot 的折线与柱、Oura 的弧线、flomo 的热力图、Apple 活动环 每张卡一种小图：折线、柱、环或热力，线用强调色，底用中性 一条进度条
尺寸节奏 Copilot bento（1×1、2×1、1×2 混排）、Apple 小组件 S／M／L 大卡放焦点，小卡放信号；一行里最多两种尺寸 近等宽三列
图标存在感 钉钉图块、Fantastical 大图标、Copilot 类别徽章 图标放进 28～40px 的圆角底板，或成为数据的一部分 14px 线性
材质与景深 Mercury（玻璃浮在照片上）、Apple 玻璃、Raycast 外发光、Granola（纸面压在纹理色块上） 背后有光或图，卡面半透明加模糊加 1px 高光边；卡下有柔影 平涂
动效 Apple 与 Dia 首屏有循环动画（截图里有暂停键）、Momentum 慢速背景 3 秒内看得见的慢速光场、卡片入场的弹簧、数字滚动；见白晨 0920「动要在 3 秒内看得见」 0

「丰富而不乱」的三条克制：① 丰富来自材质、数据和尺寸节奏，不来自色块数量，色相仍然 0～2 种；② 一屏一个焦点，其余同质；③ 照片、光、玻璃都放在「背景与浮层」，内容卡保持干净。

对教师版首屏的具体落点（〔提案〕）：左上放大问候与日期（40～56px），旁边小天气；用三个大数字取代三个 chip：下一节 08:00（倒计时）、待办 5、家长会 2 天；背景是一团缓慢漂移的晨光；下面卡片按 2×1（课表）、1×1（待办、随手记）、1×2（等你定）混排，每张一个小图（课程进度环、待办完成环、周活动热力）。

6. 推荐重做时遵守的 10 条硬规则（〔提案〕，待白晨定）

  1. **一页一个强调色，面积 ≤5%。**其余全是同一色温的中性色，色度 C* ≤ 4。
  2. **状态色只做小信号。**8px 圆点、2px 左缘线或文字色，单卡里状态色面积 ≤8%。需要「整卡变色」的叙事，用 tint（≤10% 不透明度、色度 C* ≤ 6）加漫开动效表达，落定后回到中性底加一个信号点。
  3. **同层卡片同色。**同一行、同一级的卡片用同一个填色，模块靠位置与图标区分，不靠各自换色。
  4. **层次单向。**页面 → 卡 → 卡内面板 → 浮层，亮色依次变亮（页面最暗、浮层最亮），相邻 ΔL* 取 3～6；卡内面板用发丝线（1px，不透明度 ≤12%）加半步明度，不再叠半透明白。
  5. **禁用「黄叠灰」。**色相 90°～115°、C* 8～20 的中间调一律不要；黄只做光和小信号，面积按白晨 0920 的预算（一角）。
  6. **字号阶梯 ≤6 档。**建议 11／12／13／15／20／28，相邻档至少差 2px 或字重不同。
  7. **一张卡里强调手法 ≤2 种。**圆点、标签、进度条、角标四选二；一页只留一个实心主按钮，卡内次要动作用文字按钮。
  8. **暗色单独调，不压暗亮色。**底 L* 1～12；3～5 级中性明度阶梯，每级 +2～4 L*；卡面色度 ≤3（或整页统一一个冷调）；强调色 L* ≥40、C* ≥50、面积 <6%；暖色只当 L*≥50 的小光点；质感靠一个光源和 1px 高光边（详见第 4 节）。
  9. **玻璃只给浮层与功能层。**内容卡用不透明纸面；质感靠 1px 高光边加极淡阴影。（白晨要的玻璃与动效放在浮层、顶栏、拾起态。）
  10. **首屏要有一个主视觉。**一个大问候、大数字或大图（照片、光、渐变），其余留白；关键数字 ≥ 正文 3 倍；卡片尺寸至少 3 种混排，每张卡至多一个小图（详见第 5 节）。

另：演示控制带收成悬浮胶囊（≤44px、默认收起、占视口不超过 5%），这是演示态的修正，不算设计规则。

7. 建议的 6 个设计方向（每个都保留流程主线与「状态变色」叙事）

说明：下面的色值全部是 〔提案〕，没有经任何来源背书，也没有跑对比度；定下方向后要在样张里按对比度门禁重算。状态色统一采用同一组「信号色」：等你定 琥珀 #D98A2B、今天 蓝 #3C7FC0、搞定 绿 #389A60、逾期 朱红 #CF4B34（取代柠檬黄，避开芥末）；各方向只改它们的承载方式。

方向一：暖纸单墨（Things／Todoist／Capacities 的气质）

方向二：冷静灰蓝工具感（Linear／Notion Calendar／飞书）

方向三：晨光玻璃桌面（有氛围背景＋玻璃卡片主打；沿用「阳光玻璃 P」的光与玻璃，砍掉填色卡）

方向四：单主题染色（Arc／苹果「着色」外观）

方向五：暗夜玻璃（暗色主打；Linear／Raycast／Mercury 的做法，不取红紫）

方向六：白卡浮彩幕（Tana／钉钉／Craft 的分工）

推荐排序

先做**方向三（晨光玻璃桌面，亮色）与方向五（暗夜玻璃，暗色）**这一对：两者同一结构换色，一次回应白晨「暗色尤其丑」「布局太素」「偏好玻璃与动效」三条；方向二（冷静灰蓝）作低风险对照基线。其余三个留作备选，不先做。（这是推荐，不是决定；选哪个由白晨定。）

8. 未验证项与下一步

9. 复现方法