问题陈述:为什么设计审美是工程问题

界面设计的一致性,和代码逻辑的一致性同等重要。

在迭代速度很快的早期阶段,设计元素会悄悄漂移。不同的开发会话加入了不同的橙色,不同的场景引入了不同的间距标准,不同的组件用了不同的阴影深度。每一次单独看都说得过去,但积累起来,界面会开始产生一种模糊的不舒服感,用户说不清楚哪里不对,但他们能感受到。

这篇文章试图把这种说不上来的舒服或不舒服变成可执行的设计原则。


原则一:结构自显,拒绝贴标签

卡片左侧竖线是一条明确的设计红线。无论何种场景,这个元素都不应该出现在界面里。

「accent border」或「left border indicator」是一种极为常见的设计模式,在 Material Design、Bootstrap 等设计系统中随处可见,用来表示状态、分类或强调。那么问题出在哪里?

竖线本质上是外加的层级标注。它在内容旁边贴了一个标签,告诉用户这个东西属于某种类别,而不是让内容本身通过排版、颜色、位置自然传达出来。

这暴露了设计者的意图太过明显:我要让你注意这里。高品质的设计不这样说话,它是这个东西本身值得你注意。

延伸到同类的被拒绝元素:
- 卡片边框,用底色区分即可
- 过重的阴影,输入框尤其要避免
- 半透明色块背景
- 蓝色分隔线

这些元素有一个共同特征:它们都是贴上去的,而不是从材质和结构中长出来的。

可执行原则:每当想用竖线/边框/分隔线来告诉用户某个元素的重要性,先问:能否通过底色、字体粗细、留白大小来传达同样的信息?如果可以,就不需要那条线。竖线的存在,是对设计层次感不足的补偿;强大的设计,不需要补偿。

竖线对比:结构自显 vs 贴标签
✗ 被拒绝
A
Alice
今天读完了《置身事内》,兰小欢写中国政府与经济,从土地财政一路讲到债务逻辑,让人忽然明白很多事不是坏,是结构。
左侧竖线 = 外加的层级标注,设计意图过于明显
✓ Alice 的选择
A
Alice
今天读完了《置身事内》,兰小欢写中国政府与经济,从土地财政一路讲到债务逻辑,让人忽然明白很多事不是坏,是结构。
底色区分层次,无竖线,结构从材质中自然生长

原则二:时间连续,任何切换都不应硬来

硬切是高频出现的设计问题,接受度极低,属于不可商量的选项。

什么是硬切?状态 A 在一帧内变成状态 B,没有任何过渡。

动效不是装饰,它是界面时间维度的语言。当一个元素走向某个地方消失,而不是凭空蒸发,用户的大脑会将界面感知为一个连续的空间,而不是一系列静态画面的切换。这种感知差异,是有质感和没有质感之间最根本的区别之一。

列表的展开和收起,应当配合淡出动效;点击关闭按钮,应当有渐退而非直接消失;主题切换等全局变化,同样需要平滑过渡。

模态框的动效标准是参照微信:背景先产生模糊效果,然后内容从下方弹出,两个动作有轻微时间差。背景先变模糊告诉用户原有上下文暂时被遮蔽,内容弹出告诉用户新的交互层次出现了,这是层次感的时间叙事。

有输入的模态框不允许轻易点击外部关闭。 这条规则很精细:用户已经输入了信息,随意关闭会导致信息丢失和挫败感。只是展示信息的模态框点击外部关闭是合理的。区分两种模态框的行为,是对交互场景细粒度理解的体现。

可执行原则:展开/收起/切换/弹出/消失,任何状态变化都需要过渡动效,最低限度是淡入淡出。硬切是对用户时间感知的粗暴中断。

硬切 vs 过渡动效:大脑的感知差异
硬切模式
《置身事内》— 兰小欢
《万历十五年》— 黄仁宇
《枪炮、病菌与钢铁》— 贾雷德·戴蒙德
《人类简史》— 尤瓦尔·赫拉利
大脑感知为「画面切换」
动效模式(280ms fade + slide)
《置身事内》— 兰小欢
《万历十五年》— 黄仁宇
《枪炮、病菌与钢铁》— 贾雷德·戴蒙德
《人类简史》— 尤瓦尔·赫拉利
大脑感知为「空间连续」

