首页

10 个 A/B 测试示例和案例研究,为您的下一次测试提供启发

清阳

想象一下,你走进你最喜欢的冰淇淋店,想尝尝一种冰凉、香浓的冰淇淋新口味,然后你面临着一个终极抉择:是芒果狂热还是甜麦片牛奶(没错,这可是货真价实的口味)。你会怎么做?

当然,你得先尝尝味道再做决定,因为谁会凭猜测买一整品脱啤酒呢?这就是数字营销领域A/B 测试的精髓——只不过口味指的是你的落地页电子邮件广告,而关键在于你能否达成营销目标。

在本文中,我们将深入探讨 10 个真实的 A/B 测试案例,它们就像在口袋里找到一张被遗忘的 20 美元钞票一样令人兴奋。这些案例将激励你像营销大师一样进行测试、改进和优化。

1. Going:三个词的变化如何带来三位数的转化率提升

在熙熙攘攘的在线旅游优惠市场中,说服潜在客户深入了解您的产品/服务,有时就像在拥挤的行李传送带上寻找行李箱一样困难。Going一家致力于提供无与伦比的旅游优惠的公司,它面临着将访客转化为高级套餐订阅者的挑战。尽管优惠活动极具吸引力,但他们的转化率却未能达到预期目标。

 

问题

Going 面临的主要挑战在于其订阅计划的呈现方式。标准做法是鼓励访客注册一个免费但功能有限的计划,并希望他们以后能够升级。这种方法未能有效展现 Going 付费产品的全部价值,导致转化率低下。

解决方案

为了解决这个问题,Going 利用 Unbounce 的 A/B 测试工具来调整他们的行动号召 (CTA)。他们在主页上测试了两种不同的版本:“免费注册”和“免费试用”。 

这个简单的三个字的变化旨在通过提供免费试用期来更好地突出全功能高级计划的优势,使价值主张对潜在客户更清晰、更直接。

查看以下两种变体:

进行 CTA A/B 测试示例变体 A 的屏幕截图

变体A

进行 CTA A/B 测试示例变体 B 的屏幕截图

方案 B最终获胜,从奖杯和五彩纸屑就可以看出

结果:

效果令人瞩目。全新的“免费试用”CTA按钮使试用启动量环比增长了104%。这一显著提升不仅提升了付费渠道的转化率,还首次超越了自然流量。 

此次 A/B 测试的成功为 Going 提供了宝贵的见解,促使他们进一步优化营销策略,并利用 Unbounce 的功能不断改进和提高客户获取工作。

2. Campaign Monitor:动态文本增强如何带来 31.4% 的转化率提升

在数字营销方面,将营销活动的每一个元素与用户的意图相结合,可以极大地提高转化率。这正是挪威数字营销机构ConversionLab与其客户Campaign Monitor合作时面临的挑战和机遇。他们的实验揭示了在PPC(按点击付费)营销活动中,精细调整信息匹配(尤其是通过 A/B 测试)的影响。

问题

ConversionLab 注意到,尽管 PPC 活动设计得很好,但 Campaign Monitor 的目标网页与潜在客户的相关性仍有提升空间。 

他们的假设围绕着一个关键细节:用户搜索查询中使用的动词。他们认为,将着陆页上的动词与搜索中使用的动词对齐,可以提高页面的感知相关性,进而提高转化率。

解决方案:

为了验证他们的假设,ConversionLab 使用了 Unbounce 的动态文本替换 (DTR) 功能。这使得他们能够动态地更改着陆页上的文本,以反映用户搜索查询中使用的确切动词。 

例如,如果用户搜索“设计品牌电子邮件”,着陆页将自动调整其标题和 CTA,以包含动词“设计”,而不是“构建”或“创建”等替代词。

然后他们使用 A/B 测试将这个假设发布出去并测量结果:

屏幕截图显示了 A/B 测试示例和结果,其中变体 B 使转化率提高了 31%

变体 B使用 DTR 引导潜在客户注册,并帮助将试用转化率提高 31.4%

结果

A/B 测试持续了 77 天,在此期间落地页累计访问量达 1,274 次。采用 DTR 的版本转化率大幅提升了 31.4%,这意味着他们注册了 Campaign Monitor 软件的试用版(希望营销团队也能因此获得应得的称赞)。

3. 第一中西部银行:利用 A/B 测试探索新方法

在银行业等保守的行业,人们通常期望组织坚持传统方法。第一中西部银行挑战现状,探索创新方法,与客户建立信任,并在竞争中脱颖而出。 

本案例研究探讨了他们在着陆页上进行 A/B 测试的创新方法,这不仅打破了行业规范,而且显著提高了转化率。

问题

银行业通常受制于严格的品牌准则和传统的审美,几乎没有任何创新空间。这种环境使得测试和采用可能提升转化率的新方法变得异常困难。 

此外,需要从客户那里收集更多个人信息也增加了另一层摩擦,使得信任成为任何成功转化策略的关键部分。

解决方案

第一中西部银行 (First Midwest Bank) 在其落地页上发挥了创意,力求脱颖而出,赢得潜在客户的信任,突破了行业惯例的界限。他们首先使用 Unbounce 的 A/B 测试功能来验证一个众所周知的最佳实践:在落地页上使用人物照片。 

不出所料,人物照片确实提升了转化率,但银行并未止步于此。他们进一步深入研究,定制图像以反映不同州的人口统计学差异。例如,一个以微笑男士为主题的落地页在伊利诺伊州将转化率提升了47%,但在印第安纳州,效果不佳,导致转化率下降了42%。

这一洞察促使他们针对每个州的受众,对26个不同的落地页进行了A/B测试。此外,他们还质疑了将关键元素置于首屏之上的“最佳实践”。他们挑战了这一理念,将表单置于首屏之下,结果转化率意外提升了52%。(传统观念认为用户不愿滚动页面,这说法太夸张了,不是吗?)

中西部银行冠军登陆页面 A/B 测试示例变体 A

方案 A:将表单保持在首屏上方

中西部银行冠军登陆页面 A/B 测试案例研究变体 B

变体 B:将表单移至折叠下方,其效果比变体 A 高出 52%

结果

第一中西部银行大胆的 A/B 测试策略取得了令人印象深刻的成果,包括整体转化率提升了 195%(哇!)。通过根据当地偏好定制图像,并重新思考表单等转化元素的布局,他们不仅提升了参与度,还展现了在传统僵化的行业中发挥创意灵活性的潜力。 

4. 电子艺界和《模拟城市5》:使用A/B测试挑战假设

艺电公司(EA) 推出《模拟城市 5》时,他们并非只是在玩营销策略,而是在为胜利而战。EA 以其大片发行而闻名,他们已经做好了一切准备,希望《模拟城市 5》能引起轰动。但他们深知,即使在游戏世界中,细微的调整也能带来史诗般的胜利或失败。

问题

在当今游戏时代,玩家可以绕过传统零售渠道,直接下载游戏,这无疑是一种双赢,因为它既降低了EA的成本,又提升了玩家的便利性。然而,EA面临着一个关键挑战:如何在游戏发行后最大限度地提升这些数字下载量。 

标准做法?就是在预购时提供一些奖励,比如以后购买时打折。但这真的能赢得玩家的心吗?还是说,这只是一条用不完的额外生命?

解决方案

为了找到答案,EA 在其销售页面上进行了一次简单的 A/B 测试,以验证他们的假设。对照版本承诺,为预购《模拟城市 5》的玩家提供经典的 20% 折扣,希望借此机会提升销量。而对照版本则取消了折扣,直接提供游戏购买优惠,没有任何附加条件。

SimCity A/B 测试示例变体 A 的屏幕截图

带有折扣优惠的方案 A

SimCity A/B 测试示例变体 B 的屏幕截图

方案 B,无折扣优惠

结果

结果比日式角色扮演游戏的剧情反转更令人震惊。取消折扣不仅奏效,而且效果惊人,与对照组相比,销量增长了40%以上。 

事实证明,《模拟城市》的粉丝们并非为了省钱——他们只想玩最新的《模拟城市》,可能对购买其他游戏不感兴趣。这款游戏一半的销量都是通过这种方式实现数字化的,这证明了当你了解你的玩家时,你不仅仅是在销售,还能培养粉丝。

5. 可执行:简单的颜色交换如何绘制出转换杰作

如果您曾经陷入过关于哪种按钮颜色最能提升转化率的激烈争论,那么您并不孤单。营销自动化公司 Performable 的团队也面临类似的困境,他们质疑CTA 按钮的色调是否真的能够影响用户在主页上的操作。剧透预警:它能够,而且确实如此。

问题

数字营销领域充斥着关于“理想”按钮颜色的各种观点——绿色、红色、粉色等等。每种颜色都有各自的拥护者,并声称它们是提升转化率的秘诀。Performable 决定对这些颜色理论进行测试,并特别关注其中两种重量级的色彩:绿色和红色。

解决方案

他们对两个完全相同的主页版本进行了 A/B 测试,但有一个显著的区别——CTA 按钮的颜色。其中一个按钮采用绿色,与网站整体色调无缝融合,并与通用的“开始”信号灯相呼应。另一个按钮则采用了醒目的红色,旨在吸引注意力,但传统上也表示“停止”。

