WISERUNION / DIGITAL PRODUCT SYSTEM

数字产品设计系统 · V0.1

AI 辅助设计建议，待确认采用。以下组件只进行本地演示，不提交或保存业务数据。

DIGITAL PRODUCT SYSTEM / 设计基础

让品牌进入每一次操作。

把 WISERUNION 的清楚、克制与共同建设，落实为可以组合的文字、颜色、间距和控件。同一套基础服务网页与手机界面，具体页面从读者的任务出发。

V0.1 · 2026-11-04 · AI 辅助设计建议，待确认采用。此处提供设计规则与本地示例，不表示全站或 NST 软件已接入，也不替代实际页面的无障碍与业务验收。

识别保持一致

沿用现有品牌基础。

保留黑白灰、矿物青、字体回退和原始标志。界面状态色与品牌主色分别管理。

查阅排版与颜色规范 ↗

操作有明确反馈

让人知道发生了什么。

按钮写清动作，字段有标签，等待、成功和错误保留文字，不只依赖颜色。

查看表单与反馈 ↗

内容与责任先行

区分界面和真实业务。

已填写、已发送、已接收、已复核分别呈现。演示界面不产生真实业务状态。

查看页面模式 ↗

SEMANTIC COLOR / 按用途使用颜色

换一种背景，保持同样清楚。

主题变量表达用途，同一个控件不硬写一套颜色。下面仅切换示例区域；本站其他页面保持各自的呈现。深色分区和语义状态配色属于本版界面建议，不能用来改绘正式标志。

局部界面示例 · 同一内容

一份内容，清楚呈现。

先读清说明，再选择下一步。背景变化时，文字、边界和行动仍容易辨认。

界面示例待确认采用

查看组件与交互

查看完整颜色变量

颜色值取自本版设计变量；对比配对与来源指纹见 JSON
用途	变量	浅色主题	深色主题
页面背景	`background`	`#FFFFFF`	`#08090A`
内容分区	`surface`	`#F5F5F3`	`#161B1B`
主要文字	`text`	`#151515`	`#FAFAFA`
辅助文字	`muted`	`#696969`	`#BBC3BF`
主要行动与强调	`accent`	`#286C67`	`#73B8B0`
强调底上的文字	`onAccent`	`#FFFFFF`	`#08090A`
控件边界	`border`	`#7C827E`	`#7C827E`
成功或完成	`success`	`#286C67`	`#73B8B0`
注意或待确认	`warning`	`#815300`	`#F4D078`
错误或破坏性操作	`danger`	`#A33131`	`#FFB4AB`
说明与信息	`info`	`#225C99`	`#A6CDFF`

TYPE, SPACE & LAYOUT / 排版、间距与布局

从少量规则，组合清楚的层级。

文字先适合阅读。

正文从 1rem、1.7 倍行距开始，说明文字为 0.8125rem。保留浏览器缩放与字体替代。

字重以 400 / 500 为基础；标题按内容和可用宽度调整。

间距有共同步进。

以 0.25rem 为基础步进，根字号 16px 时为 4px；常用 0.5rem、1rem、1.5rem、2rem，随用户字号同比缩放。

控件目标至少 44px；不要用缩小点击区域换取紧凑排版。

形状服务于内容。

控件圆角 4px，卡片圆角 8px；边界与留白先区分层级，阴影不承担唯一识别作用。

可读行宽以 68ch 为起点，长表格在自己的容器内滚动。

查看字体回退与响应式建议

Inter, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif

字体只声明回退栈，不随包下载或分发。缺字、换行与使用许可按实际环境复核；正式品牌字标调用原 SVG，不用字体重建。

小于 640px：4 栏，内容按阅读顺序纵向重排。
640px 至 960px 之前：8 栏，保留完整标签和操作。
从 960px 起：12 栏，正文不因屏幕变宽而无限拉长。

这是新组件的建议断点，不替换宿主页企业文化目录既有的 800px 规则。网格按实际可用内容宽度与缩放结果复核。

无障碍、研究图表与动态各有专项规则：无障碍设计、研究图表、动态语言。本版组件的局部对比检查不代表全站认证。

COMPONENTS & INTERACTION / 组件与交互

把一致的设计，变成可用的操作。

按钮说明行动，字段帮助填写，状态交代进度。相同的操作在不同页面保持相同的意义，也给键盘和触屏留下完整路径。

以下为本地组件演示。按钮只改变本页示例；颜色、状态或确认对话框都不代表真实业务已经执行。

一个区域，一个主要行动。

主按钮用于当前重点；次按钮保留可退回的选择，文字链接承接阅读跳转。用完整动词说明按下后会发生什么。

查看页面模式

禁用原因写在按钮或旁边；需要说明时不能只依赖悬停。

状态与使用规则

默认、悬停、按下、键盘焦点、禁用分别有对应样式。Tab 可检查 2px 焦点描边；触控目标至少 44 CSS px 是本版品牌目标，不作为全站合规声明。

