metamask_在MetaMask主导航上-程序员宅基地

技术标签: python  

metamask

Making software—especially on the blockchain—that is both powerful and usable is very hard, I know. And sometimes we plan a lot of our UI but new features get added, some changes are done in the implementation and while we have ideas on how to improve that, they get pushed to our long backlog. So this isn’t intended as anything but praise at what the great work the team at MetaMask has been doing. I hope this analysis could be useful and due to the great utility MetaMask has on my life at the moment, I’d like to share it. So let’s talk about specifically this little bit on the app:

我知道 ,要使软件(尤其是在区块链上)既强大又有用,就很难。 有时,我们计划了很多UI,但是增加了新功能,在实现中进行了一些更改,并且尽管我们对如何改善它有想法,但它们却被拖入了很长的积压之中。 因此,这并不是要赞美MetaMask团队所做的出色工作。 我希望这种分析是有用的,并且由于MetaMask目前在我的生活中具有巨大的实用性,我想与大家分享一下。 因此,让我们在应用程序上专门讨论一下:

Arguably, the most important piece of real estate of the app is the header and menu and it contains the following elements:

可以说,应用程序最重要的部分是标题和菜单,它包含以下元素:

  • A MetaMask logo. Despite looking like an icon and being the first thing we see, it is not clickable nor provides any information

    MetaMask徽标。 尽管它看起来像一个图标,并且是我们首先看到的东西,但它不可点击也不提供任何信息

  • A network switcher, using most of the space of the top bar

    网络交换器 ,使用顶部栏的大部分空间

  • An account switcher/menu. The same menu also contains links to add new accounts, import an account, connect hardware wallet, settings and info (which is just another menu inside settings menu). That’s a lot for a menu with an abstract icon.

    帐户切换器/菜单。 该菜单还包含用于添加新帐户,导入帐户,连接硬件钱包,设置和信息的链接(这只是设置菜单中的另一个菜单)。 对于带有抽象图标的菜单来说,这很多。

  • A connection status (new on 8.0.0) tells you information about which apps can see your account.

    连接状态 (8.0.0上的新增功能)会告诉您有关哪些应用程序可以看到您的帐户的信息。

  • Account title and address, clicking it will copy the address to the clipboard.

    帐户标题和地址,单击它会将地址复制到剪贴板。

  • Account menu, with the options to expand (opens MetaMask app in tab), account details page (more on that later), open in etherscan and a link to the connection menu (the same action as clicking on the connection status bar)

    帐户菜单 ,其中包含以下选项:展开(在选项卡中打开MetaMask应用程序),帐户详细信息页面(稍后会详细介绍),在etherscan中打开以及指向连接菜单的链接(与单击连接状态栏相同的操作)

So, in a diagram format:

因此,以图表格式:

Image for post

So, we have six click areas on the topbar opening four menus. However the noblest area, the top-left doesn’t provide any information or functionality and the largest click area on the top offers a functionality that is probably only used for more advanced users (how many dapp users want to set up a custom rpc or a localhost node?). Account switching is probably done more often by users (and we should encourage them to, for privacy!) but is hidden in a more neutral looking identicon. They are rather inconsistent in behavior too as some of these will create actions, others will expand menus. Say a user needs to see his seed phrase, it’s not very obvious that this path starts at the weird abstract green art on the top right corner.

因此, 我们在顶部栏上有六个单击区域,可打开四个菜单。 但是, 最贵的区域(左上方)不提供任何信息或功能而顶部的最大点击区域提供的功能可能仅用于更高级的用户 (有多少dapp用户想要设置自定义rpc或一个本地主机节点?)。 帐户切换可能是由用户更频繁地执行的(出于隐私考虑,我们应该鼓励他们这样做!),但隐藏在一个看起来更中立的标识中。 它们的行为也相当不一致 ,因为其中一些会创建动作,而另一些会扩展菜单。 假设用户需要查看他的种子短语,这条路径并不是从右上角的怪异的抽象绿色艺术开始的,这不是很明显。