原则三:颜色是语义,不是装饰

界面中存在多套相近颜色,是设计漂移的信号。Alice 的选择是收拢,而不是继续兼容。

颜色是一种语义资源。 每种颜色都意味着一种用户需要学习的含义。颜色越多,用户的认知负担越重,界面的噪音越大。配色不超过 3 种主色,是这个原则的具体落地。

颜色的稳定性原则:书封面的颜色用确定性算法(哈希书名)来分配,而不是随机的。这样既保证视觉丰富性,又保证一致性,同一本书永远是同一个颜色。颜色在这里不是装饰,而是稳定的标识系统。

高级感的色彩语义:磨砂、夜宴,这些主题名称本身就携带了完整的颜色语义。磨砂不反光、不张扬、触感细腻;夜宴是黑金配色、低调奢华。高级感的本质是有文化语义的极简,不是用更多颜色来堆叠,而是用一个充满联想空间的词汇来统领基调。

设计规范摘录:设计遵循简洁原则,留白大方、配色克制、排版清晰。这三个词构成色彩哲学的核心三角形。颜色克制,才能让留白真正活;留白大方,才能让排版真正呼吸;排版清晰,才能让信息真正说话。

颜色系统:语义而非装饰
背景色
#FAFAF7
页面底色,暖白克制,不刺眼
文字色
#1A1714
正文主色,带微暖调的深黑
次要文字
#6B6460
辅助信息,降调但不消失
金色
#C9A96E
品牌强调色,温润不张扬
蓝色
#5B8FB9
交互色,链接与操作按钮
卡片色
#EAE8E3
卡片、悬浮层背景,有层次感
磨砂(浅色)
背景:暖白亚光 #FAFAF7
卡片:细腻暖灰 #EAE8E3
金色:品牌强调 #C9A96E
文字:带暖调深黑 #1A1714
夜宴(暗色)
背景:暖调深黑 #1A1B1E
金色:暗色下提亮 #D4B878
蓝色:暗色下提亮 #7DB8DD
文字:暖白高可读 #E8E6E3

原则四:图标统一,可控胜过丰富

设计规范中有两条明确的图标规则:

❌ 不允许使用 emoji 作为按钮图标
✅ 必须使用 SVG 图标(Lucide 图标集)
✅ 直接下载 Lucide 图标,本地使用,不依赖 CDN

为什么 Emoji 不行?三个原因:

第一,渲染不可控。 Emoji 是系统字体渲染的,同一个 Emoji 在 macOS、Windows、Android 上显示效果完全不同,同一平台的不同版本也可能不同。对追求一致性的设计体系而言,不可控性不可接受。

第二,情绪语义固定。 📖 不只是一个书本图形,它携带着轻松、卡通、随意的平台情感色彩。当产品调性是精致、高级、有文化感时,Emoji 的情绪语义与此不符。

第三,无法跟随设计系统变化。 SVG 图标可以精确控制颜色、大小、描边粗细,可以在 hover/active/disabled 状态下精确切换样式。Emoji 做不到,它永远是那个颜色,那个大小,那种风格。

图标本地化(不依赖 CDN)解决的是稳定性问题:CDN 可能失效,图标可能在界面加载后才渐渐出现。对于追求质感的产品,图标的加载时机是非常敏感的,高级感不只是好看,还要稳定、可靠、不出错。

Emoji vs SVG:可控性对比
✗ Emoji 图标
📖 阅读
📋 笔记
🔍 搜索
💬 对话
⚙️ 设置
系统字体渲染,不可控;情绪语义固定;无法跟随设计系统变化颜色与粗细
✓ SVG 线条图标(Lucide 风格)
阅读
笔记
搜索
对话
设置
可精确控制颜色、描边粗细;随主题切换;本地化,不依赖 CDN,加载稳定

