首页

【兰亭妙微】用户体验设计优化 | 什么是“嵌入式成长机制”?

杰睿 设计管理与成长

 

——从 Hook 模型到行为惯性设计的交互进阶路径

一、起点:为什么“用户投入”才是粘性最高的设计?

在许多交互体验中,设计者常常追求“即时反馈”:点击即响应、浏览即推荐、登录即得礼。但用户一旦体验完毕,离开就再无回头。
原因在于:用户没有留下任何可积累的“成长性投入”
根据《Hooked》模型,产品形成用户习惯的四个阶段中,Investment(投入)是最被低估却最决定复访意愿的一环
“当用户在产品中投入时间、精力、数据或情绪,便不再是旁观者,而是利益相关方。”
但是,仅有“投入”还不够,这些投入是否“嵌入”用户未来体验,是否带来持续增长感,是设计的关键挑战。
这就引出一个更高级的设计模型:嵌入式成长机制

二、定义:“嵌入式成长机制”到底是什么?

嵌入式成长机制(Embedded Growth Mechanism) 是指:
产品通过系统性结构,让用户的每一次投入行为产生未来可感知的回报,并对下一次使用产生预期依赖,最终形成习惯与留存。
它具备四个核心特征:
特征 说明 常见误解
行为路径可复用 用户走过的路径会影响下一次决策 不是“历史记录”,而是路径强化
成果可积累 用户的操作结果以结构化形式沉淀 不是“完成任务”,而是“建立资产”
成长性可感知 反馈不仅是即时,而是具有阶段性跃迁 不是“获得奖励”,而是“具备成长感”
结构性嵌入 用户资产影响后续流程、推荐、权限 不是“数据留存”,而是“体验参与权”

三、原理:从 Hook 模型到“行为惯性引擎”

  1. Hook 模型复盘
在《Hooked》中,用户习惯的形成来自于:
  1. Trigger(触发)
  2. Action(行动)
  3. Variable Reward(变动奖励)
  4. Investment(投入)
但模型本身不解释 “投入之后发生了什么?” 投入成为“行为惯性”的方式是:嵌入式成长结构 + 可视化反馈机制 + 结构性复利回路
我们可以用如下公式理解这一点:
markdown
复制编辑
Investment × Embedding × Future Payoff = Habitual Use
也就是说,仅仅让用户“写了一篇笔记”没意义,除非:
  • 这篇笔记成为未来推荐算法的一部分
  • 它带来新用户点赞、收藏、互动(外部性收益)
  • 它在视觉层面沉淀为“知识资产”并被系统引用
  • 它解锁了下一阶段内容 / 权限 / 工具
这就是“嵌入式成长机制”与一般投入反馈机制的根本区别:
用户的行为介入并塑造了未来体验结构

四、结构:嵌入式成长机制的 3 层设计框架

我们可以从交互设计的角度,将其拆解为三层结构:
第一层:结构性投入点设计(Structure of Investment)
识别产品中的可“沉淀性操作”:
类型 示例 表现方式
内容结构投入 Notion 笔记、飞书文档 用户参与“搭建”产品结构
关系结构投入 社交圈建立、关注体系 用户构建“社会资产”
行为偏好结构 推荐算法训练、偏好标签 用户塑造算法“映射自己”
权限成长结构 功能权限随投入解锁 用户获得“控制感”与进阶通道
设计建议
  • 所有可投入点,应具备:数据结构、可查询性、可回显。
  • 不要把用户操作设计成“消耗品”,而是“积累点”。

第二层:回报路径嵌入(Embedded Feedback Loop)

关键在于:用户操作后的结果能否影响未来体验
投入行为 影响维度 回报机制
编辑页面 页面结构保存 下次自动载入、自定义默认
点赞内容 训练算法模型 推荐更符合偏好的内容
填写兴趣 用户画像建模 页面布局动态调整
学习任务完成 解锁新模块 路径“只属于你”而不是大众用户
设计建议
  • 让回报不止出现在当前页面,而是改变系统反应方式
  • 让用户感受到自己“塑造”了这个系统。

第三层:增长可视化机制(Growth Visualization)

即便系统有“嵌入性回报”,用户如不能感知,就不会形成行为惯性
设计任务是将成长数据显性化为“变化图景”
可视形式 举例 情绪作用
进度轨迹图 番茄时间记录曲线 感知掌控感
资产地图 笔记结构脑图、知识沉淀库 感知自我能力增长
使用成长阶梯 等级标识、勋章系统 感知“在升级”
反馈路径可追溯 用户行为→系统推荐链路图 感知“产品听懂我了”
设计建议
  • 成长可视化 ≠ 简单图表,而是体现“行动-结构-反馈”的闭环感;
  • 成长展示要避免“游戏化套路感”,要强调功能性连接与用户“建设感”。

五、误区与反思:嵌入式成长 ≠ 成瘾设计

不少人将“用户投入”等同于“上瘾机制”,这是理解上的误区。
嵌入式成长机制不鼓励用户沉迷于操作本身,而鼓励他们主动塑造体验结构。区别在于:
维度 成瘾机制 嵌入式成长机制
反馈节奏 高频、即时 阶段性、结构性
用户参与感 被动反馈接受 主动结构塑造
成果属性 一次性、多巴胺驱动 累计性、功能驱动
设计伦理 容易引发依赖 倾向于能力增强
最理想的状态:
用户使用产品越久,越能建立自己的体系,产生“离不开”而非“停不下”的依赖。

交互设计的进阶,不在于“好看”,而在于“结构”

“嵌入式成长机制”作为一种设计方法,其终极目标是:
把用户的参与设计进产品本身,让体验随行为进化,让系统随着使用更懂用户。
它连接了用户行为 → 体验结构 → 长期留存之间的底层路径,是行为惯性型产品的核心逻辑。
 
 
更多项目/合作请私信,支持定制设计服务
我们是兰亭妙微
商务合作请联系
邮箱:weihua@lanlanwork.com
电话:400-6086026 010-6333494
了解更多设计案例 → www.lanlanwork.com
兰亭妙微( 蓝蓝设计)是一家专注而深入的UI设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、网页设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计

桌面端界面设计 | 如何设计浅色主题 UI

杰睿 设计管理与成长

如果您曾经尝试设计轻量级 UI,您就会理解这个悖论:它看起来很简单,但却很容易出错。

增加亮度可能会导致图像变得平淡、褪色,甚至刺眼。

你以为白色=光。但这就像说糖等于甜点一样。

凭借 6 年多为 SaaS、移动和商业平台进行设计的经验,我了解到浅色主题需要与深色主题一样多的改进和意向性,甚至更多。

它们在所有环境中都体现了清晰度、对比度、结构性和实用性。

让我来分解一下。

 

浅色主题背后的心理学
将显示缩放图像

轻量级 UI 感觉:

  • 冷静的
  • 熟悉的
  • 值得信赖

这就是为什么你会在以下地方找到它们:

  • 银行应用程序
  • 医疗保健仪表板
  • 政府网站
  • SaaS 产品

在生产力应用中,81% 的用户更喜欢将浅色主题作为默认主题。

人们需要清晰的信息,尤其是在特定场景下。不要让他们失望。

总是问自己:“这会用在哪里?” 室内、室外还是移动? 这会改变一切。

设计 Light 主题的分步工作流程

1. 从柔软的中性基底开始

将显示缩放图像

避免使用#FFFFFF。认真的。

相反,我选择中等中性色,如#F4F6F8 或#F9FAFB,它们可以提供微妙的深度并减轻眼睛的疲劳。

在模态框或照片上使用透明白色覆盖层来创建深度而不反射光线。

2.建立模块化色彩系统

将显示缩放图像

使用语义标记bg-default,例如text-muted,,border-light。这使得主题保持一致且可扩展。

3. 控制对比度(不仅仅是为了可访问性)

不要止步于 WCAG 兼容性。真正的目标是现实世界的可读性。

  • 文本对比度至少为 4.5:1
  • 为灰色添加色调以增加温暖感
  • 使用鲜艳的色彩突出显示 CTA 和错误。

我犯的错误:我曾经在仪表盘中使用了符合WCAG标准的灰色文本。虽然在我的屏幕上看起来很棒,但在户外日光下用户很难阅读。

教训:合规性≠可用性。

4. 限制使用阴影

阴影很棒,但要小心。

  • 使用 1-2 个深度级别
  • 更喜欢柔和的阴影或内嵌阴影
  • 避免使用硬轮廓

5. 反射和阳光的设计

  • 在阳光直射下进行测试(是的,在户外走走)。
  • 避免使用浅色图标,因为它们会消失。
  • 使用 400 多种字体粗细。

