整合品牌和 UX 设计，打造协调顺畅的新手体验。
焕新 MetaMask
焕然于心
Metamask
是 Web3 的大门，亦是屏障
离线存储的额外成本容易劝退用户。
准备成本过高
可用性欠佳
视觉难以构建信任感
不协调的品牌和界面降低了用户的信任。
冗长的流程与复杂的交互，容易导致用户流失。
重新定义体验目标
重塑对 Web3 新手友好的体验
安全
清晰
顺畅
Before
After
从里到外，重设计
提升品牌一致性，建立信任
重新优化交互流程，围绕用户旅程针对性设计，减少流失
简化界面设计，传递简洁的观感并提升可用性
灵感源于守护神像
富有安全感的新品牌符号
新的品牌形象承袭狮子神像的符号精神，寓意警觉与守护，传达出可靠与安心。
从空洞无神到怒目警觉
惊鸿一瞥只为守护
新的品牌形象以极简单色呈现，抛弃陈旧的 low-poly 风格，传递新鲜感并增强辨识度。借鉴盾牌的形态特征，硬朗的轮廓勾勒出狐狸姿态，目光传递出警惕与守护。
柠檬黄
连结品牌一致性与安全感
柠檬黄介于原品牌橙色与原 UI 蓝色之间，延续了原来品牌的暖色调，轻微贴近绿色唤起安全感，也使得品牌与界面在色彩上更协调统一。
原品牌色
新的 UI 和品牌色
原 UI 色
重新设计交互流程
每一步精雕细琢
用户流程与状态
设计目标
构建信任：使用统一的品牌和视觉语言来传递安全感。
设定预期：说明所需材料，预估时间和最终结果。
新用户对产品缺乏信任，且不清楚创建流程。
创建钱包前
聚焦重点：减少干扰和额外的跳转。
清晰指引：在每一步提供清晰的指令。
简化术语：用直白的比喻和图形解释。
激励完成：用利益点挽留中途退出的用户
不熟悉术语，复杂的步骤常常导致中途流失。
创建钱包中
提供清晰的反馈：确认钱包已创建并安全
提供场景化的提醒：提供安全备份和存储的建议
用户虽有成就感，却往往忽略了备份与离线存储。
创建钱包后
从以开发者为中心
转变成以用户为中心
新的品牌与一致的色彩语言奠定了第一印象，构建了连贯协调的体验感知。
启动 APP
注册
清新感，
一见倾心。
前置制造预期
前置提醒用户为离线存储准备，避免中途流失。
展示三步创建流程，传递明确的步骤与预估时间。
通过强调长期的资产安全，激励用户完成创建。
清晰说明在前，
具体操作在后。
密码与助记词经常被用户混淆，通过用户熟悉的语言和直观的图形清晰解释。
把抽象的装饰图形改成有说明意义的图形，借助日常可感的物件，帮助用户理解助记词的作用。
第一步 - 设定密码
第二步 - 介绍助记词
视觉图形：从干扰到辅助。
Before
After
用直观清晰的图形替代晦涩冗长的文字，让用户获得清晰的操作指引。
Before
After
从逐字细读，
到
直接秒懂。
少废话，
直接说重点。
Before
After
向用户提供清晰准确的指令。
进度条的设计细节
平衡传达清晰度与用户压力
创建钱包由三个关键步骤构成，为了帮助用户理解助记词而增加了额外两个页面，因此总共是五次页面跳转
展示三个关键步骤，但实际有五个跳转，容易引起用户的困惑并消解耐心
展示五个完整的跳转则让整个流程看起来冗长而繁琐。
保留展示三个关键步骤，增加两个内嵌的跳转在第二步，既能清晰传达，也不至于因繁琐的流程劝退用户
更优雅的报错方式
允许用户退出，
但挽留他们留下。
Before
弹窗中断了原有流程，堆叠的视觉层级让界面显得非常混乱，干扰用户。
以更克制的方式呈现截图提醒，减少打扰，保持流畅。
嵌入式的报错减少了视觉层级，让用户聚焦核心流程，提供重新生成的选项来保护助记词。
原有流程没有出口，而新的设计则在用户想要退出时候，展示一个强调利益点的挽留弹窗。
After
便于操作，易于完成。
Before
Before
After
After
确认所有的助记词需要点击多次，狭小的按钮热区难以操作。
简明的收尾提示，既确认钱包安全，又提醒备份。
模糊冗长的文本，缺乏清晰指引。
随机确认三个助记词，简化任务，同时也能保证用户已妥善保存。
插画辅助理解，
不为装饰而装饰。
Before
混杂的装饰插画徒增干扰。各种不协调的风格如：Emoji，扁平插画，立体3D渲染效果等，让整体的风格显得随意，并且干扰了用户对核心内容的关注。
After
带有指示性且风格一致额插画反而能辅助理解，通过用户熟悉的物品，以轻拟物的 3D 质感呈现，将抽象的概念变得具体生动，让 Web3 更通俗易懂。
查看更多作品
© Qicheng Hsu. All rights reserved.