用户研究 | 可点击UI背后的心理学

2025-8-4    杰睿 用户研究

 

你有没有过这样的经历:浏览网站时,甚至没有完全集中注意力,突然之间,大脑还没来得及反应,你就点击了某个内容?这并非巧合。这是设计心理学在引导你点击。

可点击的UI不仅仅是让按钮看起来像按钮。它关乎理解你的大脑如何响应视觉提示、层次结构和交互模式。如果你曾经好奇为什么有些UI让人上瘾,而有些却像个残酷的玩笑,那么这篇文章正适合你。

让我们深入研究可点击界面背后的心理学,了解设计师每天在不知不觉中打破或掌握的实际规律和原则。

1. 可供性:让它看起来可点击

将显示缩放图像
UI 设计中的可供性

在设计语言中,“可供性”指的是物体的外观如何暗示如何使用它。旋钮看起来可以旋转。按钮看起来可以按下。汉堡菜单看起来……就像隐藏了真正的内容。

重要性:用户不应该猜测什么是可交互的。它越像可以触摸、拖动或点击的东西,你的大脑就越会说:“没错,这就是一个东西。”

设计师是如何搞砸的:扁平化设计太过了。按钮开始看起来像普通的文字,突然之间没人知道该点击什么了。如果它看起来像个标签,但实际上是一个行动号召,那么你就陷入了可用性的“犯罪现场”。

改进:使用视觉提示;阴影、对比度、悬停状态,使其清晰易懂。出于对 UI 的热爱,除非你是为间谍设计,否则不要将链接隐藏在模糊的图标中。

2. 希克定律:选择太多=没有选择

将显示缩放图像
UI设计中的希克斯定律

希克定律说,你给某人的选择越多,他们做决定的时间就越长,甚至可能放弃整个选择。

重要性:想让用户点击那个实用的 CTA 按钮吗?别把它埋没在由 17 个同样醒目的按钮组成的菜单中。简化。引导。精简。

设计师是如何搞砸这一点的: “让我们给用户自由。”翻译过来就是:“让我们让他们恐慌。”

改进:提供清晰的选择。优先考虑重要事项。采用渐进式披露;现在显示较少,以后显示更多。

3. 菲茨定律:距离 + 尺寸 = 可点击性

将显示缩放图像
UI设计中的菲茨定律

菲茨定律的基本意思是,点击目标的时间取决于目标的大小和距离。简而言之:大按钮更容易点击,而且不需要人们横跨整个欧洲才能找到它们。

重要性:在巨型页面的右上角放置微小链接?恭喜,你成功创建了一款令人困惑的游戏的用户体验版本。

设计师们是如何搞砸这一点的:把“下一步”按钮放在离“后退”按钮12英里远的地方。或者把主要的行动号召 (CTA) 藏在页脚的某个地方,靠近版权符号。

改进:按钮要足够大,方便点击,尤其是在移动设备上。将相关操作分组。确保重要信息触手可及。

4.雅各布定律:使网站与其他网站相似

将显示缩放图像
雅各布定律在UI设计中的应用

雅各布·尼尔森定律提醒我们,用户期望你的网站能够像他们之前使用过的其他网站一样。熟悉并非偷懒的设计,而是良好的用户体验。

重要性:如果您的“添加到购物车”按钮形状像骆驼,人们就会跳转。

设计师是如何搞砸的:试图重新发明轮子。没错,你的团队想要与众不同,但用户不想每次访问网站都要学习一门新的 UI 语言。

改进:使用常见模式。只有当回报值得时才打破预期。你不是在设计艺术,而是在设计功能。

5.蔡加尼克效应:未完成的任务让我们烦恼

将显示缩放图像
UI设计中的蔡格尼克效应

人们对未完成的任务记忆比已完成的任务更深刻。这就是为什么如果你把衣服叠成一半,你会觉得很奇怪。

为什么重要:显示进度条、步骤或清单的用户界面可以帮助用户继续前进。“您已完成 80%”就像是激励用户投入的诱饵。

设计师是如何搞砸的:隐藏进度。不显示反馈。让用户猜测还剩多少。

使其变得更好:使用步骤、加载器、进度环以及任何可以告诉用户“嘿,你已经接近成功”的东西。

6. 冯·雷斯托夫效应:让它脱颖而出

将显示缩放图像
UI设计中的冯·雷斯托夫效应

人们会记住那些看起来与众不同的东西。清单上那个奇怪的项目?它就是那个能留下深刻印象的。

重要性:想让用户点击你的主要操作吗?让它在视觉上引人注目。颜色、大小、间距,都应该传达出“这就是重点”的信息。

设计师是如何搞砸的:把所有东西都做得大胆、明亮、庞大。如果所有东西都太吵闹,就什么也听不到了。

改进:选择一件事情来突出。利用颜色对比来突出重点。但要有所选择,只有重要的事情才能得到关注。

7. 峰终定律:人们记住两件事

将显示缩放图像
UI设计中的峰终定律

并非所有细节都会被记住。人们大多会回忆起体验的高潮以及它是如何结束的。

重要性:顺畅的结账流程很棒,但如果最终确认页面看起来像 2004 年的错误消息,那么用户就会记住它。

设计师是如何搞砸这一点的:虽然流程很顺畅,但最后却功亏一篑。或者在用户即将完成操作时引入了阻力。

让体验更佳:结尾要有力度。让最终的互动令人愉悦。一点动画、一条贴心的提示,甚至一个微妙的声音,都能留下美好的回忆。

认知负荷是真实存在的

如果你的用户界面感觉像数学考试,用户就会消失。保持简洁,消除不必要的摩擦,不要让短期记忆超负荷。

仅仅因为您可以在选项卡内的模式中添加下拉菜单并不意味着您应该这样做。

使用可以帮助您应用此

UI 中的心理学并非空谈。你可以将其融入到你的工作流程中。一个好的工具会很有帮助,尤其是如果你每天都在 Figma 上工作的话。

我一直在使用MadeinFigma,它是预先构建的组件和流程的集合,已经考虑了希克定律、冯·雷斯托夫定律,甚至是传统的逻辑。

将显示缩放图像
MadeinFigma.com 网站模型

这就像在设计时肩上扛着一位小心理学家,但没那么恐怖。

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

日历

链接

个人资料

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

存档