juzi/design/设计规范.md

巨子测肤 · 1'me 在线肌肤测试 — UI 设计规范

来源:Figma 文件《巨子测肤 · UI外发版 · PSD可编辑重建》 提取日期:2026-09-21 · 文件 key RTNcNqkBPg5Stcoi5d7FUP

1. 基准与尺寸换算

设计稿以 1080px 宽(全屏 1080×2339)为基准,是微信小程序风格界面(带胶囊按钮)。

目标	换算	示例(62.3px 大标题)
微信小程序 rpx	rpx = px × 750 ÷ 1080 ≈ px × 0.694	≈ 43rpx
iOS 逻辑像素 pt	pt = px ÷ 2.88	≈ 21.6pt
CSS px(375 基准)	px = px ÷ 2.88	≈ 21.6px

2. 色彩规范

品牌色

色值	用途
#F5F078 柠檬黄	品牌主色/CTA。启动页「开始检测」按钮框、油性肤质插画强调
#282828 深炭灰	主文字色(全稿使用最多,×143),同时用于插画描边

文字色阶(从深到浅)

色值	用途
#000000	纯黑标题(护理建议标题、弹窗文案)
#282828	正文主色
#333333 / #2C2C2C	次级正文(隐私协议、下拉箭头)
#4A4A4A / #464646	护理建议条目正文、备注正文
#757575 / #707070	弱化说明(隐私勾选文案、产品副标题、免责小字)
#868686	报告页数据标签(综合评分、肌肤年龄、维度名)
#D30C0C	警示红(低分维度分数 5.1)
#FFFFFF	反白文字(深色/图片背景上、拍照页指示)

背景与分隔

色值	用途
#F5F5F5	浅灰背景(全屏 ×15 处)
#FFFFFF	卡片/弹窗底色
#EAE6E1 米灰	干性肤质插画底色
#DBF6D6 淡绿	中性/混合偏油肤质插画底色
#D6D6D6	轮播标识-未选中圆点
描边 #E5E5E5 / #EFEFEF	输入框/分隔线

注:全稿无圆角、无阴影定义 —— PSD 重建版的按钮均为矢量图形(见切图),开发时按钮圆角需按切图自行实现(主按钮接近胶囊/大圆角样式)。

3. 字体规范

全稿统一 Noto Sans SC(思源黑体),无衬线。层级如下(px 为设计稿原始值,rpx 已按 ×0.694 换算):

层级	字号/行高(px)	字重	rpx	用途示例
Display	83 / 146	500	58	报告页维度分数(7.2、5.1)
H1	6667 / 8790	500	46	弹窗欢迎语、启动页 Slogan(白)
H2	62 / 88~109	500/700	43	「您的肌肤状态」、拍照页步骤 1/3、产品推荐标题
H3	59 / 109	700	41	报告页「您的肌肤状态表现」
H4	41~42 / 73	400/500	29	表单标签「您的日常肤质/年龄/性别/地区」、按钮文字「开始检测」
H5	41 / 46	400	29	拍照指示短句(正脸居中/光线充足/取下眼镜)
H6	37 / 59~66	500/700	26	肤质名称(干性肌肤…)、护理建议标题
Body	33 / 50	400/500	23	弹窗正文、维度名(纹路/紧致)
Body-S	29 / 41~54	400/500	20	肤质描述文案、护理建议条目、隐私协议
Caption	25 / 27~50	400/500	17	轮播轴标签(偏干/水油平衡)、报告页标签
Caption-S	21 / 30~58	300/400/500	15	免责声明、产品小字(* 开头备注)

小程序字重注意:Noto Sans SC 的 300/500/700 在小程序中可分别用 PingFang/思源的 Light/Medium/Bold 对应,或直接引入 woff 字体包。

4. 组件切图(assets/svg/)

文件	原组件	尺寸	说明
按钮-主按钮.svg	按钮 / 主按钮	523×113	CTA 主按钮,柠檬黄 #F5F078 底
拍照-快门.svg	拍照 / 快门	178×178	拍照页快门按钮
图标-关闭.svg	图标 / 关闭	89×89	弹窗关闭
图标-下拉与返回.svg	图标 / 下拉与返回	40×40	表单下拉箭头/返回
图标-相册.svg	图标 / 相册	90×90	拍照页相册入口
图标-重拍.svg	图标 / 重拍	90×90	重拍按钮
品牌-1me.svg	品牌 / 1'me	131×58	品牌 LOGO
肤质-面部插画.svg	肤质 / 面部插画	315×315	肤质选择页插画基础形

肤质插画 5 个配色变体(同一面部插画换色):

肤质	底色/强调	对应文案
干性	#EAE6E1 米灰	全脸干燥,容易紧绷、缺乏光泽
混合偏干	米灰系	两颊偏干,T区油脂较少或偶尔出油
中性	#DBF6D6 淡绿	水油平衡,肤感舒适,无明显干燥出油
油性	#F5F078 柠檬黄	全脸易出油,容易泛油光、毛孔明显
混合偏油	淡绿系	T区易出油,两颊相对清爽或轻微干燥

5. 图片素材(assets/images/,共 15 张)

素材	尺寸	用途
启动页-背景	1414×2423	启动页全幅(三人合影+蓝天)
启动页-顶部装饰	—	状态栏区装饰
档案填写-背景	1080×2339	档案页全幅背景
正面/左面/右面-拍照示意	1082×2350	三个拍照引导页背景
报告页-背景	4915×11457	报告页长图背景(注意超大,建议压缩)
产品图-1~4	~500×650	报告页产品推荐
检测图-1~4	~300×360	报告页六维检测示意

6. 页面清单(design/ 下有整屏 PNG 预览)

#	页面	Frame ID	尺寸
01	启动页	2:2	1080×2339
02	启动页弹窗(隐私授权)	2:3	1080×2339
03	档案填写(含肤质选择轮播)	2:4	1080×2339
04	拍照弹窗(引导)	2:5	1080×2339
05-07	正面 / 左面 / 右面(相机取景)	2:6/2:7/2:8	1080×2339
08	报告页(长页)	2:9	1080×3548
—	肤质选择(档案页子模块,用户直链节点)	4:48	713×873

另有 15 个「隐藏内容展开」补充画板(肤质变体展开、报告页备选文案/备选图等),原始数据在 full.json 可随时按需导出。

7. 目录结构

design/
├── 设计规范.md          ← 本文档
├── 01~09-*.png          # 9 张整屏预览(1080 宽)
├── full.json            # Figma 完整节点数据(含矢量路径)
├── file-tree.json       # 文件结构树
├── node-4-48.json       # 肤质选择节点详细数据
├── imgusage.json        # 图片引用关系
└── assets/
    ├── svg/             # 8 个组件矢量切图
    └── images/          # 15 张位图素材(中文名)

8. 还原建议

1. 流程:启动页(授权弹窗)→ 档案填写(年龄/性别/地区/肤质轮播)→ 拍照弹窗 → 正面/左/右三连拍 → 生成报告。
2. 肤质选择是轮播交互(轮播标识×5 圆点 + 偏干↔偏油轴标签),插画随选项换色。
3. 报告页为长滚动页:总分(82 分/100)→ 六维度 → 三维度拆解 → 具体描述(配检测图)→ 护理建议 → 产品推荐 → 免责声明。
4. 位图素材均为 PNG(原始命名 .jpg 已改),报告页背景 4915×11457 建议压缩后再入包。
5. 颜色、字号直接抄本规范第 2、3 节;组件直接用 assets/svg 切图。