CNKI 前端文档站

用设计系统统一知网多端体验

一、一致性是一种竞争力

用户会在电脑上用总库检索、手机上用手机知网阅读、在会员中心管理订阅。如果这三处的按钮圆角、主色、字号、空状态文案各不相同，用户每次切换都要重新”学习”界面，信任感会被悄悄磨损——而信任，恰恰是知识服务产品的命脉。

我们希望做到：无论哪个端、哪个团队出品，用户都能一眼认出”这是知网”。这背后的工程产物，就是设计系统（Design System）。

二、核心：Design Token

设计系统落地的第一性原理，是把所有设计决策抽象成设计令牌（Design Token）——一段带语义的名字，绑定到具体值。Token 是设计与代码之间的唯一真相源（single source of truth）。

:root {
  --cnki-color-brand: #1450a0;        /* 知网蓝 */
  --cnki-color-brand-hover: #1d6bd8;
  --cnki-color-brand-active: #0f3d7d;
  --cnki-radius-base: 8px;
  --cnki-space-4: 16px;
  --cnki-font-body: 14px;
  --cnki-shadow-card: 0 2px 8px rgba(20,80,160,.08);
}

Token 带来的杠杆：

  • 设计师改一个色值，全端自动同步，无需逐个改页面；
  • 新增”暗色模式""适老化大字号模式”只需再定义一套 Token；
  • 跨框架（React / Vue / 小程序 / 原生）共用同一份 Token 源，天然一致。

三、Token 三层结构：从抽象到具体

直接写 --blue-500 和写 #1450a0 没本质区别。我们采用三层，避免 Token 泛滥、也避免业务代码耦合具体色值：

  1. Primitive（原始层）：纯数值，blue-500、gray-100、space-200。这一层只描述”有什么”，不表达”用在哪”。
  2. Semantic（语义层）：表达用途，color-text-primary、color-bg-soft、space-card-gap。这是设计意图。
  3. Component（组件层）：绑定到具体组件，button-bg、card-border-radius。

铁律：业务代码只允许引用 Semantic 与 Component 层，绝不直接写 #1450a0 或 --blue-500。这样未来品牌升级，只需改 Primitive → Semantic 映射，业务零改动。

我们用 Style Dictionary 把一份 JSON 源编译成多端产物（CSS 变量、iOS 常量、Android 资源、Figma 变量），一次定义，处处消费。

{
  "color": {
    "brand": { "value": "#1450a0" },
    "text": { "primary": { "value": "{color.brand.value}" } }
  }
}

四、主题切换：明暗与适老化

Token 的红利在主题切换时最明显。我们支持三套主题：

  • 浅色（默认）
  • 暗色：降低对比、护眼，研发夜间场景；
  • 适老化：放大字号（基础 18px）、加粗、提对比，服务银发用户。

切换只是换一套 --cnki-* 变量，[data-theme="dark"] 作用域下发，组件无感知。这比”每个组件写两套样式”轻量得多。

[data-theme="dark"] {
  --cnki-color-bg: #0f172a;
  --cnki-color-text: #e2e8f0;
  --cnki-color-brand: #4f9bff;
}

五、组件库架构：Headless + 样式解耦

设计系统最终以组件库形式交付。总库、手机知网、会员中心都基于同一套组件构建，差异只体现在布局而非基础控件。架构上我们采用 Headless（无头） 思路：

  • 组件只负责行为、状态、可访问性，不绑定视觉；
  • 视觉通过 Token + 样式层注入；
  • 这样同一套 Dialog、Tabs、DatePicker 可在三端一致复用。
// Headless：只管开合逻辑与 a11y，不管长相
function useDialog(open, onClose) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  return { role: 'dialog', 'aria-modal': true };
}

六、多框架支持：一套设计，多处落地

知网前端并非单一框架：

  • 总库历史模块用 Vue；
  • 手机知网新模块用 React；
  • 部分轻量页用原生 + Web Component。

我们的策略是：Token 与”无框架组件”（Web Component / 原生）作为底座，React/Vue 各提供一层薄适配，保证视觉一致、API 各异但可预期。

七、设计-研发协作：Figma 联动

设计系统不是研发单方面的事。我们打通 Figma：

  • Figma 变量与 Token JSON 双向同步，设计师改色值，研发侧自动生成 PR；
  • 组件在 Figma 有”源组件”，研发据此实现，杜绝”看着像但细节不一致”；
  • 新页面评审时，自动检查是否违规引用了非 Semantic Token。

八、文档站：就是本站

设计系统必须”可用、可查、可搜”。我们直接把文档站（也就是你正在看的 CNKI 前端文档站）作为组件库门户：每个组件有用法、Token 表、可访问性说明与代码示例。文档即契约，新人第一天就能对齐规范。

九、版本管理与 Breaking Change

组件库有版本，也有破坏性变更。我们约定：

  • 语义化版本：major 破坏性、minor 新增、patch 修复；
  • 破坏性变更必须提供 Codemod（自动迁移脚本）与弃用期（deprecation）；
  • 各业务线锁定大版本，升级由专职”设计系统对接人”推进，避免各自为政。

十、度量：让一致性可被量化

不度量就不知道投入值不值。我们跟踪：

指标含义我们现状
组件复用率业务代码使用设计系统组件的比例目标 > 85%
UI 一致性缺陷因样式不统一提交的 bug同比降 60%
新页面搭建耗时从 0 到可评审由 3 天降至 0.5 天
主题切换覆盖支持暗色/适老化的组件比例100%

十一、无障碍与国际化

  • 全组件默认满足 WCAG 2.1 AA：键盘可达、对比度达标、aria 完整；
  • 文本不写死在组件里，走 i18n 资源，支持多语言与多术语体系（如”机构”在香港版称”院校”）。

十二、未来：AI 辅助生成组件

探索中：用大模型读取 Token 规范与设计稿，自动生成符合设计系统的组件代码与单测，把”对齐规范”从人工约束变成默认结果。

十三、小结

设计系统不是一套 UI 库，而是一种跨团队的协作契约。它让知网总库、手机知网与会员中心在用户眼中成为”同一个知网”，也让每一次品牌升级、每一套新主题的落地成本趋近于零。如果你正在构建多端产品，建议尽早投资 Token 体系——它会在未来每一个新端、每一次品牌升级时加倍偿还。

← 返回博客列表