过亮的设置可能会使屏幕对比度降低多达 40%。请适当调整。

6. 仔细突出交互状态

在浅色主题中,悬停和焦点等状态经常被忽略。

  • 使用微妙的阴影、下划线或发光效果
  • 定义每个状态:悬停、活动、禁用

专业提示:我总是在灰度模式下测试我的元件库。如果状态保持清晰,就说明我做得对。

7.不要忘记品牌个性

一个常见的错误:品牌在轻量级 UI 中消失。

反而:

  • 使用品牌颜色来调配背景
  • 使用品牌插图或图标
  • 使用字符设置空状态的样式

即使在灯光模式下,Notion 的 UI 也保持着自己的个性。

将框架应用于 Figma 社区项目

我通常会使用随机的 Figma 模板来测试我的设计工作流程。它不仅提升了我的技能,还揭示了通用 UI 的弱点。

设计师常犯的浅色主题错误

  • 过度使用空白(可读性下降)
  • 低对比度+色彩过载=不可读。
  • 没有视觉层次。
  • 忽略组件状态。
  • 在黑色画布上设计一切会导致判断偏差。

黄金法则:首先用灰度创建光图案。添加颜色只是为了提高清晰度,而不是为了定义清晰度。

设计一个令人惊叹的灯光主题是一门艺术,也是一门科学。

  • 功能胜过花哨。
  • 对比意味着清晰度。
  • 深度应该感觉自然。
  • 始终在现实世界中进行测试!

设计从来都不是孤立完成的。你的灯光主题应该存在于阳光明媚的环境、繁忙的工作站和疲惫的双眼之中。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

新的用户体验规则:人工智能推荐如何改变设计

杰睿 交互设计及用户体验

新的用户体验规则:人工智能推荐如何改变设计 — 0001

你知道那种滚动页面的瞬间吗?——感觉网站好像已经知道你想要什么了?没错,这就是人工智能在幕后运作。如今的用户体验设计不再只是按钮或漂亮的颜色。感觉就像……界面在和你一起思考。有点诡异,也有点酷。

Netflix 的界面、亚马逊的产品推荐,甚至ChatGPT UI 等工具都展现了人工智能如何改变游戏规则。而且,就连 Plerdy SEO Analyzer 或 Visual Inspector 等 Chrome 扩展程序也加入了这场革命。

为什么这很重要?因为如果你的设计还停留在 2015 年的水平,用户很快就会跳出。

为什么传统的用户体验规则不再有效

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0002

说实话——旧的用户体验设计已经行不通了。用户的行为不再像以前那样。他们不再遵循你漂亮的布局。他们滚动得太快。他们疯狂点击。他们像忍者一样跳过横幅。你那简洁的设计?现在都消失了。

我在测试的一家网店里看到了这种情况。看起来不错。但当我们查看热力图时,发现大多数用户根本没看过侧边栏。就好像它根本不存在一样。就在那时,我想——好吧,也许是时候放弃传统的用户体验“规则”了,开始相信人们的实际行为。

静态设计满足动态期望

用户想要快速、智能、响应迅速的用户界面。但传统的设计呢?它只是僵硬、静止,就像没有遥控器的老电视一样。你点击某个按钮……除非你强制操作,否则什么也不会改变。这才是糟糕的用户体验。

您是否注意到:

  • 菜单永远停留在同一个地方
  • 滚动感觉就像一条漫长而无聊的隧道
  • 横幅弹出,但没人看

是的。这就是为什么静态用户体验不再有效。设计必须随着用户而动,而不是仅仅停留在外观上。

预测性用户体验的兴起

这部分很疯狂。预测性用户体验意味着人工智能会观察用户的行为——他们点击了哪里,跳过了什么——然后自动更改下次访问的界面。也就是说,你不用再猜测了。人工智能知道。

TikTok?预测性。亚马逊?也一样。就连Netflix也会根据你观看的内容改变图像。这不是魔法——而是用户体验设计中的人工智能。

而且你不需要一个价值数十亿美元的团队。你可以轻松地测试。上周我用了 Plerdy SEO Analyzer,它能告诉我哪些内容块值得关注,哪些不值得。它甚至还能提供修复元标签、标题和可读性的人工智能技巧。这对于我们这样的用户体验人员来说意义重大。

旧用户体验关注的是“好看”。新用户体验关注的是“反应快”。设计如今充满活力。如果它不再活跃,你的用户可能已经流失了。

人工智能在个性化用户体验中的作用

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0003

你有没有打开一个网站,感觉就像——等等,这个页面认识我?这不是魔法。这是人工智能在后台运行,让用户体验比你的晨间播放列表更个性化。而且,这不仅仅是谷歌或Meta的专利。现在,即使是小型团队也会使用人工智能工具来针对每一位用户调整设计。

用户体验不再是千篇一律的布局。现在,设计需要做出反应、进行调整,有时甚至在用户说出之前就能猜测他们想要什么。没错,人工智能非常擅长猜测。

去年我帮助过的一家网店就出现了这种情况。我们添加了AI驱动的产品区块,它会根据用户之前的操作进行调整。结果如何?短短两周内,转化率就提升了21%。这可不是理论,而是真实的数据。所以,如果你的用户体验仍然在等待用户操作,而不是预测用户行为,那么你可能已经落后了。

以下是推动现代个性化用户体验的因素:

  • 行为模式
  • 基于意图的设计转变
  • 实时 UI 决策

这不是未来,而是现在。用户已经对此有所期待。

人工智能实时推荐

它的工作原理如下:用户点击一个产品。突然,下一个版块就变了。不同的推荐、新的横幅,甚至可能是另一个行动号召 (CTA)。无需重新加载,无需等待。这就是实时个性化。AI 会跟踪用户操作并立即更新设计。

我曾与波兰一家小型电商合作。我们使用了一种工具,可以查看点击历史记录,然后推送“智能区块”——一些显示更匹配的小设计元素。用户在网站上停留的时间更长了。跳出率下降了 15%。这就是人工智能提升用户体验的成果。

想想 Dynamic Yield 或 Plerdy SEO Analyzer 这样的工具——它们能帮你了解哪些内容效果显著,以及哪些方面可以提升价值。它们不仅仅基于屏幕尺寸,还基于实际操作。这几乎就像网站现在有了大脑一样。

相信我,一旦你尝试过,就不会再回头了。

自适应布局与响应式设计

现在,不要混淆响应式和自适应——它们听起来很相似,但本质上并不相同。响应式设计只是根据设备改变布局。平板电脑?更小的按钮。手机?折叠菜单。仅此而已。

但自适应布局更深入。人工智能会检查用户的行为——快速滚动、不点击、来回滑动——并实时调整设计。它可能会隐藏菜单,或者将浮动按钮向上推。这就是用户体验变得智能的地方。

Netflix 也这么做。如果你经常暂停,他们会把控制键移得更近。亚马逊会根据滚动深度调整产品行。这不是 CSS 媒体查询,而是 AI 在读懂你的想法。

没错,响应式设计固然很好,但自适应性呢?这才是本能的设计。人工智能让用户体验不仅实用,更令人难忘。

帮助你分析人工智能驱动的用户体验的 Chrome 扩展程序

我不太喜欢猜测,尤其是在用户体验设计方面。你添加了一些人工智能驱动的区块,但你不知道用户是否能看到它?这就是为什么我开始使用 Chrome 扩展程序进行用户体验测试。它们不是昂贵的大型工具,而是快速、简单的插件,可以展示真实的情况。有些我每天都会用,有些则只用于 A/B 测试。但当人工智能扰乱你的布局时,它们结合起来会非常有帮助。

这是我的首选组合:

相信我,当您的用户体验由人工智能驱动并且您希望确保用户不会迷失在“智能”布局中时,这种组合会非常有效。

Plerdy 分析网站— 用户体验模式和热图

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0004

在任何重新设计之前,我都会先运行这个工具。即使是在竞争对手的网站上,它也能显示滚动深度、热门点击区域以及没人触及的区域。你甚至不需要在他们的网站上安装任何东西——它就能正常工作。

它帮助我发现,40% 的用户会跳过一位客户主页上的产品横幅。我们将横幅位置下移,并修改了 CTA,跳出率下降了。快速简洁的用户体验赢得了胜利。

Lighthouse — 核心用户体验指标和可访问性洞察

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0005

这个插件内置于 Chrome 浏览器内,无需安装。当我想知道我的设计是否真的有效时,我会使用它——加载速度快、布局无偏移、对比度好、移动端视图清晰。

