小程序UI设计规范入门指南

很多独立开发者做小程序时，最头疼的不是功能逻辑，而是界面看起来“不对劲”。按钮大小不一、文字层级混乱、间距忽大忽小……这些问题其实都源于对小程序UI设计规范不熟悉。本文用最直白的方式，帮你建立一套可落地的设计认知。

为什么需要UI设计规范

小程序运行在手机屏幕上，用户和界面的每一次交互都依赖清晰的视觉引导。规范的本质是统一语言：让开发者、设计师和产品经理对“一个按钮该多大”“标题该多粗”有共同答案。没有规范，团队协作会变成反复返工；有了规范，开发效率至少提升30%。

尺寸单位：rpx 是核心

微信小程序推荐使用 rpx 作为尺寸单位，它以750px设计稿为基准，能自动适配不同宽度的手机屏幕。

/* 在750px设计稿中，1rpx = 1px */
.container {
  padding: 32rpx;
}
.button {
  width: 200rpx;
  height: 80rpx;
}

记住一个换算：在iPhone 6上，1rpx ≈ 0.5px。设计稿标注多少，代码就写多少，省去手动换算的麻烦。

字体与排版层级

文字是信息传递的主体。小程序规范建议使用系统默认字体，避免引入自定义字体带来的加载负担。字号层级可以参考：

• 大标题：40rpx，用于页面主标题
• 小标题：32rpx，用于模块标题
• 正文：28rpx，用于主要内容
• 辅助文字：24rpx，用于说明、时间戳

颜色上，主文字用 #333333，次要文字用 #666666，占位或禁用文字用 #999999。层级分明，用户一眼就能抓住重点。

间距与留白

间距是设计的呼吸感。推荐使用8的倍数作为间距基数：

• 组件内边距：16rpx 或 24rpx
• 模块间距：32rpx
• 页面左右边距：32rpx

不要随意写 margin: 17rpx 这种值，统一用基数倍数，视觉上才会整齐。

按钮与交互区域

按钮是用户操作的核心。小程序规范要求可点击区域最小为 88rpx × 88rpx，手指才能轻松点中。主按钮用品牌色填充，次要按钮用描边或浅色背景。

.btn-primary {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 12rpx;
  background: #07c160;
  color: #fff;
  font-size: 32rpx;
}

按钮圆角建议12rpx左右，既不过于锐利也不像胶囊，符合大多数小程序的视觉习惯。

图标与图片

图标保持线性或面性风格统一，尺寸常用48rpx、64rpx。图片务必设置mode属性，如aspectFill，避免拉伸变形。列表中的缩略图建议统一为正方形，视觉节奏更稳定。

导航与标签栏

小程序顶部导航栏由微信控制，开发者只需配置标题和颜色。底部标签栏（tabBar）最多5个，图标建议81px × 81px，文字24rpx。选中态和未选中态颜色要有明显区分。

常见误区提醒

• 不要用px写死尺寸，大屏手机上会显得过小
• 不要堆砌过多颜色，主色+辅助色不超过3种
• 不要忽略深色模式，微信已支持，建议用CSS变量适配
• 不要忘记加载态和空状态，用户体验的细节决定留存

规范不是限制创意，而是让创意在稳定的地基上发挥。先遵守，再突破。

掌握这些基础规范后，你的小程序至少能摆脱“业余感”。下一步可以研究微信官方WeUI组件库，直接复用成熟样式，把精力留给业务逻辑。