better-interface|界面细节

better-interface

界面细节

作者
Jakub Krehel
类别
🧩 Skills
定价
免费

✏️ 介绍

这是一套偏“综合体验检查”的设计 Skill,适合你在做 UI Review、体验走查或设计 QA 时使用。它不只看界面好不好看,而是会同时从 UI 细节、Accessibility、Layout、Typography 和 Writing 五个方向检查问题,比较适合拿来做一轮系统性的产品质量审查。

🔨 功能

1. UI:检查圆角关系、阴影与边框使用、视觉对齐等界面细节 2. UI:关注 Contextual Icon Animation、Motion 和动画性能 3. Accessibility:检查 Semantic Elements 和正确的页面结构 4. Accessibility:检查 Keyboard Navigation、Focus Behavior 和 Accessible Name 5. Accessibility:检查 Form、Error、Screen Reader 和 Hit Area 等无障碍问题 6. Accessibility:支持 Reduced Motion、Zoom 和 Text Resizing 等可访问性检查 7. Layout:检查视觉分组、Spacing、Alignment 和 Reading Order 8. Layout:关注 Responsive Layout 和 Progressive Disclosure 9. Layout:检查 Safe Area、Localization 和 RTL 右到左布局 10. Typography:检查字体选择、Font Configuration 和 Type Scale 11. Typography:检查文字层级、Line Height、Spacing 和 Wrapping 12. Typography:关注 Truncation、动态数字、Underline 和双向文字排版 13. Writing:检查 Voice & Tone 和界面术语一致性 14. Writing:优化 Button、Link Label 和流程中的操作文案 15. Writing:检查 Capitalization、Settings、Error Message 和 Empty State 文案 16. Writing:优化 Placeholder 和更适合 Localization 的界面文案 17. 适合用于 UI Review、Design QA、Accessibility Audit 和产品体验走查 18. 可以把视觉、交互、内容和无障碍问题放在同一套检查框架里一起看

适用场景

  • 上线前做一轮综合 UI Review / Design QA
  • 团队没有专职无障碍同学时,先扫 Semantic Structure 与焦点行为
  • 检查圆角、阴影、对齐和图标动效是否成体系
  • 顺带核对 Writing:按钮文案、空状态和错误提示是否清楚

和替代方案怎么选

  • 对比 只盯视觉细节的走查清单

    better-interface 把 Accessibility、Layout、Typography、Writing 绑在同一轮检查里。

  • 对比 superfuture-design-review|设计评估

    设计评估更偏问题严重度排序;本页更偏「综合体验五维」一次扫完。

中文环境注意点

  • 检查项名称多为英文,输出建议给设计 / 开发双语对照。
  • 无障碍相关结论需结合你们产品的目标平台再验收,不能只看插件结果。
  • 偏审查工具,不会自动改图层样式。

更多同场景插件见🧩 Skills分类。