有一次,AI 在我工作的主页上添加了一个漂亮的轮播图。看起来很漂亮。但 Lighthouse 显示,它的加载速度降低了 1.6 秒。移动评分也下降了。我们把它移除了。页面体验好上百倍。

它还会检查可访问性,这是良好用户体验的一部分。如果您的字体太小或背景颜色太淡——Lighthouse 会直接告诉您。毫不留情。

Visual Inspector — 实时编辑与协作

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0006

说实话,当我不想碰代码的时候,我会用这个。你只需点击一下,更改颜色,移动一个块——就搞定了。非常适合演示,或者当客户说“你能把那个按钮移开一点吗?”的时候。

另一个很酷的功能是:你可以添加评论或与团队分享预览。它让反馈更容易,设计也更有趣。当AI做出奇怪的布局,而你需要快速“人工修复”时,这是一个很棒的工具。

Plerdy SEO 分析器— 实时内容和结构审核

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

这个工具简直是救星。我在一个包含 AI 生成版块的博客上测试了它。它在几秒钟内就帮我完成了一次完整的 SEO 审核。它可以检查标题、文本可读性、关键词密度,甚至还能显示内容中哪些部分比较薄弱。

最棒的是?它能提供真正的 AI 提示。比如,“这个标题太长了”或“这里缺少 H2 按钮”。所以,当 AI 搞乱了你的页面结构时,这个扩展程序会准确地告诉你该如何修复。没有废话,只有直接的建议,让用户体验更强大。

需要分析人工智能如何影响你的用户体验吗?这些扩展程序不仅能为你展示数字,还能帮助你了解用户的感受。而这才是真正的设计发生的地方。

A/B 测试 AI 驱动的 UI 决策

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

有时人工智能会给出很酷的想法。但并非所有想法都对真实用户有益。这听起来可能显而易见,但测试人工智能生成的设计是绝对必要的。即使用户体验看起来很棒,也并不意味着人们会点击或滚动。设计需要验证。用户体验需要行为数据。否则,它就只是猜测。

我记得我做过一个测试——我们用人工智能修改了主页布局。它拥有智能用户体验、自适应设计,看起来很新颖。但用户互动性很差。滚动地图很冷门。我们把CTA(行动号召)移到了更高的位置,改变了按钮样式——A /B测试之后,点击率跃升了31%。这就是测试的作用。

人工智能虽然强大,但却无法解读人类的情感。A/B 测试可以帮助你的用户体验匹配真实的用户,而不仅仅是算法。

从假设到热图

假设AI告诉你要更改UI布局。新的结构。新的区块。听起来很棒。但你怎么知道这对设计有帮助呢?

测试一下,就这么简单。我总是从一个小想法开始——比如改变标题顺序或移动定价区块。然后我会用 Plerdy Analyze Websites 来观察真实用户的行为。这个工具可以显示热图、滚动深度和点击次数。它对于测试动态用户体验非常方便。

以下是我的做法:

  1. 通过新的用户体验创建 AI 变体
  2. 根据实际点击跟踪交互模式
  3. 审查每个设计元素的滚动、弹跳和行为

设计的意义不在于看起来有多酷,而在于用户实际使用的内容。这就是为什么我从来不会在没有检查行为数据的情况下发布新的UI。即使是最聪明的AI创意,如果用户体验不能与人产生共鸣,也会失败。

通过内容审核衡量结果

现在让我们将设计和 SEO 结合起来。因为现代用户体验不仅仅关乎布局或按钮。它还关乎内容的体验、阅读方式以及搜索引擎的运作方式。

每次 A/B 测试后,我都会用 Plerdy SEO Analyzer。它会检查内容是否仍然遵循良好的结构。它会显示标题是否正确,关键词是否仍然有效,以及 AI 是否改写了某些错误的内容。有一次,AI 把 H2 改成了一个笑话——流量就下降了。一点也不好笑。

分析器几分钟内就帮我解决了问题。我再次调整了设计。用户体验变得更简洁了。SEO流量也回来了。

所以,没错——用AI来改进UI和设计,但千万别跳过测试。没有测试的UX是没有未来的。

用户体验的未来是人工智能

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0008

用户体验不再仅仅依靠人工智能。用户体验正在成为人工智能。这是事实。而且,这并非科幻故事。它已经存在。你浏览TikTok——这就是人工智能驱动的用户体验。你在亚马逊上购物——整个产品页面都会根据你过去的行为进行调整。设计不再是一成不变的。它变得智能、灵活,当然,还有点令人毛骨悚然。但这是一种好的方面。

我相信这不是一种“趋势”。这是新的基础。没有人工智能的用户体验会让人感觉陈旧、缓慢、愚蠢。而且用户不会等待。如果你的设计不能理解用户的想法,他们两秒后就会离开。

我们不能再把人工智能仅仅视为一个插件了。它是界面的新大脑。它控制着设计如何运作,用户如何移动,以及他们看到什么。如果你还没有这样想过……那么,是时候开始了。

从AI支持的用户体验到AI创建的用户体验

最疯狂的部分来了。以前,AI 只是在内容方面提供帮助,比如提供一些文字和一些布局建议。现在,它构建了整个用户体验,包括结构、按钮、哪些内容先显示、哪些内容会消失——所有的一切。像 Galileo AI 或 Uizard 这样的 AI 工具可以在几分钟内创建完整的界面模型,真正的原型。你只需要给出一个简短的提示。

即使是像 Booking.com 这样的大型公司,也使用 AI 来设计和运行数千个 UI 测试,无需人工干预。这并非为了节省时间,而是为了更智能的用户体验。更快的决策,更优的结果。

有些设计师感到害怕。我理解。但你知道吗?如果人工智能能让用户体验更简洁,设计更实用——我完全支持。

成为 AI 优先设计师

你不需要成为一名程序员,也不需要构建自己的模型。但你需要改变思维。别再问:“我该如何在这里添加人工智能?” 而是要问:“如果从一开始就由人工智能掌控,设计会是什么样子?”

从您熟悉的工具入手。使用 Plerdy SEO Analyzer 检查 AI 如何影响内容结构。在 Plerdy Analyze Websites 中试用热图,看看哪些方法有效。多考虑用户行为,少考虑固定的网格。

AI优先的思维模式意味着:你的设计会生存、学习并适应。这才是真正的用户体验。

结论

如果你仍然认为人工智能只是一种趋势,那你就错过了全局。人工智能并非要扼杀用户体验设计,而是要大力推动它的发展。它就像涡轮增压模式一样。你,设计师,仍然是规则的制定者。但现在,人工智能可以帮助你打破那些枯燥乏味的规则。像 Plerdy、Uizard甚至Figma AI 这样的工具,它们并非取代技能,而是加速了创造奇迹。所以,不要抗拒,要利用它。在用户点击离开之前,提升你的用户体验。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

B端界面设计入门:不仅是界面,更是效率工具

杰睿 B端ui设计文章及欣赏

 

在数字产品设计中,B端设计(即面向企业或专业用户的后台系统设计)常常被误解为“只要能用就行”,但事实正好相反:

B端界面不仅是操作入口,更是提升工作效率的工具。

本篇文章将帮助你快速理解 B端界面设计的核心价值、与C端设计的区别、设计难点以及实操建议,适合 UI/UX 初学者或转向B端设计的产品团队参考。


一、B端是什么?和C端有何不同?

项目 B端(Business) C端(Consumer)
用户 企业员工、内部操作人员 普通消费者、终端用户
目标 提升效率、流程准确 吸引关注、促成转化
场景 工作、管理、系统维护 生活、娱乐、社交购物
界面特点 信息密集、操作复杂 视觉丰富、体验流畅

你可以理解为:
B端系统是企业用来“做事”的工具,而C端产品是用户用来“体验”的服务。


二、B端设计的核心特点

1. 多角色、多权限、多流程

一个后台系统往往需要服务多个角色:运营、客服、财务、仓库……每个角色的权限、数据视角都不一样,这对信息架构提出更高要求。

2. 信息密度高

B端界面常常需要同时呈现大量数据,表格、筛选器、图表、状态标识等密集排列,如果布局不清晰、信息层级混乱,用户就很难找到重点。

3. 操作链条长

与C端的“点一下完成购买”不同,B端用户可能需要多次输入、校验、关联操作才能完成一次任务。例如:开票流程、商品发布、审批流程等。

4. 容错与反馈机制严格

一旦数据录入错误,可能会影响整个业务链条。因此B端对「防误操作、明确反馈、回滚机制」的设计要求更高。

 

三、B端设计容易踩的坑