原则五:信息分层,只展示应该被看到的

普通用户不需要看到 AI 的内部运作,这不是藏着掖着,而是保护体验。

Alice 的信息分层体系:

  • 普通用户层:只看到 Alice 的内容输出(朋友圈、读书笔记、思绪),一个活生生的人的行为结果
  • Debug 用户层:可以看到事件流、日志、系统日程,AI 的内部机制
  • 开发者模式:需要特定的隐藏操作才能激活

为什么要这样分层?当算法、数据来源和内部状态直接挤进普通界面时,用户会被实现细节打断,难以保持对任务与内容的专注。Debug 模式承担后台通道职责,只向主动查看技术细节的用户开放。

这在娱乐产业中有悠久传统:演员在舞台上扮演角色,观众不应该看到后台的布景搭建和剧本。

费用信息的特殊处理:token 消耗、API 成本,这些技术性信息对普通用户而言是噪音,会引发不必要的焦虑。隐藏在 debug 模式下,让普通用户专注于内容体验本身。

核心逻辑:用户的注意力是稀缺资源,界面设计者有责任保护这个资源,不让无关信息消耗它。每一个不必要展示的信息,都是对用户注意力的一次消耗。


原则六:流式即时,拒绝突然出现

AI 响应的流式渲染不是技术选项,而是产品哲学:用户不应该等待。

一个关键的设计细节:识别到工具名,前端就可以渲染卡片,不应该等到整个工具调用完成再展示。

当 AI 的流式 token 中出现了工具调用的名字,前端就应该立刻渲染出对应的工具卡片。用户看到卡片出现、代码在滚动输出、工具在逐一完成,整个过程是连续的、可见的、有节奏的,而不是一个长时间的等待后突然全部出现。

为什么流式渲染如此重要?人类的对话是实时的,AI 的对话也应该是实时的。 当 AI 的响应逐字显示,用户的体验是在听她说话;当响应突然整段出现,用户的感受是在收到机器打印的输出。这两种状态的心理感受,是活人感与机器感之间的核心差异。

主动呈现的等待过程不是等待,而是一种参与感。用户在看着内容逐步生成的时候,不是在等,而是在看。

流式渲染 vs 非流式:两种等待体验
非流式输出(延迟 2s 整段出现)
等待响应中…
空白等待 2 秒,内容突然整段出现,机器感强烈
流式输出
正在搜索最近阅读记录…
工具卡片即时出现,文字逐字打出,用户全程参与

原则七:视觉边界完整

应用内部解决所有交互

应用内不应该出现任何系统级弹窗。

系统级弹窗(Alert / Confirm / MessageBox)打破了应用的视觉边界。系统级弹窗是操作系统渲染的,不是应用渲染的。它有不同的字体、不同的按钮样式、不同的弹出动效,这一切都在告诉用户你暂时离开了 Alice 的世界,进入了操作系统的世界。

对追求沉浸式体验的桌面 AI 助理而言,这种视觉边界的破裂会直接破坏界面一致性。

当系统的限制使得动效和不触发系统弹窗不能同时存在时,宁愿放弃动效,也要保持应用的视觉边界完整性。这个取舍的优先级是明确的。

系统弹窗 vs 应用内 Toast:视觉边界对比
系统级弹窗(❌ 破坏边界)
确认
确定要删除这条记录吗?此操作无法撤销。
字体、按钮、动效全变,瞬间「出戏」
应用内 Toast(✅ 边界完整)
✓ 已删除
始终在应用视觉体系内,用户未曾离开

反面教材总结

以上七条原则都源于真实的设计决策,归纳出五条被明确拒绝过的设计模式:

