PFM LAB / DESIGN REFERENCE

清晰、有活力，
为科研留下空间。

以已定稿官网为基础的组件参考。保留轻盈蓝白、柔和层次与横向成果卡片，将视觉习惯整理为可复用的规则。

离线参考文件 · 非替换网站 · 不连接实验室数据库

01 / COLOR

同一背景，清楚的层次。

现有品牌色与建议的功能色分开命名。
色彩承担秩序，不增加无意义的装饰。

PFM Blue

#337FFF现有 · 品牌识别

Light Cyan

#A6EDFA现有 · 光点装饰

Canvas

#FBFDFF现有 · 统一背景

Ink

#1F2329现有 · 主要文字

Action Blue

#245BDB建议 · 链接 / 实色按钮

生产建议：品牌蓝 #337FFF 与白色的对比度为 3.74:1，不用于普通字号的白字按钮。功能蓝 #245BDB 与白色为 5.84:1。保留品牌蓝用于 Logo 与装饰，按钮和正文链接使用功能蓝。该建议尚未应用到官网。

实色对比度参考 · sRGB 计算
组合	对比度	普通正文 ≥ 4.5:1	使用边界
Ink / Canvas	15.48:1	通过	标题与正文
Muted #646A73 / White	5.45:1	通过	辅助说明
Action Blue / White	5.84:1	通过	链接、白字实色按钮
PFM Blue / White	3.74:1	不通过	品牌装饰；大字需单独判断
Light Cyan / White	1.30:1	不通过	仅装饰，不能独立表示状态

以上只验证列出的不透明实色组合；不能代替整页审计。渐变、图片、悬停和焦点状态需逐项验证。

02 / TYPOGRAPHY

让信息先被读懂。

系统字体优先，减少加载。
中英文协调，标题有分量，正文有呼吸。

DISPLAY / 48 PX MAX

以光为起点

HEADING / 32–40 PX

连接材料的更多可能。

BODY / 16 PX · 1.7

我们关注分子、界面与功能之间的联系，探索功能高分子材料的构筑与应用。

Photopolymerization Functional Materials Lab

一套有节制的层级

正文: 16 px / 1.7 · 400
小字: 14 px / 1.6 · 400
注释: 12 px / 1.6 · 400
卡片标题: 16–20 px / 1.45 · 600
字体回退: Apple system → Segoe UI → PingFang SC → Microsoft YaHei

页面使用操作系统已安装字体，不打包或分发系统字体。正文不使用淡蓝色；英文论文标题不强制翻译。

03 / ACTIONS & STATES

少一点操作负担。

键盘可达、焦点清楚；
同一区域只有一个主要动作。

按钮 / Buttons

生产建议

键盘焦点示意

推荐触控区域至少 44 × 44 px。Tab 聚焦，Enter / Space 激活。图标按钮必须有可读名称。

状态 / Status

已发表 / Published草稿 / Draft首页精选 / Featured 需补充信息

状态必须有文字，不只依赖颜色。首页精选由实验室负责人或管理员设置；视觉标签本身不授予权限。

交互提示会显示在这里。

04 / INPUT & FEEDBACK

登记信息，安静而可靠。

成果中心以效率为先。
不引入转轮、漂浮或入场动画。

05 / CARDS & POPOVERS

Selected publications

横向摘要图完整展示。
悬停平滑抬升，点击目的地保持明确。

JOURNAL / YEARPublished

Example publication title in its original language

Author A, Author B, Author C

Graphical abstract

示例内容，不是新增科研成果 · Hover / Tab 查看状态

卡片行为规范

信息顺序: 期刊 / 年份 → 标题 → 作者 → 访问提示
摘要图: 横向 16:10；完整适配 object-fit: contain
公开访问: 链接至 DOI 或可公开出版页面
内部成员: 链接至成果详情；PDF 由服务器授权访问
交互反馈: 普通卡片上移 2 px，放大 1.025，480 ms；首页转轮鼠标悬停使用 1.035

专利预览沿用现有网页规则：最长 784 × 270 px 范围内等比缩小。低分辨率仅减少细节，不保证保密；敏感内容应在公开前删去。

联系二维码

鼠标悬停、键盘聚焦或点击查看。Escape 关闭。

06 / LAYOUT & MOTION

动效服务于阅读。

内容优先，动效适度。
系统选择减少动态效果时，保留完整内容。

布局尺度

正文内容上限: 1200 px
大面板上限: 1376 px
推荐栅格: 桌面 12 / 平板 8 / 手机 4 列
间距序列: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80
圆角: 控件 8 / 图片 13 / 卡片 22 / 大面板 32 px

动态与降级

快速反馈: 160 ms
常规过渡: 240 ms（规范建议）
卡片悬停: 480 ms · cubic-bezier(.2,.75,.25,1)
减少动态效果: 关闭自动轮转、位移、缩放和平滑滚动
成果管理: 保持静态布局，仅提供即时状态反馈

正在读取系统动态效果偏好。

清晰、有活力，为科研留下空间。