跳转到主要内容
Change page

Web3 界面设计的 7 个启发式原则

可用性启发式原则是广泛的“经验法则”,可用于衡量网站的可用性。 这里的 7 个启发式原则是专门为 Web3 量身定制的,应与 Jakob Nielsen 的交互设计 10 大通用原则 (在新标签页中打开)结合使用。

Web3 的七个可用性启发式原则

  1. 反馈紧随操作
  2. 安全与信任
  3. 最重要的信息一目了然
  4. 易于理解的术语
  5. 操作尽可能简短
  6. 网络连接可见且灵活
  7. 从应用程序而非钱包进行控制

定义与示例

1. 反馈紧随操作

当某事已经发生或正在发生时,应该显而易见。

用户根据上一步的结果来决定下一步操作。因此,让他们随时了解系统状态至关重要。这在 Web3 中尤为重要,因为交易有时需要一小段时间才能提交到区块链。如果没有反馈通知他们等待,用户就会不确定是否发生了任何事情。

提示:

  • 通过消息、通知和其他警报通知用户。
  • 清楚地传达等待时间。
  • 如果一项操作需要几秒钟以上的时间,请使用计时器或动画让用户安心,让他们感觉到系统正在处理。
  • 如果一个过程有多个步骤,请显示每个步骤。

示例: 显示交易中涉及的每个步骤有助于用户了解他们处于流程的哪个阶段。适当的图标可以让用户了解其操作的状态。

Informing the user about each step when swapping tokens

2. 内置安全与信任

应该优先考虑安全性,并向用户强调这一点。 人们非常关心自己的数据。安全通常是用户的首要关注点,因此在设计的各个层面都应予以考虑。你应该始终寻求赢得用户的信任,但在不同的应用程序上,实现这一目标的方式可能意味着不同的事情。它不应该是事后才想到的,而应该在整个过程中有意识地进行设计。在整个用户体验中建立信任,包括社交渠道、文档以及最终的用户界面。诸如去中心化程度、金库多重签名状态以及团队是否公开身份等因素,都会影响用户的信任。

提示:

  • 自豪地列出你的审计报告
  • 获取多项审计
  • 宣传你设计的任何安全功能
  • 突出显示可能的风险,包括底层集成
  • 传达策略的复杂性
  • 考虑可能影响用户安全感的非 UI 问题

示例: 在页脚以醒目的尺寸包含你的审计报告。

Audits referenced in the website footer

3. 最重要的信息一目了然

对于复杂的系统,只显示最相关的数据。确定什么是最重要的,并优先显示它。 过多的信息会让人不知所措,用户在做决定时通常会锚定一条信息。在去中心化金融 (DeFi) 中,这可能是收益类应用程序上的 APR,以及借贷应用程序上的 LTV(贷款价值比)。

提示:

  • 用户研究将揭示最重要的指标
  • 将关键信息放大,其他细节缩小且不显眼
  • 人们不阅读,他们只浏览;确保你的设计易于浏览

示例: 浏览时很容易找到全彩的大型代币。APR 很大,并用强调色突出显示。

The token and APR are easy to find

4. 清晰的术语

术语应该易于理解且恰当。 技术术语可能是一个巨大的障碍,因为它需要构建一个全新的心智模型。用户无法将设计与他们已经知道的单词、短语和概念联系起来。一切似乎都令人困惑和陌生,在他们甚至尝试使用它之前,就存在陡峭的学习曲线。用户接触 DeFi 可能是想存点钱,但他们发现的是:挖矿、流动性挖矿、质押、排放、贿赂、机枪池、锁仓器、veTokens、归属、纪元、去中心化算法、协议拥有的流动性…… 尽量使用最广泛人群都能理解的简单术语。不要仅仅为了你的项目而发明全新的术语。

提示:

  • 使用简单一致的术语
  • 尽可能使用现有的语言
  • 不要想出你自己的术语
  • 遵循已出现的惯例
  • 尽可能教育用户

示例: “你的奖励”是一个被广泛理解的中性术语;而不是为这个项目编造的新词。奖励以美元计价,以匹配现实世界的心智模型,即使奖励本身是另一种代币。

Token rewards, displayed in U.S. dollars

5. 操作尽可能简短

通过对子操作进行分组来加快用户的交互速度。 这可以在智能合约层面以及用户界面上完成。用户不应该为了完成一个常见操作而从系统的一个部分移动到另一个部分,或者完全离开系统。

提示:

  • 尽可能将“授权”与其他操作结合起来
  • 将签名步骤尽可能紧密地捆绑在一起

示例: 将“添加流动性”和“质押”结合起来是一个简单的加速器示例,可以为用户节省时间和 Gas。

Modal showing a switch to combine the deposit and stake actions

6. 网络连接可见且灵活

告知用户他们连接的是哪个网络,并提供清晰的更改网络快捷方式。 这在多链应用程序上尤为重要。在断开连接或连接到不受支持的网络时,应用程序的主要功能仍应可见。

提示:

  • 在断开连接时尽可能多地显示应用程序
  • 显示用户当前连接的网络
  • 不要让用户去钱包更改网络
  • 如果应用程序要求用户切换网络,请从主号召性用语中提示该操作
  • 如果应用程序包含多个网络的市场或机枪池,请清楚地说明用户当前正在查看哪一组

示例: 在应用栏中向用户显示他们连接的网络,并允许他们进行更改。

Dropdown button showing the connected network

7. 从应用程序而非钱包进行控制

用户界面应该告诉用户他们需要知道的一切,并让他们控制他们需要做的一切。 在 Web3 中,有些操作在用户界面中进行,有些操作在钱包中进行。通常,你在用户界面中发起一项操作,然后在钱包中确认。如果这两条线没有仔细整合,用户会感到不适。

提示:

  • 通过用户界面中的反馈传达系统状态
  • 保留他们的历史记录
  • 提供旧交易的区块浏览器链接
  • 提供更改网络的快捷方式。

示例: 一个精巧的容器向用户显示他们钱包中有哪些相关的代币,主号召性用语 (CTA) 提供了更改网络的快捷方式。

Main CTA is prompting the user to switch network