规律一反对贴标签式设计
外加的标记不是从内容结构中自然生长的元素。层次只应在排版本身中显现,而不是靠外部符号来标注。
❌ 竖线贴标签
A
Alice — 今天天气真好…
妈妈 — 记得早点回来
W
工作群 — 下午三点开会
✅ 颜色+未读自显层次
A
Alice — 今天天气真好…
妈妈 — 记得早点回来
W
工作群 — 下午三点开会
规律二反对视觉噪音
多套相近颜色并存,认知负担极高。每种颜色应当有唯一含义,不混淆。
❌ 多套橙色,语义混乱
完成读书笔记 重要
下午视频会议 提醒
给妈妈买礼物 待办
跑步 5 公里 进行中
✅ 一种金色,语义唯一
完成读书笔记 重要
下午视频会议 提醒
给妈妈买礼物 待办
跑步 5 公里 进行中
规律三反对突然发生
硬切是对时间连续性的破坏。状态变化应有过渡,让大脑感知到空间的连续移动,而不是画面切换。
❌ 硬切(无动效)
最近阅读
《置身事内》— 兰小欢
《万历十五年》— 黄仁宇
《人类简史》— 尤瓦尔·赫拉利
✅ 300ms 平滑展开
最近阅读
《置身事内》— 兰小欢
《万历十五年》— 黄仁宇
《人类简史》— 尤瓦尔·赫拉利
规律四反对小家子气
局促拥挤让信息感觉廉价。留白是让内容各自呼吸的空间,不是浪费。
❌ 过度紧凑,无留白
今天读了《枪炮》第三章
和朋友通话了两小时
跑步5公里完成今日目标
整理工作邮件回复了三封
✅ 充分留白,层次清晰
今天读了《枪炮》第三章
下午 3:00 · 阅读
和朋友通话了两小时
下午 5:30 · 社交
跑步 5 公里
早上 7:00 · 运动
规律五反对不可控
Emoji 由操作系统渲染,在不同设备上字形、尺寸、色彩各异,无法控制。SVG 图标本地部署,像素级可控。
❌ Emoji 图标(系统渲染,不可控)
📖 阅读
📋 笔记
🔍 搜索
💬 对话
⚙️ 设置
✅ SVG 图标(本地部署,精准可控)
阅读
笔记
搜索
对话
设置

核心公理

七条公理是以上所有原则的浓缩提炼。

结构自显,拒绝贴标签
层次结构应从内容的排版、颜色和位置中自然显现,而非依靠外加的边框、竖线或分隔线来标注。
时间连续,任何切换都不应硬来
任何状态变化都应当有过渡动效。硬切是对时间连续性的破坏,是界面从活的变成死的的标志。
颜色是语义,不是装饰
全局颜色种类尽可能少,每种颜色有明确且唯一的含义,不允许多套相近颜色并存。
信息分层,只展示应该被看到的
不同层次的用户看到不同复杂度的信息。保护用户的注意力,就是保护用户的体验。
流式即时,拒绝突然出现
AI 的响应应当尽可能早地开始呈现,识别到工具名就渲染卡片,有流式 token 就即时显示。
视觉边界完整,应用内部解决所有交互
不允许出现任何系统级弹窗,所有确认 / 提示 / 反馈都在应用的视觉体系内完成。
图标统一,可控胜过丰富
使用单一来源的 SVG 图标集,本地化部署。Emoji 作为图标使用被明确禁止。

结语:质感是说不上来的舒服

这套 UI/UX 哲学,本质上是有信仰的克制

对竖线的拒绝,对硬切的不容,对系统弹窗的排斥,对多套橙色的整顿,这些看似是对具体设计问题的具体反应,放在一起,它们描绘出一个完整而一致的审美信仰:

界面是一个有时间维度的空间,不是一组静态画面。
元素应当从结构中自然生长,不靠标签标注。
颜色是语义,不是情绪。
动效是时间的语言,不是视觉特技。
信息应当被守门,而不是全部暴露。

质感不是精美,不是华丽,不是五彩缤纷。质感是精准,每一个像素都有它存在的理由,没有一条线是多余的,没有一种颜色是随意的,没有一次切换是突然的。

当一个用户打开 Alice,他们或许不会意识到这些设计决策。他们只会有一种模糊的感受:这个产品很舒服,用着顺,看着对。这种说不上来为什么的舒服,正是所有这些设计公理在默默发挥作用的结果。

本文由 洛小山 发布。引用或转载时,请保留原文链接。