Unified product language

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

这是从PSJ过往产品中沉淀出来的可复用 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。

圆角 / 阴影 / 模糊

操作按钮：999px 胶囊 · --radius-pill
单行输入 / 选择器 / Tabs（含选项）：999px 胶囊 · --radius-pill
菜单 / 树形 / 浮层 / 折叠面板：20px · --radius-ui
卡片 / 弹窗 / 大容器：20px · --radius-ui
圆形控件：保持圆形，不改变头像、单选框等形状
Blur：18–28px + saturate

Material Lab

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

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

Frosted Glass

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

模糊半径20px 白色覆盖40% 背景位置0px

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

03 · Components

组件与状态

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

按钮与交互状态

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

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

Form

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

Cards / Metrics

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

本节 Requests1,284+12.4%

本节 Tokens482k正常

等待队列0通畅

Navigation / Tabs

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

Feedback

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

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

04 · Motion

动效规范

以下对应当前控件的实际反馈：悬停不上浮，按下轻微缩小，玻璃底层始终保留。模块演示中的上浮、弹跳等属于独立动效示范，不是通用控件默认行为。

Hover · 悬停柔和提亮，不上浮

保留玻璃底层，通过高光与柔和投影反馈；不切成整块白底，不加蓝色描边。共用过渡为 180ms ease-out。

Pointer Glow · 跟随柔光浅色蓝光，主蓝白光

接入跟随光的控件按鼠标位置显示局部柔光；实心主蓝用白光，浅色控件和导航选项用蓝光。移出以 220ms 淡去。

Press · 按压下移 1px · 缩小至 98%

共用按钮、选择器按下时轻微下移并缩小，松开恢复；保留原有颜色与玻璃材质，不变成平面色块。

Selection · 选中浅蓝底与蓝字

Tabs、菜单和分类切换以浅蓝底、蓝字表达当前项；展开箭头随状态旋转。实心主蓝用于主操作，不用于导航选中。

Touch · 触屏按压反馈，无默认闪色

禁用浏览器默认点击高亮；触屏不显示鼠标跟随光，仍保留控件按压与状态反馈。

Reduced Motion · 减少动态保留状态，减少运动

尊重 prefers-reduced-motion：跟随光固定在控件中心且不渐变，折叠内容取消入场动画。加载仍以清晰的文字或状态标识表达。

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;
  --radius-ui: 20px;
  --radius-pill: 999px;
}

.glass-card {
  border: 1px solid var(--glass-border);
  /* 卡片统一 20px；按钮、单行输入、选择器、Tabs 用胶囊。 */
  border-radius: var(--radius-ui);
  /* 透明渐变形成材质层次，不把整个容器刷成纯白。 */
  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 关闭。
不要为了透明牺牲正文、表格、输入框的可读性。
移动端优先减少大框和大标题，保留核心操作。

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