两种不同 CTA 按钮颜色的可执行 A/B 测试的屏幕截图

游客是愿意“走”还是“停”?

结果

结果改变了游戏规则。红色按钮的点击率比绿色按钮高出 21%。这不仅仅是一个小小的胜利,更是对突出元素在提升用户参与度方面力量的有力证明。尽管红色按钮通常被用作停止信号,但它却突破了干扰,获得了更多点击,最终转化为所有下游指标的显著提升。

这项测试生动地提醒我们,营销中的假设仅仅是假设而已。它们需要被挑战和检验。红色按钮 vs. 绿色按钮实验证明,有时候,像改变颜色这样简单的逆势而行,就能产生意想不到的强大效果。

6. TechInsurance:落地页测试如何提升PPC转化率

有时,提升转化率的途径并非在于吸引更多流量,而是在于优化现有流量。TechInsurance面临着一个共同的挑战:最大限度地提升其 PPC 营销活动的有效性。6

问题

最初,所有 PPC 流量都被导向 TechInsurance 的通用主页。这种方法虽然简单,但缺乏针对特定受众群体的吸引力。当时的假设很简单,却很有说服力:一个根据 PPC 受众的细微差别量身定制的专属落地页,能否胜过千篇一律的主页? 

解决方案

TechInsurance 决定通过专门设计一个落地页来验证他们的假设,该落地页专门针对他们的 PPC 广告系列流量。该落地页经过了微调,以满足来自广告访客的期望和需求,重点是传递更相关、更具吸引力的信息。然后,他们将其与首页进行了 A/B 测试。

TechInsurance A/B 测试示例变体 A 和 B 的并排屏幕截图

