Affordance 与 Signifier:视觉提示如何让交互更直观
本文探讨 Affordance 与 Signifier 在产品设计中的作用,并给出案例与 PM 实践建议。
在产品设计的海洋里,affordance 与 signifier 这两位老友往往被混为一谈,却各自扮演着不可或缺的角色。Affordance,是指界面元素本身所暗示的可执行动作;而 Signifier 则是用视觉或文本等方式把这种可能性显现出来。没有 affordance,元素可能被忽视;没有 signifier,用户会对动作产生误判。
从心理学角度看,用户在交互前已经构建好了一个 mental model,试图匹配界面给出的信号。若 signifier 不够清晰,模型匹配失败,导致误操作或放弃。Nielsen Norman Group 在 2018 年的研究显示,86% 的用户不会主动寻找隐藏的按钮;他们只会按下能立即看到效果的区域。
以 iOS 的主屏幕为例。按键的圆角、阴影、微妙的光泽……这些都是 affordance 的细节;而图标的颜色、边框以及抖动动画,都是 signifier 的表现。每一次轻点,系统都会返回 100 ms 的 haptic feedback,告诉用户动作已被接收。正是这套组合,让用户在 2 秒内就能完成搜索、拨号等核心任务。
然而,Google Drive 的拖拽功能在早期版本就频出错误。文件图标边缘没有明显的拖拽手势,signifier 过于模糊。用户误以为单击即可打开文件,拖拽被误认为是重新命名。Google 通过在文件图标上添加三条竖线,并在 hover 时放大图标,显著提升了任务完成率——从 32% 提升到 78%(Google Design 2020 统计)。
Dropbox 在 2021 年的 redesign 里更是一次 signifier 的革命。原先的文件夹图标与文件图标几乎一致,导致用户在多层文件夹中容易误点。设计团队引入了颜色编码、微动画与“+”号悬浮提示,直观告诉用户是创建还是移动。上线后,Dropbox 报告说新手注册后 5 分钟内完成首次上传的成功率从 42% 提升到 67%(Dropbox Quarterly Report 2021)。
作为产品经理,你该如何把握 affordance 与 signifier 的平衡?先做一次用户旅程映射,识别每个交互点的 mental model;再利用原型测试验证 signifier 的有效性;最后,在迭代中持续收集用户反馈。记住,视觉提示是门槛,心理模型是通道,二者缺一,用户就会在交互的“迷宫”里迷失。
当你看到一个按钮,点击后没有任何反馈,你是否会怀疑它真的能工作?把这种情绪转化为改进的动力吧——每一次失败的交互,都是一次重新设计 affordance 与 signifier 的机会。