ENS 在 2023 年 4 月进行了大量更新,本站 “教程” 和 “文档” 中的相关内容已经过时。 如需了解最新的使用说明或技术文档,请到 ENS 官方提供的 支持文档 进行查阅。

ENS 前端设计指南

ENS 是一个简化用户体验的工具。这里有一系列的使用指南和工具,将帮助你选择合适的设计并实现最佳的 ENS 用户体验。

何时显示 ENS 名称

在用户可能看到以太坊地址或内容哈希的每一个实际场景中,都可以换成 ENS 名称显示出来。
关于在 DApp 中向用户显示 ENS 名称,这里有两个典型用例:

  1. 用 ENS 名称替换以太坊地址:在供用户浏览和使用的 DApp 的前端界面中,只要是准备显示以太坊地址的位置,你都可以换成 ENS 名称来显示。
  2. 解析输入的内容:在那些原本需要输入以太坊地址的文本框里,你可以允许用户直接输入更为易读的 ENS 名称,而不必非要输入一长串十六进制地址。

除了这些用例,还要记得 ENS 公共解析器 支持将 ENS 名称指向 不同类型的资源(比如:在 IPFS 或 Swarm 上存储的内容,或是类似文本内容的任意数据)。因此,还会有一些其他的应用场景会让你想要在 DApp 中使用 ENS。例如,在面对复杂的 IPFS 或 Swarm 内容哈希时,可以使用 ENS 将哈希转换为可读的名称。在 DApp 中启用 ENS 一文可以帮你了解更多关于不同用例的信息。

1. 用 ENS 名称替换以太坊地址

只有当用户为其地址设置了一个 反向记录,并且反向记录(地址 > 名称)能够与 正向解析(名称 > 地址)完全匹配时,这个 ENS 名称(作为对应以太坊地址的替代)才可以被显示出来

因此,作为 DApp 开发者,首先应该确认用户是否已经为其地址设置了反向记录。而且,由于用户可以自由设置反向记录,即使不属于他的名称或是其他随机字符也可以设置成功,所以,你还应该确认这个反向解析出的名称也能通过正向解析得到原来的地址。请从 这里 和后面的 “其他指南和提示” 部分了解更多内容。

1.1 - 将以太坊地址换成 ENS 名称显示

仅显示名称和可视校验和的示例

当用 ENS 名称替换以太坊地址时,你应该考虑以下情况和实践经验:

添加一个可视校验和: 使用 ENS 名称时重要的一点就是得向用户指出,这里的名称是指可以关联以太坊地址或其他哈希的 ENS 名称,而不是指 http 链接。为此,建议将 ENS 名称与某种形式的可视校验和(比如地址的 标识、Blockies 或其他自定义算法表示)相关联。

可视校验和像身份识别一样 可以被欺骗 或模仿,所以它们不能算是一种安全机制。它们只是一个标识符,让用户知道这个名称只是以太坊地址的另一种表示

  • 设计一个缩略版的 ENS 名称: ENS 名称可以很长,除了不受字符限制之外,用户还可以创建无限数量的子名称以及子名称的子名称,所以可以考虑设计一个缩略版的 ENS 名称。如果显示了缩略版的名称,则应该提供查看完整名称的方法,例如在悬停时展开整个名称。
  • 不是所有的 ENS 名称都以 .eth 结尾: ENS 名称通常以 .eth 结尾。但是,ENS 系统目前已经实现了对 .xyz .luxe .kred .art .club 这几个顶级名称(TLD)的支持,未来还将支持更多的顶级名称。如果你考虑在缩略版的 ENS 名称中显示 TLD 部分,请注意这一点。

1.2 - 提供一个可以随时查看与 ENS 名称关联的以太坊地址的方法

点击名称后,会在弹出窗口中显示名称及其关联的地址

如果要显示 ENS 的完整名称或缩略版,你应该:

  • 始终为用户提供显示完整的以太坊地址的方法: 上面的示例演示了一个弹出选项。还有一个方法是使用提示信息,但是浮动或弹出窗口的方式相比提示信息更为合适,因为前者也具备后者能够实现的特点。
  • 提供一个可以同时查看 ENS 名称及其关联地址的的界面: 相比于弹出窗口只显示地址而隐藏名称的做法,两者同时显示的方式显然对用户更为友好。
  • 允许用户复制完整的以太坊地址: 允许用户通过复制按钮或点选的方式来复制完整地址,而且在这个过程中,显示 ENS 名称的提示信息应该始终保持可见,不会自动关闭。
  • 选择性地为用户提供自动在区块浏览器中打开以太坊地址的方法 ,比如在 Etherscan 浏览器打开(上面示例中的外部链接图标)。
  • 选择性地显示当前登录用户的余额数量。 研究表明,用户不但通过地址本身,还倾向于通过余额来识别自己的以太坊地址。这只适用于当前 “已登录” 的用户:只显示他们自己的余额,同时避免显示其他用户的余额。

