Unified product language

清晰的内容，
轻盈的界面。

这是从审辨式思维测评系统沉淀出来的可复用 UI 设计系统。它不是一次性的页面装饰，而是一套面向后续产品的视觉框架：字体、颜色、玻璃材质、组件状态、动效、布局和代码规范都在这里统一。

探索组件与动效 ↗ 复制基础代码

主持人

先不用急着下结论。你会从哪些信息开始判断这个任务真正要解决的问题？

我

我会先看问题到底是增长、效率还是成本约束。

Evidence coverage 5 / 6

01 · Principles

设计原则

参考 Apple 对层级、材质和动效的处理方式，但服务于我们自己的产品：心理测评、教学工具、后台系统和 API 工具。

毛玻璃不是透明，而是层级

背景、容器、浮层和控件要有不同透明度、模糊半径、边框高光和阴影，用户能一眼看出信息层级。

先清晰，再漂亮

所有文字、表格和输入区域必须保持高可读性。玻璃效果只能增强质感，不能牺牲任务效率。

动效表达状态

hover、press、loading、toast、modal、页面进入都要有轻量动效，让系统像活的，但不能抢用户注意力。

组件可迁移

业务项目只引用 tokens 和组件类，不在页面里临时堆样式。这样后续新产品能保持同一视觉语言。

02 · Foundations

基础元素

所有项目优先复用这些 CSS 变量。新增页面时先选 token，不要随手写新颜色、新阴影、新圆角。

颜色

Primary#2f7df6

Primary 2#62a0ff

Ice#d9ecff

Panelrgba white

Ink#101828

Success#0f9f6e

字体

HarmonyOS Sans SC

中文、英文、数字和常用符号统一使用 HarmonyOS Sans。标题用 700–800，正文用 400–500，按钮和标签用 700。

圆角 / 阴影 / 模糊

大容器：32–36px
中卡片：24–28px
行卡片：18–22px
按钮：999px 胶囊
Blur：18–28px + saturate

Material Lab

玻璃，是让背景参与界面。

透明度控制透光，模糊控制信息层次，边缘高光勾勒厚度。拖动参数，观察条纹穿过面板时的变化。

Frosted Glass

背景被柔化，文字保持清晰。

模糊半径16px 白色覆盖30% 背景位置0px

外层用清透材质、操作层用磨砂材质；正文密集时提高覆盖率，不在每一层重复叠加模糊。

03 · Components

组件与状态

组件必须覆盖默认、悬停、按下、禁用、加载和错误等状态。下面是基础组件的标准形态。

按钮与交互状态

主操作使用品牌蓝玻璃，悬停出现跟随鼠标的白光；次操作保留透明玻璃，柔和提亮并出现蓝光。悬停不上浮，按下统一下移 1px、缩小至 98%，松开恢复。

危险操作保留红色语义；加载中与禁用状态不可点击，也不响应鼠标跟随光。

Form

输入框本身也要是玻璃材质，但输入区域必须足够清晰。错误提示不使用弹窗，贴近输入项显示。

Cards / Metrics

数据卡要轻、透、清晰。数字本身是主角，辅助信息保持克制。

本节 Requests1,284+12.4%

本节 Tokens482k正常

等待队列0通畅

Navigation / Tabs

选中状态必须明显，但不要重色块压迫。蓝色柔光、内高光和文字颜色一起表达当前状态。

Feedback

toast 适合轻量反馈；modal 只用于需要用户确认或阻断流程的场景。

操作成功：设计配置已保存。

04 · Motion

动效规范

动效用于表达层级变化、状态变化和反馈。默认时长短、幅度小，遵守 prefers-reduced-motion。

HovertranslateY(-2px)

卡片和按钮轻微上浮，表达可交互。

Pressscale(.98)

按下要有触感，但不能跳动明显。

Enterfade + blur

页面模块进入时从轻模糊到清晰。

Loadingshimmer

加载态使用低对比 shimmer 或 spinner。

05 · Product Patterns

产品模式

这些模式会频繁出现在我们的产品里，应保持一致：登录页、后台管理页、对话页、数据详情页。

登录页

左侧解释产品价值，右侧完成登录或注册。说明文案要短，操作入口要突出。

后台页

左侧固定导航，右侧工作区。状态消息放在侧边栏底部，不打断主流程。

对话页

移动端优先使用微信式聊天布局；桌面端可使用玻璃面板承载长文本和数据。

数据详情页

先给摘要，再给证据和日志。复杂信息用折叠块，不要把所有内容铺满首屏。

06 · Code

代码规范

组件代码要让人看懂：变量集中、层级少、class 命名语义化、注释解释“为什么”，不是解释“这一行是什么”。

:root {
  --glass-panel: rgba(255, 255, 255, .62);
  --glass-border: rgba(113, 150, 205, .30);
  --glass-shadow: 0 26px 72px rgba(42, 98, 166, .18);
  --brand-blue: #2f7df6;
}

.glass-card {
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.74), rgba(255,255,255,.42));
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(155%);
}

落地规则

业务页面只组合组件，不临时发明视觉样式。
新增组件必须补全 hover / active / disabled / loading 状态。
任何动画必须能被 prefers-reduced-motion 关闭。
不要为了透明牺牲正文、表格、输入框的可读性。
移动端优先减少大框和大标题，保留核心操作。

清晰的内容，轻盈的界面。