Unified product language

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

这是从PSJ过往产品中沉淀出来的可复用 UI 设计系统。它是一套面向后续产品的视觉框架:字体、颜色、玻璃材质、组件状态、动效、布局和代码规范都在这里统一。

Assessment Conversation
主持人

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

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

Evidence coverage 5 / 6

01 · Principles

设计原则

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

01

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

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

02

先清晰,再漂亮

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

03

动效表达状态

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

04

组件可迁移

业务项目只引用 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

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

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

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 关闭。
  • 不要为了透明牺牲正文、表格、输入框的可读性。
  • 移动端优先减少大框和大标题,保留核心操作。