跳转至主要内容
Change page

Web3 界面设计的 7 个启发法

上次修改时间: @Joe-Chen(opens in a new tab), 2024年9月1日

可用性启发法包含广泛的“经验法则”,你可以用它来衡量网站的可用性。 这些启发法是为 Web3 量身定制的,并且应该与 Jakob Nielsen 的界面设计的 10 条基本原则(opens in a new tab)一起使用。

Web3 的 7 个可用性启发法

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

定义与示例

1. 操作后进行反馈

当某些事情已经或即将发生时,应该明确地展示出来。

用户会以前面步骤的结果为基础,做出后续步骤的决定。 因此,确保他们随时了解系统状态至关重要。 这在 Web3 中尤其重要,因为交易有时只需很短的时间就提交到区块链了。 如果没有反馈来通知他们等待,用户将不确定是否发生了任何操作。

提示:

  • 通过信息、通知或其他警报来通知用户。
  • 明确地传达等待时间
  • 如果操作需要的时间超过几秒钟,请用一个计时器或动画来让用户放心,让他们知道有操作正在发生。
  • 如果某个过程有多个步骤,请显示每个步骤。

例如: 展示交易中涉及的每个步骤,有助于用户了解自己正处于该过程的什么位置。 适当的图标能让用户了解他们的操作状态。

交换代币时,通知用户每个步骤

2. 融入安全与信任

应优先考虑安全性,并向用户强调这一点。 人们非常在乎他们的数据。 安全往往是用户的首要关注点,因此应该在设计的所有层面充分考虑安全问题。 你应该始终努力赢得用户的信任,但实现这一点的方式在不同的应用程序中可能有不同的含义。 这不应该是事后才考虑的问题,而应该有意识地设计为贯穿始终。 在整个用户体验中建立信任,包括社交频道和相关文档,以及最终的用户界面。 诸如去中心化水平、资金库的多重签名状态,以及团队是否接受监督之类的因素,都会影响用户的信任。

提示:

  • 自豪地展示你的审计
  • 进行多次审计
  • 宣传你设计的任何安全功能
  • 突出可能的风险,包括底层的集成
  • 传达策略的复杂性
  • 考虑可能会影响用户安全感的非用户界面问题

示例: 在页脚以显眼的尺寸包含你的审计内容。

在网站页脚引用的审计内容

3. 突显最重要的信息

对于复杂的系统,只展示最相关的数据。 确定哪些信息最重要的,并优先展示它们。 太多的信息会让人无所适从,并且用户通常只依托一条信息做出决定。 在去中心化金融中,这可能会是收益应用程序中的年化收益率和借贷应用程序中的贷款价值比。

提示:

  • 用户研究将揭示最重要的指标
  • 让关键信息变大,并让其他细节变小且不引人注目
  • 人们不会仔细阅读,而是一扫而过;确保你的设计是可扫视的

例如: 在扫视时,巨大的全彩色代币很容易被找到。 年化收益率用大号字体和强调色突出显示。

易于寻找的代币和年化收益率

4. 易于理解的术语

术语应该是易于理解且恰当的。 技术行话可能构成巨大的阻碍,因为它需要构建一个全新的心理模型。 用户无法将设计与他们已知的词语、短语或概念联系起来。 一切似乎都令人感到困惑且陌生,他们需要经历一条陡峭的学习曲线才能尝试使用。 用户可能是出于省钱的目的而接触到去中心化金融,然而他们发现的却是:挖矿、矿池、质押、排放、贿赂、金库、储物柜、veToken、归属、时段、去中心化算法、协议自有流动性… 尝试使用大多数人能够理解的简单术语。 不要仅仅为你的项目发明新术语。

提示:

  • 使用简单且一致的术语
  • 尽可能多地使用现有语言
  • 不要杜撰自己的术语
  • 遵循现有的惯例
  • 尽可能对用户进行教育

例如: “你的奖励”是一个众所周知的中性词;并非为该项目创造的新词。 以美元计价的奖励符合现实世界的心理模型,即使它们本身是另一种代币。

以美元展示的代币 奖励

5. 尽可能简短的操作

通过归类子操作的方式来提升用户的交互速度。 这可以在智能合约的层面上完成,也可以在用户界面完成。 用户不应该为了完成一个常见的操作,而从系统的一部分移动到另一部分,或者完全离开系统。

提示:

  • 尽可能将“批准”与其他操作相结合
  • 尽可能将签名步骤紧密地捆绑起来

例如: 将“增加流动资金”与“质押”结合起来,是一个能节省用户时间与燃料的简单加速器示例。

此模态展示了一个将存款和质押操作结合在一起的开关

6. 灵活且可见的网络连接

告知用户他们所连接的网络,并提供清晰的快捷方式切换网络。 这在多链应用程序中尤其重要。 当断开连接或连接到不支持的网络时,应用程序的主要功能仍应该可见。

提示:

  • 在断开连接时显示尽可能多的应用程序内容
  • 显示用户目前连接的网络
  • 不要让用户到钱包中切换网络
  • 如果应用程序需要用户切换网络,请从主要行动号召中提示该操作。
  • 如果应用程序包含多个网络的市场或金库,请明确陈述用户目前查看的是哪一组。

例如: 向用户展示他们目前连接的网络,并允许他们在应用程序栏中进行更改。

显示所连接网络的下拉式菜单按钮

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

用户界面应该向用户展示他们需要了解的所有内容,并让他们能够控制需要控制的一切。 在 Web3 中,有些操作需要在用户界面内执行,有些需要在钱包内执行。 一般而言,在用户界面开始一项操作,然后在钱包中确认它。 如果这两条线没有仔细合并,用户可能会感觉不适应。

提示:

  • 通过用户界面中的反馈来传达系统状态
  • 保存他们的历史记录
  • 提供先前交易的区块浏览器链接
  • 提供切换网络的快捷键

例如: 一个巧妙的容器向用户展示了在他们的钱包中拥有哪些相关的代币,而主要行动号召则提供了一个快捷方式来切换网络。

主要行动号召正在提示用户切换网络

本文对你有帮助吗?