微信小程序 UI/UX 设计

解决什么问题

微信小程序 UI 常踩的坑：把 Web 的 px、rem、CSS Grid、远程字体直接搬过来，忽略 rpx 与 WXSS 能力边界，导致多机型错位、深色模式缺失、触控目标过小、层级不清晰。这个技能把小程序界面设计约束成一套可执行规范：先确认布局与组件模式，再落到 WXSS 样式与无障碍验收。

核心能力与关键步骤

• rpx 与布局：以 375px 画板为基准，px * 2 = rpx，优先使用 Flexbox，避免 CSS Grid。
• 样式与交互：只动 transform 和 opacity，用 hover-class、骨架屏、状态切换形成即时反馈。
• Design Token：统一间距、字号、色彩、组件状态，并准备浅色 / 暗黑双主题。
• 无障碍：正文对比度 ≥ 4.5:1，触摸目标 ≥ 88rpx，不依赖单一颜色表达信息。
• 检查清单：写代码前检查单位、字体栈、安全区域、交互状态、反模式。

适用边界

适合微信小程序页面、组件和样式评审；不包含业务接口、小程序原生 API 实现，也不保证所有基础库的 WXSS 表现一致。涉及 @font-face、backdrop-filter 等能力时，应先验证目标设备支持。