520kiss/kitchen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
e347b3ca73d57a7fbc7c02f3f67b366a2376283b
kitchen/docs/design/IOS26_UI_DESIGN.md
Developer a59f54567f 重构目录树
2026-04-13 07:51:51 +08:00

23 KiB
Raw Blame History

小妈厨房 iOS 26 UI 设计方案

版本: 1.3 | 日期: 2026-04-12 | 设计语言: Liquid Glass (iOS 26)

本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。

目录

  1. 设计语言：Liquid Glass 核心特征
  2. 设计令牌 (Design Tokens)
  3. 页面架构总览
  4. 各页面布局演示
  5. 导航流程图
  6. 组件规范
  7. 改进对比
  8. 暗色模式适配
  9. 响应式适配
  10. 实施计划
  11. iOS 组件清单

一、设计语言：Liquid Glass 核心特征

iOS 26 的 Liquid Glass（液态玻璃） 是苹果自 iOS 7 扁平化以来最大的视觉变革，灵感源自 Vision Pro。

五大核心特征

# 特征 Flutter 实现
1 半透明毛玻璃 BackdropFilter + ImageFilter.blur(20)
2 动态光效/折射 渐变边框 + Shimmer 动画
3 深度层次感 多层 Container + BoxShadow
4 圆角同心设计 统一 BorderRadius 体系
5 内容聚焦 Stack + 半透明 Positioned

与现有代码映射