变体 A(主页)和变体 B(专用登陆页面

结果

结果意义非凡。专用落地页的转化率比网站首页高出惊人的73% 。这一巨大提升不仅彰显了专业内容的价值,也凸显了将落地页体验与目标受众的具体意图和兴趣相结合的重要性。

当潜在客户访问到能够直接满足其需求和期望的页面时,他们更有可能完成转化,从而立即产生“这正是我想要的”的感觉。如果您希望提升广告系列的效果,不妨考虑测试一个专门的落地页,该页面能够与目标受众的人口统计数据和需求产生深刻共鸣。 

7. Grene:迷你购物车改造如何让销量翻倍

Grene是波兰农业电商领域的巨头,他们改造迷你购物车的目的不仅仅是让产品更上一层楼,更是为了大幅提升销量。他们成功了,而且效果显著。

问题

Grene 网站上的迷你购物车就像每个人家里的抽屉一样——里面装满了有趣的东西,但有点乱。购物者经常被“免运费”的标签误认为是可点击的按钮,眯着眼看商品总数,甚至滚动太远才找到“加入购物车”的按钮。很明显——迷你购物车需要彻底改造了。

解决方案

Grene 在迷你购物车顶部设计了一个便捷的 CTA 按钮,方便用户快速跳转至购物车主页面。他们在每个商品旁边添加了一个“移除”按钮,避免用户误点击,并且让每件商品的总价一目了然。对了,还有那个“加入购物车”按钮?他们把它设计得又大又醒目,一眼就能看到,减少了用户不小心滑过的机会。

Grene cart A/B 测试示例变体 A 的屏幕截图

变体 A:原始版本

Grene cart A/B 测试示例变体 B 的屏幕截图

版本 B:更新版本

结果

改造后,不仅更多人点击购物车页面,Grene 的电商转化率也从 1.83% 跃升至 1.96%。更棒的是?总购买量翻了一番。没错,虚拟货架上的商品销量翻了一番。

Grene 的迷你购物车改造完美地提醒我们,有时候,细节才是最重要的。只需调整用户旅程中的几个元素,就能显著简化购物流程,并带来相当可观的收益。

8. 温哥华2010奥运商店:一页(结账)掌控一切

说到在线购物体验,结账环节往往是决定胜负的关键。2010年温哥华奥运会官方商店对这一关键环节进行了仔细研究,试图探索一种更简洁、更流畅的方案,能否帮助卖家避免放弃购物车,从而提升销量。

问题

这个问题简单却又关键:结账流程应该跨越多个页面,还是可以精简到一页,避免给顾客造成压力?传统观点认为,点击次数越少,顾客跳出率就越低,但这对奥运纪念品来说也适用吗?

解决方案

这家商店测试了一个大胆的假设:通过将多步骤结账流程压缩成一个简洁的单页流程,更多顾客会留下来完成订单。通过 A/B 测试,他们将 50% 的流量重定向到新的单页结账流程,以测试这一理论与传统多步骤结账方法的对比效果。

温哥华奥林匹克商店 A/B 测试案例研究变体 A 的屏幕截图

方案 A:原始的多步骤流程

温哥华奥林匹克商店 A/B 测试案例研究变体 B 的屏幕截图

方案 B:单页流程

结果

在积累了超过 600 笔交易后,结果清晰且令人信服。单页结账不仅带来了显著的提升,相比多步骤结账,其完成率更是大幅提升了 21.8%。转化率的显著提升,充分体现了顾客对结账流程简洁快捷的强烈偏好。

温哥华2010年奥运会商店的A/B测试有力地提醒我们,“最佳”结账流程可能会因受众和产品细分市场的不同而有很大差异。对某些人有效的方法可能对其他人无效。 

想知道是什么让您的客户满意吗?不妨进行测试,并让他们的行为指导您的优化。

9. HubSpot:尝试不同的电子邮件格式

这是一个 A/B 测试电子邮件营销示例,它表明即使是文本对齐等最简单的元素也会影响用户参与度。HubSpot 始终致力于寻找增强用户互动的方法,因此决定通过针对其电子邮件营销活动进行 A/B 测试来解决这个问题。

问题

目标很明确:提高每周订阅邮件的点击率。HubSpot 怀疑邮件文本的对齐方式可能会影响用户与 CTA 的互动。他们假设,调整文本对齐方式可以带来更友好的用户体验,并有望提高用户参与度。

解决方案

为了验证这一理论,HubSpot 设置了 A/B 测试,比较了两种格式:

变体 A(控制):文本居中的电子邮件,这是他们一直使用的标准格式。
变体 B:带有左对齐文本的电子邮件,这种改变旨在提高可读性并吸引更多人关注 CTA。
Hubspot 电子邮件 A/B 测试示例变体 A 的屏幕截图

变体 A:居中对齐文本

Hubspot 电子邮件 A/B 测试示例变体 B 的屏幕截图

变体 B:左对齐文本

结果

实验得出了一些意想不到的结果。与他们的假设相反,左对齐邮件的效果实际上比居中邮件更差,整体点击量更少。事实上,只有不到25%的左对齐邮件变体的表现优于对照组。

HubSpot 的 A/B 测试电子邮件营销示例,为我们提供了宝贵的经验,让我们了解电子邮件营销的细微差别。虽然左对齐文本(这种格式通常可以提高长文本的可读性)似乎效果更好,但受众的偏好差异很大。这强调了持续测试哪怕是最小细节的重要性,而不是对用户偏好做出假设。 

10. Vestiaire Collective:TikTok 上的潮流引领者

在快节奏的时尚和社交媒体世界中,保持领先地位不仅仅是一个目标,更是必需。二手奢侈时尚平台Vestiaire Collective面临着在 TikTok 上推广其全新直购功能的同时,如何抓住难以捉摸的 Z 世代群体的挑战。他们的方法是什么?巧妙地将网红的创造力与数据驱动的决策相结合。

问题

Vestiaire 的目标是扩大其在 TikTok 上的品牌影响力,并吸引 Z 世代消费者——这一群体崇尚真实性和新鲜内容。该品牌需要确保与网红的合作不仅富有创意,而且能够有效契合其提升品牌知名度和推动应用安装量的业务目标。

解决方案

为了解决这个问题,Vestiaire 的网红营销机构精心策划了一场 A/B 测试活动,确保不会限制创意合作伙伴的创作风格。他们招募了八位网红,赋予他们广泛的创作自由,让他们创作各种 TikTok 帖子,每篇帖子都嵌入了与 Vestiaire 目标相符的特定行动号召 (CTA)。内容风格多样,为活动提供了丰富的创意视角。

Vestiaire Collective 的 TikTok 视频 A/B 测试示例截图

影响者创作自由的一个例子

初始内容创作完成后,A/B 测试的真正魔力便显现出来了。该机构分析了这些帖子的效果指标,以确定哪些内容真正引起了受众的共鸣。之后,效果最佳的内容会通过定向付费广告进行推广,从而提升覆盖面和参与度。

结果

结果简直令人惊叹。Vestiaire 战略性地运用 A/B 测试,带来了超过 4,000 个新的应用安装,并将单次安装成本降低了一半,这显示出其在 Instagram 和 YouTube 上的效果指标显著提升。 

Vestiaire 的成功故事有力地证明了将 A/B 测试融入网红营销策略的影响力。它表明,赋予创作自由,并结合系统性的内容绩效评估,能够在参与度和成本效益方面取得显著成果。 

如何进行 A/B 测试 

既然您已经了解了 A/B 测试在帮助您实现营销目标方面的巨大作用,您可能已经迫不及待地想对自己的落地页进行 A/B 测试了。以下是如何开始:

创建一个假设

从假设入手,你不仅能弄清楚想要测试什么,还能知道如何判断测试是否成功。确保你的假设符合以下要求:

专注于单一问题:准确指出您想要解决或了解的问题。
可测试:在测试结束时您应该能够证明或反驳它。
影响驱动:旨在实现一些可以显著改变结果的事情,例如提高转化率或降低跳出率。

使用可靠的“如果,那么”结构来构建你的假设。例如,“如果我们使用更生动的CTA按钮,那么我们的点击率就会提高。”

设置变量:控制和治疗

确定您正在测试的内容:

控制变量:这是你当前的“冠军”,也就是你的落地页的原始版本。(这可以是 A/B 测试中的“A”)。
治疗变量:引入挑战者(“B”),这是根据您的假设对页面进行调整的版本。

决定测试什么

A/B 测试的魅力在于它的多功能性。你几乎可以测试任何可能影响用户行为的因素。一些常见的元素包括:

标题或正文的副本
号召性用语 (CTA) 按钮设计或措辞
图像或视频内容
页面的整体布局和导航

查看我们的A/B 测试电子书,获取可在目标网页上测试的 20 个元素的便捷列表。

统计显著性的测量

确保你的结果并非偶然。理解你的研究结果的统计显著性至关重要。这个术语的含义是确保你的对照组和实验组之间的性能变化很可能是由于你的调整,而不是随机因素造成的。

选择你的目标

你的最终目标是什么?增加网站流量、降低跳出率、提高参与度?你的目标应该与你的假设相符,并且清晰可衡量。这种专注不仅能指导你的实验,还能帮助你理解结果。

正确划分受众

通常,最好将流量平均且随机地分配给页面的控制版本和处理版本。这样,每个版本都有机会在类似的条件下证明自己的价值。

是的,有些情况下你可能不想均分流量,比如你正在测试一些有风险的项目,只想暴露少量流量。但总的来说,均分流量是最好的选择。

分析并采取行动

测试结束后,深入研究数据。你的实验方案是否优于对照组?还是完全不行?数据不仅会告诉你谁赢了,还会告诉你赢了多少。基于这些洞察,你可以决定是采用新版本、进行更多测试,还是重新开始。

请记住,即使是“失败”的测试也能提供宝贵的见解,哪怕只是告诉你哪些事情不应该做。正如托马斯·爱迪生所说:“我没有失败,我只是发现了一万种行不通的方法。”(不过,是否要做一万次 A/B 测试,完全取决于你自己……)

使用 Unbounce 进行 A/B 测试的分步指南

Unbounce落地页构建器不仅是创建落地页的最佳工具之一,它还内置了 A/B 测试功能。想要了解这款A/B 测试工具的完整使用指南,您可以浏览“如何进行 A/B 测试”页面,或者继续阅读快速了解一下:

1.登录 Unbounce 构建器后,选择您想要测试的页面。 

2. 进入“页面概览”屏幕并查找名为“页面流量模式”的部分。

3.选择A/B测试模式

动画 GIF 展示如何导航到 Unbounce 构建器的 A/B 测试部分
 
 

4. 现在是时候创建您想要测试的变体了。您可以复制现有页面开始,也可以从头创建一个全新的页面。

5. 准备好变体后,设置变体权重(即每个变体的流量分配比例)。最常见的分配比例是 50/50,但如果您需要测试三个变体,也可以使用 33/33/34 之类的比例。

 

6. 如果任何较新的变体(“挑战者”)表现优于原有的变体(“冠军”),则可以轻松将挑战者升级为新的冠军。只需选择概览设置右侧的“…”菜单,然后选择“升级为冠军”即可。

 

通过这些简单的步骤,您可以测试您的目标网页,稳步改进,并更接近您的转化优化目标。

 

1. Going:三个词的变化如何带来三位数的转化率提升

在熙熙攘攘的在线旅游优惠市场中,说服潜在客户深入了解您的产品/服务,有时就像在拥挤的行李传送带上寻找行李箱一样困难。Going一家致力于提供无与伦比的旅游优惠的公司,它面临着将访客转化为高级套餐订阅者的挑战。尽管优惠活动极具吸引力,但他们的转化率却未能达到预期目标。

目录

  1. 10 个激发灵感的 A/B 测试示例
  2. 如何进行 A/B 测试
  3. 使用 Unbounce 进行 A/B 测试的分步指南

因此,Going 转向 Unbounce(嘿,这就是我们!)并使用我们的 A/B 测试解决方案来寻找更好的前进道路。

问题

Going 面临的主要挑战在于其订阅计划的呈现方式。标准做法是鼓励访客注册一个免费但功能有限的计划,并希望他们以后能够升级。这种方法未能有效展现 Going 付费产品的全部价值,导致转化率低下。

解决方案

为了解决这个问题,Going 利用 Unbounce 的 A/B 测试工具来调整他们的行动号召 (CTA)。他们在主页上测试了两种不同的版本:“免费注册”和“免费试用”。 

这个简单的三个字的变化旨在通过提供免费试用期来更好地突出全功能高级计划的优势,使价值主张对潜在客户更清晰、更直接。

查看以下两种变体:

进行 CTA A/B 测试示例变体 A 的屏幕截图

变体A

进行 CTA A/B 测试示例变体 B 的屏幕截图

方案 B最终获胜,从奖杯和五彩纸屑就可以看出

结果:

效果令人瞩目。全新的“免费试用”CTA按钮使试用启动量环比增长了104%。这一显著提升不仅提升了付费渠道的转化率,还首次超越了自然流量。 

此次 A/B 测试的成功为 Going 提供了宝贵的见解,促使他们进一步优化营销策略,并利用 Unbounce 的功能不断改进和提高客户获取工作。

2. Campaign Monitor:动态文本增强如何带来 31.4% 的转化率提升

在数字营销方面,将营销活动的每一个元素与用户的意图相结合,可以极大地提高转化率。这正是挪威数字营销机构ConversionLab与其客户Campaign Monitor合作时面临的挑战和机遇。他们的实验揭示了在PPC(按点击付费)营销活动中,精细调整信息匹配(尤其是通过 A/B 测试)的影响。

问题

ConversionLab 注意到,尽管 PPC 活动设计得很好,但 Campaign Monitor 的目标网页与潜在客户的相关性仍有提升空间。 

他们的假设围绕着一个关键细节:用户搜索查询中使用的动词。他们认为,将着陆页上的动词与搜索中使用的动词对齐,可以提高页面的感知相关性,进而提高转化率。

解决方案:

为了验证他们的假设,ConversionLab 使用了 Unbounce 的动态文本替换 (DTR) 功能。这使得他们能够动态地更改着陆页上的文本,以反映用户搜索查询中使用的确切动词。 

例如,如果用户搜索“设计品牌电子邮件”,着陆页将自动调整其标题和 CTA,以包含动词“设计”,而不是“构建”或“创建”等替代词。

然后他们使用 A/B 测试将这个假设发布出去并测量结果:

屏幕截图显示了 A/B 测试示例和结果,其中变体 B 使转化率提高了 31%

变体 B使用 DTR 引导潜在客户注册,并帮助将试用转化率提高 31.4%

结果

A/B 测试持续了 77 天,在此期间落地页累计访问量达 1,274 次。采用 DTR 的版本转化率大幅提升了 31.4%,这意味着他们注册了 Campaign Monitor 软件的试用版(希望营销团队也能因此获得应得的称赞)。

3. 第一中西部银行:利用 A/B 测试探索新方法

在银行业等保守的行业,人们通常期望组织坚持传统方法。第一中西部银行挑战现状,探索创新方法,与客户建立信任,并在竞争中脱颖而出。 

本案例研究探讨了他们在着陆页上进行 A/B 测试的创新方法,这不仅打破了行业规范,而且显著提高了转化率。

问题

银行业通常受制于严格的品牌准则和传统的审美,几乎没有任何创新空间。这种环境使得测试和采用可能提升转化率的新方法变得异常困难。 

此外,需要从客户那里收集更多个人信息也增加了另一层摩擦,使得信任成为任何成功转化策略的关键部分。

解决方案

第一中西部银行 (First Midwest Bank) 在其落地页上发挥了创意,力求脱颖而出,赢得潜在客户的信任,突破了行业惯例的界限。他们首先使用 Unbounce 的 A/B 测试功能来验证一个众所周知的最佳实践:在落地页上使用人物照片。 

不出所料,人物照片确实提升了转化率,但银行并未止步于此。他们进一步深入研究,定制图像以反映不同州的人口统计学差异。例如,一个以微笑男士为主题的落地页在伊利诺伊州将转化率提升了47%,但在印第安纳州,效果不佳,导致转化率下降了42%。

这一洞察促使他们针对每个州的受众,对26个不同的落地页进行了A/B测试。此外,他们还质疑了将关键元素置于首屏之上的“最佳实践”。他们挑战了这一理念,将表单置于首屏之下,结果转化率意外提升了52%。(传统观念认为用户不愿滚动页面,这说法太夸张了,不是吗?)

中西部银行冠军登陆页面 A/B 测试示例变体 A

方案 A:将表单保持在首屏上方

中西部银行冠军登陆页面 A/B 测试案例研究变体 B

变体 B:将表单移至折叠下方,其效果比变体 A 高出 52%

结果

第一中西部银行大胆的 A/B 测试策略取得了令人印象深刻的成果,包括整体转化率提升了 195%(哇!)。通过根据当地偏好定制图像,并重新思考表单等转化元素的布局,他们不仅提升了参与度,还展现了在传统僵化的行业中发挥创意灵活性的潜力。 

4. 电子艺界和《模拟城市5》:使用A/B测试挑战假设

艺电公司(EA) 推出《模拟城市 5》时,他们并非只是在玩营销策略,而是在为胜利而战。EA 以其大片发行而闻名,他们已经做好了一切准备,希望《模拟城市 5》能引起轰动。但他们深知,即使在游戏世界中,细微的调整也能带来史诗般的胜利或失败。

问题

在当今游戏时代,玩家可以绕过传统零售渠道,直接下载游戏,这无疑是一种双赢,因为它既降低了EA的成本,又提升了玩家的便利性。然而,EA面临着一个关键挑战:如何在游戏发行后最大限度地提升这些数字下载量。 

标准做法?就是在预购时提供一些奖励,比如以后购买时打折。但这真的能赢得玩家的心吗?还是说,这只是一条用不完的额外生命?

解决方案

为了找到答案,EA 在其销售页面上进行了一次简单的 A/B 测试,以验证他们的假设。对照版本承诺,为预购《模拟城市 5》的玩家提供经典的 20% 折扣,希望借此机会提升销量。而对照版本则取消了折扣,直接提供游戏购买优惠,没有任何附加条件。

SimCity A/B 测试示例变体 A 的屏幕截图

带有折扣优惠的方案 A

SimCity A/B 测试示例变体 B 的屏幕截图

方案 B,无折扣优惠

结果

结果比日式角色扮演游戏的剧情反转更令人震惊。取消折扣不仅奏效,而且效果惊人,与对照组相比,销量增长了40%以上。 

事实证明,《模拟城市》的粉丝们并非为了省钱——他们只想玩最新的《模拟城市》,可能对购买其他游戏不感兴趣。这款游戏一半的销量都是通过这种方式实现数字化的,这证明了当你了解你的玩家时,你不仅仅是在销售,还能培养粉丝。

5. 可执行:简单的颜色交换如何绘制出转换杰作

如果您曾经陷入过关于哪种按钮颜色最能提升转化率的激烈争论,那么您并不孤单。营销自动化公司 Performable 的团队也面临类似的困境,他们质疑CTA 按钮的色调是否真的能够影响用户在主页上的操作。剧透预警:它能够,而且确实如此。

问题

数字营销领域充斥着关于“理想”按钮颜色的各种观点——绿色、红色、粉色等等。每种颜色都有各自的拥护者,并声称它们是提升转化率的秘诀。Performable 决定对这些颜色理论进行测试,并特别关注其中两种重量级的色彩:绿色和红色。

解决方案

他们对两个完全相同的主页版本进行了 A/B 测试,但有一个显著的区别——CTA 按钮的颜色。其中一个按钮采用绿色,与网站整体色调无缝融合,并与通用的“开始”信号灯相呼应。另一个按钮则采用了醒目的红色,旨在吸引注意力,但传统上也表示“停止”。

两种不同 CTA 按钮颜色的可执行 A/B 测试的屏幕截图

游客是愿意“走”还是“停”?

结果

结果改变了游戏规则。红色按钮的点击率比绿色按钮高出 21%。这不仅仅是一个小小的胜利,更是对突出元素在提升用户参与度方面力量的有力证明。尽管红色按钮通常被用作停止信号,但它却突破了干扰,获得了更多点击,最终转化为所有下游指标的显著提升。

这项测试生动地提醒我们,营销中的假设仅仅是假设而已。它们需要被挑战和检验。红色按钮 vs. 绿色按钮实验证明,有时候,像改变颜色这样简单的逆势而行,就能产生意想不到的强大效果。

6. TechInsurance:落地页测试如何提升PPC转化率

有时,提升转化率的途径并非在于吸引更多流量,而是在于优化现有流量。TechInsurance面临着一个共同的挑战:最大限度地提升其 PPC 营销活动的有效性。6

问题

最初,所有 PPC 流量都被导向 TechInsurance 的通用主页。这种方法虽然简单,但缺乏针对特定受众群体的吸引力。当时的假设很简单,却很有说服力:一个根据 PPC 受众的细微差别量身定制的专属落地页,能否胜过千篇一律的主页? 

解决方案

TechInsurance 决定通过专门设计一个落地页来验证他们的假设,该落地页专门针对他们的 PPC 广告系列流量。该落地页经过了微调,以满足来自广告访客的期望和需求,重点是传递更相关、更具吸引力的信息。然后,他们将其与首页进行了 A/B 测试。

TechInsurance A/B 测试示例变体 A 和 B 的并排屏幕截图

变体 A(主页)和变体 B(专用登陆页面

结果

结果意义非凡。专用落地页的转化率比网站首页高出惊人的73% 。这一巨大提升不仅彰显了专业内容的价值,也凸显了将落地页体验与目标受众的具体意图和兴趣相结合的重要性。

当潜在客户访问到能够直接满足其需求和期望的页面时,他们更有可能完成转化,从而立即产生“这正是我想要的”的感觉。如果您希望提升广告系列的效果,不妨考虑测试一个专门的落地页,该页面能够与目标受众的人口统计数据和需求产生深刻共鸣。 

7. Grene:迷你购物车改造如何让销量翻倍

Grene是波兰农业电商领域的巨头,他们改造迷你购物车的目的不仅仅是让产品更上一层楼,更是为了大幅提升销量。他们成功了,而且效果显著。

问题

Grene 网站上的迷你购物车就像每个人家里的抽屉一样——里面装满了有趣的东西,但有点乱。购物者经常被“免运费”的标签误认为是可点击的按钮,眯着眼看商品总数,甚至滚动太远才找到“加入购物车”的按钮。很明显——迷你购物车需要彻底改造了。

解决方案

Grene 在迷你购物车顶部设计了一个便捷的 CTA 按钮,方便用户快速跳转至购物车主页面。他们在每个商品旁边添加了一个“移除”按钮,避免用户误点击,并且让每件商品的总价一目了然。对了,还有那个“加入购物车”按钮?他们把它设计得又大又醒目,一眼就能看到,减少了用户不小心滑过的机会。

Grene cart A/B 测试示例变体 A 的屏幕截图

变体 A:原始版本

Grene cart A/B 测试示例变体 B 的屏幕截图

版本 B:更新版本

结果

改造后,不仅更多人点击购物车页面,Grene 的电商转化率也从 1.83% 跃升至 1.96%。更棒的是?总购买量翻了一番。没错,虚拟货架上的商品销量翻了一番。

Grene 的迷你购物车改造完美地提醒我们,有时候,细节才是最重要的。只需调整用户旅程中的几个元素,就能显著简化购物流程,并带来相当可观的收益。

8. 温哥华2010奥运商店:一页(结账)掌控一切

说到在线购物体验,结账环节往往是决定胜负的关键。2010年温哥华奥运会官方商店对这一关键环节进行了仔细研究,试图探索一种更简洁、更流畅的方案,能否帮助卖家避免放弃购物车,从而提升销量。

问题

这个问题简单却又关键:结账流程应该跨越多个页面,还是可以精简到一页,避免给顾客造成压力?传统观点认为,点击次数越少,顾客跳出率就越低,但这对奥运纪念品来说也适用吗?

解决方案

这家商店测试了一个大胆的假设:通过将多步骤结账流程压缩成一个简洁的单页流程,更多顾客会留下来完成订单。通过 A/B 测试,他们将 50% 的流量重定向到新的单页结账流程,以测试这一理论与传统多步骤结账方法的对比效果。

温哥华奥林匹克商店 A/B 测试案例研究变体 A 的屏幕截图

方案 A:原始的多步骤流程

温哥华奥林匹克商店 A/B 测试案例研究变体 B 的屏幕截图

方案 B:单页流程

结果

在积累了超过 600 笔交易后,结果清晰且令人信服。单页结账不仅带来了显著的提升,相比多步骤结账,其完成率更是大幅提升了 21.8%。转化率的显著提升,充分体现了顾客对结账流程简洁快捷的强烈偏好。

温哥华2010年奥运会商店的A/B测试有力地提醒我们,“最佳”结账流程可能会因受众和产品细分市场的不同而有很大差异。对某些人有效的方法可能对其他人无效。 

想知道是什么让您的客户满意吗?不妨进行测试,并让他们的行为指导您的优化。

9. HubSpot:尝试不同的电子邮件格式

这是一个 A/B 测试电子邮件营销示例,它表明即使是文本对齐等最简单的元素也会影响用户参与度。HubSpot 始终致力于寻找增强用户互动的方法,因此决定通过针对其电子邮件营销活动进行 A/B 测试来解决这个问题。

问题

目标很明确:提高每周订阅邮件的点击率。HubSpot 怀疑邮件文本的对齐方式可能会影响用户与 CTA 的互动。他们假设,调整文本对齐方式可以带来更友好的用户体验,并有望提高用户参与度。

解决方案

为了验证这一理论,HubSpot 设置了 A/B 测试,比较了两种格式:

变体 A(控制):文本居中的电子邮件,这是他们一直使用的标准格式。
变体 B:带有左对齐文本的电子邮件,这种改变旨在提高可读性并吸引更多人关注 CTA。
Hubspot 电子邮件 A/B 测试示例变体 A 的屏幕截图

变体 A:居中对齐文本

Hubspot 电子邮件 A/B 测试示例变体 B 的屏幕截图

变体 B:左对齐文本

结果

实验得出了一些意想不到的结果。与他们的假设相反,左对齐邮件的效果实际上比居中邮件更差,整体点击量更少。事实上,只有不到25%的左对齐邮件变体的表现优于对照组。

HubSpot 的 A/B 测试电子邮件营销示例,为我们提供了宝贵的经验,让我们了解电子邮件营销的细微差别。虽然左对齐文本(这种格式通常可以提高长文本的可读性)似乎效果更好,但受众的偏好差异很大。这强调了持续测试哪怕是最小细节的重要性,而不是对用户偏好做出假设。 

10. Vestiaire Collective:TikTok 上的潮流引领者

在快节奏的时尚和社交媒体世界中,保持领先地位不仅仅是一个目标,更是必需。二手奢侈时尚平台Vestiaire Collective面临着在 TikTok 上推广其全新直购功能的同时,如何抓住难以捉摸的 Z 世代群体的挑战。他们的方法是什么?巧妙地将网红的创造力与数据驱动的决策相结合。

问题

Vestiaire 的目标是扩大其在 TikTok 上的品牌影响力,并吸引 Z 世代消费者——这一群体崇尚真实性和新鲜内容。该品牌需要确保与网红的合作不仅富有创意,而且能够有效契合其提升品牌知名度和推动应用安装量的业务目标。

解决方案

为了解决这个问题,Vestiaire 的网红营销机构精心策划了一场 A/B 测试活动,确保不会限制创意合作伙伴的创作风格。他们招募了八位网红,赋予他们广泛的创作自由,让他们创作各种 TikTok 帖子,每篇帖子都嵌入了与 Vestiaire 目标相符的特定行动号召 (CTA)。内容风格多样,为活动提供了丰富的创意视角。

Vestiaire Collective 的 TikTok 视频 A/B 测试示例截图

影响者创作自由的一个例子

初始内容创作完成后,A/B 测试的真正魔力便显现出来了。该机构分析了这些帖子的效果指标,以确定哪些内容真正引起了受众的共鸣。之后,效果最佳的内容会通过定向付费广告进行推广,从而提升覆盖面和参与度。

结果

结果简直令人惊叹。Vestiaire 战略性地运用 A/B 测试,带来了超过 4,000 个新的应用安装,并将单次安装成本降低了一半,这显示出其在 Instagram 和 YouTube 上的效果指标显著提升。 

Vestiaire 的成功故事有力地证明了将 A/B 测试融入网红营销策略的影响力。它表明,赋予创作自由,并结合系统性的内容绩效评估,能够在参与度和成本效益方面取得显著成果。 

如何进行 A/B 测试 

既然您已经了解了 A/B 测试在帮助您实现营销目标方面的巨大作用,您可能已经迫不及待地想对自己的落地页进行 A/B 测试了。以下是如何开始:

创建一个假设

从假设入手,你不仅能弄清楚想要测试什么,还能知道如何判断测试是否成功。确保你的假设符合以下要求:

专注于单一问题:准确指出您想要解决或了解的问题。
可测试:在测试结束时您应该能够证明或反驳它。
影响驱动:旨在实现一些可以显著改变结果的事情,例如提高转化率或降低跳出率。

使用可靠的“如果,那么”结构来构建你的假设。例如,“如果我们使用更生动的CTA按钮,那么我们的点击率就会提高。”

设置变量:控制和治疗

确定您正在测试的内容:

控制变量:这是你当前的“冠军”,也就是你的落地页的原始版本。(这可以是 A/B 测试中的“A”)。
治疗变量:引入挑战者(“B”),这是根据您的假设对页面进行调整的版本。

决定测试什么

A/B 测试的魅力在于它的多功能性。你几乎可以测试任何可能影响用户行为的因素。一些常见的元素包括:

标题或正文的副本
号召性用语 (CTA) 按钮设计或措辞
图像或视频内容
页面的整体布局和导航

查看我们的A/B 测试电子书,获取可在目标网页上测试的 20 个元素的便捷列表。

统计显著性的测量

确保你的结果并非偶然。理解你的研究结果的统计显著性至关重要。这个术语的含义是确保你的对照组和实验组之间的性能变化很可能是由于你的调整,而不是随机因素造成的。

选择你的目标

你的最终目标是什么?增加网站流量、降低跳出率、提高参与度?你的目标应该与你的假设相符,并且清晰可衡量。这种专注不仅能指导你的实验,还能帮助你理解结果。

正确划分受众

通常,最好将流量平均且随机地分配给页面的控制版本和处理版本。这样,每个版本都有机会在类似的条件下证明自己的价值。

是的,有些情况下你可能不想均分流量,比如你正在测试一些有风险的项目,只想暴露少量流量。但总的来说,均分流量是最好的选择。

分析并采取行动

测试结束后,深入研究数据。你的实验方案是否优于对照组?还是完全不行?数据不仅会告诉你谁赢了,还会告诉你赢了多少。基于这些洞察,你可以决定是采用新版本、进行更多测试,还是重新开始。

请记住,即使是“失败”的测试也能提供宝贵的见解,哪怕只是告诉你哪些事情不应该做。正如托马斯·爱迪生所说:“我没有失败,我只是发现了一万种行不通的方法。”(不过,是否要做一万次 A/B 测试,完全取决于你自己……)

使用 Unbounce 进行 A/B 测试的分步指南

Unbounce落地页构建器不仅是创建落地页的最佳工具之一,它还内置了 A/B 测试功能。想要了解这款A/B 测试工具的完整使用指南,您可以浏览“如何进行 A/B 测试”页面,或者继续阅读快速了解一下:

1.登录 Unbounce 构建器后,选择您想要测试的页面。 

2. 进入“页面概览”屏幕并查找名为“页面流量模式”的部分。

3.选择A/B测试模式

动画 GIF 展示如何导航到 Unbounce 构建器的 A/B 测试部分
订阅
不要错过最新的行业趋势、最佳实践以及营销活动的内部秘诀
辅导通讯与媒体数字营销机构电子商务金融服务与保险其他房地产SaaS 和技术学生旅行
 

4. 现在是时候创建您想要测试的变体了。您可以复制现有页面开始,也可以从头创建一个全新的页面。

5. 准备好变体后,设置变体权重(即每个变体的流量分配比例)。最常见的分配比例是 50/50,但如果您需要测试三个变体,也可以使用 33/33/34 之类的比例。

 

6. 如果任何较新的变体(“挑战者”)表现优于原有的变体(“冠军”),则可以轻松将挑战者升级为新的冠军。只需选择概览设置右侧的“…”菜单,然后选择“升级为冠军”即可。

 

通过这些简单的步骤,您可以测试您的目标网页,稳步改进,并更接近您的转化优化目标。

UX 「二月」 AI设计观察

鹤鹤

MEUX 「二月」 AI设计观察
 
 
 
【1】OpenAI首个智能体Operator大测评
【2】腾讯落子,AI后手入场
【3】字节OmniHuman-1人体动画生成新突破
【4】2025年最佳项目管理工具对比
【5】DeepSeek爆火,巨头开始反击
【6】微软SWE Agent首曝光
【7】山姆·奥特曼提出AI经济学观察
【8】华为小艺版DeepSeek和R1有何差别
【9】AI霸屏第二年,硅谷大佬们Pick哪些产品
【10】OpenAI发布全新VI设计指南
 
 
 
1.OpenAI首个智能体Operator大测评
 
近期发布的Operator无疑是AI圈最大的亮点,这款AI智能体能够自动处理一系列任务,像是演唱会购票、家政服务预订、AI新闻查找等。演唱会抢票终于不用自己蹲守了,公司订餐也可以直接「无脑托管」,这就是OpenAI发布的Operator。
 
MEUX 「二月」 AI设计观察
 
 
 
 
2.腾讯落子,AI后手入场
 
今年初,腾讯AI助手应用“元宝”已经完成了组织调整,按腾讯官方分类,“混元”系列包括混元大模型与元宝、元器。元宝对标豆包,元器对标扣子。元宝从技术部门的剥离可以视为从技术到重视产品体验的转变。沿着相同的逻辑,元器大概率也要被归于CSIG。面向To C,它可以是一款独立的Agent应用开发产品;面向To B,也能以“大模型+Agent”的形式落地企业场景。
 
MEUX 「二月」 AI设计观察
 
 
 
 
3.字节OmniHuman-1人体动画生成新突破
 
与传统的深度伪造技术不同,OmniHuman-1不仅仅局限于人脸替换,而是能够完整地动画化整个身躯,包括自然的手势、姿态及与物体的互动。无论是一个政客在发表演讲、一个历史人物被复活,还是一个虚拟角色在唱歌,该模型正在促使我们重新思考视频创作的方式。
 
MEUX 「二月」 AI设计观察
 
 
 
 
4.2025年最佳项目管理工具对比
 
2025年市面上有哪些值得留意的项目管理工具呢?它们分别适合哪种场景?有什么功能,优缺点又是什么?文章对2025年最佳项目管理工具—即时设计、Trello、Monday、Jira、ClickUp、Wrike和Basecamp进行了详细对比,帮你找到最合适你的项目管理办法。
 
MEUX 「二月」 AI设计观察
 
 
 
 
5.DeepSeek爆火,巨头开始反击
 
这个春节,几乎所有人都被“国产之光”DeepSeek的魔力征服了。用高超的算法、开源技术路线、极低的成本,DeepSeek打破了科技巨头用算力构建起的高墙,也让AI平民化成为现实。此刻,DeepSeek的冲击波效应还在继续,上线仅25天,DeepSeek便狂揽4000万次下载,超越了ChatGPT的首月下载量。到1月最后一周,DeepSeek在短短7天内便新增了1亿用户,累计用户达1.25亿。
 
MEUX 「二月」 AI设计观察
 
 
 
 
6.微软SWE Agent首曝光
 
纳德拉官宣,GitHub Copilot将all-in智能体,微软自主的SWE智能体首次亮相。GitHub现任CEO Thomas Dohmke表示,自主SWE智能体(项目代号Padawan)也将融入GitHub用户体验,不过要等到今年晚些时候发布,它可以将GitHub Copilot体验从搭档提升到人类程序员水平。
 
MEUX 「二月」 AI设计观察
 
 
 
 
7.山姆·奥特曼提出AI经济学观察
 
如今,一些接近AGI的系统正逐渐浮现,因此,理解当前所处的时代至关重要。AGI是一个定义模糊的概念,但通常指的是能够在多个领域以人类水平解决复杂问题的系统。人类天生就是工具的创造者,拥有强烈的探索和创新欲望,而正是这种驱动力推动世界不断向前发展。每一代人都站在前人的肩膀上,发明出更强大的工具—从电力、晶体管、计算机、互联网,到即将到来的AGI。我们对AI的理解正在快速演进,而AI的经济影响力也逐步显现。 
 
MEUX 「二月」 AI设计观察
 
 
 
 
8.华为小艺版DeepSeek和R1有何差别
 
DeepSeek这匹来自中国的AI黑马,以极低的训练成本实现了媲美OpenAI o1的性能,凭借强大的中文能力、堪称赛博觉醒的顿悟时刻和秉持开源精神,迅速搅动了以ChatGPT为首的AI圈。随着腾讯云、秘塔AI、阿里云、百度智能云和国家超算互联网平台纷纷宣布接入DeepSeek,手机作为最常用的个人智能终端,也迎来了它的身影。
 
MEUX 「二月」 AI设计观察
 
 
 
 
9.AI霸屏第二年,硅谷大佬们Pick哪些产品
 
想知晓前沿AI产品趋势?看A16z这份榜单就够!24位业内行家每人精挑3款心头好,从中能洞察诸多关键信息,AI搜索Perplexity成热门、AI工具百花齐放、AI视频势头正猛。各领域更是亮点不断,从起步探索的工具类,到大厂扎堆的ChatBot,再到风格各异的图像、视频产品,为你速览AI创新风向。
 
MEUX 「二月」 AI设计观察
 
 
 
 
10.OpenAI发布全新VI设计指南
 
2025年伊始,OpenAI发布了全新的品牌设计指南,目的是为品牌提供明确的设计指导,包括logo的使用、排版布局、商业语言的应用等方面,为产品的营销和沟通工作提供所需的设计资产和应用规范。
 
MEUX 「二月」 AI设计观察


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTY1MjA0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

银行 APP 设计新探:细节告别交互困局

蓝蓝设计的小编

最近深度体验了多款银行 APP,发现优秀的 UI 交互设计真的能让使用体验直线飙升!今天就和大家分享那些让人惊艳的交互设计细节,原来银行软件也能这么 “懂人心”!

一、数据可视化:让金融数据会 “说话”

传统银行界面里,资产总览可能就是一串冷冰冰的数字,让人看完毫无波澜。但在一些采用先进交互设计的 APP 中,数据可视化彻底改变了这种局面。比如某银行 APP 的资产看板,运用动态折线图实时展示近 30 天的资金变动趋势,当收益上涨时,折线会以流畅的动画向上攀升,还搭配轻快的音效,直观又有趣;而当支出增多时,折线下滑的同时,图表区域会变成醒目的黄色预警色,提醒用户注意消费情况。

图片1.png 

再比如理财产品对比界面,不再是密密麻麻的文字介绍和参数表格。设计师将不同产品的风险等级、预期收益、投资周期等关键信息,转化为雷达图、柱状图结合的形式。用户只需轻轻滑动屏幕,就能 360 度旋转雷达图,全方位对比各产品的优劣势,这种可视化交互让复杂的理财选择变得一目了然,就像有个专属理财顾问在身边为你讲解。二、人性化交互流程:告别繁琐操作

过去在银行 APP 转账,可能要经历选择转账类型、输入卡号、填写金额、核对信息等多个步骤,流程冗长且容易出错。而经过精心设计的交互流程则大不相同。某头部银行 APP 采用了 “智能转账” 交互模式,当用户点击转账按钮,系统会自动识别用户最近的转账对象和金额,将其展示在快捷转账列表中,用户只需一键点击,就能快速完成转账操作。如果是给新用户转账,在输入卡号时,系统会实时校验卡号有效性,并通过颜色变化提示用户输入是否正确,避免因输错卡号导致转账失败的尴尬。

图片2.png 

在账户管理方面,下拉刷新的交互方式已经屡见不鲜,但有一款银行 APP 却玩出了新花样。当用户下拉刷新账户余额时,界面会出现一个可爱的小动画,比如一只小钱包 “咻” 地打开,金币 “哗啦” 掉落,同时余额数字以动态效果更新。这种充满趣味性的交互,让原本枯燥的刷新操作变得生动起来,给用户带来了愉悦的使用体验。

三、沉浸式用户体验:细节之处见真章

交互设计的魅力还体现在对用户情感的关注上。在一些银行 APP 的登录界面,除了常规的密码输入方式,还加入了指纹识别、面容 ID 等快捷登录方式,并且在用户选择这些方式时,会有柔和的光影效果和轻微的震动反馈,仿佛在和用户进行 “亲密互动”。当用户忘记密码时,找回密码的流程也不再是冷冰冰的提示,而是通过引导式的交互界面,一步一步带领用户完成身份验证和密码重置,整个过程就像在和一个贴心的客服人员对话。

图片3.png 

这些优秀的 UI 交互设计案例,不仅让银行 APP 变得更加易用、有趣,也真正实现了从 “功能导向” 到 “用户体验导向” 的转变。希望未来能看到更多银行在交互设计上发力,为我们带来更出色的使用体验!大家在使用银行 APP 时,有没有遇到过哪些让你印象深刻的交互设计呢?欢迎在评论区分享!

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

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

一个小弹窗引发的28个建议

涛涛

这套高颜值的质感弹窗设计方法,看了一定学会!

UI设计师是怎么做多维度竞品分析的?

涛涛

本文为设计师提供全流程指导,深入探讨多维度竞品分析的方法。文章分享了如何拆解多维度,以及6种实用的分析技巧。

AI创作工具的「可控性」与「用户体验」博弈

鹤鹤

这两年生成式ai爆发性增长并且重塑数字创作的工具生态。从文本生成、图像视频生成以及模型训练,可以说无法离开ai,ai的介入让创意生产变得前所未有的高效简单,但同时也带来了体验上的困境,例如我们在使用自动化生成便利的同时,还能保持对创作过程的深层控制?比如在进行文生图或者线稿转3D的流程中,我们如果要控制某个部分的设计表现,需要利用多个方法才能完成,仅仅通过提示词的修改并无法完成,这个矛盾在之前的SD等开源模型中非常明显;
AI创作工具的「可控性」与「用户体验」博弈
 
 
 
算法模型的开放让设计达到了无限的可能,但更多设计师却被迫在控制权和易用性之间做出了妥协,当重复一个流程无法生成满意的图象时,大多情况都是基于一个“不满意”的图像进行优化,我把这个理解为用户心理上的妥协;
AI创作工具的「可控性」与「用户体验」博弈
 
 
以节点式工作流工具ComfyUI为例,其通过可视化编程赋予用户对Stable Diffusion生成流程的精细控制权,允许自由组合模型、调节参数、插入预处理模块,成为专业创作者的首选工具。然而,这种高度自由的设计也带来了显著的认知负担:错综复杂的节点连线、晦涩的参数术语、缺乏引导的开放式画布,让0基础设计望而止步;数据显示,超过67%的新用户在首次使用ComfyUI时因“界面混乱”而放弃进一步探索(来源:ComfyUI社区调研)。这一现象揭示了生成式AI工具设计的核心矛盾——系统的灵活性与用户的心智模型之间如何实现平衡?
AI创作工具的「可控性」与「用户体验」博弈
 
 
一、核心问题与矛盾
1、设计师对“控制权”的需求本质
安全感需求:
用户希望理解生成过程(分布控制、seed数值、CFG),避免黑箱带来的不可预测性;
注:大多数AI工具(如Midjourney)像一台自动售货机——输入提示词,随机吐出一张图片。用户无法知晓AI为何生成一只三头六臂的猫,只能反复“抽卡”直到满意。
 
创造性需求:
通过精细化的控制实现独特的风格,例如分布提示,基于大模型训练出来的lora,不同lora模型融合后的混合模型,这些需要付出很大的学习成本和时间才能满足,我个人理解ai给设计师通往目标的过程中搭建了不同的道路,但设计师如果在没有导航的情况下要达到这个目标,中间可能会辗转反侧,也可能一条道路就能到达目的地;
AI创作工具的「可控性」与「用户体验」博弈
 
 
效率需求:
自动化设计(如MJ和国内其他一键生图的ai产品)可以降低设计的操作成本,但同时牺牲了可控性;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、comfyUI的设计矛盾
过度控制悖论:
ComfyUI试图打破黑箱,将AI拆解成可调节的“齿轮组”(如调节“采样器”改变画质、用“ControlNet”控制构图)。但当用户面对50多个参数和上百种节点时,反而因信息过载陷入“该调哪个参数?连错节点会爆炸吗?”的决策瘫痪。
AI创作工具的「可控性」与「用户体验」博弈
 
 
过高的配置要求:
comfyUI解决了MJ带来的黑箱效应,但同时也带来了物质上的门槛,设计师需要配备更高的配置或者使用第三方租用云电脑等才能运行,否则前者就会造成漫长的等待,后者则需要花费大量的财力,对于设计师而言反而是造成了时间上的负荷;
AI创作工具的「可控性」与「用户体验」博弈
 
 
功能维度:
节点系统支持无限组合,但缺乏对用户意图的主动理解,如自动推荐节点;
AI创作工具的「可控性」与「用户体验」博弈
 
 
认知维度:
参数暴露(如CFG Scale、Sampler)提供控制感,但引发“选择过载”实际使用过程中,如果是普通玩家,无法短时间内通过这些参数来控制结果,核心还是在于认知门槛过高;
AI创作工具的「可控性」与「用户体验」博弈
 
 
交互维度:
自由连接节点导致逻辑混乱(如错误连线无及时提示),增加调试成本。
AI创作工具的「可控性」与「用户体验」博弈
 
 
我把ControlNet的“负面条件”打乱连接到“正面clip文本框”上,而采样器的“负面条件”直接连接到“负面clip文本框”内,整个过程是不会出现任何报错提示,但是当运行调试的时候就会运行失败,提示ControlNet缺少负面条件,ControlNet(应用)缺少负面条件输出等问题,众所周知对于一些低配玩家,运行一次需要等很久,等到最后发现生产出来一个“报错”!!!
AI创作工具的「可控性」与「用户体验」博弈
 
 
二、对比分析:comfyUI和midjourney
AI创作工具的「可控性」与「用户体验」博弈
 
 
当设计师想生成“一只穿宇航服的柴犬”,Midjourney可能输出卡通风格或超现实照片,设计师只能通过追加提示词(如“3D、黏土”)逼近目标,不停的抽卡;
(实在不想用mj了,下面的图本地跑的,大概的意思一样就是不停的抽卡抽卡)
AI创作工具的「可控性」与「用户体验」博弈
在ComfyUI中,设计师可以强制指定:用FLUX模型生成基础图像,然后加载相关LoRA模型,在添加个视觉风格迁移的模型,添加宇航服,在添加个视觉风格模型,连接OpenPose节点调整柴犬姿势,最后用放大模型,放大画质;但我就想说:我只是想画只猫,为什么要弄这么复杂。。。
AI创作工具的「可控性」与「用户体验」博弈
 
 
关键结论:
ComfyUI的“高可控性”吸引专家设计师,但普通设计师或者0基础设计师因认知负荷大多放弃使用。Midjourney通过“限制控制权”降低门槛,但设计师可能因无法干预细节感到焦虑。
三、comfyui冲突点和机会点
为什么说这个呢,因为comfyui目前是趋势ai,核心的生成逻辑包括实际应用都已经大于mj了,所以接下来的内容也是围绕comfyui拆解的;
1、参数暴露vs认知负荷
问题:
ComfyUI将所有参数(如LoRA权重、VAE选择、采样器、各种模型加载器)暴露给用户,导致界面信息过载。
例如:
设计师需要同时调整“提示词权重”“采样器类型”“ControlNet强度”时,易混淆参数优先级,对于这个结果的影响,是采样器类型问题呢还是ControlNet的数值不对呢,最后我猜大多人过程都是一个个试一遍,最后哪个效果好用哪个;
思考点:
动态参数分组,根据生成的目标隐藏无关的参数,比如当输入完成“提示词”后,可以识别出输入的提示词类型,生成一个3d风格海报,那么基于这个提示词,就可以提前预判出跟3d风格海报相关的参数都可以隐藏;参数依赖的可视化,通过逻辑线的方式标记他们之间的关系,例如CFG与采样步数,通常来讲CFG数值越高生成的图越接近提示词,但是图像质量会下降,采样步数越高生成的图质量就越高,那么问题来了,当设计师调整CFG数值时,是不是可以标记或者提示设计师采样步数的变化,以此来达到最优解;
下方示例
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、自由连接vs逻辑错误
问题:
节点可任意连接,但缺乏逻辑校验目前comfyUI中只是告诉设计师如果两个节点本身没有前后关系的情况下不可以连接(没有节点对应的收入口)另一种情况是两个节点在一个工作流中都能起到作用,但是节点是多功能化的,连线的时候可以正常连接,最后运行的时候就会出现某某节点不匹配。
例如:
设计师错误连接ControlNet预处理器与VAE节点,导致生成失败且无报错提示。
思考点:
实时逻辑校验,在设计师连线时提示冲突(如“该节点仅接受潜空间输入”)。
工作流自检模式,一键检测缺失节点(如缺少“提示词编码器”时提醒用户)。
AI创作工具的「可控性」与「用户体验」博弈
 
 
四、设计师心理与工具的“错位战争”
生成式AI工具的设计矛盾,本质上是人类认知模式与技术逻辑的冲突。以ComfyUI为例,其设计暴露了以下深层问题:
1、“技术透明化”的认知陷阱
ComfyUI将AI生成过程拆解为节点,试图通过“透明化”提升用户信任,但普通人并不需要(也无法理解)技术细节;不知道你们有没有,当我第一次看到“VAE解码器”“潜在空间降噪”等节点时,大脑会触发“意义建构焦虑”——“这些词和我想要的图片有什么关系?”
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、控制权的“虚假承诺”
ComfyUI看似赋予用户完全控制权,但多数参数的实际影响难以预测(如CFG值从7到8可能导致画风突变)这类似于让设计师驾驶一辆方向盘与轮胎无机械连接的汽车,转动方向盘时,轮胎可能随机偏转。设计师误以为“控制节点=控制结果”,实则是“在黑暗中调整未知旋钮”;
AI创作工具的「可控性」与「用户体验」博弈
 
 
3. 技术极客与大众的“认知断层”
开源社区的理想:“人人可 Hack”的民主化工具;现实问题是开发者设计节点时默认用户理解SD原理(如Latent Space、扩散模型、euler_ancestralcai、dpmpp_2m),但普通用户只关心“如何让图片更逼真”;这种断层导致ComfyUI的文档充满技术术语,而非用户目标导向的指南(如“修复模糊人脸”对应哪些节点组合),这也是技术工具与用户体验的博弈;
AI创作工具的「可控性」与「用户体验」博弈
 
 
五、对于comfyUI的畅想
1、适配不同能力的设计师
专家模式:保留完整的节点和参数,让这类设计师自由编辑;
精简模式:隐藏底层参数,仅仅提供目标导向的选项;
自动化操作:根据提示词推荐采样器、cfg数值等组合,例如提示词是自然语言,那就匹配关于flux模型的专属采样器;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、智能节点推荐引擎
目标推荐:输入“生成赛博朋克城市”后,自动推荐“SDXL模型+ControlNet边缘检测+色调调整节点”;行为预测:分析历史工作流,推荐高频使用的节点组合(如“LoRA模型+分层提示词”);
3、可解释性反馈面板
参数与结果的实时性:实时显示调整CFG值对图像细节、对比度的量化影响。节点的贡献度分析:生成后标记关键节点(如“ControlNet贡献度72%”),帮助用户理解流程。
六、总结:控制的幻觉与设计的谦卑
ComfyUI揭示了生成式AI时代的核心矛盾——技术的能力越强大,人类越需要承认自身认知的局限性。工具设计不应追求“上帝模式”,而需寻找“刚刚好的控制权”给用户“扳手”而非“零件库”:提供高层级调节维度(如“画面精细度”“风格偏离度”),隐藏底层技术参数,并不是每个设计师都是工程师的角色;大多设计师的角色只是维修工;拥抱“不完美的人性”:允许用户保留“我不知道为什么要调这个,但调了就有用”的玄学操作,而非强迫所有人成为AI工程师。重新定义“控制”:从“绝对掌控流程”转向“有效影响结果”,让AI的不可预测性成为创意催化剂而非焦虑来源。


作者:爱吃猫的鱼___
链接:https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

关于设计组件库,一些新思考

鹤鹤

关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
 


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

界面设计中【浮标】的思考与探索

鹤鹤

界面设计中【浮标】的思考与探索
结合设计原则与“智能伴学助手”项目应用浮标实践展开
-------------
 
目录:
背景
浮标的本质与价值
浮标设计
一、功能定位与场景适配
二、视觉与交互设计
三、技术实现优化
四、无障碍与伦理考量
五、创新方向探索
结语
 
-------------
背景:
在教育类移动端中接入了大模型AI智能应用,为保证这个应用入口可长期保持并随时可见,提高使用率,为用户提供便利。笔者通过“智能伴学助手”浮标实践应用,对后续制作浮标在界面设计中思考与探索。
 
浮标的本质与价值
1)空间维度突破  
作为界面中的「第三层空间」,浮标通过视觉悬浮感打破平面限制(如iOS 的3D视差效果); 在信息过载时代,提供「随时在场」的核心功能入口(如美团外卖的悬浮购物车,左右动效:进缩)。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
 
2) 认知心理学应用
利用格式塔原则中的「闭合性」设计半透明遮罩,暗示可交互区域;通过菲茨定律优化点击热区,圆形浮标直径建议≥48dp(Android 规范)。
 
 ---------------------
