Web3.0能让用户对他们在网上创建的平台和内容拥有所有权。虽然开发人员都有一个“新互联网”的梦想,但试图彻底改变互联网,还面临多重UI设计挑战。而这一挑战主要是如何构建用户界面,解决由Web3.0的独特功能引起的UI界面混乱和UI安全问题。本文Pixso带大家了解在设计Web3.0应用程序时,应注意些什么。

UI界面

1. 什么是Web3.0

1.1 Internet的简史

在了解 Web3.0之前,我们先一起了解Internet的简史:

  • Web 1.0是去中心化的,这意味着内容和平台的所有权和控制权分布在许多个人和企业之间。

  • Web 2.0 是当前的互联网迭代,得益于少数拥有用户友好平台的软件公司,如 Apple、Google、Facebook和 Twitter。随着越来越多的人成为活跃的在线创作者和消费者,网络变得更加集中,主要由少数公司拥有和控制。

借助 Web3.0,开发人员使互联网再次去中心化。技术垄断企业将不再拥有和控制用户创建的内容和平台。Web3.0还旨在解决互联网的安全和隐私问题。

1.2 Web3.0有什么特点

  • 无许可

用户可以在未经公司或政府机构授权的情况下进入任何Web3.0应用程序。他们使用持有他们的私钥的数字加密钱包登录,用来访问数字货币的密码。钱包可以是类似于USB驱动器的硬件。

加密货币后台管理用户界面

加密货币后台管理用户界面

  • 分布式

互联网产品和服务的权力与控制权并不集中在投资者或CEO手中,而是公平地分配给用户,用户根据他们对Web3.0平台开发和维护的贡献获得所有权。

  • 开放

Web3.0在区块链上运行,将数据存储在单独的组中,称为块。一旦一个区块被填满信息,它就会与前一个区块链接,形成一个按时间顺序排列的链。区块链是最常用于记录金融交易的开放式账本。

  • 无需信任

开发人员、内容创建者和其他用户保留对Web3.0平台和DApp(去中心化应用程序)的构建和维护方式以及可以发布的内容的控制权。他们对代码和服务的运行方式具有完全的可见性。而在Web 2.0中,企业和政府拥有控制权,用户无法独立验证有关如何开发和管理应用程序的信息。

2. Web3.0时代UI设计面临哪些挑战

Web3.0以金融应用为主:加密货币、用于交易的加密货币交易所(去中心化交易所,或DEX)和NFT贸易平台,用于表示独特的数字或物理项目的所有权。此外,去中心化金融允许用户绕过银行并访问点对点金融服务,例如借贷、赚取利息和交易资产。

NFT贸易平台

将Web3.0扩展到其他领域已被证明是困难的。例如,没有办法区分合法的Web3.0网站是否存在欺诈,因为用户必须输入他们的加密钱包凭据才能访问Web3.0 平台。如果Web3.0网站是一个骗局,任何进入的用户都可能损失钱。

另一个问题是区块链不允许上传图片或视频。用户可以将媒体存储在以太坊等加密网络上,但价格昂贵。

在Web3.0视频游戏中,NFT可以代表玩家的头像和购买的物品,但通常不可能将这些资产转移到其他游戏或应用程序,从而减少玩家的投资。

NFT UI设计

NFT UI设计

3. UI设计师如何应对Web3.0的挑战

3.1 用户能轻松访问交易历史

几乎所有的集中式电子商务网站 (web 2.0) 都允许用户查看他们全面的购买历史,但在去中心化交易所很难访问这样的记录。钱包提供交易历史记录,但一次只针对一个账户,而且很难或不可能被去中心化应用程序过滤。为了在集中式平台上获得这种历史记录,Web3.0用户必须使用区块浏览器,这对用户不友好,并且很难找到特定的交易。

Web3.0设计师应该提供一种简单的方法来审查他们在单个去中心化应用程序中进行的链上交易。这应该放在易于找到的位置,例如侧面板或菜单。此外,还可以创建一个由按钮激活的“链式视图”模式:一旦点击,它将在整个UI上放置一个过滤器,指示存储在区块链上的所有内容,包括交易历史。同时,允许用户轻松过滤和导出交易记录也很有帮助。

如Pixso社区的加密货币后台管理界面设计,点击侧面板的“Transaction”即可访问交易的详情。

加密货币后台管理界面设计

3.2 提供清晰的提示和完整的信息

许多Web3.0应用程序错误地假设用户拥有丰富的经验。相反,设计师应该澄清Web3.0的功能和操作的含义。例如,在将加密货币资金存入流动资金池之前,新投资者需要知道他们的资金可能会贬值,设计师可以通过屏幕上的弹出消息发出警告。

加密货币

设计师可以通过在文档部分的开头提供对话摘要以及指向更多技术内容的链接,以增强理解性。弹出词汇表可以作为链接图标嵌入文本中,使用户能够通过鼠标点击或手指点击来了解术语的含义。

3.3 使用本国的货币交流汇率

随着比特币等加密货币变得越来越流行并且它们的价格波动,很难追踪它们的价值。在数字钱包和电子商务应用程序中,这些代币用于购买、出售和交易NFT等资产,设计师应向用户展示从加密货币到其本国货币的价格转换。

比特币

3.4 明确交易等待时间

通过银行在线转账时,会立即收到状态更新或交易完成的确认信息。更多中心化应用程序应该通过文本或动画在状态栏、通知栏中显示交易状态。如果在UI中显示更新不可行,则提供指向开源区块浏览器的链接是一个不错的选择。

加密货币后台管理

加密货币后台管理

3.5 创建“发送最大值”按钮

比特币、以太币和其他加密货币通常用许多小数位表示,例如0.0000085191。在向个人或企业汇款以购买NFT等资产或将资金存入智能合约时,很难准确有效地输入总金额。因此,设计师应在应用程序中创建一个“全部”的按钮,允许用户一键将其整个钱包余额转移到另一个地址。

比特币

3.6 解释Gas费用如何运作

Gas可能是Web3.0中最烦人的事情,尤其是对于加密新手来说。Gas是用户支付的额外费用,用于支付处理交易所需的计算能力成本。用户可以选择支付更高的费用来加快传输速度。

设计师需要解释什么是Gas以及它是如何运作的。一般来说,应该以用户最常用的本地法定货币显示Gas价格。设计师还可以设计出可行的投资组合追踪器。如果交易因支付低Gas而停滞或失败,设计师应该允许用户支付更高的费用来加速转账。

投资组合追踪器

如你所见,Pixso社区有大量Web3.0设计资源可供参考,颜色、文本样式、图层样式不仅可以一键保存为资源,还可搭配起来重复添加为组件资源共享到团队,实现快速复用。

无论你从事该行业多久,强大的工具可以帮助你更有效、更准确地完成工作。作为专业的在线UX设计工具,Pixso可以实现视觉效果、交互效果、体验效果一站成型,为你的目标用户创造流畅体验,赶快邀请你的团队一起使用吧!