❌ 为了炫酷而牺牲效率

不要盲目追求“高级感动画”或“极简留白”,B端最重要的是信息清晰、操作顺畅

❌ 滥用组件,缺乏一致性

组件不统一、命名混乱、交互模式不一致,会让用户在操作过程中反复“学习”,增加认知负担。

❌ 忽视使用场景和业务流程

不了解业务就上手画界面,很容易导致“设计和工作方式不匹配”,让用户绕路甚至误操作。


四、那该怎么做好B端界面设计?

✅ 建立模块化思维:用组件思考界面

将界面拆解成基础组件(输入框、按钮、表格、筛选器)、复合组件(搜索条、操作区、数据卡片)以及业务组件(商品卡、审批单等)。

✅ 重视信息架构(IA)和任务流

  • 理清用户的使用目标和路径(从操作起点到完成)

  • 通过布局设计和交互层级,引导用户一步步完成任务

✅ 提高信息的可读性和扫描效率

  • 统一字体层级(例如标题 14px Bold,内容 12px Regular)

  • 合理使用颜色传递状态,如:绿色=成功,红色=失败,灰色=禁用

✅ 加强容错机制与反馈设计

  • 设计“撤销、二次确认、状态回显”等操作缓冲

  • 保留日志、操作记录,避免错误无法回溯


五、设计工具推荐(针对B端)

  • Ant Design / Element Plus / Arco Design:成熟的 B端组件库

  • Figma / Sketch:快速搭建组件库和 UI 页面

  • ProcessOn / Flowchart.com:可视化流程图绘制工具

  • Axure / Framer:原型交互演示


好的B端设计,是让人“更省事”的设计

B端界面不追求视觉花哨,它的美感来自:

  • 流程的清晰

  • 信息的有序

  • 操作的高效

  • 问题的可控

它不是“酷炫的舞台”,而是一张让用户快速处理业务的“办公桌”。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

平台基础的B端流程搭建|产品分析

杰睿 B端ui设计文章及欣赏

公司平台的B端流程中,发现原来平台规范有这么多细节要注意,包括上架、维运、客服、下架、汇款、结案等,每个部分都是平台运营关系,但也牵涉到客户维护、消费者关系。

这个有点像新平台的心路历程,赛道管理一个平台,初学者会需要建议哪些文件规范。

一、上线前

先用大家比较常见的案例:「活动通」、「好学校」,因为我们的模式跟他们比较接近。

想像一个活动主办单位第一次在上面举办的活动中,会先遇到什么问题:

  1. 如何开通主办单位权限?
  2. 一份活动门票的手续费如何计算?
  3. 如何开始建立活动?

以下的问题看起来很简单,但确实都是新手可能会遇到的问题,而平台规范有一个大任务:

「让 B 端简单的问题可以快速找到答案」

迫切减少时间在回覆基本问题上,因为必须把更多的时间花在大客户身上,而身为台湾最大的活动平台,这类常见问题当然都准备好了:

将显示缩放图像

活动通甚至有部落格,已经放出了各种式的活动教学文,不再是制式的QA。

将显示缩放图像

拉回到我现在参与的新平台,看到上述的都要从0开始建立,必须是针对先导新手的教学文件,或者是较恶劣的经验分享文章,都需要大量的文字写作能力。

因此可以想像的到,当听到别人说要建立一个平台,除了考量到双边的客户来源,接着就是所有规范的建立,想像一个陌生人第一次接触陌生平台,势必要准备足够详细的教学文件、常见问题集,绝对不仅仅是后台程序码写完就。

二、上线中

再以活动为例,假设我们现在活动已经上线,主办单位通常会遇到哪些问题呢?

  1. 编辑页面的位置有bug,图片上传失败,文字存储失败?
  2. 想要调整价格或数量,但不知道怎么调整?
  3. 要怎么出现在活动通首页?
  4. 如何查看现在的报名信息?

接下来的问题乍一看很简单,也确实新手都可能会遇到的问题,但其实平台在这个期间会收到C端更多的消息,相当于:

  1. 要怎么退票?
  2. 可以换票吗?

因此金字塔的任务变成了:

「让C端消费者去询问该场次的B端客服」

由于平台的客服量非常巨大,我们很难承担,虽然都会建立常见的问题集,但遇到很简单、处理繁琐的问题,也只能走最简单的方式,因此以目前新平台的处理方式,我们面对消费者的订单文件问题,都会直接传B端的联络信箱给,继后续连续来回沟通的时间,而接下来就能用多的时间建立更完整的QA。

三、结束后

一个活动结束,通常是一个问题:

  1. 多久才能收到款项?

而身为平台方,大会的任务我认为是:

「让B端客户满意本次的服务,并再次愿意来平台上架」

有些人可能觉得这跟前面的说法矛盾,如果减少与B端客户交流,那要怎么让他们感受到「服务良好」呢?

我在构想这件事时,会用「乘客旅程地图用户旅程」来发想,意思是客户跑完整流程遇到所有卡关,平台方如何用「系统」的方式来解决,但同时又让对方感到「客制」?

以目前的方式我们实现的是「真理的文字」,有些平台的常见问题集可能是制作冷冰冰,很文字化的答案,我们近期正在修改每一个答案,都变成好像我当面说话的口吻,也是一样的概念。

虽然有公版信,但我们也在修改公版信的「温度」,让收到的人不会觉得他是收到机器自动回复的

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

【兰亭妙微图标设计】为什么视觉大小和实际大小不相同?如何做到视觉统一?

杰睿 图标设计文章及欣赏


26082bb9-3b33-4e00-b4c1-4c60727d6087.png
在 UI 设计和图标开发中,我们常常遇到一个让人困惑的问题:
明明两个图标尺寸一样,为什么看起来一个大一个小?
这就是「视觉大小」和「实际大小」不一致所引发的经典设计挑战。
 这篇文章将带你了解其中的原理,并分享一些实操方法,帮你设计出视觉协调、统一专业的图标。

---
一、为什么视觉大小 ≠ 实际大小?
在设计中,「实际大小」是指图标在画布上的像素尺寸,而「视觉大小」是指人眼感知到的图形体积或重量感。这两者之所以不一致,主要有以下几个原因:
1. 图形形状对视觉感知的影响
不同形状对人眼的“占据感”不同:
- 圆形、椭圆形:边界柔和,看起来比实际尺寸小;
- 尖角图形:具有延伸感,看起来更“张扬”;
- 封闭 vs. 开放图形:封闭图形更“紧凑”,视觉重心靠内;开放图形更“轻”,容易被忽视。
举例说明:一个 24x24 的正方形图标和一个 24x24 的圆形图标放在一起,圆形常常显得更小。
2. 视觉重心偏移
图标的视觉重心不是几何中心:
- 有些图标上方留白较多,若严格居中,整体会显得“偏下”;
- 有些图标线条向一侧偏移,也会影响视觉稳定性。
3. 颜色、线条粗细的错觉
- 颜色明亮的图标通常看起来更大;
- 线条较细的图标会显得“轻”或“空”;
- 相同尺寸下,深色图标比浅色图标更具“存在感”。

---
二、如何实现图标的视觉统一?
4. 关注“视觉等值”而非“尺寸一致”
优秀的图标设计不会追求数值上完全一致,而是让图标“看起来”一样大。这就需要设计师具备一定的视觉判断力和对比经验。
5. 使用统一的对齐原则
- 每个图标放在相同的画布尺寸(如 24×24、48×48)中;
- 保证主图形部分在视觉上居中,而非仅仅坐标居中;
- 调整视觉重心,让图标看起来平衡、不倾斜。
6. 使用光学微调
所谓「光学对齐」,就是打破机械对齐规则,让视觉更舒服:
暂时无法在飞书文档外展示此内容
7. 放在真实场景中预览
设计图标时,建议不要孤立操作,而是:
- 放入实际使用场景(如按钮、导航栏);
- 对比多个图标在一组中是否协调;
- 测试在不同设备分辨率下的适配情况。

---
三、图标设计实操建议
以下是一些日常图标设计中实用的技巧和判断标准:
暂时无法在飞书文档外展示此内容

视觉大小与实际大小的偏差,是每一位图标设计师都会经历的学习过程。
 真正优秀的设计不是追求数值一致,而是注重 用户感受的和谐统一。
图标设计的细节感,往往藏在你“感觉不舒服但又说不出哪里不对”的那一刻。
理解视觉感知,训练视觉判断力,才是做出专业、协调图标系统的关键。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

超越旅程地图:AI UX 中的控制设计

杰睿 行业趋势