TapLiquidGlassNavigation → 保留，升级为 GlassNavBar
FloatingCupertinoTabBar   → 废弃，统一用 GlassNavBar
BottomBarStyle.liquidGlass → 透明玻璃杯效果（贴边样式）
BottomBarStyle.floating    → 悬浮液态玻璃效果
ThemeService.primaryColor (#2196F3) → 改为 iOS 蓝 #007AFF
ThemeService.secondaryColor (#FF9800) → 改为 iOS 橙 #FF9500

设计原则

内容为王 · 一致性 · 深度感 · 流畅性(250-350ms) · 可达性(≥44px触摸/≥11px文字)

二、设计令牌 (Design Tokens)

所有页面必须基于此令牌，禁止硬编码颜色、间距、圆角。若令牌中无所需值，需先在此处添加再使用。

颜色体系

类别 Token 值 用途
主色系 primary #007AFF iOS系统蓝
primaryLight rgba(0,122,255,0.1) 浅蓝背景
secondary #FF9500 iOS系统橙
背景系 background #F2F2F7 iOS浅灰底
card #FFFFFF 卡片白
cardAlpha rgba(255,255,255,0.72) 半透明卡片
毛玻璃系 glass rgba(255,255,255,0.45) 毛玻璃底色
glassBorder rgba(255,255,255,0.3) 毛玻璃边框
glassShadow rgba(0,0,0,0.06) 毛玻璃投影
文字系 text1 / text2 / text3 #1C1C1E / #8E8E93 / #C7C7CC 主/副/占位文字
功能色 red / orange / green #FF3B30 / #FF9500 / #34C759 删除/热门/成功

圆角体系

Token 值 用途 同心规则
radius-sm 8px 标签/Chip/小按钮 内层比外层小4-8px
radius-md 12px 卡片/输入框/列表项 xl→lg→md→sm
radius-lg 20px 大卡片/弹窗/搜索栏 28→20→12→8
radius-xl 28px 底栏/全屏容器 —
radius-full 999px 圆形头像/胶囊按钮 —

间距体系（4的倍数）

Token 值 用途
space-1 ~ space-7 4/8/12/16/20/24/32px 图标间距→页面顶部

毛玻璃参数

blur: 20-30px | opacity: 0.45-0.72 | border: 0.5px solid rgba(255,255,255,0.3) | shadow: 0 4px 16px rgba(0,0,0,0.06)

字体 / 阴影 / 动画

字体 值 阴影 值 动画 值
font-xs 11px 标签/徽章 shadow-sm 0 1px 3px rgba(0,0,0,0.04) fast 150ms 按钮
font-sm 12px 副文字 shadow-md 0 4px 12px rgba(0,0,0,0.06) normal 250ms 页面切换
font-md 14px 正文 shadow-lg 0 8px 24px rgba(0,0,0,0.08) slow 350ms 弹窗
font-lg 16px 标题 curve easeInOutCubic
font-xl 18px 大标题
font-xxl 22px 页面主标题

三、页面架构总览

Tab 结构变更

现有 4Tab:                    新 4Tab:
Tab0: 🏠 首页          →     Tab0: 🏠 首页 (信息流)
Tab1: 🛒 购物车(实为收藏)→    Tab1: ❤️ 收藏
Tab2: 🕐 足迹           →     Tab2: 🔍 发现 (聚合页)
Tab3: 👤 个人中心        →     Tab3: 👤 我的 (简化设置)

全局布局

┌─────────────────────────────────────┐
│  ⚠️ 离线横幅 (仅离线时显示)         │
│  ┌─────────────────────────────┐    │
│  │      Page Content Area      │    │
│  │    (IndexedStack 切换)      │    │
│  │  首页 | 收藏 | 发现 | 我的   │    │
│  └─────────────────────────────┘    │
│  🫧 Liquid Glass 底部导航栏 🫧      │
│   🏠首页  ❤️收藏  🔍发现  👤我的    │
└─────────────────────────────────────┘

导航栏规范

统一使用 CupertinoPageScaffold + CupertinoNavigationBar
背景: 毛玻璃(blur:20, opacity:0.72) | 标题: font-xl(18px)+text1
子页面: 左侧返回箭头(CupertinoIcons.back) | 右侧功能按钮(图标22px)

四、各页面布局演示

Tab0：首页（Home）

┌─────────────────────────────────────┐
│  🍳 小妈厨房              🔔  👤   │
├─────────────────────────────────────┤
│  ┌─ 营养仪表盘 (NutritionDashboard)─┐ │
│  │ <20> 今日摄入: 热量/蛋白质/碳水...│ │
│  └──────────────────────────────────┘ │
│                                     │
│  🌊 发现                    24 项   │
│  探索菜谱、食材、分类              │
│  ┌──────┐ ┌────────────┐          │
│  │🖼️封面│ │🥬食材卡片  │          │
│  │红烧排│ │⚠含过敏原  │          │
│  │骨 ⭐4.8│ │简介文字.. │          │
│  │👁1.2k│ └────────────┘          │
│  └──────┘ ┌──────┐ ┌──────────┐  │
│  ┌──────────┐ │📂分类│ │🏷️口味标签│ │
│  │🖼️宽图    │ │家常菜│ │酸辣甜鲜..│ │
│  │宫保鸡丁  │ │128项│ └──────────┘  │
│  │⭐4.5     │ └──────┘ ┌──────────┐ │
│  │👁2.3k    │ ┌──────────┐ │🕐早餐推荐│ │
│  └──────────┘ │🖼️菜品卡  │ │7-10点.. │ │
│              │番茄炒蛋  │ └──────────┘ │
│              └──────────┘ ↓下拉加载更多│
└─────────────────────────────────────┘

操作: 下拉刷新/上拉加载/点击菜品→详情/点击食材→搜索/点击分类→浏览/点击标签→列表/滚动隐藏顶部栏

布局说明 (v0.90.0 更新):

  • 移除旧「今日推荐」「分类浏览」「口味工艺」横向卡片
  • 使用 api_discover.php 接口数据构建 MasonryGridView 2列瀑布流
  • 5种卡片类型混合展示：菜品(Recipe)/食材(Ingredient)/分类(Category)/口味标签(Tag)/时段(MealTime)
  • Liquid Glass 毛玻璃风格统一视觉

Tab1：收藏（Favorites）

┌─────────────────────────────────────┐
│  ❤️ 我的收藏              🗑️ 清空   │
├─────────────────────────────────────┤
│  ┌──┐ 红烧排骨  家常菜·👁1.2k  ❤   │
│  │🖼️│                              │
│  ├──┤ ┌──┐ 宫保鸡丁  川菜·👁2.3k  ❤ │
│  │🖼️│                              │
│  └──┘ 共12个菜谱    [清空收藏]      │
│  ┌─ 空状态: ❤ 收藏夹是空的 ──────┐  │
│  │   去首页发现美味吧 →            │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘

操作: 左滑删除/点击❤取消收藏/清空确认弹窗/空状态→切换首页Tab

Tab2：发现（Discover）

┌─────────────────────────────────────┐
│  🔍 发现                            │
├─────────────────────────────────────┤
│  ┌─ 🔍 搜索菜谱、食材、标签... ──┐  │
│  ├─ 🏷️ 热门标签: 家常|快手|川菜|粤菜 →┤
│  ├─ 🎲 今天吃什么? 让我来帮你选! → ─┤
│  ├─ 🔥 热门排行: 🥇排骨 🥈宫保 🥉番茄→┤
│  ├─ 📂 分类浏览 (2列网格):          │  │
│  │  🍳家常 🥘快手 🌶️川菜 🍜粤菜    │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘

操作: 搜索→实时列表/标签筛选/今天吃什么→WhatToEatPage/排行→HotPage/分类→列表页

Tab3：我的（Profile）

┌─────────────────────────────────────┐
│  👤 我的                            │
├─────────────────────────────────────┤
│  ┌─ 用户卡片(毛玻璃): 👤美食爱好者 ─┐│
│  │  user@example.com [编辑][个性化] ││
│  ├─ 📊 统计: 12收藏 56浏览 8点赞 ──┤│
│  ├─ 分组1: 今天吃什么/数据管理/设置 →││
│  ├─ 分组2: 购物单/营养中心/睡眠提醒→││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘

子页面：菜谱详情（Recipe Detail）

┌─────────────────────────────────────┐
│  ← 返回            分享  收藏  更多  │
├─────────────────────────────────────┤
│  ┌─ 封面大图 (圆角+阴影) ─────────┐ │
│  ├─ 标题区: 名称/评分/时间/难度 ────┤ │
│  ├─ 作者卡片: 头像+昵称+关注 ──────┤ │
│  ├─ 信息卡: 口味/工艺/份量/热量 ────┤ │
│  ├─ 食材区: 图片+名称+用量+过敏警告─┤ │
│  ├─ 步骤区: 编号+图文+计时器 ──────┤ │
│  ├─ 营养区: 宏量营养素环形图 ──────┤ │
│  ├─ 标签区: 可跳转的分类/口味标签 ──┤ │
│  ├─ 统计栏: 👁浏览 ❤点赞 ⭐推荐 ───┤ │
│  ├─ 操作栏: 开始烹饪/分享/评分 ────┤ │
│  └─ PicId调试卡(开发模式可见) ─────┘ │
└─────────────────────────────────────┘

子页面：工具中心（Tools Center）

┌─────────────────────────────────────┐
│  ← 返回               工具中心      │
├─────────────────────────────────────┤
│  ┌─ 分类Tab: 全部|烹饪|健康|数据|规划┤│
│  ├─ 工具网格 (3列):                 ││
│  │  ⏱️计时 📐缩放 🍽️时段 📊BMI      ││
│  │  ⚠️过敏 🥗营养 🔢换算 🥕食材详情 ││
│  │  🔥排行 📈统计 📅规划            ││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘

五、导航流程图

                        ┌──────────┐
                        │  首页     │
                        │ (Tab0)   │
                        └────┬─────┘
                             │ 点击卡片
                             ▼
                   ┌─────────────────┐
                   │  菜谱详情页       │◄─────────────────┐
                   └──┬──────┬───────┘                  │
                      │      │                          │
           ┌──────────┘      └──────────┐               │
           ▼                             ▼               │
    ┌────────────┐              ┌────────────┐          │
    │ 笔记页面    │              │ 食材详情    │──────────┘
    └────────────┘              └─────┬──────┘
                                       │
                                ┌──────▼──────┐
                                │ 食材菜品列表  │
                                └─────────────┘

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 收藏(Tab1)│    │ 发现(Tab2)│    │ 我的(Tab3)│    │ 工具中心   │
└────┬─────┘    └──┬───────┘    └──┬───────┘    └────┬─────┘
     │              │              │                │
     ▼              ▼              ▼                ▼
  详情页        搜索/分类/排行   设置子页面      各工具子页面

六、Liquid Glass 组件规范

6.1 GlassContainer 毛玻璃容器

GlassContainer(
  child: Widget,
  blur: double,        // 默认20
  opacity: double,     // 默认0.45
  borderRadius: double,// 默认radius-lg(20)
  border: bool,        // 默认true
  padding: EdgeInsets,
)
// 使用场景: 卡片/弹窗/浮层

6.2 GlassNavBar 液态玻璃底栏

GlassNavBar(
  currentIndex: int,
  onTap: (int),
  items: [
    NavItem(icon: CupertinoIcons.home, label: '首页'),
    NavItem(icon: CupertinoIcons.heart, label: '收藏'),
    NavItem(icon: CupertinoIcons.search, label: '发现'),
    NavItem(icon: CupertinoIcons.person, label: '我的'),
  ],
)
// 特性: blur(20)+opacity(0.72)+圆角xl(28)+选中高亮动画

6.3 GlassFeedCard 信息流卡片

GlassFeedCard(
  imageUrl: String,
  title: String,
  subtitle: String,
  viewCount: int,
  likeCount: int,
  recommendCount: int,
  onTap: VoidCallback,
  onLike: VoidCallback,
  onRecommend: VoidCallback,
)
// 特性: 圆角md(12)+shadow-md+毛玻璃底部操作栏

6.4 GlassSearchBar 搜索栏

GlassSearchBar(
  hintText: '搜索菜谱、食材...',
  onChanged: (String),
  onSubmitted: (String),
)
// 特性: 圆角lg(20)+毛玻璃背景+搜索图标+清除按钮

6.5 GlassSegmentedControl 分段选择器

GlassSegmentedControl(
  segments: ['推荐', '最新', '热门', '个性化'],
  selectedIndex: int,
  onSelected: (int),
)
// 特性: 毛玻璃滑块+250ms平滑过渡+选中高亮

6.6 GlassSettingsGroup/Tile 设置组（备用）

GlassSettingsGroup(
  header: '通用',
  children: [
    GlassSettingsTile(title: '今天吃什么', trailing: '→'),
    GlassSettingsTile(title: '深色模式', toggle: true),
  ],
)

七、改进对比

维度 现有问题 iOS 26 改进
视觉风格 Material/Cupertino混用，颜色不统一 统一Liquid Glass毛玻璃风格
导航栏 各页面实现不一致 统一CupertinoPageScaffold+毛玻璃
底部栏 edge/floating两套并存 统一GlassNavBar(floating)
颜色 primary=#2196F3(Material蓝) 改为iOS标准#007AFF
圆角 各组件硬编码不统一 统一radius-sm/md/lg/xl体系
卡片 扁平无层次感 毛玻璃半透明+多层深度
动画 无统一规范 150/250/350ms三级动画体系
暗色模式 部分支持 完整DarkDesignTokens适配

八、暗色模式适配

Token Light Dark
background #F2F2F7 #000000
card #FFFFFF #1C1C1E
text1 #1C1C1E #F2F2F7
text2 #8E8E93 #8E8E93
text3 #C7C7CC #48484A
glass rgba(255,255,255,0.45) rgba(30,30,30,0.65)
glassBorder rgba(255,255,255,0.3) rgba(255,255,255,0.1)
glassShadow rgba(0,0,0,0.06) rgba(0,0,0,0.3)
shadow-sm/md/lg alpha降低 alpha提高

实现方式: CupertinoTheme.brightnessOf(context) 判断，使用 DarkDesignTokens 类获取暗色值

九、响应式适配

设备 宽度范围 布局策略
手机 360-640px 单列
平板竖屏 600-900px 双列(折叠屏适配)
平板横屏 768-1024px 双列+侧边详情
桌面 ≥1024px 多列+最大宽度1200px居中

折叠屏特殊处理: 避免关键内容置于折痕区域(屏幕中央)，使用order或grid调整流式排列

十、实施计划

阶段 内容 状态
P0 DesignTokens全局替换硬编码值 ✅ 已完成
P1 GlassContainer/GlassNavBar/GlassFeedCard基础组件 ✅ 已完成
P2 首页/发现页改造为信息流 🔄 进行中
P3 收藏页/我的页改造 ⏳ 待开始
P4 暗色模式完整适配 ⏳ 待开始
P5 响应式多端适配 ⏳ 待开始

十一、iOS 组件清单（Component Inventory）

统计日期: 2026-04-12 | 总计48个组件 | 35已使用 ✅ | 10未使用 ❌ | 3待集成 ⚠️

11.1 基础组件 (widgets/base/) — 4个

文件 类名 状态 引用数
app_page_scaffold.dart AppPageScaffold, AppCard ✅ 2+
skeleton_loader.dart SkeletonLoader ✅ 2
standard_button.dart StandardButton ✅ 2
tap_liquid_glass_nav.dart TapLiquidGlassNavigation ❌ 0

11.2 Cupertino组件 (widgets/cupertino/) — 3个（全部未使用）

文件 类名 状态 备注
app_button.dart AppButton ❌ 项目主要用CupertinoButton
app_card.dart AppCard ❌ ⚠️与base/app_page_scaffold.dart同名重复
app_text_field.dart AppTextField ❌ 可后续启用

11.3 毛玻璃组件 (widgets/glass/) — 8个

文件 类名 状态 引用数
glass_container.dart GlassContainer ✅ 9处
glass_nav_bar.dart GlassNavBar ✅ 1
glass_feed_card.dart GlassFeedCard ✅ 1
glass_search_bar.dart GlassSearchBar ✅ 2
glass_segmented_control.dart GlassSegmentedControl ✅ 4
glass_animations.dart GlassBounce/Shimmer ❌ 0
glass_responsive.dart GlassResponsive ❌ 0
glass_settings_tile.dart GlassSettingsGroup/Tile ❌ 0

11.4 状态组件 (widgets/states/) — 5个

文件 类名 状态 引用数
empty_state.dart EmptyState ✅ 11处
error_state.dart ErrorState ✅ 3处
offline_banner.dart OfflineBanner ⚠️ 仅自身定义
standard_dialog.dart StandardDialog ✅ 1
standard_picker.dart StandardPicker<T> ❌ 0

11.5 通用组件 (widgets/根目录) — 11个

文件 类名 状态 引用数
adaptive_widgets.dart AdaptiveDestination/Interface ❌ 0
charts_widgets.dart 营养图表 ✅ 2
custom_widgets.dart 自定义控件集 ✅ 1
loading_indicator.dart LoadingIndicator ⚠️ 间接依赖
navigation_widgets.dart 导航组件 ✅ 1
nutrition_dashboard_card.dart NutritionDashboardCard ✅ 2
product_card.dart ProductCard ⚠️ 间接依赖
recipe_card.dart RecipeCard ✅ 7处
recipe_image.dart RecipeImage ✅ 10处
responsive_grid.dart ResponsiveGrid ⚠️ 间接依赖
skeleton_widgets.dart 骨架屏组件 ✅ 1

11.6 菜谱详情组件 (widgets/recipe_detail/) — 17个（全部已使用）

action_bar, allergen_warning, author_card, category_breadcrumb, cover_image, indices_card, ingredient_details, ingredients_section, meta_info_card, nutrition_section, picid_card, rating_dialog, skeleton_view, statistics_bar, steps_section, tags_section, time_info, title_section

11.7 未用组件处理建议

组件 建议
TapLiquidGlassNavigation 整合到glass_nav_bar或删除
cupertino/AppButton/AppCard/AppTextField 删除cupertino目录，合并AppCard到base
GlassAnimations 保留，点赞动画可启用
GlassResponsive 删除，功能简单可内联
GlassSettingsGroup/Tile 保留，设置页改造时启用
StandardPicker 保留，表单页可启用
AdaptiveWidgets 删除，当前无平板需求
OfflineBanner 集成到全局App Shell

变更记录

日期 版本 变更内容
2026-04-12 1.3 压缩重构: 1182行→~780行；合并设计令牌为紧凑表格；精简ASCII图和操作表；组件清单改为汇总格式
2026-04-12 1.2 新增第十一章「iOS 组件清单」：完整统计48个组件使用状态，按6个分类整理，含处理建议
2026-04-09 1.1 重写完整文档：增加目录、设计原则、动画规范、暗色模式详细参数、响应式规则、实施计划状态追踪
2026-04-09 1.0 初始版本：基础设计方案
Reference in New Issue View Git Blame Copy Permalink