浮标设计
就项目中“智能伴学助手”为例,一个教育类的应用入口,结合功能定位、用户体验与技术实现浮标在界面中的作用。通常浮标是一个悬浮的按钮或图标,用于快速访问某些功能,从多个维度探索其在移动端界面中的合理呈现方式:
 
 
一、功能定位与场景适配
 
浮标的设计规范:
比如尺寸、颜色、位置。通用的设计规范,教学工具类App的界面设计,可能涉及图标和布局。
1)尺寸与网格系统
 ◇ 图标尺寸需适配不同屏幕分辨率,常见规范包括128x128px、96x96px、64x64px等,需根据界面层级选择合适尺寸。
◇ 尺寸一般用1:1比较好或者成倍数,先做大再导出所需要的不同大小比例。
◇ 使用网格系统(如微软Fluent的24px基础网格)确保视觉一致性,留出安全边距(如2px内边距)避免元素溢出。
2)造型与风格
◇ 遵循简约易懂原则,优先采用象形图或表意符号增强识别性。
◇ 保持系列图标风格统一,包括线条粗细(建议1.5px)、圆角弧度(微软Fluent定义大/中/小三级圆角)及视觉平衡。
3)适配性
◇ 导出格式需与开发协作,推荐PNG序列或SVGA文件以兼顾清晰度与性能。
◇自适应考虑不同平台的显示情况。
 