UX AI 设计工具包图示
罗布·查佩尔(Rob Chappell)插画

多年来,用户体验团队一直依赖用户旅程地图(一种标准的设计思维工具)来可视化和传达用户的意图、行为和流程。我们绘制了用户在各个界面步骤中的目标和情感,追踪了从发现到转化或任务完成的路径。这些地图假设用户旅程的进展基本呈线性:一系列可见的屏幕、结构化的任务以及用户做出的深思熟虑的选择。

但在人工智能驱动的系统中,这些假设开始瓦解。步骤变得不可见。目标在过程中不断演变。系统不再等待命令——它会推断、提出建议,甚至采取行动。随着人工智能承担起更多责任,我们熟悉的用户流程架构开始瓦解。我们曾经称之为“旅程”的东西开始变得更像一场对话,或者更准确地说,一场谈判。

传统的旅程地图假设流程固定——逐步完成的任务、静态屏幕和清晰的用户意图。但在由人工智能驱动的体验中,例如 ChatGPT、Google Gemini 或 GitHub Copilot:座席会主动完成任务(有时是隐形的),并且控制权会来回传递。考虑以下人工智能操作:

  • 写作助手会在您输入时完成您的句子。
  • 设计工具根据定义不明确的指令应用更改。
  • 浏览器助手可以总结网页、建议下一步行动并跨域采取行动。

在每种情况下,系统都会参与意义建构和决策。这些体验构成了一个相互影响的循环。针对这种新现实进行设计需要新的框架——用户体验模型,它超越了用户逐步完成任务的模式,而是考虑了人机之间动态的、共享的控制。

随着人工智能系统功能日益强大,我们作为体验设计师的工作也发生了变化。这不仅仅关乎流程、组件或优化。这意味着我们需要根据控制感知用户体验的原则进行设计:

  1. 意图框架:如何建议行动?帮助用户设定模糊的目标。
  2. 清晰地预览AI计划: AI正在做什么?为什么?在行动之前展示系统将做什么
  3. 可操控性:我可以改变路径吗?让用户在任务中调整AI行为。
  4. 可逆性:我可以撤销刚刚发生的事情吗?提供清晰的撤销和覆盖选项。
  5. 透明度和一致性:这个系统会尊重我的时间、我的目标和我的监督吗?分享系统推理。

这关乎塑造人与自主运作系统之间的关系。这种关系只有在清晰易懂、可操控且以人为本的基础上才能有效运作。

管理控制平衡

自主性滑块的图示
Andrej Karpathy 的“自主滑块”概念——Rob Chappell 的插图

在 Y Combinator 的 AI 创业学校的演讲软件正在(再次)改变中,特斯拉前 AI 主管、应用 AI 领域最具影响力的人物之一 Andrej Karpathy 将软件设计的这种转变描述为从确定性、代码驱动系统向新范式的过渡:界面是自然语言,程序就是提示本身。

正如 Karpathy 所说,“你的提示现在是编写 LLM 的程序。”但与命令或表单输入不同,提示会启动一个概率性的解释过程,其中模型推断意图和上下文,而不是执行固定的操作。

Andrej Karpathy 主题演讲截图
Andrej Karpathy 在旧金山 AI 创业学校发表主题演讲 — youtu.be/LCEmiRjPEtQ

Karpathy 提出了“自主性滑块”的概念——一种交互范围,从完全用户控制到完全 AI 自主。它并非简单的开关,而是一个动态、流畅的尺度,会在整个会话过程中不断变化。有时由用户主导,有时由 AI 模型提出建议或采取行动。通常情况下,它们会反复切换角色。这是一种时时刻刻的控制权权衡。

Karpathy 阐述了人类与人工智能之间互动的两种基本模式:

1. 人机交互(指令模式)

  • 人类给出详细、明确的命令
  • AI 模型根据这些指令执行
  • 思考:快速工程、表单填写、手动配置
  • 用户体验重点:输入清晰度和脚手架、结构化指导

2. 模型即驾驶员(自动驾驶模式)

  • 人类给出了一个高层次的目标
  • 该模型计划、决定、迭代和选择
  • 思考:“写一份简介草稿”、“为我开发一个应用程序”、“我还缺少什么?”
  • 用户体验重点:可解释性、监督和覆盖控制、信任信号

这两种模式存在于动态张力之中,而非二元对立。用户和AI代理流畅地来回切换控制权。Karpathy的框架向我们展示了真正的用户体验挑战并非对话与界面的对立,而是为共同代理而设计。

你肯定不想只用文本与操作系统(LLM)对话。文本阅读、解读和理解起来非常困难……图形用户界面 (GUI) 可以帮助人类审核这些易出错的系统的工作,并提高运行速度。—— Andrej Karpathy,软件正在(再次)改变

看完 Karpathy 的演讲后,我一直在思考“自主滑块”——用户选择将多少控制权交给 AI 的想法。但这并不总是指完全自主,比如 AI 编写代码和提交拉取请求。有时,它涉及一些更微妙的事情:你给系统多大的空间来解读你的意图。

我从Adobe Firefly测试版就开始用了,主要用来构思视觉概念和探索风格方向。Firefly 的滑块控件并非虚构的,而是内置在界面中的。

Adobe Firefly 视觉强度滑块运行截图
Adobe Firefly 实际操作示例——用户调整模型的创意控制,调整视觉强度水平

Firefly 为我提供了调节控制的工具,而不仅仅是提交输入。提示字段并非整个界面,它只是更大控制界面的一部分。它周围有一些滑块——例如“视觉强度”“风格强度”——它们充当实时刻度盘,用于控制我赋予模型的自主权。当我降低强度时,我在发出信号:紧跟提示,保持文字表达。当我提高强度时,我在邀请读者进行解读,让模型自由发挥创意。

实际上,我选择赋予AI多少自主权。这关乎塑造作者身份的平衡。系统成为了合作者,而滑块则成为一种看得见摸得着的管理合作关系的方式。

用户体验也在再次发生变化

交互的未来不仅仅是引导用户顺利地从A点到达B点,更是设计人与模型之间的关系。这种转变需要一种全新的用户体验思维,将人机交互状态视为核心设计维度,而非边缘情况。这种变化已引起广泛关注。业内的用户体验领导者正在提出以人为本的全新方法,利用智能系统进行设计,并围绕智能系统进行设计。

在 UX Matters 的文章超越炒作:以人为本的 AI 走向现实中,设计加速器 Punchcut 的联合创始人 Ken Olewiler 对当前的 AI 格局提出了尖锐的批评,警告称不应在缺乏实际用户价值的情况下仓促采用生成式 AI。尽管许多组织正在进行试验,但他指出,很少有组织能够从概念验证阶段迈向可衡量的投资回报率——他将这一差距归因于炒作驱动的决策和缺乏以人为本的框架。

避免试图在客户生命周期的每个阶段都全面集成人工智能自动化。要更有选择性,在人工智能能够带来最大价值的地方进行集成。提供能够实现协作式用户控制的人工智能功能,为用户保留有意义的自主权。——Punchcut 联合创始人 Ken Olewiler

Olewiler 呼吁重新思考自主性。尽管人工智能领域的主流叙事倾向于推崇完全自动化,但他团队的用户研究发现,用户更喜欢共享控制。他建议创建自主性地图,以可视化的方式展现人机交互在整个体验中的转换点——类似于服务蓝图等系统设计工具,但更侧重于控制。这些地图可以帮助团队在设计时实现协同自主,而不是交接或黑箱自动化。

BCG 的 Matt Scharpnick 的文章“生成式人工智能的用户体验设计:平衡用户控制和自动化”呼应了 Olewiler 强调的平衡用户代理和人工智能自动化,强调了用户体验需要在灵感和精确之间找到平衡。

用模型引导用户得出精确结果可能会令人沮丧。我们仍处于 GenAI 的早期阶段,还有很大的创新空间——尤其是在设计允许用户精准输入偏好的界面方面。—— BCG 副总监 Matt Scharpnick

Scharpnick 认为,生成式用户体验的未来在于设计出一种界面,让用户能够精准地“操控”他们想要的价值和控制,同时又不扼杀生成式模型的创造潜力。这与 Olewiler 对自主地图和共享能动性的呼吁相呼应,凸显了用户体验的更广泛转变:我们必须设计出既能激发惊喜,又能支持专业级精准度的系统。

绘制控制流:我们可以从 OESD 中学到什么

操作员事件序列图 (OESD)是一种形式化模型,用于直观地展现控制权在人类操作员和自动化系统之间随时间推移的切换。OESD 是在航空航天、自动驾驶汽车和工业机器人等安全关键领域开发的,它可以帮助工程师定义每个操作的负责人、触发控制权交接的因素以及系统在出现问题时如何响应。