1.3 - 同时显示 ENS 名称和以太坊地址

同时显示名称和地址界面的示例

有时你可能希望同时显示 ENS 名称和它解析到的以太坊地址。当遇到下列情况时,这种显示方式就会派上用场:

  • 显示当前连接的用户: 例如,用于标识用户时,可以同时显示 ENS 名称和缩略的以太坊地址。
  • 用户向文本框输入 ENS 名称: 有关内容会在下一节中讨论输入文本解析时进行更详细的描述。
  • 在其他高风险情况下: 当用户想要证实某个用户或地址是谁时,或者你注意到用户为了在弹出窗口中查看以太坊地址而持续点击 ENS 名称时,你就可以用同时显示名称和地址的方式代替只有名称的显示方式。

2. 输入文本解析

解析输入时,同时显示 ENS 名称和地址

在用户可以输入以太坊地址的文本框里也应该支持 ENS 名称的输入和解析,这些输入表明用户希望与另一个用户的以太坊地址或合约进行交互。

通过遵循以下准则,可以建立最好的用户体验:

  • 在解析 ENS 名称之前稍作等待: 等待用户输完最后的 TLD(比如 .eth 、.xyz 或 .luxe),或者是在用户停止输入后等待 0.2-1 秒的时间,然后再解析输入的名称(要避免出现 急于解析的问题)。
  • 不要用以太坊地址覆盖输入的字段: 应该在输入字段附近显示解析后的 ENS 名称。
  • 始终同时显示 ENS 名称和以太坊地址: 在成功实现该功能后再执行此操作,而且最好是根据准则 1.1 中的建议添加可视校验和。

其他指南和提示

如果反向记录和正向解析不能正确对应时该怎么办

如前所述,用户可以将 反向解析记录 设置为任何内容,甚至是另一个用户拥有的名称或者完全随机的字符串。这就是为什么在查询了写在反向记录中的名称之后,DApp 开发者还应该检查它是否匹配正向解析,因为正向解析标明了 ENS 名称指向的地址。
如果两者不匹配,就不能显示可读的名称,只能直接显示以太坊地址。 否则,用户可能会在你的 DApp 中冒充其他用户。
关于反向解析的章节中含有用于此类验证的 代码

关于用户名的显示

最为直接的方式是将用户的 ENS 名称作为用户名显示。为此,可以让用户在你的子名称下注册一个名称,或者使用反向解析查找用户的 ENS 名称。

缓存和更新 ENS 名称

如果你的 DApp 需要在 UI 界面中显示许多以太坊地址或 ENS 名称,你还可以考虑在解析(和验证)该名称后,或是用户在输入字段中添加该名称之后,将这个 ENS 名称缓存起来。

你的开放式 UI 可以在毫无风险的情况下安全地显示缓存中的名称,例如,用户只是在浏览,并且不需要根据显示的信息采取行动或做出决策,尤其是有风险的决策。
但是,在所有存在危险的情况下(如转移 ETH 、代币或其他值),或者当用户与另一个 ENS 名称或以太坊地址交互时,你就应该直接执行实时解析,并从 ENS 注册表中获取最新的信息。

此外,考虑到用户可以随时更改ENS注册表中的信息,你还应该定期验证当前缓存的信息。为此,你可以订阅相关合约中发生的一些特定事件,尤其是 AddrChangedNameChanged

关于显示以太坊地址的说明(无论有没有 ENS 名称)

研究表明,即使在 ENS 名称未启用的情况下,在 DApps 中显示以太坊地址时也有一些好的经验可以借鉴。

  • 始终以 “0x” 开头,以表明它是一个地址。
  • 需要缩略显示名称时,可以显示地址的前 4 个和后 4 个字符。相对来说,缩略地址更容易被欺骗,所以这并不是一个安全要求,但这是一个很好的经验,因为有些用户检查名称的开头,有些用户检查名称的结尾。而且,我们的大脑可以轻松划分、解析和记忆的字符最多为 4 个。
  • 始终提供一种显示完整以太坊地址的方式。可以采用与显示 ENS 名称或提示信息相同的弹出组件。

使用 decentralandUI 提示信息显示完整地址

前面提到的一些经验也适用于缩略的以太坊地址:

  • 允许用户复制完整的以太坊地址(就像前面说到的一样,提示信息可能不是一个好方法)。
  • 选择性地为用户提供自动在区块浏览器中打开以太坊地址的方法。

前端工具

转载本站内容请注明出处和链接。咨询 ENS 问题或加入 ENS 中文社区请联系 我们