核心功能聚合:
语言学习工具类界面将高频功能(如首页入口、作业评论、学习提问)通过浮标动态整合,支持长按展开二级菜单或滑动切换功能模式,吸附于屏幕边缘。
根据学习阶段智能变化:
课前(预习):浮标展示课程试学入口或学习目标设定;
课中(口语输出):提供实时笔记悬浮窗或标记工具;
课后(点评):将课后作业及巩固语言习得情况的评价和自我精进。
(外语语言口语学习一般模式:盲听,然后根据自己的话复述,理解语言并有效使用语言)
  
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
 
二、视觉与交互设计
 
以”智能伴学助手“为例,浮标主色是蓝色,企业主题色也是蓝色,而”智能伴学助手“浮标使用背景一般也以蓝色为主,App主题色也是蓝色,多场景使用适配蓝色背景的静态浮标,又要使浮标可以在背景中脱颖而出,在其过程中尝试蓝+蓝搭配的存在局限性,本身蓝色系较统一。
在同为蓝色后,产生不同「空间」,通过将界面元素分层(如前景图标与背景图像),营造深度感。在浮标进行描边隔层,现在很多表情包就是这种模式操作。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
 
思考与探索:
浮标需要特色,用户在使用过程中视觉明显,提高交互。
浮标既显眼又不干扰学习,所以需要平衡可见性和沉浸感。
浮标可以移动,用户可以根据需要调整位置,避免遮挡内容。
现浮标是静态的,如何尝试动态浮标,与用户有更好的交互体验,参与感。
颜色和动效方面,冷色调营造学习氛围,浮标可以用品牌色,如蓝色或绿色,加上微动效吸引注意。样式用了蓝色圆形浮标,可能适合教育类应用,赋予科技感设计。
不同状态或者不同页面下的浮标呈现方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
 
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
 
