2025 — 2026
Platform — iWeb3 Concept平台 — iWeb3 概念改版
WEB3 / 00The problem. An exchange landing page has to serve two users at once: a first-timer who needs a reason to trust it, and a trader who wants the market and the trade button now. Earlier waves solved this by stacking modules, which pushed live prices below the fold and made every section shout equally loud. 问题。交易所首页要同时服务两类用户:需要理由建立信任的新用户,和只想立刻看到行情与交易入口的老用户。此前版本靠堆叠模块解决,结果是实时价格被压到首屏之下,每个区块都在同等音量地喊话。
Design decisions. Live market data moves into the first screen so price is visible before any copy. Trust signals ($16.89B volume, 13 years, 125% reserve ratio) are consolidated into one scannable band instead of being scattered. Near-black surfaces with a single blue accent leave contrast free for the only things that should move: numbers and the primary action. Landing, markets, DEX and Global Tour then share that one grammar. 设计决策。把实时行情提到首屏,让价格先于任何文案出现;信任信号(168.9 亿交易量、13 年、125% 储备率)从散落各处收拢为一条可扫读的数据带;近黑色底 + 单一蓝色点缀,把对比度留给唯一该动的东西——数字与主行动按钮。首页、行情、DEX 与 Global Tour 随后共享这同一套语言。
Home Hero — Two Answers首页头部 — 两个答案
WEB3 / 01

What actually changed between the two. The line-art version is elegant, brand-safe, and asks the user to do the reading. The 3D version makes two moves at once. First, tokens, arrows and a deposit tag carry the message at thumbnail size — which is the size a home hero is really seen at. Second, the sentence changes: Deposit and trade now becomes Sign up and get $10,000+, and the button under it goes from Deposit to Sign Up / Log In. That second move is the one that matters — it admits that a logged-out home page is an acquisition surface, not a dashboard. 两版之间真正变了什么。线稿版优雅、安全,但要求用户自己去读。3D 版一次做了两件事。第一,代币、箭头和 DEPOSIT 标签让信息在缩略图尺寸上就能读懂 — 而那正是首页头图真实被看到的尺寸。第二,那句话变了:Deposit and trade now 变成 Sign up and get $10,000+,按钮也从 Deposit 变成 Sign Up / Log In。第二步才是关键 — 它承认了未登录状态的首页是获客界面,不是仪表盘。
The Sticker System贴纸体系
WEB3 / 02

Built once, spent everywhere. The stickers are not an illustration on one screen — they are an asset family with a die-cut white edge as the unifying rule. The same clusters run in the app hero, in the CeFi ad tryouts and in campaign banners, in both themes, without re-rendering. When the message changes, a sticker is swapped; the composition logic stays. 做一次,处处花。贴纸不是某一屏上的插画 — 它是一个素材族,统一规则是那圈白色刀版边。同一组贴纸跑在 App 头图、CeFi 广告尝试和运营 Banner 里,明暗两个主题通用,不需要重渲。信息变了就换一张贴纸,构图逻辑不动。
Shipped — First Run上线稿 — 首次启动
WEB3 / 03A value ladder, not a tour. Four screens, ordered by how much the reader already knows: discovery, then signal, then execution, then risk control. Every screen carries the same two buttons — Create wallet and I already have one — so a returning user can leave at screen one instead of swiping through a pitch they don't need. The top two-thirds of each screen is a video well; the copy block below it is fixed height so the headline never moves between swipes. The tab bar stays visible throughout: the app is never pretending to be a slideshow. 这是价值阶梯,不是产品导览。四屏,按读者已有的认知程度排序:发现 → 信号 → 执行 → 风控。每一屏都带同样两个按钮 — Create wallet 与 I already have one — 老用户在第一屏就能离开,不必划完一整段自我介绍。每屏上方三分之二是视频区,下方文案块高度固定,标题在滑动之间不会跳动。底部标签栏全程可见:App 不假装自己是一套幻灯片。
Handoff spec, as written on the canvas. Format webM · playback replays once per swipe, no looping · asset delivered by download link rather than embedded. Three lines, but they decide battery cost, file size and whether the animation reads as a moment or as wallpaper. A visual that ships is a visual with a spec attached. 交付规范,画布上原样写着。格式 webM · 播放模式 每 swipe 一次,重新播放;无循环播放 · 素材以下载链接交付,不内嵌。就三行,但它决定了耗电、包体大小,以及这段动画是被读成「一个瞬间」还是「一张墙纸」。能落地的视觉,是带规范一起交出去的视觉。
Two themes, one layout. Light and dark are built as one file, not two designs: the grid, the card rhythm and the CTA position are identical, and only surface, stroke and elevation change. Green and red stay fixed across both because a trader reading P&L should never have to recalibrate. The home hero sits in a video well designed empty — if the layout only works once the artwork lands, the layout doesn't work. 两个主题,一套布局。明暗是同一份文件而不是两份设计:栅格、卡片节奏、CTA 位置完全一致,只有表面色、描边和层次在变。涨绿跌红在两个主题下保持固定 — 看盈亏的人不该每次都重新校准。首页头部所在的视频区是按空状态设计的 — 如果布局要等素材到位才成立,那这个布局就不成立。
Scope, honestly. Information architecture, interaction spec and copy decisions sit with Gate's product design and growth teams; my part is the visual layer — direction, illustration and 3D systems, screen design, light/dark parity and the motion spec that ships with them. Two further exploratory waves (an abstract-mark flow and a photographic direction) stay inside Gate's internal files; happy to walk the full decision trail, including the cut waves, in an interview. 关于范围,说实话。信息架构、交互规范与文案决策归 Gate 的产品设计与增长团队;我负责的是视觉层 — 方向、插画与 3D 体系、页面设计、明暗一致性,以及随之交付的动效规范。另有两轮探索方向(抽象标记流程与实拍质感)留在 Gate 内部文件;可在面试中完整讲述决策链路,包括被砍掉的那几轮。