Gate 6.0 界面焕新

从现货到合约再到 Alpha,独立主导 Gate 全业务线 K 线页面的视觉与交互焕新——从竞品调研、风格探索到最终落地,定义了新一代交易界面的设计语言。

Go To Download

Vector
  • Icon

    页面视觉降噪

  • Icon

    视觉更轻盈

  • Icon

    主线突出

  • Icon

    视觉更轻盈

  • Icon

    现货 · 合约

  • Icon

    深度竞品调研

  • Icon

    BTC 行情

  • Icon

    消除切换损耗

Star

v4.0 - v6.0 改版

Lead UI Designer

现货 · 合约 · Alpha

Visual + Interaction

主要项目

K 线页上每一个用户操作,能不能少走一步?每一条信息,能不能快 0.5 秒被读到?

IXN–01

图表浏览
操作路径压缩

旧版浏览多币种 K 线需要「退出 → 返回列表 → 选币 → 进入」4 步。

新版通过左右滑动手势将路径压缩为 1 步-手势本身即是导航,无需离开 K 线视图。

设计挑战在于:滑动切换需要在现货/合约两套数据结构差异极大的业务线之间保持完全一致的手势响应,让用户的肌肉记忆跨产品复用。

Phone
Phone
Phone
Phone

旧 · 4步 · 2处摩擦 · 上下文丢失

新 · 3步 · 零跳转

第一步

Icon

AI 自动标注支撑 / 压力位

算法实时计算,叠加显示在主图上,无需估算

第二步

Icon

点击撑压线

直接触发止盈止损设置,无需页面跳转

05:00 PM

Icon

Stretch routine

10 minutes

10:00 PM

Icon

Plan tomorrow

5 minutes

07:30 AM

Icon

Morning walk

15 minutes

09:00 AM

Icon

Drink 3 glasses of water

Before 11:00 AM

10:00 AM

Icon

Deep work session

60 minutes

11:30 AM

Icon

Read 10 pages

30 minutes

第三步

Icon

完成

分析与下单在同一界面,零跳转,行情实时可见

IXN–02

分析→交易
页面跳转消除

旧版做技术分析的完整路径:看 K 线图估算支撑位 → 记住价格 → 切换下单页 → 手动输入。

这中间有两处高摩擦:认知负担(需要在脑中暂存数据)和页面切换损耗(上下文中断,行情可能已变)。

AI 智能撑压线将两个摩擦点同时消除——自动标注关键位,点击直接触发止盈止损设置——分析与下单在同一个界面完成,零跳转。

IXN–03

低噪音 · 高可读
组件、交互一致性

旧版三条业务线(现货 / 合约 / Alpha)的 K 线页各自独立维护,导致同一个交互模式在不同业务线行为不一致——用户在现货习惯了 crosshair 悬停的响应方式,切到合约发现反应不同,产生跨产品认知摩擦。将 K 线核心模块组件化之后,crosshair、tooltip、时间轴、蜡烛图渲染、量能区全部抽象为统一组件——三条业务线共享同一份交互逻辑与视觉规范。用户的操作肌肉记忆在任意业务线之间完全复用,零重新学习成本。同时,组件化也让后续每一次交互升级只需改一处即可全线同步

重点页面预览

K 线页上每一个用户操作,能不能少走一步?每一条信息,能不能快 0.5 秒被读到?

K 线不只是图表,它是交易者和市场之间唯一的语言。当 AI 开始读懂价格结构,当手势替代了四步跳转——设计的边界,第一次真正延伸到了交易决策本身。

Interaction Design

Visual Design

Competitive Research

Design Systems

AI Product Design

Create a free website with Framer, the website builder loved by startups, designers and agencies.