WebWeb根端有什么区别？ -1

你好！这是@jio_jake。
这篇文章是我在 paragraph.xyz 中所写内容的韩语翻译。订阅我们的刊物您可以获得最快的更新

---

使用 [Dall-E-3] 创建的图像

你好！我的名字是@jio_jake。我目前在区块链游戏平台 @Yooldo_Games 担任前端开发人员

。

我去年加入团队时对Web3知之甚少，所以我在不熟悉生态系统或Web3开发的情况下加入了团队。从那时起大约一年半过去了，我创建了一个技术博客来分享我获得的见解和开发技巧，并为生态系统做出贡献
。 去年我可以告诉像我这样的加密开发新手的是，相比市场形势的不确定性和方向，区块链的发展出奇的清晰和酷。我会定期分享我通过博客获得的见解和技巧，所以如果您能订阅，我将不胜感激。

前端开发人员通常做什么？

---

在进入正题之前，根据我个人的经验，Web3前端开发人员和Web2前端开发人员没有太大区别。技术栈可能略有不同，但开发环境没有显着差异。与其说技术不同，不如说是业务领域的差异更准确。

根据我过往的经验，前端开发人员的必备素质如下：

• UX（用户体验）。跟踪我们服务中的用户活动对于前端开发人员来说是一个非常重要的线索。
• Javascript。Javascript 生态系统最近的发展确实令人瞩目。大多数事情都可以用 Javascript 完成。
• React之类的框架。我不认为这是一项必备技能，但我认为如果你是一名想要加入公司的开发人员，这几乎是必备技能。
• 协作和软技能。前端开发人员实际上是一份最终的工作。有时我们需要协调所有团队成员对产品任务的理解。
• 解决问题的能力。如果你了解团队业务，了解内部技术架构，一定会应用。

前端工程师始终专注于改善用户体验。如果把难以理解的业务术语用通俗易懂的方式解释，或者在绘制用户旅程图时流失率较高或流程复杂，我们会重点改进它。然而，在 Web3 环境中，前端开发人员在实现用户友好的方法时需要注意一些稍微不同的事情

。

Web3 dapp 中的用户体验

---

我第一次加入当前团队时，有一个当前项目的入职时间。有趣的是，产品中到处都有很多与我们定义的 Web3 术语或专有名词（商业语言）相对应的单词。

尽管如此，还是有超过 30,000 名用户（我认为应该说粉丝）聚集在我们的社区中并进行讨论。我很好奇他们到底是如何聚集用户的。令人惊讶的是，答案很简单。
这是 Web3 用户的
封闭群体文化。

让我们更详细地讨论一下。以下是 Web2 用户旅程地图的简要版本。

用户偶然发现我们的服务。 它通过社交媒体广告、病毒式营销、口碑传播等多种渠道进入。
有新用户正在加入该服务。
3. 该服务仔细考虑用户。安装了防止跳出率的设备，并识别兴趣并显示推荐产品。
适合自己口味的用户会对服务产生忠诚度。忠实顾客增加了一位
4. 。

这是典型 Web3 服务的非常诚实的旅程图。

首先，它是一个流程，前提是其中已经有一个庞大的社区和社区建设者。

1. 用户第一次听说我们的服务是在封闭群组。据说他们和一个非常著名的大型区块链（链、钱包）合作。 KOL（关键意见领袖）强烈推荐该项目。
2. 用户决定信任我们的服务。因为这个项目旁边有一家值得信赖的大公司
。
3. 用户决定花费一些 ETH 来参加活动等。当然，您也可以将您的钱包连接到我们的服务
。
4. 循环重复。 哇！我们已经成为一个炒作的项目

用户有花一点钱不犹豫的特点。作为前端开发人员，有趣的部分是用户自己学习使用该服务。这在 Web2 中并不经常发生。竞争产品太多了，你只能离开。 因此，我们不需要为用户提供非常简单的钱包集成等教程。你就知道这么多了，对吧？这种想法可以忽略一些部分。

那么我们应该更关注什么？

个人结论：挤压与产品之间的相关性

