wechat/.pai/skill-update/generate-mini-app/prompts/ui-ux-design-principles.md

<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>