Also the “account details” pane is interesting that it offers four actions, two of these will open a new tab (expand, etherscan), one of them will open the same menu that you get by clicking on the “connected apps” menu and finally one will open the “account details” pane.

同样,“帐户详细信息”窗格很有趣,它提供了四个操作,其中两个将打开一个新选项卡(展开,etherscan),其中一个将打开您通过单击“已连接的应用程序”菜单获得的菜单。最后,将打开“帐户详细信息”窗格。

Image for post

And the Account details pane is a thing on its own: it replicates the same information we were looking at before, but now in a modal. It contains the following elements:

“帐户详细信息”窗格是一个独立的东西:它可以复制以前查看过的相同信息,但现在可以模态复制。 它包含以下元素:

  • the identicon: notice you see it twice now, as it’s still visible on the background

    identicon:请注意,您现在看到了两次,因为它在背景中仍然可见

  • account name: now it allows editing the name

    帐户名称:现在可以编辑名称

  • The address: shows more characters and unlike before, clicking on it won’t copy, just select it

    地址:显示更多字符,与以前不同,单击它不会复制,只需选择它

  • view on etherscan: notice it’s a duplicate of an action of the previous menu too!

    在etherscan上查看:请注意,它也是上一个菜单操作的重复!

  • a QR code

    二维码

  • “export private key”: arguably a quite advanced feature, given that most users will just use seed phrases and individual private keys are less useful

    “导出私钥”:可以说是一个相当高级的功能,因为大多数用户只会使用种子短语,而单个私钥的用处不大

This pane is opened from many places, including clicking on the “deposit” button and choosing “crypto”.

此窗格可从许多地方打开,包括单击“存款”按钮并选择“加密”。

