REITs TechDeveloper查看 UI 蓝图

UI FOUNDATION / 04

UI 标准

一套语言，多种实现。Web、Vue 后台、SwiftUI 和 miniapp 共享语义 token、组件状态和可访问性要求。

01

Content first

首屏直接回答用户任务，导航和仪表盘 chrome 只占必要空间。

02

One source of truth

颜色、间距、字体和状态语义来自版本化 token，不在页面散落常量。

03

Density by context

公共内容舒展、运营表格紧凑、移动端单手可达；不强求所有端像素一致。

04

Accessible by default

键盘、VoiceOver、对比度、动态字体和减少动效是组件默认能力。

05

Evidence visible

金融内容展示来源、更新时间、风险与审核状态；系统操作展示执行证据。

06

Calm technology

参考 Vercel/Stripe/GitHub 的清晰层级，使用克制蓝绿信号，不堆装饰性 Web3 元素。

CURRENT VISUAL FAMILIES

保留六套现有产品气质，统一语义而不是强行同皮肤

全局设计系统先统一状态、间距、可访问性和组件契约；品牌色与内容密度继续由现有产品证据决定。

Public Trust线上实屏

reits.tech · BBS

建筑影像、可信青绿、来源卡与网格背景

Local Marketplace线上实屏

Matrix Order

黄色发现头、搜索、Chips、店铺与服务卡

Developer Dark线上实屏 + React

Open Platform

深色开发者控制台、紧凑表单与代码信息

OperationsVue 源码

data-sources · trading-data-source

Element Plus 侧栏、表格、筛选、抽屉与状态条

Matrix X仓库截图 + SwiftUI

matrix-x-chat-ios

大留白、蓝色主操作、原生 iOS 列表与五 Tab

Quant PaperSwiftUI 主题源码

matrix-quant-im-ios

暖纸背景、量化信号色、策略证据与原生 Tab

TOKENS

跨端语义 token

这些值定义角色，不抹平产品主题。每个现有视觉家族把自己的 palette 映射到相同语义，再生成 Web CSS、Vue theme 与 Swift 常量。

TokenValueUseSample
color.canvas#F7F8FA全局背景
color.surface#FFFFFF卡片/面板
color.ink#171A1F正文与标题
color.muted#667085次级信息
color.line#E4E7EC分隔与边框
color.brand#0B63E5主操作与链接
color.signal#0E9384可信/完成状态
radius.control8px输入与按钮Aa
radius.panel12px内容面板Aa
space.unit4px所有间距的基数Aa
layout.content1200px正文最大宽度Aa

COMPONENT CONTRACT

组件必须交付完整状态，而不只是静态截图

ComponentVariantsRequired states
Buttonprimary / secondary / quiet / dangerdefault · hover · focus · loading · disabled
Fieldtext / search / select / number / textareaempty · filled · focus · error · disabled
Statusneutral / info / success / warning / critical必须同时有文字，不只依赖颜色
Tablecomfortable / compactloading · empty · filtered · error · partial
Dialoginfo / confirm / destructive焦点锁定 · Esc · 返回焦点 · 二次确认
ContentCardarticle / source / asset / thread来源 · 时间 · 状态 · 主操作固定

RESPONSIVE

三档布局，不按设备品牌写页面

Compact · 320–767

单列；主操作拇指可达；表格转卡片或横向受控滚动；不隐藏关键状态。

Medium · 768–1199

两列或侧栏折叠；导航可横向滚动；详情和列表允许主从切换。

Wide · 1200+

内容最大宽 1200px；数据台可放宽；文本行长保持可读，不用空白装饰。

UI CI

UI 变更的六道门

  1. 01
    Token

    无新增硬编码颜色/间距/字体

  2. 02
    Static

    typecheck、lint、构建与本地化键

  3. 03
    Contract

    组件、路由和 API schema 无意外漂移

  4. 04
    A11y

    键盘、标签、对比度、动态字体

  5. 05
    Visual

    关键 viewport 截图 diff 有 owner 审批

  6. 06
    Journey

    核心用户任务 E2E 与失败态通过