思考与探索:
配色方案
1)主色选择
明亮色系:如红色、橙色、黄色等,能快速吸引用户注意,适用于促销活动入口。
品牌色融合:在特殊场景中融入品牌LOGO或主色,代表企业形象和IP,增强品牌认知。
2)色彩心理学应用
蓝色:传递信任感,适合金融或工具类应用。
黑金/黑黄组合:营造神秘或高端感,常见于娱乐或奢侈品领域。
紫色+粉红:适用于美容、女性向产品,传递温柔与创意。
控制色彩平衡,用户色彩感官可适应。
3)对比与背景
使用中性色(如米色、白色)作为背景,提升信息可读性。
避免冲突色搭配(如蓝色用于食品类浮标易抑制食欲)。
 
思考与探索:
个性化推荐和交互设计,可以结合AI预测用户行为,动态调整浮标的出现时机,比如在需要提醒作业时显示。主色选用品牌色(如教育蓝/科技紫)强化识别性。
 
如何设计浮标会更好?
如何设计浮标会更好?
 
 
创新交互模式思考探索:
1)压力感知交互  
▸安卓压感屏实现「轻按预览/重按触发」分层交互(如华为悬浮球压感菜单);配合触觉反馈(Haptic Engine)增强操作确认感。
2)动态语义变形
-生物拟态动画:
▸呼吸感悬浮:模拟水母游动节奏(振幅0.5-1.2px,频率0.8Hz)  ;
▸点击时触发粒子扩散动画(模拟知识传递意象);
▸拖拽时产生弹性形变(阻尼系数0.6-0.8),边缘碰撞后回弹。
- 根据场景智能改变形态:  
▸ 阅读类App中展开为「书签浮标+进度条」复合控件  ;
▸ 音乐播放器浮标可拉伸成波形可视化界面。
 通过多模态反馈,听觉,视觉,触觉多种情感交互。
