Unified product language

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

这是从审辨式思维测评系统沉淀出来的可复用 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。

圆角 / 阴影 / 模糊

  • 大容器:32–36px
  • 中卡片:24–28px
  • 行卡片:18–22px
  • 按钮:999px 胶囊
  • 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

动效规范

动效用于表达层级变化、状态变化和反馈。默认时长短、幅度小,遵守 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 关闭。
  • 不要为了透明牺牲正文、表格、输入框的可读性。
  • 移动端优先减少大框和大标题,保留核心操作。