建议1:用内联扩展替换“详细信息”菜单 (Suggestion #1: replace the “details” menu with an inline expansion)

Image for post

Expanded view could happen when you click the identicon, the name, or anywhere on the white bar (except the connection button and maybe the address). This would eliminate both the “account details” menu and “account view” overlay. Reducing the amounts of menus and overlays also reduces cognitive overlay from the user, as is one less place to remember where to navigate. This also keeps consistency, since we are just showing the same information we were showing before, just “bigger”. Actions like “expand” of “open in etherscan” are still just two clicks away. Clicking anywhere on that top bar would expand it, except clicking directly on the “connect” button or the address, which keeps the current behavior of copying the link.

单击标识图标,名称或白条上的任意位置(连接按钮和地址除外)时,可能会发生扩展视图。 这将消除“帐户详细信息”菜单和“帐户视图”覆盖。 减少菜单和覆盖的数量也减少了用户的认知覆盖,减少记住导航位置的地方也减少了。 这也保持了一致性,因为我们只显示了以前显示的相同信息,只是“更大”。 只需单击两下鼠标,即可完成诸如在etherscan中打开展开 ”之类的操作。 单击该顶部栏上的任意位置都会展开它,除了直接单击“连接”按钮或地址(保留复制链接的当前行为)外。

We’ve also moved our little green friend icon to this bar, since identicons are a feature of an account, not the app as a whole. This of course means the top menu has a hole on it now. Let’s explore that.

我们还将绿色的小朋友图标移动到了此栏中,因为identicons是帐户的功能,而不是整个应用程序的功能。 当然,这意味着顶层菜单上现在有一个洞。 让我们探索一下。

建议2:统一“切换台”菜单 (Suggestion #2: unify the “switchers” menus)

There are three main actions accessible on the top menus:

顶部菜单上可访问三个主要操作:

  • Switch: change your current account or network

    切换 :更改您当前的帐户或网络

  • Add: add a new account from seed, import account from file, connect hardware wallet

    添加 :从种子添加新帐户,从文件导入帐户,连接硬件钱包

  • Settings: since “info & help” is one level deep inside the main settings menu, it means this button essentially does the same as “settings”

    设置 :由于“信息和帮助”位于主设置菜单的深一层,因此这意味着该按钮与“设置”基本相同

Visually this could be divided like this:

在视觉上,可以这样划分:

Image for post

The first big change I would defend is: unify switching accounts and networks. Not only this removes clutter from the app, but it also is good practice. You don’t want to be using your main account to sign transactions in a test network, this induces errors (“Help, I accidentally sent to my test account!”), can create replaying issues and reduces privacy as activity between networks can now be linked. Switching to a new network should also switch your accounts (but of course not the other way around). This would also help separate to the user what accounts are used for what and is in line with the common behavior of users so that you can more easily switch from say, playing with a main net app and then quickly switching to a test net app in another tab. When adding a new account the user should also select which network it is for, which also helps hide more advanced options like “localhost:8545”. In the very few cases in which a user might want to use the same account in two different networks, it should be allowed as an advanced feature, and upon first importing new accounts, it would be good for the app to check which accounts have balance or nonces on test networks.

我要捍卫的第一个重大变化是: 统一交换帐户和网络。 这不仅可以消除应用程序的混乱情况,而且还是一个好习惯 。 您不想使用您的主帐户在测试网络中签署交易,这会引发错误(“帮助,我不小心将其发送到我的测试帐户!”),可能会导致重播问题并降低隐私,因为网络之间的活动现在可以进行被链接。 切换到新的网络还应该切换您的帐户(当然,反之亦然)。 这也将帮助用户将哪些帐户用于什么目的以及与用户的常见行为相符,从而使您可以更轻松地从说(例如)切换到主要网络应用程序,然后快速切换到测试帐户中。另一个标签。 添加新帐户时,用户还应该选择该帐户用于哪个网络,这也有助于隐藏更多高级选项,例如“ localhost:8545”。 在极少数情况下,用户可能希望在两个不同的网络中使用同一帐户,因此应允许将其作为高级功能使用,并且在首次导入新帐户时,应用程序最好检查一下哪些帐户具有余额或测试网络上的随机数。

Let’s call these concepts of “cards” in which each account is tied to a given network and contains a balance there. This is executed quite beautifully in MEW’s new wallet:

我们将这些“卡”概念称为“卡”,其中每个帐户都与给定的网络绑定并在其中包含余额。 这在MEW的新钱包中执行得非常漂亮:

Image for post
MEW’s app on the Appstore doesn’t allow Testnets, but it’s Beta program did
Appstore上的MEW应用程序不允许Testnets,但Beta版程序允许

Applying the concepts of cards to MetaMask we would have an interface similar to the following:

将卡片的概念应用于MetaMask,我们将拥有类似于以下内容的界面:

Image for post

The same functionality is present in the start, but we eliminated all intermediary modal menus, except for a much shorter “add account” menu. Clicking anywhere on the card header will expand it and show more options, clicking on the floating cards (and MetaMask logo) will expand them to allow a picker. Settings and Add account have clear icons. Not only the MetaMask logo is now in an even more important real estate, it serves an important functionality that is on-brand (access to your ethereum cards).

一开始具有相同的功能,但我们删除了所有中间模式菜单,只是“添加帐户”菜单的时间短得多。 单击卡头上的任意位置将其展开并显示更多选项,单击浮动卡(和MetaMask徽标)将其展开以允许选择器。 设置和添加帐户具有清晰的图标。 现在,不仅MetaMask徽标位于更为重要的位置,而且还具有品牌上的重要功能(访问以太坊卡)。

Some use of color can make the cards even more distinguishable. Colors can either be based on card type (main net, testnet, hardware wallet), random based on the address or they can be derived from the identicon itself (below right, we’re just expanding the icon and blurring it, so it works for any type of identicon including blockies)

某些颜色的使用可以使卡片更具特色。 颜色可以基于卡片类型(主网,测试网,硬件钱包),也可以基于地址随机,或者可以从identicon本身获取颜色(在右下方,我们只是扩展图标并将其模糊,所以它可以工作)适用于任何类型的identicon(包括方块)

Image for post
A little color goes a long way.
一点点的颜色会很长。

I hope this exercise has been as useful for you to read it as it has been fun for me to work on it. I believe doing these changes would make the main navigation much more consistent, reduce the mental overhead required for users to figure out where stuff is and make the app experience even more interesting. Of course, the final design itself can be tweaked, animation can add another interesting navigation layer and it’s easy to see how it can be converted to mobile. Some tweaks can be done to show more relevant information, like if it’s a “MetaMask account” (derived from seed) or a hardware wallet. This reduces clicks, increases functionality and IMHO looks a lot more interesting.

我希望本练习对您阅读有帮助,对我来说很有趣。 我相信进行这些更改将使主导航更加一致,减少用户弄清楚东西在哪里所需的精神开销,并使应用程序体验更加有趣。 当然,最终设计本身可以进行调整,动画可以添加另一个有趣的导航层,并且很容易看到如何将其转换为移动设备。 可以做一些调整以显示更多相关信息,例如,它是“ MetaMask帐户”(源自种子)还是硬件钱包。 这样可以减少点击次数,增强功能,恕我直言,看起来更有趣。

Image for post

Cheers and thanks for all your work, MetaMask team! Let’s keep building it together for a better and nicer ethereum!

欢呼,感谢您所做的所有工作,MetaMask团队! 让我们继续构建它,以获得更好,更好的以太坊!

翻译自: https://medium.com/@avsa/on-metamask-main-navigation-ac8b756599b1

metamask

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_26746861/article/details/108176552

智能推荐

React Native之React Navigation导航器_registercomponent-程序员宅基地

文章浏览阅读230次。最近在学习React Native,关于界面跳转这一块,文档上面写的并不清晰,自己也是研究了很久才搞清楚用法,这里记录下。译注:从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator,则需要先npm i facebooka..._registercomponent

vrep的bubbeRob仿真机器人制作教程_bubblerob-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏7次。1. 构造机器人添加bubbleRob的主体。点击 Menu bar --> Add --> Primititive shape --> Sphere,添加一个球体(以下称为bubbleRob)_bubblerob

异步编程学习之路(五)-线程池原理及使用_core threads must have nonzero keep alive times-程序员宅基地

文章浏览阅读832次。本文是异步编程学习之路(五)-线程池原理及使用,若要关注前文,请点击传送门:异步编程学习之路(四)-睡眠、唤醒、让步、合并前文我们详细介绍了线程之间协同合作的方法,在本文中我们将再进一步详细讲解线程池的原理及使用。个人认为,如果想要学好线程池就必须先从ThreadPoolExcetor源码开始讲起,我不建议直接使用Executors来创建一个线程池。至于为什么不建议直接使用的原因,阅读..._core threads must have nonzero keep alive times

openssh升级到9.0_redhat 6.0升级openssh到9.0-程序员宅基地

文章浏览阅读5.3k次,点赞4次,收藏19次。Openssh 升级到9.0p1版本一、环境介绍查看openssh、openssl版本[root@localhost ~]# openssl versionOpenSSL 1.1.1m 14 Dec 2021[root@localhost ~]# ssh -VOpenSSH_8.9p1, OpenSSL 1.1.1i-fips 26 Jan 2017查看linux发行版和内核[root@localhost ~]# cat /et_redhat 6.0升级openssh到9.0

Linux查看CPU信息、机器型号等硬件信息_docker 查看机器硬件名称与型号-程序员宅基地

文章浏览阅读1.5k次。做性能测试需要记录性能测试机器的硬件信息,现将需要的命令总结如下:查看CPU信息(型号)cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c8 Intel(R) Xeon(R) CPU E5410 @ 2.33GHz(看到有8个逻辑CPU, 也知道了CPU型号)cat /proc/cpuinfo | grep phy_docker 查看机器硬件名称与型号

如何确定一笔用户的BTC转入记录_如何监听btc nft transfer-程序员宅基地

文章浏览阅读831次。在用户充值BTC业务中,我们需要通过BTC官方RPC接口中的 listtransactions 接口来获取BTC钱包中最近的交易记录,当监听当某笔未处理的记录时,我们会给记录对应的用户加钱,然后将这笔记录在系统中标记为已处理状态。重点是接口会返回许多笔交易记录,那如何判断某笔记录是已经被我们系统查询到且已经处理了呢?首先想到的 listtransactions 接口中返回的 txid 字段,起..._如何监听btc nft transfer

随便推点

随机色生成_el.style.color-程序员宅基地

文章浏览阅读1.4k次。把标题的颜色设置成随机色<h4 v-rainbow>标题随机色</h4>在script写局部自定义指令(如果想要写全局的需要在main.js里面书写)局部 directives:{ 'rainbow':{ bind(el,binding,vnode){ el.style.color = '#' + Math.ra......_el.style.color

matlab对三角波信号进行频谱分析,实验三 用FFT对信号进行频谱分析及MATLAB程序.doc...-程序员宅基地

文章浏览阅读4.2k次,点赞4次,收藏9次。实验三 用FFT对信号进行频谱分析及MATLAB程序实验三 用FFT对信号进行频谱分析一 实验目的1 能够熟练掌握快速离散傅立叶变换的原理及应用FFT进行频谱分析的基本方法;2了解; (3-1)是的连续周期函数。对序列进行N点DFT得到,则是在区间上对的N点等间隔采样,频谱分辨率就是采样间隔。因此序列的傅里叶变换可利用DFT(即FFT)来计算。用FFT对..._三角波频谱

数组中的逆序对-------归并排序应用_22212 14647 27252 22772-程序员宅基地

文章浏览阅读2k次。题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数P。并将P对1000000007取模的结果输出。 即输出P%1000000007 输入描述: 题目保证输入的数组中没有的相同的数字数据范围:对于%50的数据,size&amp;lt;=10^4对于%75的数据,size&amp;lt;=10^5对于%100的数..._22212 14647 27252 22772

Android列表控件,整理出Android逆向系列学习进阶视频-程序员宅基地

文章浏览阅读966次,点赞17次,收藏10次。/ 返回适配器都说三年是程序员的一个坎,能否晋升或者提高自己的核心竞争力,这几年就十分关键。技术发展的这么快,从哪些方面开始学习,才能达到高级工程师水平,最后进阶到Android架构师/技术专家?我总结了这 5大块;我搜集整理过这几年阿里,以及腾讯,字节跳动,华为,小米等公司的面试题,把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 PDF(实际上比预期多花了不少精力),包含知识脉络 + 分支细节。Java语言与原理;大厂,小厂。Android面试先看你熟不熟悉Java语言。

【预测模型】基于粒子群算法优化ElM神经网络实现分类matlab代码_适应度函数rmse-程序员宅基地

文章浏览阅读885次。【预测模型】基于粒子群算法优化ElM神经网络实现分类matlab代码1 简介粒子群算法是一种启发式优化算法。粒子群算法是将优化问题的解比作一个粒子,粒子具有初始速度和位置以及一个适应值。粒子的速度能够确定其移动的方向和距离,粒子的适应值是由算法的适应度函数计算得出。粒子通过比较适应值和极值来不断更新自己的速度和位置本文将极限学习机的输入层与隐含层神经元的连接权值和隐含层神经元阈值作为粒子群算法中的粒子进行 优 化。因 均 方 根 误 差(Rootmeansquareerror,RMSE)的作用是用来_适应度函数rmse

GitLab 之 Rebase 导致本地代码丢失,进行还原_git rebase 代码不全-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏7次。GitLab 之 Rebase 导致本地代码丢失,进行还原问题描述解决方案查看提交的历史记录回滚操作问题描述写了两天的代码,进行提交时发现冲突了,结果手贱点了 Rebase 结果发现本地代码全没了解决方案查看提交的历史记录–date=iso: 是为了打印时间,这样好通过时间判断哪个是提交的git reflog --date=iso我是通过提交时间,加上 Rebase 这个操作判断这个时间点是我要撤回的本地提交的时间点回滚操作之后旧发现代码成功变回去了git reset --hard _git rebase 代码不全