这些图表通常包含两条或多条“泳道”——一条供人使用,一条供机器使用——并绘制出一系列动作、决策和交接点。它们不仅旨在捕捉行为,还旨在在复杂、高风险的环境中强制执行明确的责任制和可恢复性。

OESD示例:

在自动驾驶汽车的远程操作中,研究人员使用 OESD 来模拟远程人类何时应该介入——从被动监控到主动驾驶——这取决于车辆的信心和环境。

操作符事件序列图示例
Stanton NA 等人,(2021)。使用操作员事件序列图建模自动化与人类驾驶员的交接。未来交通1 (2),351–369。https ://doi.org/10.3390/futuretransp1020020(开放获取)

在农业机器人领域,OESD 帮助研究人员编排共享控制任务,例如让人类标记要收获的水果,而机器人负责物理切割。

操作符事件序列图示例
Salzer Y 等人,(2023)。集成功能分配和操作事件序列图以支持人机协作:机器人数据细化系统案例研究。《认知工程与决策杂志》18 (1),52–68。https ://doi.org/10.1177/15553434231199727(开放获取)

这些模型为我们提供了一种语言,将控制描述为人与系统之间的时间序列。它们已被证明在需要明确权限和故障保护的领域非常有效。作为用户体验设计师,我们可以在面对新挑战时改进控制序列图:设计不仅要考虑控制权的交接,还要考虑人与人工智能系统之间流畅的协同作用。作为用户体验设计师,我们可以在面临新挑战时改进控制序列图:不仅要设计控制交接,还要设计人与人工智能系统之间的流畅协作。

从旅程地图到控制地图

人工智能系统正在改变数字交互的结构。传统软件需要等待用户输入,而现代人工智能工具则能够推断、建议并采取行动。这彻底改变了用户体验或产品的控制方式,并挑战了当代用户体验方法中的许多假设。

在用户体验旅程图中,核心问题是:

“用户想要做什么?”

对于控制映射人工智能系统,核心问题变成:

“此刻谁在掌控局势?局势将如何转变?”

设计师需要更好的方法来追踪控制权是如何发起、共享和交还的——不仅关注用户看到什么或做了什么,还要关注人类和人工智能系统之间如何实时协商代理。

我们可以将类似 OESD 的思维方式应用于更广泛的 AI 用户体验。用户-AI 控制映射可能更多地关乎一种思维模式,而非静态图表——设计一个既能行动又能倾听的系统。关键考虑因素:

  • 谁在控制——用户、AI 或两者
  • 控制权何时以及为何发生转移——作为时刻或循环
  • 界面如何支持这些转换——遵循控制感知用户体验原则所需的可供性

为了评估这些动力是否有效,我们需要新的指标——能够捕捉合作质量而不仅仅是完成度的指标。

用户人工智能控制和质量指标概念图
用户-AI 控制和质量指标概念 — 插图:Rob Chappell

转弯效率和意图准确度等质量指标不仅仅是诊断依据,更是在人工智能设计中实现信任、协调和控制的一种方式。其目标是确保清晰性、适应性和以人为本的成果,即使控制权随时都在转移。

环境人工智能系统提高了风险

环境智能 (AmI) 指的是配备嵌入式传感器的环境,这些传感器能够主动且不引人注目地为用户提供支持——适应环境、识别行为模式,并在无需明确指令的情况下预测需求。这一愿景涵盖了从调节灯光的智能房间到能够理解语音提示的语音助手,以及如今嵌入在我们数字产品中的环境人工智能服务。

  • 无需提示即可阅读上下文
  • 提出行动而不是等待
  • 自主行动,然后退却

环境人工智能为数字体验设计开辟了新领域。

在2025 年 Google I/O 开发者大会上,环境 AI 的转型以 Project Astra 的形式展现。该项目的多模态助手被嵌入到配备摄像头和音频输入的智能手机中。Google 的 AI 助手将实时感知环境、识别物体并解读口语。它代表着我们迈向情境感知、具身化 AI 的未来:这些系统无需等待提示,而是主动观察、解读并提供帮助,并嵌入到我们现有的空间和工具中。

值得注意的是,谷歌宣布Gemini 将直接集成到 Chrome 浏览器中,这意味着谷歌正在将 AI 从一项独立的功能转变为一个无处不在的层。从这个意义上讲,浏览器曾经只是网站的被动容器,如今却成为了一个主动的协作者:读取上下文、建议操作并跨领域解释任务。AI 助手无需等待用户打开——它就在那里,感知用户的实时上下文并随时准备参与。

谷歌的立场越来越明确:拥有跨域 AI 层。这不是一个小众的边缘案例,而是一个主流的竞争态势,因为 Chrome 不仅仅是一个浏览器。它是全球用户的默认界面,控制着超过 60% 的浏览器市场。它的优势——“护城河”——不仅在于模型性能,还在于跨标签、应用和会话的上下文连续性。浏览器向对话式发展的这种演变,为在自己的平台内构建 AI 助手的产品和用户体验团队提出了一系列紧迫的问题。如果 Gemini 已经存在于 Chrome 中,那么特定领域的助手还会扮演什么角色?用户会更喜欢针对单个品牌或任务量身定制的网站嵌入式 AI 代理吗?或者,主流的网络模式是否会Gemini 而构建——确保兼容性、清晰度和信任度,而 AI 已经在浏览器级别与用户并肩作战?

Gemini 在 Chrome 中的截图
Google I/O 2025 大会上宣布 Chrome 浏览器 Gemini 将通过人工智能助手重塑浏览器 — 截图来自https://www.google.com/chrome/ai-innovations/

这不仅仅是一种新的交互模式,更是一种新的存在模式,人工智能系统将占据用户数字环境的整个界面。这种演变不仅重塑了交互模式,也重塑了我们对数字产品的期望。它重新提出了一些远远超出技术用户体验范畴的根本性问题。正是在这里,像乔纳森·艾维这样一位苹果最具标志性产品背后的极具影响力的设计师,也加入了讨论。

Stripe Sessions 2025上,Jony Ive 罕见地就设计工艺以及我们作为创造者的责任进行了一次对话。他强调,伟大的产品并非仅仅基于新颖性或巧妙性——它们源于深切的关怀、清晰的意图和克制。Ive 强调,我们有责任创造出一种不需要更多关注,而是回馈部分关注的技术。他呼吁产品能够认识到用户“能够感知关怀”——这种理念与将 AI 设计为一种新型协作者而非生产力工具的理念相呼应。

设计师 Jony Ive 爵士与 Stripe 首席执行官 Patrick Collison 在 Stripe Sessions 上进行炉边谈话:https://youtu.be/wLb9g_8r-mE

未来的工作:精心设计人工智能系统

在人工智能驱动的体验世界中,用户和模型共同创造成果。正如乔纳森·艾维提醒我们的那样,我们需要从根本上建立信任和关怀,而不仅仅是停留在表面。这些体验的成功将不再取决于系统的速度或智能程度,而更多地取决于它如何有效地共享控制权。随着人工智能工具的演进,控制设计将成为信任设计。

信任并非通过隐藏复杂性来赢得,而是通过使复杂性易于驾驭而建立。行动的系统也必须解释。提出建议的系统必须接受批评。记忆的系统必须披露记忆的内容及其原因。

动态控制设计意味着将界面视为一种关系,而不是一种工具。人际关系需要清晰的思路、积极的响应以及说“不”的能力。我们构建的系统将越来越多地为我们采取行动。问题在于,我们设计这些系统时,是否做到了在行动的同时认真倾听。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

人工智能不会消灭用户体验——我们才会

杰睿 设计管理与成长

图片使用 ChatGPT 生成,并经过 Photoshop 编辑。图片来源:ChatGPT、Kym Primrose。

不久之前,我还坚信我的工作不会被人工智能所左右。虽然我现在仍然大体上相信这一点,但人们争相采用人工智能解决方案的速度之快令人担忧,这让我开始怀疑。我不能责怪他们;人工智能解决方案快速、一致,而且从表面上看,通常都很有吸引力。我很乐意将人工智能融入我的工作流程中(我已经这样做了),但我并不认同人工智能应该处于创作过程的中心这一观点。它无法创造;它只能复制——麻省理工学院领导的一系列实验强调了生成性人工智能依赖于模式而不是新颖的思维。虽然这种复制效果越来越好,但它仍然依赖于已经完成的工作。正是这一部分被忽视了;世界只看到了快速、可接受的解决方案,而这正是让我担心的部分。