上述问题的答案因团队而异。我目前从事区块链游戏工作。我们在内部制作非常酷的游戏，并从外部获取它们。并不是因为这是我工作的公司，而是我觉得像我们这样认真对待游戏的区块链游戏公司并不多。

---

Troublepunk，一款可以在 PC 上享受的大逃杀游戏

RPD，一款可以在 Android 上享受的移动防御游戏

我们现在生活在多巴胺的时代。因此，人们很容易厌倦长篇内容。我认为游戏的形式很长
Dizens 和未来的 Dizens 希望有效地利用他们的时间。因此，通过用户分析，我们准备了与游戏分开的非常快速且简短的交互。例如，日常签到或销售限量版 NFT 等任务。这些任务非常方便且易于交互。只需连接您的钱包并按下按钮即可。

再举个例子：如果我是该段的FE怎么办？

让我给你一个更清楚的例子。如果我是段落开发人员，我该如何改进用户体验

？

---

这是我第一次报名段落。

嗯..我刚刚连接了钱包，但它说发生了未知错误。

当连接到项目不支持的链时，会出现此错误。发生这种情况是因为我的 MetaMask 链设置是 Linea。所以我把它改成了以太坊主网

。

按后退按钮并更改为以太坊主网后...

终于可以报名了！

必须按用户旅程屏幕左上角的按钮并选择网络，非常不方便。大多数 Web3 用户都清楚这一点，因为这并不罕见，但肯定还有改进的空间
。

我将这些不可见的任务放在后台，无需用户交互。这是一个简单的例子，但持续思考这种思维是作为 Web3 前端工程师改进 UX 的方法之一。以下是一些快速轻松互动的技巧。

段落 该团队似乎正在使用 web3-modal 进行钱包集成。下面的代码是我在这个假设下编写的。

const SignInButton = () => {
  const { open: openWeb3Modal } = useWeb3Modal();
  const { address, isConnecting } = useAccount();
  const chainId = useChainId();
  const { switchChainAsync } = useSwitchChain();

  const handleOnclick = async () => {
    // check current user wallet chain is supportive or not
     if (!supportedChains.has(chainId)) {
       await switchChainAsync({ chainId: mainnet.id });
     }
     openWeb3Modal();
  }
  return (
    <button onClick={handleOnclick}>
     {isConnecting ? 'Awaiting Confirmation' : 'Signin'}
    </button>
  )
}

Web3-modal 是使用 Walletconnect、Viem 和 Wagmi 构建的服务。因此您可以获得强大的挂钩和实用函数的支持。在正确的地方使用这些元素可以极大地提高用户体验。
还有最后一个细节。有时，一些顽皮的用户在发生钱包交互时会做各种事情。其中之一是在发送交易之前更改链。并自豪地发现了这个错误！我将其发布在 Discord 社区、Twitter 等上。因此，在与钱包交互时始终检查当前环境非常重要。如下：

• 用户的钱包地址与链下注册的钱包地址是否相同？
• 用户是否连接到我们支持的链？ 您需要检查的事实越多越好。 关于改善智能合约交互的用户体验还有更多技巧，我很快会回来写另一篇文章并分享我的技巧。

结束

---

正如我在文章开头提到的，我不认为 Web3 前端开发与 Web2 前端工作有本质上的不同。事实上，从技术角度来看，Web3 比模棱两可、瞬息万变的市场形势更加尖锐和清晰。
很难否认 Web3 服务有时不太用户友好。因为钱包和链上交互的功能是必不可少的。但是，如果您是前端开发人员，则有一些事情需要担心。我们必须分析我们服务的目标用户，努力了解核心用户的需求。您可以通过绘制用户旅程地图并减少不方便的点来优化用户体验

。

今天，我简单分享了有关钱包连接的UX。 Web3 可以改进 UX 的地方还有很多，我也有很多东西想分享。

如果您喜欢这篇文章，请订阅并分享。感谢您阅读这篇长文。下一篇文章见。

以上是WebWeb根端有什么区别？ -1的详细内容。更多信息请关注PHP中文网其他相关文章！