zhaoxi
138 lines
7.8 KiB
Markdown
138 lines
7.8 KiB
Markdown
<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> |