06

设计体验需求Draft

典型场景：品牌视觉、改版设计、组件规范、可用性优化

标准文档设计需求文档
主导角色设计师
回答的核心问题体验目标是什么、规范是什么、怎么验收
文档定位体验基准——规定「什么算好的感受」；六类中唯一以感知质量为对象的文档，靠样例对比评审，不靠条款辩论
核心读者设计（执行者）、前端（实现者）、产品与走查人（验收者）
评审第一眼落点设计基调板：设计评审 5 秒定生死——关键词、色板、字体样张、一张样板页缩略图，基调不对后面全部白看
01

设计基调板

第一眼。体验关键词 + 主色板（hex + 使用场景）+ 字体样张 + 正反例。PRD 和其余四类都不存在这个东西。

沉稳可信高效
主绿#08664e主按钮、强调、品牌标识
墨色#163b33标题、正文主色
薄荷底#eef4f1页面背景、卡片底色
辅助灰#5c6f66次要文字、说明文字
字体样张

标题 PingFang SC Semibold / 正文 PingFang SC Regular；字阶 12/13/14/16/20/27

正例错误提示「需要 11 位数字，当前 6 位」——具体、可行动
反例错误提示「输入有误，请检查」——用户不知道改什么
02

设计规范 Token 卡组

色彩/字阶/间距/圆角/阴影/动效，一张卡一节，值与场景并列——前端直接抄值，不用量设计稿。

色彩

主绿 #08664e / 墨色 #163b33 / 薄荷底 #eef4f1 / 辅助灰 #5c6f66

主按钮用主绿；正文用墨色；背景用薄荷底

字阶

12 / 13 / 14 / 16 / 20 / 27 px

辅助文字 12；正文 14；页标题 27

间距

4 / 8 / 16 / 24 / 32 px

卡片内边距 16；卡片间距 24；页面边距 32

圆角

按钮 8px / 卡片 12px / 弹窗 16px

层级越高圆角越大

阴影

卡片 0 1px 3px rgba(22,59,51,.08)

仅卡片与弹窗使用，不加多重阴影

动效

150ms ease-out / 300ms ease-in-out

微交互 150ms；弹窗 300ms