让状态有文字，也有下一步。

这些是语义标签示例。事实依据、来源和责任人仍由具体页面说明，不用颜色替代判断。

未开始

说明当前进度，不把空白记录当作已完成。

供参考

提示补充信息，保留来源与适用范围。

待复核

说明还需确认什么，以及下一步由谁处理。

需要修正

指明问题与修正办法，不只显示红色。

检查通过

只对应实际完成的该项检查，不替代价值验收。

提示示例：演示材料仍需复核。查看依据后，再决定是否采用。

有影响的操作，先说明范围。

确认文字说明会改变什么，并给出清楚的取消选择。本例只清空下一个栏目中的本地表单示例，不涉及真实账户、需求单或线上数据。

结构

名称、内容、行动分清楚

卡片有可辨标题，列表有栏目名，图标有文字或可访问名称。不要让整块可点与内部多个动作互相冲突。

输入

标签持续可见

占位文字只是示例，不能代替字段名。必填、格式、错误与修正方法靠近对应输入。

反馈

操作结果可以复查

短状态用简洁反馈；重要结果保留在内容中。显示“已发送”必须有真实发送依据。

FORMS & FEEDBACK / 表单与反馈

让填写、修正和结果衔接起来。

先说明要填什么，再帮助修正，最后清楚呈现操作结果。空白、等待、失败与完成各有明确的文字，避免让使用者猜测。

这是设计系统的本地练习表单。输入不发送；本示例不主动写入设备存储，仅在当前页面内处理。正式合作需求请使用服务栏目入口。

本地生成结果

空白与空结果

解释还没有什么，给出开始方式。搜索无结果时保留条件，允许清空重新查看。

处理中与失败

等待状态要有明确范围；失败说明能否重试和是否保留输入。没有真实处理过程，不显示虚假进度。

已完成与待确认

区分生成、发送、收到、复核、验收和采用。“生成本地示例”不等于“需求已受理”。

PATTERNS & DELIVERY / 页面模式与交付

从组件，走到完整的使用路径。

同一套界面基础可以服务阅读、合作与共同工作。页面先回答“来这里要完成什么”，再选择组件和信息密度。

先读清内容

知识阅读

标题与导语建立上下文，作者、来源和版本紧随其后。正文可连续阅读，引用与下一步行动分开。

顺序：上下文 → 正文 → 依据 → 相关内容。

查看科研栏目 ↗

先整理事项

合作需求

分步说明字段用途，核对工作范围，让用户确认内容。填写、核对、发送与接收分别给出准确反馈。

顺序：填写 → 核对 → 用户确认 → 后续受理。

操作表单示例 ↗

先看当前事项

协作工作台

列表说明事项与状态，提供搜索、筛选和空结果提示。状态来自真实记录，完成条件和复核责任另行明确。

顺序：找到事项 → 看清状态 → 明确下一步。

查看下方本地演示 ↗

LOCAL DEMO / 列表、筛选与空结果

只改变视图，保留事项的上下文。

以下三条为人工编制的界面样例，不是实际工作进度。搜索与筛选只作用于本页，不读取账户、不连接后台，也不代表 NST 软件已具备这些功能。

所有内容均为本地示例；清空搜索并选择“全部状态”可恢复完整列表。

界面演示记录 · 共三条 · 不对应真实任务
演示编号	事项	示例状态
演示任务 01	整理阅读资料	待复核
演示任务 02	检查界面文案	已完成
演示任务 03	核对页面链接	待复核

显示 3 条演示记录。

DESIGN TO DELIVERY / 从设计到交付

把规则、状态和验收一起交接。

先对齐任务：确认读者、要完成的动作、信息来源及真实业务状态。
再组合界面：从已有变量与组件开始，记录新增项及其适用范围。
逐状态核对：检查默认、焦点、禁用、校验、空结果和失败恢复路径。
按页面验收：在实际内容与设备上检查阅读、键盘、触控和响应式重排。
保留版本记录：记录文件、变更、采用范围与验证结果，发布另行确认。

本版以变量 JSON 对应语义值，以 CSS 对应视觉规则，以原生 HTML 示例对应结构。接入具体产品时，再明确数据、权限、网络失败、保存与恢复等实际行为，并按页面记录采用范围。

配套包不是完整业务应用、已接入的后台、框架组件 SDK 或无障碍认证。版本升级保留差异与旧版；合并、上线和采用分别确认。

下载设计系统配套包变量、样式、原生 HTML 示例与使用说明。设计变量 JSON浅深主题、字号、间距、布局和对比记录。基础组件 CSS独立作用域，按组件引入和复核。原生 HTML 示例查看结构、标签和状态的对应方式。使用与交付指南接入方式、适用边界及验收清单。

V0.1 · 2026-11-04 · 建议稿，待确认采用。来源与颜色对比保留在变量 JSON；素材版本管理继续区分登记、采用与正式发布。