问题陈述:为什么设计审美是工程问题
界面设计的一致性,和代码逻辑的一致性同等重要。
在迭代速度很快的早期阶段,设计元素会悄悄漂移。不同的开发会话加入了不同的橙色,不同的场景引入了不同的间距标准,不同的组件用了不同的阴影深度。每一次单独看都说得过去,但积累起来,界面会开始产生一种模糊的不舒服感,用户说不清楚哪里不对,但他们能感受到。
这篇文章试图把这种说不上来的舒服或不舒服变成可执行的设计原则。
原则一:结构自显,拒绝贴标签
卡片左侧竖线是一条明确的设计红线。无论何种场景,这个元素都不应该出现在界面里。
「accent border」或「left border indicator」是一种极为常见的设计模式,在 Material Design、Bootstrap 等设计系统中随处可见,用来表示状态、分类或强调。那么问题出在哪里?
竖线本质上是外加的层级标注。它在内容旁边贴了一个标签,告诉用户这个东西属于某种类别,而不是让内容本身通过排版、颜色、位置自然传达出来。
这暴露了设计者的意图太过明显:我要让你注意这里。高品质的设计不这样说话,它是这个东西本身值得你注意。
延伸到同类的被拒绝元素:
- 卡片边框,用底色区分即可
- 过重的阴影,输入框尤其要避免
- 半透明色块背景
- 蓝色分隔线
这些元素有一个共同特征:它们都是贴上去的,而不是从材质和结构中长出来的。
可执行原则:每当想用竖线/边框/分隔线来告诉用户某个元素的重要性,先问:能否通过底色、字体粗细、留白大小来传达同样的信息?如果可以,就不需要那条线。竖线的存在,是对设计层次感不足的补偿;强大的设计,不需要补偿。
原则二:时间连续,任何切换都不应硬来
硬切是高频出现的设计问题,接受度极低,属于不可商量的选项。
什么是硬切?状态 A 在一帧内变成状态 B,没有任何过渡。
动效不是装饰,它是界面时间维度的语言。当一个元素走向某个地方消失,而不是凭空蒸发,用户的大脑会将界面感知为一个连续的空间,而不是一系列静态画面的切换。这种感知差异,是有质感和没有质感之间最根本的区别之一。
列表的展开和收起,应当配合淡出动效;点击关闭按钮,应当有渐退而非直接消失;主题切换等全局变化,同样需要平滑过渡。
模态框的动效标准是参照微信:背景先产生模糊效果,然后内容从下方弹出,两个动作有轻微时间差。背景先变模糊告诉用户原有上下文暂时被遮蔽,内容弹出告诉用户新的交互层次出现了,这是层次感的时间叙事。
有输入的模态框不允许轻易点击外部关闭。 这条规则很精细:用户已经输入了信息,随意关闭会导致信息丢失和挫败感。只是展示信息的模态框点击外部关闭是合理的。区分两种模态框的行为,是对交互场景细粒度理解的体现。
可执行原则:展开/收起/切换/弹出/消失,任何状态变化都需要过渡动效,最低限度是淡入淡出。硬切是对用户时间感知的粗暴中断。
原则三:颜色是语义,不是装饰
界面中存在多套相近颜色,是设计漂移的信号。Alice 的选择是收拢,而不是继续兼容。
颜色是一种语义资源。 每种颜色都意味着一种用户需要学习的含义。颜色越多,用户的认知负担越重,界面的噪音越大。配色不超过 3 种主色,是这个原则的具体落地。
颜色的稳定性原则:书封面的颜色用确定性算法(哈希书名)来分配,而不是随机的。这样既保证视觉丰富性,又保证一致性,同一本书永远是同一个颜色。颜色在这里不是装饰,而是稳定的标识系统。
高级感的色彩语义:磨砂、夜宴,这些主题名称本身就携带了完整的颜色语义。磨砂不反光、不张扬、触感细腻;夜宴是黑金配色、低调奢华。高级感的本质是有文化语义的极简,不是用更多颜色来堆叠,而是用一个充满联想空间的词汇来统领基调。
设计规范摘录:设计遵循简洁原则,留白大方、配色克制、排版清晰。这三个词构成色彩哲学的核心三角形。颜色克制,才能让留白真正活;留白大方,才能让排版真正呼吸;排版清晰,才能让信息真正说话。
原则四:图标统一,可控胜过丰富
设计规范中有两条明确的图标规则:
❌ 不允许使用 emoji 作为按钮图标
✅ 必须使用 SVG 图标(Lucide 图标集)
✅ 直接下载 Lucide 图标,本地使用,不依赖 CDN
为什么 Emoji 不行?三个原因:
第一,渲染不可控。 Emoji 是系统字体渲染的,同一个 Emoji 在 macOS、Windows、Android 上显示效果完全不同,同一平台的不同版本也可能不同。对追求一致性的设计体系而言,不可控性不可接受。
第二,情绪语义固定。 📖 不只是一个书本图形,它携带着轻松、卡通、随意的平台情感色彩。当产品调性是精致、高级、有文化感时,Emoji 的情绪语义与此不符。
第三,无法跟随设计系统变化。 SVG 图标可以精确控制颜色、大小、描边粗细,可以在 hover/active/disabled 状态下精确切换样式。Emoji 做不到,它永远是那个颜色,那个大小,那种风格。
图标本地化(不依赖 CDN)解决的是稳定性问题:CDN 可能失效,图标可能在界面加载后才渐渐出现。对于追求质感的产品,图标的加载时机是非常敏感的,高级感不只是好看,还要稳定、可靠、不出错。
原则五:信息分层,只展示应该被看到的
普通用户不需要看到 AI 的内部运作,这不是藏着掖着,而是保护体验。
Alice 的信息分层体系:
- 普通用户层:只看到 Alice 的内容输出(朋友圈、读书笔记、思绪),一个活生生的人的行为结果
- Debug 用户层:可以看到事件流、日志、系统日程,AI 的内部机制
- 开发者模式:需要特定的隐藏操作才能激活
为什么要这样分层?当算法、数据来源和内部状态直接挤进普通界面时,用户会被实现细节打断,难以保持对任务与内容的专注。Debug 模式承担后台通道职责,只向主动查看技术细节的用户开放。
这在娱乐产业中有悠久传统:演员在舞台上扮演角色,观众不应该看到后台的布景搭建和剧本。
费用信息的特殊处理:token 消耗、API 成本,这些技术性信息对普通用户而言是噪音,会引发不必要的焦虑。隐藏在 debug 模式下,让普通用户专注于内容体验本身。
核心逻辑:用户的注意力是稀缺资源,界面设计者有责任保护这个资源,不让无关信息消耗它。每一个不必要展示的信息,都是对用户注意力的一次消耗。
原则六:流式即时,拒绝突然出现
AI 响应的流式渲染不是技术选项,而是产品哲学:用户不应该等待。
一个关键的设计细节:识别到工具名,前端就可以渲染卡片,不应该等到整个工具调用完成再展示。
当 AI 的流式 token 中出现了工具调用的名字,前端就应该立刻渲染出对应的工具卡片。用户看到卡片出现、代码在滚动输出、工具在逐一完成,整个过程是连续的、可见的、有节奏的,而不是一个长时间的等待后突然全部出现。
为什么流式渲染如此重要?人类的对话是实时的,AI 的对话也应该是实时的。 当 AI 的响应逐字显示,用户的体验是在听她说话;当响应突然整段出现,用户的感受是在收到机器打印的输出。这两种状态的心理感受,是活人感与机器感之间的核心差异。
主动呈现的等待过程不是等待,而是一种参与感。用户在看着内容逐步生成的时候,不是在等,而是在看。
原则七:视觉边界完整
应用内部解决所有交互
应用内不应该出现任何系统级弹窗。
系统级弹窗(Alert / Confirm / MessageBox)打破了应用的视觉边界。系统级弹窗是操作系统渲染的,不是应用渲染的。它有不同的字体、不同的按钮样式、不同的弹出动效,这一切都在告诉用户你暂时离开了 Alice 的世界,进入了操作系统的世界。
对追求沉浸式体验的桌面 AI 助理而言,这种视觉边界的破裂会直接破坏界面一致性。
当系统的限制使得动效和不触发系统弹窗不能同时存在时,宁愿放弃动效,也要保持应用的视觉边界完整性。这个取舍的优先级是明确的。
反面教材总结
以上七条原则都源于真实的设计决策,归纳出五条被明确拒绝过的设计模式:
核心公理
七条公理是以上所有原则的浓缩提炼。
结语:质感是说不上来的舒服
这套 UI/UX 哲学,本质上是有信仰的克制。
对竖线的拒绝,对硬切的不容,对系统弹窗的排斥,对多套橙色的整顿,这些看似是对具体设计问题的具体反应,放在一起,它们描绘出一个完整而一致的审美信仰:
界面是一个有时间维度的空间,不是一组静态画面。
元素应当从结构中自然生长,不靠标签标注。
颜色是语义,不是情绪。
动效是时间的语言,不是视觉特技。
信息应当被守门,而不是全部暴露。
质感不是精美,不是华丽,不是五彩缤纷。质感是精准,每一个像素都有它存在的理由,没有一条线是多余的,没有一种颜色是随意的,没有一次切换是突然的。
当一个用户打开 Alice,他们或许不会意识到这些设计决策。他们只会有一种模糊的感受:这个产品很舒服,用着顺,看着对。这种说不上来为什么的舒服,正是所有这些设计公理在默默发挥作用的结果。