Gate Web3 Visual Design Gate Web3 视觉设计

The 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 随后共享这同一套语言。

A 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 内部文件；可在面试中完整讲述决策链路，包括被砍掉的那几轮。