概述

微信小程序 UI/UX 设计

Name: miniprogram-ui-ux-design

Description: 微信小程序 UI/UX 设计规范与最佳实践。适用于设计小程序界面、选择配色和字体、实现 WXSS 布局、创建组件模式、确保无障碍合规等场景。覆盖 rpx 单位体系、Flexbox 布局策略、安全区域适配、暗黑模式、Design Token 方法论、30 个 WXML+WXSS 组件模式、WCAG 无障碍指南（含小程序约束）、以及反模式清单。

Version: 1.0.1

何时使用

在以下场景加载此 Skill：

设计微信小程序界面（页面布局、组件选择、配色字体）
编写 WXSS 样式（布局策略、响应式适配、动画微交互）
确保小程序 UI 的无障碍合规（对比度、触摸目标、语义化）
从小程序 UI 角度审查设计稿
选择或创建 Design Token 体系

设计哲学

> "rpx 优先、Flexbox 为主、系统字体、触屏优先"

小程序 UI 的核心约束：单一纵向滚动、触屏交互、rpx 自动适配、WXSS CSS 子集、无 Web 字体。

设计铁律速查

1. 对比度创造层级（大小对比、深浅对比）

正文 ≥ 4.5:1，大文字 ≥ 3:1，UI 组件 ≥ 3:1
最重要信息用最大反差

2. 留白创造呼吸感

不怕空白——留白 = 高级感
间距基准 8px → rpx 映射（见 DESIGN_TOKENS.md）
更多选择 = 更慢决策（Hick's Law），用留白限制视觉噪声

3. 一致性建立信任

同类组件相同样式、相同行为
一套 Design Token 贯穿全局

4. 反馈确认操作

每个操作必须有即时反馈（动效、状态切换、toast）
微交互：0.2-0.3s、transform+opacity（GPU 加速）

5. 无障碍包容所有人

对比度、触摸目标 88rpx、不唯一依赖颜色
语音播报作为视觉信息补充

视觉层级速查

引导用户注意力的技术

技术	用法
------	------
大小	越大越重要（display > heading > body）
颜色	高饱和度/高对比 = 吸引注意力（CTA 应突出）
留白	周围留白越多 = 越重要
邻近	相关内容放在一起
对比	深 on 浅，或浅 on 深（永远不用低对比度）

阅读模式

Z 模式：左上 Logo → 右上 CTA → 中间内容 → 右下 CTA（适合单屏页面）
F 模式：扫标题 → 读每段首行 → 下移扫描（适合列表/内容页）

rpx 单位速查

1rpx = 屏幕宽度 / 750
iPhone 6 (375px):  1rpx = 0.5px  →  px × 2 = rpx
iPhone 14 Pro:     1rpx ≈ 0.524px
iPhone SE:         1rpx = 0.5px

转换公式： 设计稿 px 值 × 2 = rpx 值（375px 宽画板基准）

WXSS 能力边界速查

✅ 支持	❌ 不支持或不完整
---------	-------------------
Flexbox	CSS Grid
position (relative/absolute/fixed)	backdrop-filter
transform / transition / animation	clip-path
@keyframes	::before/::after（部分支持）
CSS 变量（--token）	@font-face 远程字体

字体策略

小程序不支持加载 Web 字体（@font-face 远程字体不可用）。

系统字体栈：

font-family: -apple-system, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;

仅使用系统字体，覆盖 iOS（苹方）、Android（思源/Noto）、Windows（微软雅黑）。

小程序 Top 5 反模式

#	反模式	正确做法
---	--------	----------
1	照搬 Web 习惯（px/rem、CSS Grid、Web 字体）	rpx、Flexbox、系统字体
2	setData 传输大对象或高频调用	局部更新、节流、单次 < 256KB
3	过度嵌套 view 层级	控制在 5 层以内，减少渲染开销
4	忽略 darkmode 适配	从设计之初就定义双主题 Token
5	触摸区域 < 88rpx	最小 88rpx，按钮间距 ≥ 16rpx

微交互速查

场景	方式	时长
------	------	------
按钮按下	hover-class + transform: scale(0.97)	0.15s
元素出现	opacity 0→1 + translateY	0.3s ease-out
加载中	骨架屏 pulse 动画	持续
成功完成	绿色对勾 fade-in	0.3s
错误	轻微抖动（translateX ±4rpx）+ 红色高亮	0.3s

只动 transform 和 opacity —— 这两个属性由 GPU 加速，不触发重排。

Pre-Build 检查清单

设计完成、开始写代码前逐项确认：

[ ] rpx 单位已用于全部尺寸（无 px/rem 残留）
[ ] 布局使用 Flexbox（无 CSS Grid）
[ ] 色彩方案定义了 Primary + Neutral + Success + Error + Warning
[ ] 字体仅使用系统字体栈（无 Web 字体引用）
[ ] 暗黑模式配色已准备（@media prefers-color-scheme）
[ ] 安全区域 bottom 已适配（底部固定元素有 padding-bottom）
[ ] 所有交互状态已设计（默认/按下/禁用/空/加载/错误）
[ ] 正文对比度 ≥ 4.5:1，触摸目标 ≥ 88×88rpx
[ ] 多机型布局已验证（小屏 320px ~ iPad 1024px）
[ ] 反模式清单已自查（见上方 Top 5）

设计参考与灵感

小程序 UI 参考

微信读书：极简排版、暗黑模式标杆
滴滴出行：地图+信息层级处理
豆瓣：内容驱动设计、评分可视化
麦当劳小程序：品牌色运用、点餐流程

设计系统参考

WeUI：微信官方设计语言，与微信原生风格一致
Apple HIG：触控规范、动效指南、安全区域
Material Design 3：间距系统、组件状态、色彩方法

灵感搜索

Dribbble："mini program UI" "mobile timer" "food app"
微信开发者社区：小程序设计案例

设计工具汇总

工具	用途
------	------
Figma	设计稿（375px 宽画板 = iPhone 6 基准）
WebAIM Contrast Checker	检查任意 HEX 色值对比度（4.5:1 / 3:1）
Coolors / Huevy	调色板生成、品牌色 50-900 色阶派生
iconfont (Alibaba)	字体图标（单色 SVG，通过 CSS color 控制）
微信开发者工具	WXSS 实时预览、Audits 面板检查

扩展阅读

微信官方：《小程序设计指南》《自定义组件》《WXSS 参考》
排版：《Web Typography》——行宽 50-75 字符、行高 1.5x
动效：《Material Design Motion》——时长/缓动曲线
无障碍：《WCAG 2.2 快速参考》《WebAIM 检查清单》

文件索引

文件	内容
------	------
`references/MINIPROGRAM_BASICS.md`	rpx/安全区/暗黑/多机型/布局/反模式/组件库决策（15 节）
`references/DESIGN_TOKENS.md`	Token 方法论/间距/字体/色彩+趋势/3 套示例主题（9 节）
`references/DESIGN_WORKFLOW.md`	设计流程/Figma→WXSS 转换/协作模式（8 节）
`references/COMPONENTS.md`	10 大类 30 个通用组件 WXML+WXSS 示例
`references/ACCESSIBILITY.md`	WCAG 原则 + 小程序无障碍/测试方法/检查清单（12 节）

版本历史

共 2 个版本

v1.0.1 技能的 description 部分变更当前

2026-05-04 16:02 安全安全
v1.0.0 Initial release

2026-05-04 15:29 安全安全

安全检测

腾讯云安全 (Keen)

安全，无风险

查看报告

腾讯云安全 (Sanbu)