3) 空间布局策略:
▸默认位置:置于屏幕右下侧(符合右手持机习惯),预留10%边距防止误触;
▸智能避让:通过内容识别算法,在视频播放或文本输入时自动偏移避开核心内容区域;
▸AR场景中的空间投影浮标(如IKEA Place家具预览浮窗)。
位置多为屏幕右下侧
位置多为屏幕右下侧
 
 三、技术实现优化
 
1)跨端一致性
  •  
    使用React等框架封装可复用浮标组件,通过响应式设计适配不同设备尺寸(如折叠屏展开态需重新计算定位锚点);
  •  
    采用SVGA格式实现高性能动效,控制帧率在30fps以内以降低功耗。
2)AI驱动个性化
  •  
     基于LSTM模型预测用户行为: 检测到长时间未操作时,浮标缩小并展示激励标语; 识别到错题高峰时段,主动弹出知识点讲解入口;
  •  
     支持语音指令交互(如“浮标移到左上角”)。
 
四、无障碍与伦理考量
 
1)包容性设计
◇为色弱用户提供高对比度模式(浮标轮廓增加动态描边,对比度≥4.5:1);
◇支持头部追踪控制浮标移动(iOS Switch Control技术适配)。
2)防沉迷机制(适合未成年类App)
◇连续使用1小时后,浮标渐变灰色并触发休息提醒;
◇家长端可远程设置浮标功能禁用时段。(未成年学习类工具考虑优化)
 
