Semi AI Design - 让 AI 体验有章可循

张律平邢旭东邵颖2025/11/11

1. 前言:什么是 Semi AI Design?

在设计系统的发展史中,每一次技术变革都伴随着一次新的界面革新。而今天,当 AI 正在逐步成为产品的新主角,我们也站在了这样的十字路口。

AI时代,设计师如何让用户与AI建立起更好的协作关系?当产品变得越来越“智能”、行为越来越不可预期,用户还如何有信心、有能力地与AI系统高效协作?

我们意识到,过去的设计组件,已经不再足够。AI 体验的秩序,需要被重新设计。于是,我们开始构建一套全新的 I设计组件库,这不仅仅是 Semi 原有设计系统的机械延展,它承载着我们对人机智能协同未来形态的思考与探索

我们希望通过设计,为用户带来对AI的信任、理解与掌控感。

2. 现状:碎片式的AI设计参考,难以为继

我们早期也曾陷入兴奋与焦虑之中。几乎每天,设计群里都会分享新的AI产品截图:“你看这家怎么做多轮问答界面”、“那家用了新的生成动效”……

但渐渐地,我们意识到一个问题:

所有参考都是碎片的,所有方法都在演变,但缺少一套稳定可靠的底层框架。

AI 设计极其依赖业务场景,不同类型产品之间的交互结构差异巨大,复用难度高。结果就是,设计师常常从别处借鉴了一种“看起来不错”的做法,但在自己业务里并不能奏效。 这让我们意识到,我们需要一套更具通用性和指导性的“AI设计框架”,能够真正从AI与人的交互本质出发,提供稳定而灵活的组件支撑。

3. 构建:从交互模型到设计原则,再到组件系统

我们回到了AI最本质的交互流程:

这个模型听起来简单,但它揭示了AI产品与传统软件之间最核心的不同——它是一个循环系统,是动态演进的「人机智能协同」

基于这个模型,我们提出了五项AI设计原则:

阶段一:输入(Input)

意图可表达:好的AI体验,从让用户知道‘我可以说什么’开始。设计应该让表达更清晰,理解更准确。

核心组件举例:

  • 路径引导:新手上路、建议、提示模版
  • 内容输入:输入框、表单、下拉菜单

阶段二:过程(Process)

可解释性:AI 的运行往往像一个黑盒,用户需要的不只是结果,更需要理解 AI 是怎么‘想’的

核心组件举例:

  • 过程感知、过程控制

信任校准:AI 不全知,系统应保持透明、谦虚,设计需要帮助用户判断何时信、信多少

核心组件举例:

  • 结果呈现、结果控制

可控性:我们不相信AI是完美的,主导权应始终掌握在用户手中,用户的参与会让结果变得更好

AI 是协作者,不是决策者。我们设计了「过程控制」与「结果控制」组件,允许用户随时叫停、纠偏、重试或重新生成,让人始终掌握方向盘,轻松调整内容。

人在环路的AI:AI 越用越懂你,前提是让用户能说出‘这好’、‘这不好’,让 AI 与用户共同进步

人不仅被 AI 增强,也在训练和塑造 AI。我们设计了「结果反馈」组件,包括反馈按钮、纠错机制与记忆体管理面板,让用户可点赞、点踩、纠错、收藏,系统也能基于用户行为不断优化响应,形成持续迭代的人机智能协作关系。

4. 成果:AI设计组件库

这套组件库,是为了帮助设计师和产品团队:

专注于业务语境与用户价值,而不必每一次都从零定义 AI 的交互逻辑。

智能感知 Intelligent perception

视觉层:快速AI感知、建立视觉一致性 接下来,我们从色彩系统出发,延展至图标、标签、按钮等通用UI元素:

颜色 / Color  →
颜色 / Color →
带有AI含义的颜色,用于统一视觉语义,帮助用户快速识别AI
图标 / Icon  →
图标 / Icon →
AI识别符号,在功能上快速传达“此处为AI功能”,兼顾可识别性与风格独特性
标签 / Tag  →
标签 / Tag →
带有AI标识的标签,提示用户“此为AI结果”或“AI推荐”,常配合颜色与图标使用
按钮 / Button  →
按钮 / Button →
带有AI标识的按钮,用于向用户表明产品中的动作或功能是由AI驱动的

交互流程 Interaction process

阶段一:输入 Input

路径引导 Wayfinder:帮助用户找到与AI系统交互的入口,并明确AI的功能和用途,让用户知道AI能做什么、如何做。

新手上路 / Onboarding  (设计中)
新手上路 / Onboarding (设计中)
引导用户发现AI新功能,并建立正确的认知
建议 / Suggestion  (设计中)
建议 / Suggestion (设计中)
会话中给出相关问题,帮助用户扩展范围、减少输入成本
提示模版 / Template  (设计中)
提示模版 / Template (设计中)
新手用户面对空白会感到迷茫,提示模版可以帮助他们快速启动

内容输入 Input:用户向AI 提供问题或数据的阶段,这是 AI UX 的主要交互环节。

输入框 / Input  →
输入框 / Input →
用于输入AI prompt、获取上下文、展示/编辑AI生成结果
表单 / Form (设计中)
表单 / Form (设计中)
结构化的信息呈现形式,既可以作为AI的结构化输入,也可作为结构化结果输出
下拉菜单 / Dropdown (设计中)
下拉菜单 / Dropdown (设计中)
下拉菜单用于展示多个AI功能

阶段二:过程 Process

过程感知 / Loading state  →
过程感知 / Loading state →
用于告知用户,AI 正在处理他们的请求,并且需要一些时间来完成,例如,思考过程、生成过程、...
过程控制 / Process control  →
过程控制 / Process control →
允许用户在生成过程中对 AI 进行干预,以确保交互过程可控、不失控。例如,终止、编辑、重启、...

阶段三:输出 Output

结果呈现 / Results presentation  (设计中)
结果呈现 / Results presentation (设计中)
展示 AI 的输出结果,并提供清晰、有层次的信息结构,让用户快速理解内容、来源和生成逻辑。例如,文本、图片、代码、来源引文、推理过程、相关问题、...
结果控制 / Results control  (设计中)
结果控制 / Results control (设计中)
提供对生成结果的进一步操作能力,或对部分内容进行替换与再生成。例如,复制、重新生成、调整语气、...

阶段四:循环 Loop

结果反馈 / Result feedback  →
结果反馈 / Result feedback →
支持用户对 AI 输出进行反馈,为系统持续优化提供依据。例如,点赞、点踩、纠错、标注、收藏、...

动效设计 Motion Design (Coming Soon...)

结语

AI正在深刻改变一切。我们相信,真正优秀的AI产品,不能只靠“模型强大”或“动效炫酷”。它必须让人感到安全、可理解、愿意使用。

这套AI设计组件库只是第一步,我们希望它能为更多设计师提供一个起点,在快速变化的AI世界里,拥有一套可以依靠的认知工具和设计方法。

如果你也在思考类似的问题,我们非常欢迎一起交流、共建,让人与AI之间的合作变得更自然、更可信、更有温度。