状态:沿用六条设计原则。D07 动效规则(100/150/200ms,减少动态效果时 0ms)与 D07-I01—I04 首批图标基线(Lucide 1.59.0 锁定提交、七类语义、16/20/24 初始绘制档)由代理依用户授权采用为初始设计基线;锁定源文件与许可已核查。资产尚未导入,实际渲染、平台实现、辅助技术与动效实测及视觉验收均未执行。 更新:2026-10-20(D07-I01 图标基线采用);平台减少动态效果资料核查于 2026-10-19。 所属章节:视觉与语义基础
基础设计的采用与验收边界见 视觉与语义基础;本页特有的条件与来源限制在相关章节就近说明。
1. FND-ICON 图标角色、替代文本与载入
图标用于辅助识别、简化熟悉操作的视觉表达和提示状态,不应要求用户猜测业务规则。优先使用用户已经理解的通用象征;合同作废、批量归档、重新计算等专业或高后果操作保留文字标签。
同一图标在系统中保持稳定含义。“垃圾桶”不能在一处表示移入可恢复回收站,在另一处表示永久销毁,却不说明差异。若相同图形不可避免地用于不同对象,应通过可见文案与上下文明确操作后果。
1.1 用途、结构与角色
图标承担装饰、独立信息或控件动作中的一种明确职责;角色由上下文决定,同一图形在不同位置可以有不同语义。资产记录稳定语义名、形状版本、方向性、尺寸/描边候选、允许的颜色职责及许可来源。资产文件名不是可访问名称。遇到未知图形或复杂后果时优先使用文字,不能用更多图标替代必要解释。
- 装饰图标与相邻文字重复时,从辅助技术输出中排除,不单独聚焦。
- 独立信息图标提供简明的文字等价。
- 动作图标的名称描述动作及必要对象,不说“铅笔”或“叉号”。
- 图标与文字共同构成按钮时,由按钮承担一个完整名称,避免图标替代文本再朗读一次。
W3C 分别说明了装饰图片的空替代和功能图片的目的性名称;具体 SVG/原生实现需各自验证。依据:Decorative Images、Functional Images
1.2 状态、资产失败与数据
状态图标不独自承担成功/失败/警告/未知的区别,旁边要有可获取的文字;颜色不能替代形状和名称,动效不能替代进度事实。未知不是错误图标,处理中不是已完成勾号。交互由 ACT-ICON/ACT-BUTTON 承担,裸 SVG 不另做一套键盘与点击模型。
资产载入分为未载入、可用、失败、替代。字体图标缺字、SVG 加载失败或外部资源不可达时,仍保留控件名称、动作、命中区域与焦点;使用获准的文字或本地稳定替代,不能显示破损占位后仍让用户猜。外部资产回包绑定当前语义 ID 和版本,列表节点复用时不能让旧“删除”图形覆盖新“查看”动作;关键动作或风险变化时,先确保可见文字正确,再按同一版本更新图标。加载失败不改变操作权限。
只读呈现没有激活事件;资产替换、主题切换、RTL 和尺寸变化产生呈现更新,不产生业务操作。语义变更时,已打开的提示与可访问名称同步更新,不能画出新图却播报旧动作。撤权时同时清理图标附带的对象名称/状态提示,不借通用图形泄露受限事实;已发出的任务仍按任务身份处理。
1.3 方向、视觉与平台
只有确有阅读方向含义的箭头/进退图标按平台 RTL 规则处理;品牌、数字、时钟、关闭等图标不一律镜像。方向图标的变化不能反转“下一条”的数据身份。
图形尺寸与交互命中区不同,缩小视觉尺寸不等于允许缩小到不可操作;初始数值见本页 D07-I01—I04,真实设计/平台验收仍待执行。线宽、填充和光学重心候选需要在真实浅深主题和高对比下测试,不能凭同一 viewBox 判定一致。
需检查缩放、大字、强制颜色、减少动效与图标字体禁用。原生 symbol 和 Web SVG 可能视觉不同:保持语义与行为,记录对齐差异,不宣称像素相同。装饰图标不占 Tab 停靠;动作入口遵循标准按钮键位;触控下不依赖 hover 才能理解。
1.4 精确夹具(未执行)
- FND-ICON-N:按钮已有“编辑 R-001”,附装饰铅笔。预期:一个按钮、一份名称,图标不独立聚焦,Enter 操作 1 次。
- FND-ICON-F:图标资产加载失败。预期:可见动作文字和可访问名称仍在,焦点/命中区不塌陷,动作权限与原状态一致。
- FND-ICON-R:状态图标附受限对象名,撤权后旧 SVG 回包。预期:对象信息不恢复,交互 0 次,安全说明可达。
- FND-ICON-L:RTL、大字、高对比下,关闭图标与下一项箭头并列。预期:仅有方向语义的图标按声明适配,名称和对象不倒置,焦点可见。
- FND-ICON-V:虚拟节点先绑定删除 A,再绑定查看 B,旧 A 资产晚到。预期:按钮仍是查看 B,旧图不覆盖,激活时仅查看 B 1 次。
来源与证据边界见本组来源。
2. 图标资源契约
每个公共图标记录:稳定名称、用途、禁止含义、默认可见标签、可访问名称规则、尺寸与笔画适用范围、明暗与对比需求、是否可镜像、来源与许可、版本及替代项。许可尚未明确的资产不进入可分发包;不能因为某网站可下载就认为可商用或可修改。
图标的绘制框、视觉重量和对齐通过真实控件校准。本页 D07-I02 已采用 16、20、24 的初始绘制档位,源网格仍为 24×24;它们不等于点击目标尺寸。放大后笔画不能消失,缩小时不能依靠模糊像素才能理解。
D07-I01:初始开放图标家族与范围
代理依用户授权决定(2026-10-20):采用 Lucide 1.59.0 作为 YUDS 首批通用应用图标的开放线性家族,锁定官方仓库提交 1ef60af944de207e0d5176905a0759ba12e6ee8d。这是代理采用的可逆设计基线,不代表用户逐图批准,也不意味着已安装 SDK、导入资源或通过实际渲染验收。
选择理由:官方提供可独立读取的 SVG,源几何统一为 24×24 viewBox、2 单位描边、圆端点/圆连接;开放许可允许在满足通知保留条件下使用和分发。首批只固定以下七种语义,不以全库图标数量扩张范围。组件继续复用现有按钮、展开和反馈行为,不因图形选择新增交互 API。
| YUDS 语义用途(记录名,不是新公共 API) | 锁定源文件 | 使用边界与中文默认表达 | RTL |
|---|---|---|---|
| 编辑 | icons/pencil.svg |
可见文字/名称为“编辑+对象”;不能暗示已取得编辑权 | 不镜像 |
| 关闭 | icons/x.svg |
“关闭+面板/任务”;不拿同一名称表示删除或业务失败 | 不镜像 |
| 更多 | icons/ellipsis.svg |
“更多+对象+操作”;用既有菜单行为 | 不镜像 |
| 展开/收起 | icons/chevron-right.svg(收起)与 icons/chevron-down.svg(展开) |
暴露展开状态与目标;不是向下一条记录导航 | 收起箭头沿逻辑结束方向;展开箭头向下,不镜像 |
| 成功 | icons/circle-check.svg |
旁有真实完成状态文本;不能用于尚在受理/处理中 | 不镜像 |
| 警告 | icons/triangle-alert.svg |
旁有风险及可行的下一步;不把所有待处理都画成警告 | 不镜像 |
| 失败 | icons/circle-x.svg |
旁有失败事实与恢复入口;与无圈的关闭图形区分 | 不镜像 |
七类语义共八个 SVG 源文件,因为展开包含两种状态。图形不能替代文字或授权;图形名称不直接作为可访问名称。纯图标操作继承 ACT-ICON,状态图标继承 FND-ICON。返回、前进或领域方向以后单独登记,不从“RTL 支持”推断全部镜像。
D07-I02:初始绘制尺寸、笔画与文字对齐
下列 16/20/24 档是 YUDS 的初始呈现选择,不是平台官方最小目标,也不是 Lucide 为所有端指定的字号。SVG 源坐标始终为 24×24;不同端分别映射为 CSS px、pt、dp、vp,不把这些单位换算成相同的物理像素。
| 档位与默认用途 | Web 基准 | iOS/iPadOS 基准 | Android 基准 | HarmonyOS 基准 | 初始描边策略 |
|---|---|---|---|---|---|
小:紧邻 label-1x/label-2x 的装饰/行内状态 |
16 CSS px | 16pt | 16dp | 16vp | 源 2/24 按比例,呈现 4/3 逻辑单位 |
中:label-3x 附近、常规文字按钮/行操作 |
20 CSS px | 20pt | 20dp | 20vp | 源 2/24 按比例,呈现 5/3 逻辑单位 |
| 大:独立工具栏图形或需要更清晰的状态图形 | 24 CSS px | 24pt | 24dp | 24vp | 源 2/24 按比例,呈现 2 逻辑单位 |
默认保留源 SVG 的 fill=none、stroke=currentColor、圆端点与圆连接,不随组件任意改为实心、加粗或重新裁切 viewBox。默认不使用非缩放描边;上表的分数笔画是比例结果,不宣称低分辨率下必然清晰。若 16 档实际难辨,应升到 20 档或保留文字替代,而不是局部重画后继续冒称同一资产。
Web 的上述基准可用 1rem/1.25rem/1.5rem 表达,表内 CSS px 只对应根字号 16px;尊重用户根字号和浏览器缩放。原生端与文本成组时,图标随关联文字的有效布局缩放增长,不人为设置最大图形尺寸导致裁切;原生具体缩放机制须在目标 SDK 中登记,不用统一的 fontScale 乘法模拟非线性文字缩放。图标单独增大不得挤掉关键文本。
单行按钮图标在其行盒内居中,图文间距沿用 D05 同行间距 8 逻辑单位;多行标签/错误的前置图标对齐首行行盒中心,而非整个文本块的垂直中心。保留原始安全区,容器不得裁掉笔画。纯图标按钮在独立的有效命中区中居中;16/20/24 绘制尺寸绝不替代 D05 的 44pt、48dp 等触控目标。紧凑模式不通过降低图标或文本可辨性获得空间。
颜色跟随既有配对:装饰动作图标继承所在按钮的文字颜色;状态图标在普通中性表面使用相应状态的 900 并附文本,软状态面按现有状态 950/200 配对,强状态面用 neutral-100 前景。外框和内部符号同色线性呈现,不复制 OUDS 的双颜色专用 warning 资产,不新增图标颜色别名。forced-colors 下允许平台映射并保留边界/名称,不强行保留品牌像素。
D07-I03:许可、平台例外与资源失败
许可依据为锁定提交中的完整 LICENSE:Lucide 主体采用 ISC;文件还保留部分 Feather 派生图标的 MIT 条款与 Cole Bemis 版权声明。未来把这批图标或其修改版收入 YUDS 分发包/设计资源时,一并保留完整的上游 LICENSE 与版权/许可通知,记录资产来源、提交和修改说明;不要只写“ISC”而删掉 Feather 沿袭通知。按该许可文本,在满足这些条件时可以使用、复制、修改和分发,包括收费项目。目前仅记录许可,未执行导入或分发。
本基线不包含 SAP 专有图标、Orange Solaris 或其他仅允许特定品牌使用的资产。Apple SF Symbols 等系统原生图形如确需使用,应在平台适配中另记来源、可用版本和许可范围,不以 Lucide 许可覆盖,不提取进跨平台共享包。原生系统控件自带的符号可保留平台语义,但不能未经登记就与 Lucide 混作同一分发资产。
载入失败、资源缺失或尚未完成平台向量转换时,保留明确可见的动作/状态文字、现有命中区和焦点;不得显示裸乱码、未知字体字形或无名称的空按钮。纯图标入口失败时切换成文字入口并允许布局增长,不让不存在的图形承担唯一含义。没有合适的新增图形时先用文字,不自动换用另一个图标库。装饰图标不进入可访问树;独立图形和图标按钮按现有 FND-ICON/ACT-ICON 命名。
D07-I04:验收与撤回
来源文件和语义表已核实,真实渲染仍未执行。首次设计/实现验证须覆盖:
- 七类语义;
- 16/20/24 三档;
- 浅深主题;
- 普通/选择/错误/焦点组合;
- 长中文/RTL/多行文字;
- 浏览器根字号变化与原生大字;
- forced-colors;
- 资产失败;
- 默认/自定义
primary。
检查笔画清晰度、首行对齐、圆形与三角形内部的辨认、名称是否重复、RTL 是否只改变有方向语义的箭头。若小尺寸不清晰、与中文视觉重量失衡或许可信息不完整,先使用较大档或文字回退并登记修订,不宣布已形成最终视觉风格。
来源(来源事实与设计选择分列):锁定图标来源与许可证据;官方规格、描边机制。许可与源文件已读不代表渲染或实现已验收。
3. 标签与辅助技术
- 带文字的按钮:文字表达动作;重复相同含义的图标作为装饰处理,避免读两遍。
- 纯图标按钮:提供准确的可访问名称,并在适当位置提供可发现的文字说明;说明不能只对鼠标悬浮开放。
- 状态图标:同时提供状态文本或等效信息,如“校验失败”“锁定”;颜色与图形不能成为唯一依据。
- 图例图标:图例名称与图形保持关联,不让辅助技术只能读到“圆形”“三角形”。
- 展开或切换控件:表达当前状态及作用对象,名称和状态不可互相矛盾。
纯装饰图形无需重复朗读;承担内容或操作的非文本元素需要等效文本或明确名称,这是 WCAG 2.2 SC 1.1.1 的基本要求。Non-text Content
4. 哪些图标镜像
“返回”“前进”、面包屑方向或层级展开等与阅读方向相关的图标,可按语言和平台惯例镜像。对勾、时钟、放大镜、品牌标记、照片、数字与文字不因 RTL 自动镜像。表示真实物理方向、时间轴或领域坐标的箭头由内容决定,不属于默认镜像范围。
资源清单明确记录“随阅读方向镜像/不镜像/需按场景确定”。带箭头的复合图标尤其需要验证其语义,不能只检查像素是否翻转。
5. 动效必须回答一个问题
动效只在能解释状态变化、层级或对象关系时使用,例如“抽屉从当前区域展开”“一项操作已进入处理中”。装饰动画不应占据数据阅读注意力;高频切换不必每次播放完整入场动画。
历史上 100/180/240 毫秒的比较只保留在历史基础输入中。现行 D07 由代理采用下方 100/150/200ms 及减少动态效果 0ms 的规则;这些是设计决定,尚非全平台实测标准。实际处理时间、网络等待与视觉过渡分开,不能为了动画推迟结果,或在动画结束时伪报业务完成。
5.1 状态与动态反馈
| 状态 | 必须表达的事实 | 动效边界 |
|---|---|---|
| 已接收操作 | 已开始处理什么对象 | 不立即显示成功对勾 |
| 不确定进度 | 仍在处理中,暂无可靠百分比 | 不制造虚假进度 |
| 确定进度 | 已处理数量及总量的确切含义 | 总量变化需说明,不让进度假装单调精确 |
| 完成/部分成功/失败 | 实际结果及后续路径 | 结果以持续文本存在,不靠一闪而过的动画 |
| 数据刷新 | 当前显示快照及是否有更新 | 不让排序持续跳动、焦点或选中对象漂移 |
长任务若可取消,应区分“发出取消请求”与“已取消”;视觉停止不代表服务端已停止。状态及恢复的具体契约见 系统状态、权限与恢复。
5.2 D07:初始动效与静态替代
代理依用户授权决定采用下列设计值;理由及撤回条件见 决策与讨论记录「代理初始设计基线 D01—D08」。
| 类别 | 初始时长 | 使用边界 |
|---|---|---|
| 微反馈 | 100ms | 仅用于非必要的装饰/强调;文字、必要边界、焦点色立即更新,不依赖颜色插值保持可读性 |
| 小型层级过渡 | 150ms | 默认短过渡;可选位移上限 Web 4 CSS px/iOS 4pt/Android 4dp/Harmony 4vp,文字保持不透明,不缩放、不用弹簧、不过冲 |
| 有任务用途的位置重排 | 200ms | 仅帮助理解对象移动;可中断,不追逐当前输入/错误焦点;无用途则不用 |
| 减少动态效果或偏好能力未知 | 0ms | 自定义的非必要位移/缩放/循环全部静态;保留对象、处理中/未知文本及真实进度,不造百分比 |
| 系统原生导航/返回 | 端适配 | 采用经过验证的系统过渡与偏好响应,不硬塞网页时长;未绑定版本前不声称已适配 |
自定义 Web 短过渡的初始缓动为 cubic-bezier(0.2,0,0,1),原生端可用语义相近的可打断缓动;该参数同属可逆设计选择,未经性能实测。高频重复可立即切换,不强制每次播放。动效不能控制网络提交、成功、取消或解锁的时机;真实结果到达后立即可用。后台回到前台时按真实能力核查状态,不恢复旧动画夺焦。进度未知时只给静态状态,不以循环或计时推算完成。
原生偏好来源、最低可用版本、运行中变化监听,以及自定义动画是否受系统设置控制,必须单独登记;不把 Android 某个动画开关或设备“过渡动画”选项等同于所有平台完整的减少动态效果能力。
6. 减少动态效果与暂停
尊重用户减少动态效果的偏好,优先去除大幅位移、视差、缩放和不必要的循环;用即时切换、静态状态或温和替代维持反馈。关闭动效不能导致加载状态完全消失,也不能要求用户观看动画才知道操作完成。
WCAG 2.2 SC 2.3.3 是 AAA 条款,要求交互触发的运动动画能够关闭,除非对功能或信息必不可少。YUDS 已按 D07 采用更严格的减少动态效果体验要求,但不把该 AAA 条款误写为 AA 的统一门槛。Animation from Interactions 官方说明
自动开始、持续超过 5 秒、与其他内容并列呈现的移动、闪烁或滚动信息,SC 2.2.2 通常要求可暂停、停止或隐藏,必要活动的例外另行评估。自动更新信息另有适用要求,不能把“少于 5 秒”作为自动更新的通用豁免。Pause, Stop, Hide 官方说明
当前设计默认不用闪烁吸引注意。必须使用特殊动态提示时,应按实际闪烁频率和亮度评估适用标准,而不是凭“看起来温和”判断安全。
6.1 FND-M01:逐类减少动态效果的替代
| 动效类型/触发 | 正常结束条件 | 减少动态效果时的规则 | 不可丢失的信息 |
|---|---|---|---|
| 打开/关闭面板、图标切换 | 当前层与图标状态已经改变 | 去掉位移、缩放和弹簧,直接显示目标态;短透明度过渡仅在目标平台偏好允许且验证适宜时才保留 | 标题、层级、焦点去向 |
| 手势跟随、拖动排序 | 用户确认落点或取消 | 保留直接操控需要的最小位置反馈,取消多余回弹;另提供按钮/键盘移动路径 | 原顺序、目标位置、取消后恢复 |
| 加载骨架、旋转进度 | 收到任务结果或离开呈现区域 | 用静态占位+“正在校验”等文本;已知数量持续更新,未知时不伪造百分比 | 任务身份、处理阶段、取消或查询路径 |
| 图表补间、数值滚动 | 新快照可用 | 即时呈现最终数值;刷新提示与时间戳保留,不让数字逐位翻动 | 来源、单位、旧新快照边界 |
| 自动循环/装饰入场 | 无任务必要的结束条件 | 默认移除;不能因页面出现就分批延迟业务内容 | 信息和操作立即可用 |
本表保留每类任务反馈与中断规则;现行初始时长由 D07 决定,原生导航、sheet 与返回按系统能力适配,且须保持任务/焦点契约。Billgo 的 150ms、四单位只是参考来源,不替代 YUDS 决定与实际验证。
6.2 FND-M02:系统偏好与实现边界
2026-10-19 核实的平台情况:
- Apple HIG 要求 Reduce Motion 开启时减少自动/重复、缩放等动画。
- Android
ValueAnimator.areAnimatorsEnabled()查询该动画机制是否启用,不能等同于完整的 Apple Reduce Motion 语义。 - 华为设备支持页说明可关闭“过渡动画”,但不能据此宣称自定义 ArkUI 动画会自动响应。
平台映射须记录实际偏好来源、可用系统版本、运行中变化监听及自定义动效的适用范围;未知时按 D07 采用静态、保留信息的回退,平台运行待验证。尚未验证任何组件库已自动适配这些设置。
来源:Apple Accessibility、Android ValueAnimator、华为:无障碍视觉辅助。
6.3 FND-M03:中断、恢复和闪烁
业务状态先于动画回调确定;取消动画只能改变呈现,不能取消或完成业务请求。快速连续操作时取当前有效任务和最新状态,旧动画的结束回调不得覆盖新错误或重开已关闭的层。切换主题只替换外观;切到后台时停止非必要呈现;回到前台时,仅在具有真实、获准的原任务查询能力时核查状态,缺少该能力时保留未知并说明核查及会话限制,不能从上次动画进度推断业务进度。完成提示不因动画被跳过而丢失,也不重复抢焦点或重复播报。
YUDS 当前设计默认不用闪烁召唤注意;确需动态内容时逐项测量。WCAG 2.3.1(A)规定每秒不超过三次闪烁,或低于一般/红色闪烁阈值;该技术条件不是“每秒三次就舒适”的设计推荐,也不能仅凭次数忽略适用的阈值与内容。官方说明
| 文档夹具 | 输入与动作 | 正常预期 | 失败注入与判定 |
|---|---|---|---|
| M01 静态长任务 | 导入 100 项、进度未知;开启减少动态效果 | 静态处理中标记、任务 ID 及查询入口保留;服务返回 97 项成功、3 项失败后呈现明细 | spinner 消失后页面空白或播报成功:失败 |
| M03 中断 | 打开面板后立即关闭,处理中切到后台/深色,再回到前台 | 已关闭层不重开;有真实获准查询能力时显示核实状态,否则保持未知并说明限制;关闭当时按 LP-G05 的关闭原因处理焦点,回前台不重新夺焦 | 旧动画回调把后到的失败改成成功:失败 |
动画、系统偏好和播报的运行验收未执行;以上仅为可重现的测试设计。
7. 企业场景正反例
合适
批量导入显示“已完成 97 项,3 项失败”,图标辅助区分结果;打开失败项可看原因。减少动态效果后,相同结果仍完整可见。
不合适
上传动画结束即显示绿色对勾,服务端尚在校验;用户离开后才发现有失败记录。
合适
资产列表后台出现新记录,显示“有 12 条更新”入口,由用户决定何时刷新;当前比较和键盘位置不突然改变。
不合适
实时数据每次变化都闪烁并重新排序,用户追着数字移动,无法核对当前行。
8. 验收
- 单独查看图标名称、可见标签与实际动作,三者含义一致。
- 纯图标操作可被键盘、触控和辅助技术识别与完成。
- 减少动态效果下任务结果与恢复路径完整。
- 动画中断、慢速处理、快速成功与失败切换都不丢状态。
- 图标在主题、尺寸和拟支持的 RTL 中分别验证;资源可追溯且许可明确。
- 通知与动态更新不会不断抢焦点或重复播报;焦点和阅读位置保持稳定。
首批开放图标选型与锁定来源许可核查已完成;资产未导入,真实图标渲染、平台辅助技术和动效实测仍全部未执行。