几十年来,我们在用户体验领域一直宣扬同理心、共同创造以及理解用户个体的重要性。然而,在实践中,这些原则仍然与紧迫的时间表和狭隘的“可用”定义相冲突。正如 Adyanth Natarajan 所说,无障碍设计方面的失败反映出用户体验行业仍然主要面向一小部分人群。同样,Andrew Tipp 认为,虽然包容性设计至关重要,但预算和时间压力往往会削弱它

尽管人们竭尽全力强调包容性设计如果得到妥善实施将带来多么大的益处,但这些领域在开发过程中仍然严重缺乏重视。这个行业讲究时间和金钱;当廉价而粗糙的解决方案唾手可得时,它根本无法承担真正的用户体验设计的沉迷。人工智能提供了这样的解决方案。但是,我们越是将设计任务交给那些从聚合数据和历史模式中学习的系统,我们就越有可能将一切标准化。如果我们现在还没有找到关键的答案,那么将创意流程交给人工智能系统并不能神奇地解锁它。包容性设计成为基准标准的梦想变得更加遥不可及。诚然,我们获得了效率,但代价是什么呢?

虽然本文的重点在于AI如何将创造力从设计流程中剔除,但我们必须承认,这种观点本身并不新鲜。Alterio 、SeoHurst等人都探讨过UX /UI设计中创造力的扼杀问题,尽管他们并未提及AI的介入。

我们今天所说的“设计”有多少是真正原创的?

摆在桌面上的是:我们大多数人的工作都受到相当严格的限制。由于无障碍指南、设计系统、素材库和社区 Figma 文件的存在,许多创意意图被剥夺了。我们所做的只是将点连接起来——而这基本上就是所有人工智能解决方案都在做的事情。它们从相同的资源中提取数据,并基于相同的设计系统和无障碍规则将点连接起来。那么,这真的是一件坏事吗?

将显示缩放图像
Figma 社区 UI 工具包截图。图片来源:Figma

对我来说,答案取决于两点。首先,使用这些工具的人是否真的受过培训,了解它们的工作原理?他们是否知道如何设计提示来减轻偏见而不是加剧偏见?即使他们不知道,雇佣这些工具的人真的在乎吗?其次,我们节省下来的时间是否真的被重新投入到探索性思考中?投入到研究、实验和面向未来的想法中?

如果是,那很好;但如果不是,我们就有可能为了追求进步的幻觉而牺牲自己的创造力。任何真正的设计师都不应该愿意接受这种交易。如果我们要把所有这些耗时、繁琐、零散的工作都交给机器,我们的大脑还有什么更好的用途呢?

人工智能作为复制者,而非发起者

说实话:人工智能并不具备创造力。真的不。它只是一种非常逼真的模仿者。它接受过已经构建、发布和批准的事物的训练。这意味着它建立在已经成功的想法之上,而这些想法并不总是最好的,只是最容易被接受或最引人注目的。

它所回收的不仅仅是设计模式和配色方案,还有偏见、规范和文化假设。如果数据集存在偏差,输出结果也会如此。我们在Buolamwini 和 Gebru 于 2018 年发表的《性别阴影》等研究中就看到了这一点,其中商业 AI 工具对深色皮肤女性的性别判断错误,错误率高达 34.7%。此类研究表明,使用从互联网和企业来源收集的数据集的商业 AI 系统往往会复制并放大现有的社会偏见。

我们用同样有缺陷的框架建立了这些系统,而我们花了几十年的时间试图拆除它们,即使我们积极尝试纠正这些错误陈述,但可能为时已晚。

Molly Wright Steenson 换了一种说法:

数据的关键在于它存在于过去。数据集的问题在于它强化了现有的偏见,而不是找到新的方法来做事和解决问题

这凸显了生成式人工智能的一个核心挑战:我们用过去的假设构建未来的工具。

人们想方设法地推销人工智能解决方案,让我们觉得它们能让我们的生活更轻松,但实际上,他们只是在沙漠里兜售沙子。我们兜售的所谓创新,不过是规模化的反馈循环(是的,我是个痴迷于反馈循环的女人)。我们教它,现在我们让它用同样的材料来教我们和自己。

现在,复制有其存在的意义。我并不是说每个登录表单或入职流程都需要革新。一些优秀的设计成果是无形的。我之前提到过,我们将这些点连接起来。然而,我们是有意识地、谨慎地(或者至少我们应该这样做)将这些点连接起来。如果人工智能成为流程中这些部分的默认设计者,我们就不得不问:这给我们带来了什么?我们到底贡献了什么?如果我们把基础工作完全外包出去,我们该如何发展这门工艺?

讽刺的是,设计本应是最能抵御这种侵蚀的领域之一。多年来,我们一直在努力争取一席之地,证明好的设计能够塑造结果、改变行为,并真正改善生活质量。如今,我们终于赢得了一席之地,却被要求将工作交给那些从未被邀请参与讨论的工具。坦白说,这些工具只关心模式,不关心环境。

更糟糕的是,那些不愿或不觉得有必要深入探究的人一致认为,人工智能的输出就是客观真理。人工智能就是神谕。它不是魔法,而是一个基于泛文化训练的系统。如果我们不小心,我们就会让自己陷入自动化,最终走向创造性的湮没。

在黑暗中跳舞

话虽如此,或许我们多年来一直被困在创意的湮没之中。我至今仍记得90年代中期到21世纪初科技界的疯狂。创新无处不在,没人知道自己在做什么,他们只想尝试一些很酷的东西。有人喜欢直板手机吗?任天堂的控制器设计?那真是疯狂,也真是棒极了。

将显示缩放图像
这是 20 世纪 90 年代末到 21 世纪初的一些实验性手机设计的拼贴画,其中包括形状像口红管、摄像机和化妆盒的手机。
有趣的00年代早期手机。图片来源:u/CosmicPelican via Reddit r/nostalgia

我认为其中大约80%都失败了。但这却是最好的失败。最终,这些疯狂的想法让位于标准,就像往常一样;要么是苹果,要么是安卓;要么是PlayStation,要么是Xbox;要么是Mac,要么是Windows。

在所有这些融合中,用户体验 (UX) 找到了立足点。随着技术的成熟,我们的期望也随之成熟。怪异不再美妙,反而令人困惑。不可预测的界面不再勇敢,而是支离破碎。用户体验 (UX) 作为一种将秩序带入混乱的方式出现,其目标突然不再是脱颖而出,而是消除摩擦,使体验看起来自然。

这绝对是必要的。良好的用户体验 (UX) 使所有这些新技术不仅可以供爱好者和早期采用者使用。用户体验标准带来了一致性、最佳实践和基于成熟经验的模板。但在追求一致性和可用性的过程中,我们失去了一些东西。我们不再问“如果呢?”,而是开始问“基准是什么?”

设计师和开发人员,请告诉我,您不使用 Apple 的人机界面指南或 Material Design 作为参考点?我会质疑任何这样做的人的诚实。

将显示缩放图像
两张突出的设计系统图:Google Material Design 和 Apple 人机界面指南。图片展示了每个系统的一些界面组件。
谷歌Material Design(上)和苹果人机界面指南(下)。图片来源:Figr

你上一次彻底改变常见 UI 元素的交互预期是什么时候?流行的东西就一定有效,何必再去重新发明轮子呢?就像我们通过设计和接触学会了如何打开门和操作炉灶一样(就像唐纳德·诺曼那样),我们也学会了如何操作下拉菜单。这就是可供性(affordance)的演变。

所以,当我们说人工智能会削弱用户体验(UX)和用户界面(UI)的创造力时,真的如此吗?它所做的并非我们多年来从未做过的事情。它引用的是相同的库和标准,使用我们共同认可的有效方法。我们所说的我们失去的东西,其实是我们很久以前就放弃的东西。

平衡之举

让我们明确一点。人工智能不是敌人,自满才是。

过去一周左右,我使用了一些AI工具,体验不错,我相信它是一款非常棒的辅助工具。但我们必须挑战它。说它胡说八道就对了。问问我的ChatGPT,我告诉它它错了多少次……

将显示缩放图像
ChatGPT 对话截图。图片来源:ChatGPT、Kym Primrose。

如果我们希望人工智能能够增强我们的工作,而不是取代其核心功能,我们就必须有意识地去行动,必须意识到自己在做什么。施奈德曼的普罗米修斯原则明确指出了这一点:如果我们以这样的方式构建高度自动化,它就能支持创造力和监督。

对我来说,成功取决于三件事:教育、融合平衡

