小程序UI设计指南

技能文档

---
name: xiaochengxu-ui-sheji
description: 微信小程序 UI/UX 设计指南，覆盖 WXML/WXSS/JS 的页面设计、组件开发、设计系统搭建与体验优化，结合微信小程序平台约束与最佳实践。当用户需要设计小程序界面、开发小程序组件、搭建小程序设计系统时触发。触发词：小程序UI、小程序设计、WXML、WXSS、小程序组件、小程序设计系统。
---

# 微信小程序 UI/UX 设计指南

## 概述

提供微信小程序界面设计与组件开发的完整指导，覆盖 WXML/WXSS/JS 的页面设计、组件开发、设计系统搭建与体验优化。

## 核心原则

### 1. 平台约束遵循
- 遵循微信小程序设计规范
- 适配不同屏幕尺寸（rpx 单位）
- 考虑微信客户端版本兼容性
- 遵守小程序审核规范

### 2. 性能优先
- 减少页面层级和节点数量
- 优化图片加载（懒加载、WebP 格式）
- 避免频繁 setData
- 使用虚拟列表处理长列表

### 3. 用户体验
- 保持操作一致性
- 提供明确的加载状态
- 合理的错误提示
- 支持手势交互

## 设计系统搭建

### 1. 色彩体系
```css
/* 主色调 */
--color-primary: #07C160;
--color-success: #07C160;
--color-warning: #FFC300;
--color-error: #FA5151;

/* 中性色 */
--color-text-primary: #333333;
--color-text-secondary: #666666;
--color-text-placeholder: #999999;
--color-bg-page: #F6F6F6;
--color-bg-card: #FFFFFF;
```

### 2. 字体规范
```css
/* 字号层级 */
--font-size-title: 36rpx;    /* 页面标题 */
--font-size-subtitle: 32rpx; /* 副标题 */
--font-size-body: 28rpx;     /* 正文 */
--font-size-caption: 24rpx;  /* 说明文字 */
--font-size-small: 20rpx;    /* 辅助文字 */

/* 字重 */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
```

### 3. 间距系统
```css
/* 基础间距单位：8rpx */
--spacing-xs: 8rpx;
--spacing-sm: 16rpx;
--spacing-md: 24rpx;
--spacing-lg: 32rpx;
--spacing-xl: 48rpx;
```

### 4. 组件规范
- 按钮：高度 88rpx，圆角 8rpx
- 输入框：高度 80rpx，内边距 24rpx
- 卡片：圆角 16rpx，阴影 0 2rpx 12rpx rgba(0,0,0,0.08)
- 导航栏：高度 88rpx（不含状态栏）

## 组件开发模式

### 1. 组件结构
```
components/
└── custom-button/
    ├── custom-button.wxml
    ├── custom-button.wxss
    ├── custom-button.js
    └── custom-button.json
```

### 2. 组件设计原则
- 单一职责：每个组件只负责一个功能
- 可复用性：通过 properties 实现灵活配置
- 事件通信：使用 triggerEvent 向父组件通信
- 样式隔离：使用 styleIsolation 避免样式污染

### 3. 组件示例
```javascript
// custom-button.js
Component({
  properties: {
    type: { type: String, value: 'default' },
    size: { type: String, value: 'medium' },
    disabled: { type: Boolean, value: false },
    loading: { type: Boolean, value: false }
  },
  
  methods: {
    onTap() {
      if (!this.data.disabled && !this.data.loading) {
        this.triggerEvent('tap');
      }
    }
  }
});
```

## 页面布局模式

### 1. 常见布局
- 列表布局：商品列表、消息列表
- 卡片布局：首页模块、内容展示
- 宫格布局：功能入口、分类导航
- 瀑布流：图片展示、feeds 流

### 2. 响应式适配
```css
/* 使用 flex 布局实现自适应 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.item {
  flex: 1 1 calc(50% - 12rpx);
  min-width: 0;
}

/* 媒体查询适配大屏 */
@media (min-width: 750rpx) {
  .item {
    flex: 1 1 calc(33.33% - 16rpx);
  }
}
```

## 交互设计要点

### 1. 加载状态
- 骨架屏：页面初次加载
- 下拉刷新：列表数据更新
- 上拉加载：分页数据加载
- 按钮 loading：防止重复点击

### 2. 空状态设计
- 列表为空：引导用户创建或浏览
- 搜索无结果：提供建议或热门内容
- 网络错误：提供重试按钮

### 3. 手势交互
- 左滑删除：消息、收藏列表
- 长按操作：菜单、选择模式
- 双击点赞：内容详情页

## 性能优化

### 1. 渲染优化
- 减少节点数量（建议 < 1000）
- 避免频繁 setData
- 使用 wx:key 优化列表渲染
- 图片懒加载

### 2. 包体积优化
- 分包加载
- 图片压缩
- 代码分割
- 按需引入组件

## 触发场景

当用户提到以下需求时触发：
- 设计小程序界面、UI
- 开发小程序组件
- 搭建小程序设计系统
- 优化小程序用户体验
- 使用 WXML/WXSS 开发

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。