锁定/解锁按钮应展示当前状态还是可执行功能？

核心结论 #

带点击交互的锁定/解锁切换按钮，应该展示点击后可触发的动作，而非当前状态。你感觉到的反直觉问题是真实存在的，这是交互设计里非常典型的「状态提示和操作按钮逻辑混淆」的错误。

问题拆解 #

你最初的方案逻辑矛盾点非常明确：
用户对可点击图标按钮的默认心理预期是「看到什么图标，点击就会触发对应图标的行为」。如果字段处于锁定状态时你显示闭合的锁图标，用户第一反应是点这个按钮会执行锁定操作，但你实际绑定的是unlocking解锁逻辑，和用户预期完全相反，很容易造成误操作。

两种设计的适用场景要分清楚，不能混用：

• 如果是纯静态、无点击交互的状态标识，才适合展示当前状态：比如在不可编辑的字段旁放一个无点击效果的锁形图标，仅用来告知用户当前字段是锁定状态，不需要用户操作，这种场景下展示当前状态没有问题。
• 如果是可点击的切换操作按钮，就必须遵循「图标对应点击后结果」的逻辑，这也是全行业通用的设计规范，和大家熟悉的密码输入框「眼睛图标」逻辑完全一致：密码密文隐藏时显示睁眼图标，点击后切换为明文；密码明文显示时显示闭眼/划线眼睛图标，点击后切回密文，没有任何主流产品会把这个逻辑做反。

落地参考 #

你可以直接套用成熟的交互规则：

• 文本字段为锁定禁用状态时，按钮显示打开的锁（解锁）图标，用户一眼就能明白点这个按钮可以解锁字段、进入可编辑状态
• 文本字段为解锁可编辑状态时，按钮显示闭合的锁（锁定）图标，用户一眼就能明白点这个按钮可以锁定字段、禁止编辑

可选优化：如果担心新用户有理解成本，给按钮加hover提示即可，比如锁定图标hover时显示「锁定字段，禁止编辑」，解锁图标hover时显示「解锁字段，允许编辑」，几乎没有学习成本。

内容的提问来源于stack exchange，提问作者sexy_pikachu