大学生人际意志性改变数字化干预 App · 学生端 · 移动版 · v2

首页视觉方向 15 选

15 种风格共用同一套 20 个组件和同一套滑动手势,差别只在设计令牌:颜色、字体、圆角、表面、按压反馈、动效曲线。点任意一台手机放大后可以直接操作:进入主任务后在任意位置右滑返回,首页左右滑切换底部导航,底部面板可以往下拖关闭。

组件一致同一份 React 组件,换主题只换令牌,不改结构与交互。
手势一致右滑返回、左右滑切页、下拉关面板,所有风格手感相同。
语义色固定蓝=主要行动,青=进展,橙=注意,红只用于安全。
六维分开看五项资源与“阻碍感知”分组展示,不算总分、不排名。

共享组件AppHeader 标题栏 · WeekChip 周标记 · TaskCard 主任务卡 · SectionHeader 分组标题 · ListRow 列表行 · ListGroup 分组列表 · CheckinScale 五档签到 · ProgressBar 进度条 · DimBar 维度条 · Tile 工具块 · TabBar 底部导航 · NavBar 顶栏 · StepIndicator 步骤条 · OptionCard 单选卡 · Chip 选择片 · Slider 滑杆 · ActionCard 行动卡 · DoneMark 完成标记 · Sheet 底部面板 · Toast 轻提示

点击卡片放大 · 放大后可用 ← → 键或在说明区左右滑切换 · Esc 关闭 行动进展注意安全