<ui_ux_design_principles>

## 移动端小程序 UI/UX 设计核心原则

### 1. 配色系统（根据需求灵活选择）
- 主色调：根据产品品牌定位选择
- 背景色：页面背景、卡片背景
- 文字色：例如（主要 #1D2129 / 次要 #4E5969 / 辅助 #86909C / 禁用 #C9CDD4）
- 边框色：定义边框色
- 语义色：例如（成功 #00B42A / 警告 #FF7D00 / 错误 #F53F3F）

**配色技巧**：
- 使用渐变提升视觉丰富度：\`linear-gradient(135deg, $color-primary 0%, $color-primary-light 100%)\`
- 背景推荐使用浅色渐变营造氛围：\`linear-gradient(180deg, #f0f5ff 0%, $color-bg-page 100%)\`
- 利用透明度制造层次：\`rgba(255, 255, 255, 0.2)\`

### 2. 屏幕适配与布局规范（强制约束）
- **设计稿基准：750rpx = 屏幕宽度**，所有尺寸基于此换算
- **必须遵循 8px 网格系统**：所有间距使用8的倍数（8rpx, 16rpx, 24rpx, 32rpx, 48rpx, 64rpx）
- **页面根容器必须设置左右边距**：\`padding: 0 $page-padding\`（32rpx），确保内容居中且不超出屏幕
- **禁止内容溢出屏幕**：
  - 所有固定宽度元素必须 \`width: 100%\` 或 \`max-width: $max-content-width\`（686rpx）
  - **任何元素的宽度不要超过 686rpx，否则会溢出屏幕**
  - 水平滚动内容必须用 \`ScrollView\` 包裹
- 卡片内边距：32rpx 或 48rpx（大卡片）
- 列表项间距：16rpx 或 24rpx

**布局技巧**：
- 卡片间距保持24rpx，避免拥挤
- 标题与内容间隄32rpx，增强层次
- 按钮与说明文字间隄48rpx，突出行动召唤

### 3. 字体层级（参考规范，可根据视觉需求微调）
- 大标题：40rpx, font-weight: 600
- 标题：34rpx, font-weight: 600
- 副标题：30rpx, font-weight: 500
- 正文：28rpx, font-weight: 400
- 辅助文字：24rpx
- 小字/标签：22rpx

### 4. 圆角设计（符合主流小程序审美）
- **卡片圆角**：12-16rpx（推荐 $radius-md 或 $radius-lg）
- **按钮圆角**：48rpx（推荐 $radius-button，全圆角胶囊形状，主流趋势）
- **小元素圆角**：4-8rpx（标签、徽章）
- **头像圆角**：999rpx（完全圆形，使用 $radius-round）

**按钮尺寸规范**：
- **常规按钮**：高度 80rpx（$button-height-md）+ 圆角 48rpx
- **大按钮**：高度 96rpx（$button-height-lg）+ 圆角 48rpx，用于底部固定操作栏
- **小按钮**：高度 64rpx（$button-height-sm）+ 圆角 32rpx，用于次要操作

**主流设计趋势**：
- ✅ 底部操作栏使用 96rpx 高度 + 48rpx 全圆角
- ✅ 页面内操作按钮：80rpx 高度 + 48rpx 全圆角
- ✅ 全圆角（圆角 = 高度的50%）形成“胶囊”形状，视觉柔和、现代

**反例**：
- ✖️ 按钮圆角过小（<24rpx）：显得生硬，不符合主流审美
- ✖️ 按钮高度过大（>100rpx）：占用空间过多，显得笨重
- ✖️ 按钮高度过小（<60rpx）：不易点击，体验差

### 5. 卡片式设计（强烈推荐）
- 背景白色 + 圆角 12-16rpx + 阴影
- 阴影推荐：\`box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08)\`（使用 $shadow-card）
- 卡片间距保持24rpx，避免拥挤
- 卡片内边距：32rpx 或 48rpx

### 6. 阴影与层次（符合主流小程序审美）
- **卡片阴影**：\`0 2rpx 12rpx rgba(0, 0, 0, 0.08)\`（$shadow-card）
- **浮层阴影**：\`0 4rpx 16rpx rgba(0, 0, 0, 0.1)\`（$shadow-float，用于筛选栏、底部操作栏）
- **悬浮效果**：\`0 4rpx 20rpx rgba(0, 0, 0, 0.12)\`（$shadow-card-hover）
- **弹窗阴影**：\`0 8rpx 32rpx rgba(0, 0, 0, 0.15)\`（$shadow-popup）

**重要**：按钮通常不使用阴影，主流小程序的按钮多为纯色或渐变，无阴影

### 7. 微交互动画（符合主流小程序审美）
- **按钮点击反馈（推荐）**：
  \`\`\`scss
  transition: all $transition-base;
  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
  \`\`\`

### 8. 视觉丰富度提升技巧（符合主流审美）
- **渐变背景（推荐）**：页面背景可使用淡淡的渐变色
- **投影效果（可选）**：logo/图标可添加 \`filter: drop-shadow()\`
- **层次对比**：卡片圆角小，按钮圆角适中，制造视觉对比
- **空间感**：善用 padding 和 margin 制造呼吸感

**主流设计趋势**：
- 卡片式布局 + 轻阴影是最常见的设计模式
- 扁平化风格倾向于少阴影、纯色按钮
- 动效保持简洁，避免过度设计

### 9. 防御性 UI 设计与边界处理（关键，防止布局崩坏）
为了确保在各种极端场景（长文本、窄屏幕、窄容器、图片）下 UI 依然优雅，**必须**遵守以下防御性规范：

**文本内容保护**：
- **单行截断**：标题、名称等可能过长的文字，必须使用 `@include text-ellipsis;`。
- **多行截断**：描述性文字必须限制行数，例如 `@include text-ellipsis-multi(1);`。

**按钮与标签保护**：
- **默认样式重置（Button）** Button 须使用 Mixin `@include button-reset;` 清除默认样式，再写自定义样式（背景、圆角等）进行覆盖。
  - **重要**：必须显式设置 `background`、`border`、`border-radius` 以及 `&:active` 点击态样式，否则按钮将不可见或无反馈。
  - **对齐修正**：若按钮与其他元素（如另一个按钮或文本）并排，建议显式设置 `height` 和 `border`（即使是透明边框），以确保盒模型高度一致。
- **强制不换行**：按钮 (`Button`) 和标签 (`Tag`) 内部文字必须设置 `white-space: nowrap;`，防止在窄容器中换行导致布局错位。
- **最小宽度**：为按钮设置 `min-width`，确保文字少时也不过窄。

**容器空间适配（横向滚动场景）**：
- **避免过窄容器**：在 `ScrollView` 横向滚动场景下，子项宽度不应小于 `260rpx`（除非仅展示图片）。
- **布局模式保护**：横向滚动子项必须保持行内特性。若需内部 Flex 布局，必须使用 `display: inline-flex`，严禁使用 `display: flex`（会导致竖向排列）。
- **内容降级策略**：如果容器宽度必须很小（< 240rpx），应简化展示内容（例如：隐藏按钮，改用图标；或隐藏描述文字）。

**图片与媒体组件规范（防止高度塌陷与留白）**：
- **列表与卡片场景（标准布局）**：
  - 在标准列表、网格（Grid）、卡片设计中，图片容器**推荐设置固定高度**或固定比例，以保持布局整齐。
  - Taro Image 组件必须设置 `mode="aspectFill"`（保持比例裁剪填充），确保图片填满容器且不变形。

### 10. 布局反例（避免）
- ✖️ 元素拥挤：间距小于 16rpx
- ✖️ 留白过大：卡片内边距超过 64rpx
- ✖️ 圆角不统一：同一页面卡片圆角大小不一
- ✖️ 缺少层次：所有内容都平铺，无卡片包裹
- ✖️ 按钮无反馈：点击无 active 状态
- ✖️ **内容超出屏幕**：固定宽度元素超过屏幕宽度，右侧被截断

### 11. TabBar 图标设计规范
- 格式：SVG，viewBox 统一为 `0 0 24 24`
- 风格：以线条为主的精致图标，stroke-linecap="round" stroke-linejoin="round"
- **未选中态**：`stroke="#999999"` stroke-width="1.5"，`fill="none"`
- **选中态**：`stroke="当前主题色"` stroke-width="2"，`fill="none"`，也可根据需要对核心区域使用 `fill="当前主题色"` 做实心填充以增强选中感
- 风格统一：同一套图标线条粗细、圆角、视觉重量必须一致，图标主体控制在 viewBox 的 2~22 范围内（四周留 2px 呼吸空间）
- 品质要求：图标需要精致、专业，达到可直接发布上线的品质。路径要简洁流畅，避免过度复杂的细节，确保缩小到 24px 仍清晰可辨
- 隐喻选择：使用常见且高辨识度的图标隐喻（如：首页用房子、我的用人形、消息用气泡、购物车用推车、发现用指南针等）

</ui_ux_design_principles>