网页设计规范

检查网页布局、交互与可访问性，整理可执行的改进清单。

App 内可获取
版式参考线、三角尺与清单用于检查网页布局。

介绍

一份可逐条核对的网页设计清单，把「凭感觉」赶出评审。无障碍是底线：按钮和链接语义正确、控件都有名字、键盘走得通、焦点看得见、文字与界面元素对比达标、尊重减弱动效的设置、表单报错说清错在哪、触控目标够大。设计系统这半边管：字体族不过量、字号有比例、间距有节奏、颜色按语义命名、悬停/聚焦/禁用/加载等状态被认真设计过、内容随宽度重排而不是缩小、可点的东西看起来可点、按钮文案写出动作的结果、卡片不无意义叠卡片。

检查页面时，每条问题都要指明条目、依据和现场证据——截图、页面结构或代码位置；「看着不对」不成为结论。自动工具只能发现约三成问题，所以配套了规定的实时走查与源码核对步骤。

它是评审标准；大规模的无障碍修复目录在无障碍审计条目那边。

适用场景

  • 评审页面时给每个问题挂上规则号与证据
  • 用对比度工作表核对文字与 UI 元素色值
  • 对照设计系统清单体检间距、字阶与状态
  • 把界面文案扫一遍：按钮动词、错误出路、空态引导
#web#设计#guidelines#checklist

使用示例

示例用于说明请求与期望产物形态，不代表已完成的运行结果。

示例提示词

按这份清单评审我的设置页：逐条给条目号、依据和严重程度；对比度按公式算，别目测。

预期产物

逐条评审报告，含实测数值（对比度、焦点表现）与证据截图。

示例提示词

这个弹窗的键盘走查：tab 进得去吗出得来吗、焦点环看不看得见、关闭后焦点回哪儿——逐项记录。

预期产物

焦点与键盘路径的走查记录和截图，指出违反的具体条目。

要求与限制

安装平台
iOS: iOS · Android: Android
脚本运行
无需脚本运行环境（指南与流程型）
最低 App 版本
iOS: 1.7.59
已审核的权限范围

iOS · Android

所需能力
读取工作区文件
审核结论
通过
审核阶段
静态内容审核
审核日期
2026-10-28
实现与运行细节
适配阶段
frozen

iOS

所需能力
读取工作区文件

Android

所需能力
读取工作区文件

许可与来源

来源与追踪详情

许可

MPL-2.0

Floe 原创指南，以独立编写的内容替代原候选，不分发其上游文本。包内保留候选来源与处理记录。

来源

Floe 自有

图像与素材署名

图像署名
Floe 原创，AI 辅助示意图。
发布者
JiangNanGenius
发布提交（获取位置）
25e07dbeeb6cc93c2fe83ddc72a34302cc40832a
审计来源提交
84c524b6fb483e4cad94db076e7d9c9962966c19
签名目录摘要
iOS 46196ba57ed7ea7f22085e74b113207f31193e820ab8983cf7a60eee953f2340 · Android 16de89d019e2057804a40f215485ccb09d5495a25864b34d681168eeaf8f9697
发布快照导入 (UTC)
2026-10-31

发布提交 25e07dbeeb，审计来源 84c524b6fb；目录摘要 iOS 46196ba57ed7… · Android 16de89d019e2…。

版本与状态

版本记录随签名目录发布；以下为目标与已发布版本。

适配状态
已就绪
发布状态
精选技能已上线
已发布版本
1.0.1