1. 主页
  2. 文档
  3. Web3.0 设计教程
  4. TTT原则
  5. 1 .(读取数据)数据源的透明度

1 .(读取数据)数据源的透明度

用户需要能够通过查看页面来判断某个数据点或内容是否实际存储在区块链中。让用户猜测并不是用户友好型应用的表现,并且让用户假设看到的“所有”数据存储在区块链中是不够的。

对于数据密集型Dapps,如分布式交易所,这一要求可能听起来很棘手,在下面的示例中会介绍相关的解决方案。

🔑🔑 原则🔑🔑

Dapp 前端应该:

➤阐明区块链数据和非区块链数据,

➤区分合同的地址

➤将所有区块链数据链接到独立的区块链浏览器

➤阐明哪些数据来自可信任数据源(∞链接> 5.代码透明度)

具体做法

使用css:

更改颜色/字体/形状以区分区块链数据并尝试在整个项目中保持一致并始终使用相同的“区块链颜色”

数据来源:为来自特定合同的数据着色

使用可扩展引用:

当悬停或单击区块链数据点时,可提供一个上下文扩展工具提示,其中包含有关数据点的更多信息,该信息应明确在区块链上的哪些位置可以找到数据

使用链接图标管理样式冲突:

如果数据点既是“区块链数据点”又是指向dapp某处的链接,则有两种方法可以解决双重操作:

1-添加一个链接图标,一个跟随任何“区块链数据点”的图标,该图标提供可扩展的参考功能,同时保持链接的正常工作。

2-打开可扩展引用并在其中插入辅助链接(但考虑到这会产生更多摩擦,因为您要求用户执行2个操作而不是一个操作)。

打开上下文引用的链接图标示例。 这是将链接视图功能添加到 Dapp 中的某个链接

使用“链视图”模式和侧面板:

对于像去中心化交易所这样的数据密集型接口或之前建议的市场视图可能意味着对大部分界面进行样式化,这会造成不必要的混淆。 要解决此问题,可以设想一个“链视图”按钮,当悬停或单击时,会暂时设置数据样式, 就像在页面上放置一个帮助用户查看哪些数据是区块链数据点的过滤器。

扩展开来,“链视图”也可以是一个侧面板,托管Web3设计原则中描述的许多功能。 在这种情况下,链视图面板可设置上述选项来设置区块链数据点是否可见。 在接下来的示例中,将看到链视图面板的更多用途。

带有数据来源选项的链视图侧面板

清晰地显示打开外部区块链浏览器的链接:

如果链接要将用户转移到另一个页面,最好通过以下方式控制页面上用户的流量:

1 - 添加一个“clarifying”按钮,说明将要发生的事情:即“在Etherscan中打开”

2 - 为独立区块浏览器添加链接图标,并在UI中使用它

我们要如何帮助您?