我们需要教育自己和同事,让他们了解人工智能的真正含义、运作方式,以及它在日常工作流程中的界限。这不应该是一个孤立的过程。

这不仅仅是开发人员或用户体验设计师的问题。我们需要跨职能的人工智能素养,涵盖市场营销、用户体验、开发和质量保证;我们应该共同学习。我们都应该积极意识到局限性,设定清晰的提示,仔细审查输出,并在潜在偏见影响用户之前发现它。如果我们要负责任地构建产品,我们需要共同的语言和共同的责任。

一旦我们了解了人工智能能够以及应该为我们做什么,下一步就是整合。这不仅关乎技术层面,也关乎文化和伦理层面。仅仅选择一个工具并将其融入工作流程是不够的。我们需要编写文档:哪些工具是允许使用的,如何有效地使用它们,它们属于流程的哪些阶段,以及何时应该回归到一些手动思考。这份文档不应该是自上而下的,而应该由所有参与工作的人员共同协作构建。我们需要建立清晰的界限,并让所有人拥有共同的责任,让我们有信心在认为合适的时候,敢于表达自己的想法,并主动对抗人工智能。

这才是关键;我们不能对人工智能漠不关心。每一次使用都应该有意识,每一个解决方案都应该受到质疑。人工智能可以提供辅助,但最终决定权仍然在我们手中。

这就引出了我们的目标。如果我们的目标是通过将某些任务交给人工智能模型来提高生产力和效率,那么我们必须思考如何将这些节省下来的资金重新投资到其他地方。

实现这一目标的方法之一是重新投资研发、发散思维和突破界限的创意,这不仅能为用户体验/用户界面注入活力,还能打破停滞不前的设计模式。有了人工智能处理繁琐的工作,我们就有了探索实验性概念的空间,而这些概念通常受限于预算和时间。创新正是在这个空间中得以生存。如果没有它,我们可能会陷入无休止的循环,只输出安全、毫无灵魂的成果。我们必须展现出不断发展、适应、扩展,并保持我们创意生态系统的新鲜感,这不仅是为了用户,也是为了为我们的人工智能模型提供我们真正希望它们反映的解决方案和思维。

最后的想法

即使没有自动化,我们多年来也一直陷在千篇一律的便利循环中。人工智能并非用户体验/用户界面(UX/UI)感觉陈旧的原因,而是其结果。它只是凸显了原有缺陷。所以,与其担心人工智能会抹平用户体验/用户界面(UX/UI)的创造力,或许我们应该问问自己,为什么它一开始就如此平淡?

作为设计师,我们应该探索如何利用人工智能来支持我们的工作。它不是设计师,而是工具,就像之前的 Figma 和 XD 一样。Ben Shneiderman 在《以人为本的人工智能》一书中一针见血地指出,人工智能的目标并非取代我们,而是“增强、放大、赋能和提升”人类的潜能。如果我们选择挑战模板,设计和创造力仍然掌握在我们手中。我们的价值不应在于速度,而应在于更高效、以人为本、以体验为导向的思维方式——而这些是人工智能无法掌握的,因为无论它多么接近人类,它都永远无法成为真正的人类。

因此,如果我们不想成为自身流程的过客,就必须确保在培训、道德和研发方面的投入与在工具和集成方面的投入一样多。人工智能可以支持伟大的设计,但推动其发展的仍然是我们的好奇心、挑战和本能。所有这些最初都让这个行业令人兴奋。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

Excel和PPT已经落后了,可视化大屏强在哪?再次预览瘾

杰睿 大数据可视化设计文章及欣赏

今天看到这么一个问题:

我想说,这真是一个好问题!可能会有如下答案:

●Excel的数据透视表操作麻烦,用BI拖拽一下就能有结果
●整合多源数据,很多型其他数据可以一起分析了
●视觉化快速、美观,尤其是联动的功能

作为一个从事资料行业多年的人,我觉得最后一个是比较有意义的:视觉化。

可能很多人都不懂什么叫联动,看这个:

将显示缩放图像

很好理解,就是让数据动起来,Excel和PPT必备这样,需要长久,而且效果要差显着。

说到BI,可能很多人不了解,那报表总该接触过吧,两者的视觉化都是类似的,这也是比较重的。

想要快速、简单,不用方案码,就能实现可视化吗?

首先不说会用工具,我觉得模板才是最重要的,工具学起来可能会很长久,但是模板直接,可以用,而且重要的是:财务营销、销售营销等。

FineReport做化有一套方法,而且里面的生活化模板很不错:

将显示缩放图像
将显示缩放图像
将显示缩放图像
将显示缩放图像

什么?没看到瘾?直接看大屏!

将显示缩放图像
将显示缩放图像

觉得难,你也能做出来。点击FineReport免费试用,还有更多演示供你选择,总有一款适合你,别点击大屏演示等你来体验。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

超酷的高校学术迎新数据大屏,你也能做!

杰睿 大数据可视化设计文章及欣赏

先来看几张高校迎新大屏:

西北工业大学

将显示缩放图像

浙江农林大学

将显示缩放图像

资料有限,大概做到了这样一个迎新大屏:

将显示缩放图像

接下来是制作步骤

教程只是视觉讲化demo的制作过程唷,硬体部分不涉及啦

1、确定主题及展示指标

在设计可视化驾驶舱或大屏的时候,我们第一步要先确定我们大屏/驾驶舱的主题,然后列出我们想要在这张大屏上想要展示的数据指标和分析维度

主题:学校迎新大屏,通过对学校招生资料以及教职人员资料分析,向新生展示学校招生情况及学校师资力量、办学能力

主要分析维度如下:

各省份新生招生人数分析
历年各省招生情况分析
迎新资师队伍各
师资力量分析
办学规模分析
历年本科升学率趋势分析
学校初步支出结构分析
在校学生学历结构分析

2、根据资料关系选择合适的图表

关于图表的选择,看我前面两天写的图表应用指南:不知道用什么图表展示数据?看下面这份图表选择指南就够了,根据数据之间的关系选择合适的图表,可以参照这张经典的图表:

将显示缩放图像
将显示缩放图像

3、驾驶舱排版设计

根据确定好的分析指标进行排版,排版要注意主次分明,让读者瞬间看到重点资讯,提高资讯传递的效率,把核心练习指标放在中间位置、占更大面积,一般都会将动态效果丰富的地图放在主要位置,抓住读者眼球,次要指标萤幕放在几十个屏幕上。还有一些辅助分析的内容,可以通过图表联动、钻取体现。

可以参考如下几种布局方式:

将显示缩放图像

我的布局:

将显示缩放图像

4、城市化模板制作

模板的制作,我用的是FineReport,做视觉化大屏非常专业,基本上不用写什么程序码就可以开发视觉化大屏,多一个低程序码的报表开发平台吧。刚感兴趣的话可以下载一个和我一起试试看

软体激活码迭代这里,话不多说,上教程:

打开finereport,创建一张决策报表:

将显示缩放图像

新建数据集,然后用sql查询语句从数据库中提取数据,可以新增省份数据库数据,也可以直接上传档案数据集,定义地区引数,关联历年各省招生数据和各分招生数据(实现数据联动),其他的取数据报表我不用一一发货来,大家可以自己根据需求写

将显示缩放图像

决策报表采用的是易用式布局,可以拖拽便捷布局,根据之前设计的布局排版将所有图表元件按照布局设计顺序拖放到对应位置:

将显示缩放图像

这里面我用到了两个图表外挂,滚动字幕和数字时钟外挂,大家可以在一些外挂商城免费下载,点选服务器>外挂管理就可以找到这些外挂啦,当然你还可以找到其他你心仪的外挂。

将显示缩放图像

字幕滚动效果和数据时钟效果:(我录的不是很清楚抱歉><)

然后分别给图表元素类型设置其他、数据、样式、效果,以中间的地图设置为例:

将显示缩放图像

其他图表元件的数据和效果设定我这里就不赘述了

到这一步,基本上驾驶舱的雏形就做完了,我们可以对背景图、最后的细节进行美化,背景可以选择颜色或者是图片,做的匆忙我不想找背景图,直接用的颜色,点选机身>样式进行设置

将显示缩放图像

为了更好的视觉效果我们还可以给图表新增主题,增加大屏科技感,比如我们的大屏主题:

点选标题背景块>属性>样式,上传图片设置:

将显示缩放图像

最后储存模板,点选预览,效果如下(嘻嘻还是用的上面那张图):

看着?是不是还挺酷炫的!其实这样的大屏制作起来并不难,赶紧学习起来引爆你的SNS吧XDDD

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档