返回博客
更新用户体验设计扩展紧凑设计发送交易国际化
Zelf 扩展 v2.0.57:UX 全面改版、紧凑设计与更流畅的发送流程
最新 Zelf 扩展更新涉及78个文件:紧凑设计令牌、重新设计的发送和接收流程、改进的账户管理、13种语言支持和更好的深色模式。以下是更新内容。
Miguel Treviño•

要点速览:
- Zelf 扩展更改了78个文件:广泛的 UX 和设计刷新,而非单一功能。
- **紧凑设计系统:**新的 CSS 自定义属性
--zns-font-scale和--zns-space-scale让 UI 可以缩放。60+个组件使用响应式尺寸;全屏模式是紧凑的,弹出窗口保持舒适。所有内容都适合标准笔记本屏幕,无需无尽滚动。 - 主页和账户管理:钱包操作从过大的3x2网格移至紧凑的3列分组布局。操作分为 ZelfProof(下载、助记词、Zelf Link)和应用(钱包、Zelf Keys、认证)。被截断的标签在悬停时获得即时 CSS 提示。管理标签按钮调整为约80%大小以获得更好的比例。
- 发送流程:****地址找到预览现在是紧凑行(头像、名称、截断地址)。最近地址不再复制地址找到卡片。点击取消选择最近地址;再次点击清除。从地址选择到确认的路径更加流畅。
- 接收流程:新的了解更多风险模态框,带有代币安全轮播卡片(如"不要将 ETH 发送到 Solana 地址")。接收屏幕之间的滑动动画。
- 安全和入门:****深色模式修复,安全选项使用正确的主题颜色。密码 vs PIN检测显示正确的解锁提示。面部未居中错误显示友好消息。回车键在最后一位触发 PIN 验证。
- **13种语言:**为 en、es、fr、ja、ko、zh、ar、pt-BR、hi、ur、th、ru、ph 提供新的和更新的字符串——紧凑标签、风险模态框、PIN 复制、错误信息。
紧凑设计系统
我们引入了设计令牌,使扩展可以适应不同的上下文而无需复制布局逻辑:
--zns-font-scale和--zns-space-scale控制排版和间距。在全屏模式下,我们使用紧凑值,使完整的 UI 适合典型笔记本电脑,无需滚动。在弹出模式下,我们保持舒适的尺寸以便快速操作。- 60+个组件已迁移为使用这些令牌。按钮、卡片、输入框和列表现在一致地缩放。结果是:一套代码库,两种调优体验(弹出 vs 全屏)。
如果你在全屏中使用 Zelf 进行投资组合和发送操作,你应该注意到首屏上有更多内容和更少的杂乱。
主页:账户和钱包操作
主页是你在钱包、Zelf Keys、认证和 ZelfProof 操作之间选择的地方。以前,操作放在一个占用大量空间的大3x2网格中。
新布局:
- 3列分组布局代替3x2。操作按用途分组。
- **ZelfProof 组:**下载、助记词、Zelf Link——与你的身份和备份相关的一切。
- **应用组:**钱包、Zelf Keys、认证——你的日常工具。
- 太长的标签被截断,悬停时显示即时 CSS 提示,你仍然可以看到完整文本。
- 管理标签按钮缩小到约**80%**大小,与其他操作保持更好的视觉平衡。
你在更少的空间中获得相同的操作,且分组更清晰。
发送交易:地址选择和确认
发送代币是最常用的流程之一。我们端到端地进行了优化:
- 地址找到预览:当你输入名称或粘贴地址并且我们解析后,预览现在是紧凑行:头像、名称和截断地址。不再有占满屏幕的超大卡片。
- 最近地址单独列出,不再复制地址找到卡片。所以你不会看到同一个收件人出现两次。
- **取消选择行为:**点击最近地址以选择。再次点击取消选择。再点击一次清除选择,这样你可以输入新的收件人。更清晰的心理模型。
- **流程:**从地址选择到金额和确认,过渡和布局更流畅,你可以更快完成发送。
接收:风险和教育
安全接收代币意味着避免跨网络误发和诈骗代币。我们添加了:
- 了解更多入口,打开带有简短提示轮播的风险模态框——如"不要将 ETH 发送到 Solana 地址"等链特定警告。
- 主接收屏幕和模态框之间(以及轮播卡片之间)的滑动动画。流程感觉更精致,鼓励快速阅读提示。
安全和入门优化
- **深色模式:**安全和解锁选项现在尊重活跃主题。深色模式下不再出现颜色不匹配。
- 密码 vs PIN:扩展检测你的钱包是用密码还是 PIN 解锁的。解锁屏幕显示正确的提示(如"输入 PIN"vs"输入密码"),避免混淆。
- 面部验证:如果你的面部没有在画面中居中,错误消息是用户友好的而非技术性的。
- PIN 输入:在 PIN 的最后一位,按回车键立即提交——不需要点击单独的按钮。
小细节,但减少了摩擦并支持正确使用。
13种语言支持
我们扩展和更新了国际化,使新 UI 完全本地化:
- **语言:**英语、西班牙语、法语、日语、韩语、中文、阿拉伯语、葡萄牙语(巴西)、印地语、乌尔都语、泰语、俄语、菲律宾语。
- 新增/更新的键涵盖:紧凑标签、风险模态框文本、PIN 解锁文案、面部错误消息以及此版本引入的其他字符串。
如果你在非英语语言环境下使用 Zelf,你应该在新的紧凑布局、发送流程和接收流程中看到一致的翻译。
总结
v2.0.57 是一次 UX 全面改版:紧凑设计令牌、重新组织的主页、更清晰的发送流程和更智能的地址处理、更安全的接收流程和风险轮播,以及浅色和深色模式下的安全/入门修复。加上开箱即用的13种语言支持。
从 Zelf 更新到最新版本,在弹出和全屏中尝试新布局——一切应该感觉更紧凑、更清晰、更易用。