【OpenHarmony/HarmonyOs 】从政治视界看教育类 App 的全场景学习体验设计

HarmonyOS 的全场景能力给教育类 App 带来了很大想象空间。学习不一定只发生在手机上：课堂上用平板看资料，路上用手机刷题，晚上用大屏查看学习报告，折叠屏上一边读材料一边做题。本文结合 政治视界 项目，详细聊聊教育类 App 如何设计全场景学习体验 🌍

一、全场景不是简单多端运行

很多人理解全场景，就是 App 能在手机和平板上打开。但真正的全场景应该是：

• 不同设备承担不同学习任务；
• 学习数据保持连续；
• 页面布局适应设备形态；
• 高频任务可以轻量进入；
• 学习路径不中断。

政治视界当前已经有题库、闪卡、笔记、日报、报纸、学习报告和成就，这些模块天然适合拆成不同场景。

二、手机场景：碎片化刷题

手机适合短时间、高频操作：

• 今日 10 题；
• 错题复习；
• 闪卡记忆；
• 每日政治快速阅读；
• 查看今日目标。

题库页面的筛选和答题逻辑就很适合手机：

@State selectedCategory: string = '全部';
@State selectedGrade: string = '全部';
@State selectedKnowledgePoint: string = '全部';
@State selectedAnswer: string[] = [];

手机端重点是操作路径短，按钮反馈明确。用户打开后最好 5 秒内能开始学习。

三、平板场景：阅读和整理

平板更适合信息密度高的场景：

• 阅读政治报纸；
• 整理笔记；
• 查看学习报告；
• 对比错题解析；
• 分屏学习。

项目中的报纸模块按期次组织内容，非常适合平板阅读：

@State selectedIssueId: number = 1;
@State selectedSection: NewspaperSection | '全部' = '全部';
@State selectedArticle: NewspaperArticle | null = null;

在平板上可以把期次/文章列表放左侧，文章详情放右侧，减少来回跳转。

四、折叠屏场景：双栏学习

折叠屏展开后适合双栏：

private updateLayoutMode(): void {
  if (this.isFoldable && this.foldState === 2) {
    this.layoutMode = LayoutMode.EXPANDED;
  } else if (this.screenWidth >= 840) {
    this.layoutMode = LayoutMode.EXPANDED;
  }
}

对于政治学习，折叠屏可以这样设计：

左侧：知识点/材料/错题列表
右侧：题目/解析/笔记内容

这比单列页面更适合深度学习。

五、大屏场景：学习报告展示

学习报告页适合大屏展示：

StatsPage({ embedInShell: true })
  .layoutWeight(1)

可以展示：

• 今日学习时长；
• 本周答题趋势；
• 分类正确率；
• 错题数量；
• 成就进度。

大屏不适合复杂输入，但适合总结和展示。

六、跨场景数据连续

全场景体验的核心是数据连续。项目通过 DataManager 统一管理学习数据：

recordSession(type: 'quiz' | 'flashcard' | 'note', category: string): void {
  this.ensureInitialized();
  this.recordSessionCore(type, category, 0);
}

不管用户是在题库答题，还是在闪卡复习，最终都进入学习会话记录。这样学习报告可以统一统计。

七、轻量入口设计

教育 App 很适合拆出轻量入口：

• 今日 10 题；
• 错题复习；
• 闪卡 5 分钟；
• 每日政治；
• 学习报告。

首页已有类似能力：

goToPractice(questionId: number): void {
  this.dataManager.setQuizJumpQuestion(questionId);
  this.currentTab = 3;
}

也就是说，入口只需要传递学习意图，主应用负责打开对应页面。

八、实现路线

先做好响应式布局
  ↓
统一学习数据管理
  ↓
拆分高频学习入口
  ↓
为平板/折叠屏优化双栏
  ↓
让学习报告适配大屏
  ↓
后续再接入跨设备流转

九、结语

全场景学习体验不是为了堆技术，而是让用户在不同设备上都能自然继续学习。政治视界的模块已经具备这个基础：手机刷题、平板阅读、折叠屏双栏、大屏看报告。

教育类 App 做全场景，最重要的是让学习任务和设备能力匹配。设备变了，学习路径不能断，这就是全场景的真正价值 🚀

十、如果继续落地，可以怎么改

当前项目已经有响应式基础，下一步可以按页面逐个增强。首页可以在 isTwoColumn 为 true 时把学习统计和推荐练习拆成左右两栏；题库页可以在大屏模式下左侧展示筛选条件，右侧展示题目；报纸页可以在平板上常驻文章列表，让详情不再以全屏弹层出现。

例如页面中已有响应式状态：

@State private isTwoColumn: boolean = false;
@State private contentPadding: number = 16;
@State private cardRadius: number = 20;

布局时可以根据 isTwoColumn 决定是单列还是双列：

if isTwoColumn:
  Row: 左侧学习任务 + 右侧内容详情
else:
  Column: 从上到下展示

这样不用重新写两套页面，只是在关键布局节点做分支。

十一、数据连续性的实现重点

全场景的体验最终要靠数据连续支撑。政治视界目前使用 DataManager 记录学习会话，这一点很适合作为跨端同步的基础：

private recordSessionCore(type: 'quiz' | 'flashcard' | 'note',
  category: string, correctAdd: number): void {
  const today: string = this.getTodayDate();
  const newSession: StudySession = {
    id: Date.now(),
    date: today,
    duration: 1,
    questionsAnswered: 1,
    correctCount: correctAdd,
    category: category,
    type: type
  };
  this.studySessions.push(newSession);
}

后续如果接入云同步或跨设备流转，优先同步的不是整个页面状态，而是这些学习会话、错题、目标和当前任务。页面可以根据这些数据恢复用户的学习进度。

十二、不同设备的页面改造清单

可以按下面的清单逐步做：

手机：
  保持当前单列和底部 Tab，强化快速进入题库

平板：
  首页双列、报纸双栏、笔记列表+详情

折叠屏：
  展开后题库左筛选右答题，闪卡左列表右卡片

大屏：
  学习报告大字号展示，只保留查看和返回操作

这类改造的关键是“同一个数据源，不同展示方式”。只要数据层稳定，全场景改造就不会把项目拆散。