bindbox-mini/docs/CLAYMORPHISM.md

Claymorphism UI 优化文档

🎨 设计系统概述

什么是 Claymorphism（粘土拟态）？

Claymorphism 是一种结合了 Neumorphism（新拟态） 和 3D 粘土质感 的设计风格，具有以下特点：

• ✨ 双阴影效果：外部阴影 + 内部阴影创造立体浮感
• 🎨 柔和渐变：使用 145deg 渐变创造有机感
• 🔄 圆润边角：大圆角设计传递柔和友好感
• 💫 有机动画：平滑的过渡和按压反馈
• 🌈 高对比度：保持可访问性的同时提供视觉吸引力

---

📦 组件库

核心组件

组件	文件路径	功能
ClayCard	/components/ClayCard.vue	粘土风格卡片
ClayButton	/components/ClayButton.vue	粘土风格按钮
ClayInput	/components/ClayInput.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 中定义的核心变量：

/* 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 中添加：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^Clay(A.*)": "@/components/Clay$1.vue"
    }
  }
}

2. 直接使用组件

<template>
  <ClayCard size="lg">内容</ClayCard>
  <ClayButton text="按钮" variant="primary" />
  <ClayInput v-model="value" placeholder="输入..." />
</template>

3. 使用全局样式类

<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