五、创新方向探索
 
1)多模态融合:
◇AR场景中浮标投射为3D虚拟助手,支持手势交互与空间定位;
◇结合眼动追踪技术,实现注视区域自动呼出上下文菜单。
2)情感化表达:
◇根据学习成就解锁浮标皮肤(如连续打卡7天变为奖杯形态);
◇错误率过高时,浮标呈现“鼓励模式”(配色变暖+微震动反馈)。
学习类智能伴学助手的浮标既能作为高效的功能枢纽,又可成为情感化学习伴侣。实际落地时建议结合A/B测试持续优化,例如对比分析「固定浮标」与「场景自适应浮标」的点击转化率差异。
 
----------------
 
结语:
浮标不应仅是功能载体,更应成为:  
- 空间叙事者:通过动态变化讲述产品故事;
- 情感连接器:建立用户与数字世界的温度触点;
- 场景预言家:预判需求并提供恰到好处的服务。
 
设计师需在「显性价值」与「隐形干扰」间找到精妙平衡,让浮标成为提升体验的优雅解决方案而非视觉负担。未来可探索脑机接口的意念控制浮标、量子动画渲染等突破性方向。
技术实现上,探究代码示例展示了如何控制浮标的移动,确保不超出屏幕,这可以作为技术参考应用实际案例中。同时,性能优化方面,使用SVGA格式或减少帧数,可能对动效设计有帮助。
浮标设计需要结合功能定位、用户行为、视觉设计、交互体验和技术实现,可多进行参考不同案例,搜索现有项目,对比借鉴然后对新型B端界面有所创新,确保既实用又不干扰用户。
还可以利用Ai创新思维,设计师可以更快速、高效地生成多种设计方案,结合项目开发满足消费者对个性化、时尚化的需求。
 


作者:啊海包船打鱼
链接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

日历

链接

个人资料

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

存档