张舒 UI/UX Designer

界面工程 · UI Lab

三个可操作的界面规范实验。

设计变量、无障碍组件状态与响应式数据界面均可直接操作，并同步展示对应的 TypeScript 与 CSS 实现片段。

01 · Token Playground

设计变量如何影响界面系统

调整品牌色、圆角、间距与密度；右侧组件和 CSS Variables 同步更新。控件使用原生 input/select，键盘可以完整操作。

Design System
进行中12
本周完成48
设计评审今天
组件验收明天
CSS Variables
Token 更新逻辑TypeScript
const demo = document.querySelector<HTMLElement>('[data-token-demo]');

function applyTokens() {
  demo.style.setProperty('--demo-brand', color.value);
  demo.style.setProperty('--demo-radius', `${radius.value}px`);
  demo.style.setProperty('--demo-space', `${spacing.value}px`);
  demo.dataset.density = density.value;
}

02 · Accessible States

完整状态构成组件体验

Button、Input、Select、Table、Empty、Loading 均有语义状态。Tab 聚焦；组件 Tab 使用左右方向键、Home 与 End 切换。

Button states

Tab 聚焦；Space / Enter 触发。

当前展示 Button 状态

键盘切换逻辑TypeScript + ARIA
tabs.addEventListener('keydown', (event) => {
  if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
  const next = (activeIndex + (event.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length;
  items[next].focus();
  items[next].click();
});

03 · Responsive Dashboard

小屏需要重新组织信息

桌面端保留对比密度；移动端将行数据转换成带字段标签的卡片。可用按钮直接切换两种预览，也会响应真实视口。

Responsive Dashboard数据均为示意
Workspace / Overview

业务运营概览

本周任务48+12%
按时完成92%+4%
平均处理2.4h−18%
近 7 日完成量示意趋势
任务负责人状态更新时间
设计系统审计成员 A进行中今天 10:24
移动端验收成员 B待确认昨天 16:40
数据口径补充成员 C已完成周一 09:12
预览模式切换TypeScript
modeButtons.forEach((button) => {
  button.addEventListener('click', () => {
    preview.dataset.preview = button.dataset.mode;
    modeButtons.forEach((item) =>
      item.setAttribute('aria-pressed', String(item === button))
    );
  });
});

业务应用 · In Practice

从界面实验进入业务场景。

查看 Token、组件状态和响应式策略如何进入两个代表项目。

查看后台组件体系查看 App 视觉系统