Liquid Glass UI Kit - Complete Component Library

This is the most complete Liquid Glass design language component library available, containing 120+ meticulously designed UI components that perfectly recreate Apple iOS 26's latest design style.

🎨 What's Included

Basic Components

• Button Components (12 styles)

  • Primary Button
  • Secondary Button
  • Ghost Button
  • Icon Button
  • Different sizes and states

• Input Components (8 styles)

  • Text Field
  • Search Field
  • Number Input
  • Password Field
  • Validation states and error messages

• 选择器组件 (10种样式)

  • Dropdown
  • Radio Button
  • Checkbox
  • Toggle Switch
  • Segmented Control

导航组件

• 导航栏 (6种样式)

  • Top Navigation
  • Bottom Tab Bar
  • Side Menu
  • Breadcrumb
  • Pagination

• 菜单组件 (8种样式)

  • Context Menu
  • Dropdown Menu
  • Action Sheet
  • Popover
  • Toast 消息

数据展示

• 卡片组件 (15种样式)

  • Basic Card
  • Image Card
  • Product Card
  • Profile Card
  • Statistics Card

• 列表组件 (12种样式)

  • Simple List
  • Detailed List
  • Grid List
  • Timeline
  • Chat List

• 图表组件 (10种样式)

  • Line Chart
  • Bar Chart
  • Pie Chart
  • Progress Bar
  • Activity Ring

模态对话框

• 弹窗组件 (8种样式)
  • Alert Dialog
  • Confirmation Modal
  • Form Modal
  • Image Gallery
  • Loading States

媒体组件

• 图片组件 (6种样式)

  • Image Gallery
  • Avatar
  • Thumbnail
  • Hero Image
  • Image Carousel

• 视频组件 (4种样式)

  • Video Player
  • Video Thumbnail
  • Live Stream
  • Video Controls

🛠️ 技术规格

设计规范

• 设计软件: Figma 原生组件 + Sketch 文件
• 色彩模式: Light & Dark Mode 支持
• 分辨率: @1x, @2x, @3x 全套切图
• 格式: Figma组件、Sketch Symbols、PNG/SVG 导出

兼容性

• ✅ Figma 2024+
• ✅ Sketch 95+
• ✅ Adobe XD 导入支持
• ✅ Principle 动效支持

📱 适用场景

iOS 应用设计

完美适配 iOS 26 设计规范，包含：

• 系统级组件样式
• 标准间距和字体
• 官方色彩规范
• 交互状态定义

网页设计

响应式设计友好：

• 桌面端适配
• 移动端优化
• 平板端适配
• PWA 应用支持

原型设计

快速原型制作：

• 完整交互状态
• 动效预设
• 实际数据填充
• 用户测试就绪

🎯 使用指南

Figma 使用方法

1. 下载 .fig 文件
2. 在 Figma 中打开文件
3. 复制需要的组件到你的项目
4. 使用组件系统快速搭建界面

Sketch 使用方法

1. 下载 .sketch 文件
2. 在 Sketch 中打开文件
3. 组件已配置为 Symbols
4. 拖拽使用，支持嵌套覆盖

自定义指南

• 颜色自定义: 使用 Figma 变量系统
• 字体替换: 支持 SF Pro 字体族
• 尺寸调整: 响应式组件自动适配
• 状态切换: 内置多种交互状态

💡 设计亮点

真实毛玻璃效果

• 精确的背景模糊值
• 正确的透明度层级
• 符合物理规律的光影

完整状态设计

• Normal、Hover、Active、Disabled
• Loading 和 Error 状态
• 空数据状态
• 骨架屏设计

动效预设

• 内置 Principle 动效文件
• After Effects 预设
• CSS 动画代码
• 微交互设计

📊 用户评价

⭐⭐⭐⭐⭐ 4.9/5.0 (基于 520+ 用户评价)

"这是我见过最完整的 Liquid Glass 组件库，每个细节都很到位！" - @设计师张三

"终于有了官方风格的组件库，大大提高了我的设计效率。" - @UI设计师李四

"颜色和动效都很考究，用起来很舒服。" - @产品设计师王五

🔄 更新日志

v1.0.0 (2025-06-13)

• ✨ 初始发布
• 🎨 120+ 基础组件
• 📱 支持 Light/Dark Mode
• 🔧 Figma 和 Sketch 版本

即将更新

• 🎯 更多图表组件
• 🎮 游戏化组件
• 📊 数据可视化套件
• 🎨 更多主题色彩

📞 技术支持

如果在使用过程中遇到任何问题，请联系我们：

• 📧 Email: support@liquidglass.shop
• 💬 微信群: 添加客服微信 liquidglass2025
• 📚 使用文档: 查看详细文档
• 🐛 问题反馈: GitHub Issues

---

立即下载，开始你的 Liquid Glass 设计之旅！