261 lines
6.2 KiB
Markdown
261 lines
6.2 KiB
Markdown
# Claymorphism UI 优化文档
|
||
|
||
## 🎨 设计系统概述
|
||
|
||
### 什么是 Claymorphism（粘土拟态）？
|
||
|
||
Claymorphism 是一种结合了 **Neumorphism（新拟态）** 和 **3D 粘土质感** 的设计风格，具有以下特点：
|
||
|
||
- ✨ **双阴影效果**：外部阴影 + 内部阴影创造立体浮感
|
||
- 🎨 **柔和渐变**：使用 145deg 渐变创造有机感
|
||
- 🔄 **圆润边角**：大圆角设计传递柔和友好感
|
||
- 💫 **有机动画**：平滑的过渡和按压反馈
|
||
- 🌈 **高对比度**：保持可访问性的同时提供视觉吸引力
|
||
|
||
---
|
||
|
||
## 📦 组件库
|
||
|
||
### 核心组件
|
||
|
||
| 组件 | 文件路径 | 功能 |
|
||
|------|---------|------|
|
||
| **ClayCard** | `/components/ClayCard.vue` | 粘土风格卡片 |
|
||
| **ClayButton** | `/components/ClayButton.vue` | 粘土风格按钮 |
|
||
| **ClayInput** | `/components/ClayInput.vue` | 粘土风格输入框 |
|
||
|
||
### 使用示例
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 卡片组件 -->
|
||
<ClayCard size="lg" variant="primary" @tap="handleTap">
|
||
<text>这是一张粘土卡片</text>
|
||
</ClayCard>
|
||
|
||
<!-- 按钮组件 -->
|
||
<ClayButton
|
||
text="确认操作"
|
||
variant="primary"
|
||
size="lg"
|
||
:loading="isLoading"
|
||
@tap="handleConfirm"
|
||
/>
|
||
|
||
<!-- 输入框组件 -->
|
||
<ClayInput
|
||
v-model="searchText"
|
||
placeholder="搜索内容..."
|
||
prefixIcon="🔍"
|
||
:clearable="true"
|
||
@confirm="handleSearch"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ClayCard, ClayButton, ClayInput } from '@/components/clay-components.js'
|
||
|
||
export default {
|
||
components: { ClayCard, ClayButton, ClayInput },
|
||
data() {
|
||
return {
|
||
searchText: '',
|
||
isLoading: false
|
||
}
|
||
},
|
||
methods: {
|
||
handleTap() { console.log('卡片被点击') },
|
||
async handleConfirm() {
|
||
this.isLoading = true
|
||
// 执行操作...
|
||
},
|
||
handleSearch(val) { console.log('搜索:', val) }
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 组件 Props
|
||
|
||
### ClayCard
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
|
||
| `variant` | String | `'default'` | 变体：`default`, `primary`, `gold` |
|
||
| `inset` | Boolean | `false` | 是否凹陷效果 |
|
||
| `customClass` | String | `''` | 自定义类名 |
|
||
| `customStyle` | Object | `{}` | 自定义样式 |
|
||
|
||
### ClayButton
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `text` | String | `'按钮'` | 按钮文字 |
|
||
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
|
||
| `variant` | String | `'primary'` | 变体：`primary`, `secondary`, `success`, `warning`, `error` |
|
||
| `outline` | Boolean | `false` | 是否轮廓样式 |
|
||
| `block` | Boolean | `false` | 是否块级按钮 |
|
||
| `disabled` | Boolean | `false` | 是否禁用 |
|
||
| `loading` | Boolean | `false` | 是否加载中 |
|
||
| `icon` | String | `''` | 图标（emoji） |
|
||
| `customStyle` | Object | `{}` | 自定义样式 |
|
||
|
||
### ClayInput
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `modelValue` | String/Number | `''` | v-model 绑定值 |
|
||
| `type` | String | `'text'` | 输入框类型 |
|
||
| `placeholder` | String | `'请输入'` | 占位符 |
|
||
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
|
||
| `disabled` | Boolean | `false` | 是否禁用 |
|
||
| `error` | Boolean | `false` | 是否错误状态 |
|
||
| `errorText` | String | `''` | 错误提示 |
|
||
| `clearable` | Boolean | `false` | 是否可清空 |
|
||
| `prefixIcon` | String | `''` | 前缀图标（emoji） |
|
||
| `suffixIcon` | String | `''` | 后缀图标（emoji） |
|
||
|
||
---
|
||
|
||
## 🎨 样式变量
|
||
|
||
在 `uni.scss` 中定义的核心变量：
|
||
|
||
```scss
|
||
/* Claymorphism 阴影层级 */
|
||
$clay-shadow-sm: (...)
|
||
$clay-shadow-md: (...)
|
||
$clay-shadow-lg: (...)
|
||
$clay-shadow-xl: (...)
|
||
|
||
/* 颜色变量 */
|
||
$clay-bg-light: #FAFAFA;
|
||
$clay-bg-white: #FFFFFF;
|
||
$clay-bg-soft: rgba(255, 255, 255, 0.85);
|
||
$clay-border: rgba(255, 255, 255, 0.8);
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 已优化的页面
|
||
|
||
### ✅ 首页 (`pages/index/index.vue`)
|
||
- Banner 轮播卡片
|
||
- 通知栏
|
||
- 玩法分类卡片
|
||
- 活动列表项
|
||
|
||
### ✅ 底部导航栏 (`components/app-tab-bar.vue`)
|
||
- 导航栏背景
|
||
- 图标容器（圆形徽章）
|
||
- 选中状态动画
|
||
|
||
### ✅ 个人中心 (`pages/mine/index.vue`)
|
||
- 用户信息卡片
|
||
- 头像凹陷效果
|
||
- 统计数据卡片
|
||
- 功能图标容器
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 配置 easycom（推荐）
|
||
|
||
在 `pages.json` 中添加：
|
||
|
||
```json
|
||
{
|
||
"easycom": {
|
||
"autoscan": true,
|
||
"custom": {
|
||
"^Clay(A.*)": "@/components/Clay$1.vue"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 直接使用组件
|
||
|
||
```vue
|
||
<template>
|
||
<ClayCard size="lg">内容</ClayCard>
|
||
<ClayButton text="按钮" variant="primary" />
|
||
<ClayInput v-model="value" placeholder="输入..." />
|
||
</template>
|
||
```
|
||
|
||
### 3. 使用全局样式类
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 粘土卡片 -->
|
||
<view class="clay-card">内容</view>
|
||
|
||
<!-- 粘土按钮 -->
|
||
<view class="clay-btn clay-btn-primary clay-btn-md">按钮</view>
|
||
|
||
<!-- 凹陷效果 -->
|
||
<view class="clay-card-inset">凹陷卡片</view>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 设计原则
|
||
|
||
### ✅ 推荐做法
|
||
|
||
1. **保持一致性**：在整个应用中统一使用 Claymorphism 组件
|
||
2. **适度使用**：不要过度使用，保持界面呼吸感
|
||
3. **注意对比度**：确保文字与背景有足够的对比度
|
||
4. **动画平滑**：使用 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动函数
|
||
5. **圆角统一**：卡片 24-32rpx，按钮 50-60rpx（圆角）
|
||
|
||
### ❌ 避免做法
|
||
|
||
1. **不要混合多种拟态风格**
|
||
2. **不要使用过多的彩色渐变**
|
||
3. **不要忽略深色模式适配**
|
||
4. **不要在小元素上使用粘土效果**
|
||
|
||
---
|
||
|
||
## 📱 兼容性
|
||
|
||
| 平台 | 支持情况 |
|
||
|------|----------|
|
||
| 微信小程序 | ✅ 完全支持 |
|
||
| 抖音小程序 | ✅ 完全支持 |
|
||
| H5 | ✅ 完全支持 |
|
||
| App | ✅ 完全支持 |
|
||
|
||
---
|
||
|
||
## 🔮 后续计划
|
||
|
||
- [ ] 添加更多组件：ClaySwitch、ClaySlider、ClayModal
|
||
- [ ] 深色模式适配
|
||
- [ ] 动画效果增强
|
||
- [ ] 性能优化
|
||
|
||
---
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2025-02-05)
|
||
- ✅ 初始化 Claymorphism 设计系统
|
||
- ✅ 创建核心组件：ClayCard、ClayButton、ClayInput
|
||
- ✅ 优化首页、个人中心、底部导航栏
|
||
- ✅ 添加全局样式变量和 Mixins
|
||
|
||
---
|
||
|
||
**设计团队**: Z Code AI Studio
|
||
**最后更新**: 2025-02-05
|