乐橙智康

外观

视觉风格与组件规范 ​

当前 Flutter App 的视觉基线由 lib/config/theme/ 中的 design tokens、AppTheme.lightTheme 和已落地页面共同构成。产品官网仍保留医疗蓝表达，App 内部主视觉已经转向 Morandi 紫灰体系。

视觉基线 ​

维度当前基线说明
品牌主色Morandi 紫 #6750A4用于 CTA、焦点、高权重图标和进度表达
页面底色紫灰浅底 #F7F5FA作为所有 Scaffold 的基础背景，降低纯白刺眼感
内容容器白色主卡片 #FFFFFF + 弱紫灰内嵌底 #F3EDF7用于卡片、输入框、弱分区
字体层级32 / 28 / 22 / 18 / 17 / 14 / 12pt token标题、正文、标签和元数据分层明确
间距系统AppSizes.p4 ~ p64以 8pt grid 为主，p12 / p20 用于紧凑例外
圆角系统8 / 12 / 20 / 24pt卡片以 20pt 为主，输入框和 BottomSheet 使用更大圆角
语义色红 / 黄 / 绿分别用于危险、观察、完成，不和品牌色混用

颜色职责 ​

Token色值阅读职责
AppColors.brandPrimary#6750A4主按钮、当前选中、关键进度、可操作焦点
AppColors.brandPrimaryVariant#4F378B按下态、深色品牌承重区
AppColors.brandSecondary#E8DEF8淡紫容器、弱品牌背景
AppColors.backgroundBase#F7F5FA页面底色
AppColors.surfacePrimary#FFFFFF卡片、输入框、主要容器
AppColors.surfaceMuted#F3EDF7卡片内部分区、弱分隔背景
AppColors.textPrimary#1D1B20标题、主正文、核心数字
AppColors.textSecondary#49454F辅助正文、副标题
AppColors.textHint#79747Ehint、禁用态、低权重图标
AppColors.textOnBrand#FFFFFF品牌色背景上的文字
AppColors.alertDestructive#BA1A1A错误、退出、危险操作
AppColors.alertWarning#D68A1B中低风险提示、观察态
AppColors.alertSuccess#388E3C完成、达标、成功反馈

排版职责 ​

Token规格使用场景
displayLarge32pt / Bold / h 1.2关键指标数字
heading128pt / Bold / h 1.25页面级大标题
heading222pt / Bold / h 1.3AppBar、大卡片标题
heading318pt / SemiBold / h 1.4卡片标题、组件标题
bodyLarge17pt / Regular / h 1.5主正文、长说明
bodyMedium14pt / Regular / h 1.5次级说明、时间与描述
labelLarge14pt / SemiBold / h 1.4Tab、次级按钮
labelSmall12pt / Medium / h 1.4hint、标签、元数据

页面说明、按钮文案和状态提示应优先回到这些 token。仍使用裸 TextStyle(fontSize: ...) 的页面属于实现残留，不能作为新页面写法参考。

组件职责 ​

组件 / 模式当前规范
卡片优先使用 FitDocCard，白底、20pt 圆角、弱阴影或无阴影
主按钮优先使用 PrimaryButton，品牌紫主色、明确 loading / disabled 状态
输入框浅底、大圆角、品牌紫焦点，hint 使用 textHint
BottomSheet / Modal顶部大圆角，背景与卡片体系一致
状态提示SnackBar、inline banner、错误色按语义色使用
页面转场优先使用 AppTransitions.pushDetail / fade / slideUp 与 AppAnimations，新增页面应复用既有转场与节奏

当前落地情况 ​

页面视觉判断实现边界
首页深紫顶部条、浅灰紫背景、白色卡片，是当前最稳定的 App 视觉基线与 design tokens 对齐程度较高
鉴权表单输入框、主按钮、留白和紫灰体系已经统一PhoneInputScreen 可作为新表单页参考
Chat白底 AppBar、紫色 AI 强调、抽屉式历史入口页面功能稳定，消息动效仍可继续增强
Exercise功能 tab 清晰，执行页上下反差强部分运动内容来自静态动作库
Profile渐变 Hero + 功能卡片列表，信息密度较高仍需要注意卡片堆叠后的纵向阅读压力
Settings使用 AppColors / AppTextStyles / AppRadius / AppSizes 组织页面，通知、显示、隐私与帮助分区清晰用户偏好通过 SharedPreferences 本地持久化；系统权限与远端账号策略仍按具体能力接入
Splash使用 Morandi 紫灰体系、主题 token 与轻量入场动效启动页负责品牌识别和登录态分流，不承载业务信息密度

代表界面 ​

主页框架首页

用于识别 App 当前主视觉：深紫顶部、浅灰紫背景、白色信息卡片。

手机号输入页鉴权表单

用于识别输入框、按钮、留白和品牌紫焦点的统一写法。

我的页个人中心

用于观察渐变 Hero、资料区和功能卡片在高信息密度页面中的组合方式。

设置页设置页

用于识别设置分组、本地偏好保存和主题 token 在配置页中的使用方式。

已知差异 ​

  • 官网使用医疗蓝 #3A7BD5，Flutter App 当前使用 Morandi 紫 #6750A4。
  • 新增 App 页面应优先复用 AppColors / AppTextStyles / AppRadius / AppSizes，避免重新引入局部裸色值和裸字号。
  • 动效应优先使用 AppTransitions 与 AppAnimations；Chat 消息进场、列表进场和 Loading -> Loaded 过渡可以继续在同一节奏体系下增强。

来源锚点 ​

  • UI 开发规范：docs/UI_DEV_STANDARD.md
  • UX 现状审计：docs/UX_INTERACTION_AUDIT.md
  • 颜色：apps/flutter_app/lib/config/theme/app_colors.dart
  • 排版：apps/flutter_app/lib/config/theme/app_typography.dart
  • 间距与圆角：apps/flutter_app/lib/config/theme/app_sizes.dart
  • 主题装配：apps/flutter_app/lib/config/theme/app_theme.dart
  • 样本页面：
    • apps/flutter_app/lib/screens/registration/phone_input_screen.dart
    • apps/flutter_app/lib/screens/settings/settings_screen.dart