敏感信息怎么展示？掩码、查看与复制设计

敏感信息展示要分别定义“默认看见什么”“怎样获得完整值”“复制会得到什么”。客服详情页可先显示识别所需的局部信息，用户主动查看且请求获准后再呈现明文；离开当前客户时恢复掩码。无权限、读取失败、字段为空应有不同反馈，不能都显示一串星号。掩码只是展示方式，实际读取权限仍需服务端判断。

以售后客服核对收货信息为例：列表里只需要识别客户，处理补寄时才需要完整联系方式。下面使用演示客户 A、测试号码“000-0000-0024”和虚构地址“样本城松林路12号”，不承载真实个人资料。设计时可先利用Pixso 的界面组件与协作功能摆出字段的各个状态，再讨论每个动作究竟开放了哪些信息。

先问客服要核对什么，再决定露出多少

客户说“我的号码尾号是0024”，客服只需核对尾号；客户要求补寄，处理人可能需要完整电话和街道地址。这两个任务不必共享同一种默认显示。列表保留姓名掩码与号码尾号，详情页增加按需查看入口，能够把识别和使用联系信息分开。

掩码规则应按字段确定。号码可保留必要的尾部字符；地址可保留用于判断服务区域的信息，隐藏门牌等细节。若连城市信息也不应向该角色开放，就不应照抄这一例子。星号数量也不能被随意当作实际字符长度：设计文档要说明它是固定占位还是按原值长度替换，避免用户据此判断输入是否缺字。

不要只看单个字段。姓氏、手机号尾号和详细区域拼在同一张卡片上，可能已经比任务所需信息更多。设计评审可把整张客户卡片读一遍，逐项说明保留这些信息的用途；没有用途的默认展示可以删除。

为一个字段准备六种可分辨的状态

无权限和读取失败不同：前者反复点重试通常没有意义，后者可以恢复。同样，“未填写”不是被隐藏的秘密。若空字段也显示“****”，客服会不断点击查看，误以为系统有完整资料却不愿展示。

按钮应紧靠对应字段。多个号码并排时，用“查看联系电话”“查看备用电话”这样的名称区分；不要在卡片角落放一个没有范围说明的眼睛图标，让用户猜测它会打开一个字段还是整页信息。

明文变长后，优先让字段区域合理换行，保留字段标签和操作位置。不能让完整地址覆盖复制按钮，也不能让布局剧烈跳动到其他客户行。对号码、编号等需要逐字核对的内容，截断省略号会削弱查看价值，可为完整内容预留专门区域。

复制按钮的名字，要说清剪贴板里是什么

有三种可选设计：复制当前显示内容、获准后复制完整值、只允许查看不提供复制。它们都需要业务规则支持，但不能在同一个按钮里悄悄切换。本例采用“只有完整值可见且有复制权限时，显示复制完整号码”的规则；默认掩码旁不放容易被误解的复制图标。

如果业务确实允许复制掩码，按钮应写“复制掩码号码”，成功反馈也写“已复制掩码号码”。否则客服把带星号的号码贴进联系工具，才发现无法使用。相反，如果掩码旁的“复制”实际拿到了完整值，界面就隐瞒了这次操作的影响。

复制完整值前需要额外授权时，让按钮直接表达该动作，例如“申请复制完整号码”，并解释必要的业务步骤。不要先提示“已复制”，随后再弹权限错误；只有写入剪贴板成功后才显示成功反馈。复制失败可以说明“未复制，请重试”，不能把已经展示的号码一并清空。

隐藏按钮只能改变本页面的展示。用户已经复制到其他应用的内容，不会因为眼睛图标恢复关闭而被收回。因此，不要给“隐藏”附上“已清除所有副本”的文案，也不要把自动恢复掩码宣传成防止截屏或外传的保证。

切换客户时，不沿用上一个人的明文状态

本例采用字段级查看：查看客户 A 的号码，不同时打开他的地址，也不把所有列表行都切为明文。切换客户、离开详情页或退出当前工作区后，重新进入时从掩码开始。若业务另外规定了明文展示时长，应由真实规则提供期限，并在快到期时给出可理解的反馈，不凭设计稿编一个通用倒计时。

一种常见竞态是：客服点击查看 A 的号码后立即打开 B，A 的读取结果稍后才返回。新页面不能把这个值写进 B 的号码栏。原型可以用“正在读取 A → 切换 B → B 保持掩码”的三个画面说明预期，交付时注明响应必须对应当前客户和当前字段。

权限在页面打开后可能变化。业务返回“权限已变更”时，界面应恢复适当的隐藏状态，说明新的限制，并终止失效操作；不能继续用先前的权限展示一个永远有效的复制按钮。OWASP 授权建议要求在每次请求时验证权限。对设计交付而言，需要把权限拒绝作为真实状态画出，前端视觉隐藏不能承担服务端授权的职责。

眼睛图标要同时说明动作与状态

可见文字“查看完整号码”通常比单独图标清楚。确需使用图标时，也要给辅助技术提供能识别字段的名称，并让键盘可以到达和触发按钮。不要把完整敏感值放进隐藏按钮的名称，导致画面仍是掩码，屏幕阅读器却读出了明文。

“查看号码／隐藏号码”可按普通动作按钮设计，名称随下一步动作变化。另一种方案是固定名称的切换按钮，以状态表达是否开启。W3C 按钮模式区分这两种用法：使用 aria-pressed 的切换按钮应保持名称稳定，不能同时随意改名又让状态含义反转。

触发查看后，焦点通常保留在查看按钮上，新增值在同一字段区域呈现。失败提示要关联到当前字段，别只在屏幕远端短暂闪过。针对辅助技术的提示可说“联系电话已显示”或“读取失败”，不必把完整号码再重复播报一遍。

把最容易串值的两张详情卡放在一起评审

在 Pixso 中，可以把“联系字段”建成一组组件状态：默认掩码、读取中、明文、无权限、读取失败和未填写。画布上同时放置客户 A 和客户 B 的详情卡片，用连线演示从 A 的明文状态切到 B 后恢复掩码。再补一张未填写资料的卡片，确认用户不会把缺失信息误认成被隐藏。

让一位同事完成“核对尾号、查看号码、复制号码、切换客户”四个连续动作。观察的重点是他是否知道每次复制得到的内容，以及查看一个字段后有没有误以为其他字段也已获准。随后把角色切成“仅可查看掩码”，检验他能否区分权限限制与加载错误。

另一轮只使用键盘与文字说明走页面，逐项核对按钮名称、焦点位置和状态提示。最后再演示一个延迟返回的 A 字段请求，确认 B 的卡片不会短暂闪出 A 的信息。可打开 Pixso 制作这组客户详情状态，把这些观察结果直接标在字段组件旁，再交给开发落实数据请求与权限判断。