# 学习平台界面设计：先选任务再设条件 原网页：https://www.jvds.cn/share/ui-design/miyagi-practice-dashboard-u078 语言：zh-CN 发布：2026-10-16 作者：界达设计工作室（JVDS） Miyagi的学习平台用白色任务区、深色导航和橙色按钮组织练习。首页没有只停留在成绩展示，而是先给出今日主题；练习中心再按模式与条件分层。这样的学习仪表盘设计，值得从“这次练什么、会得到什么”来理解。 ## 核心结论 - 今日任务先提供方向，统计补充学习背景。 - 模式、按钮和筛选结果要说明同一次练习。 ## 今日主题比总分更接近行动 首页在问候下放今日主题Cross-Text Connections，旁边直接给出练习按钮，统计卡在下方补充学习情况。学生先看到可以开始的内容，再了解近期记录，阅读顺序与实际行动相近。 [主题推荐](https://www.jvds.cn/share/ui-design/ai-recommendation-ux-control)宜说明来自计划、错题还是其他依据，并在完成后更新状态。界达设计更偏好把一个可解释的下一步放在统计前面：数字可以补充背景，明确的任务才能帮助安排当下时间。 ![Miyagi首页Today’s Focus主题、Practice Now与下方进度卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u078-i1.webp) 学习首页｜先显示今日任务，再用统计解释背景 ## 模式卡统一外形，区分结果 Practice Mode、SAT Score Predictor与Practice Exam使用相同白色卡片，题量、范围和预计时间位于右侧，按钮靠近结果说明。固定字段位置便于比较，而模式名称指出不同用途。 预测、短练和完整模拟并不提供同一种反馈，按钮也应与模式对应。图中预测卡两个入口同写Start Math Predictor，考试卡按钮写Start Practice Mode，文字没有充分区分目标；这类标签应在继续细化视觉前先校正。 卡片的数字只用来说明界面信息结构。进入后的标题、可用科目和结果页应延续同一模式名称，返回时保留之前选择，避免“看起来不同、点击后相同”的入口。 ![练习、SAT分数预测与模拟考试三张模式卡及不同说明](https://www.jvds.cn/upload/2026/1008/d187-tp/u078-i2.webp) 模式中心｜任务、时间和结果一起解释选择 ## 依赖说明让筛选更容易理解 设置页从Reading & Writing与Math开始，再按Domain、Difficulty和Source分组。Skill说明只有选定一个领域后才能细分，这比让控件安静地不可用更容易理解。右侧独立放限时、答案反馈等选项及可用题量。 题量592有很强存在感，但需要与当前条件同步。无结果时宜保留组合并指出可调整项，重置后则明确显示恢复结果。Reset All Settings与Begin Practice上下相邻，颜色已经区分用途，重置仍应有独立反馈。 开始前可以补一行科目、范围和反馈方式摘要。设置项并不是越多越完善，重要的是用户知道这些选项怎样改变本次练习。 ![科目、领域、技能依赖、难度来源和右侧题量与开始按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u078-i3.webp) 练习条件｜有效条件与题量共同定义本次范围 ## 助手可用，但要给题目留下空间 助手使用深色渐变，预设问题排在输入框上方，降低了第一次提问的门槛。人物学习照片放在展示图外侧，说明场景；它没有占据练习页面的实际工作区。 真实练习中的助手适合[按需展开](https://www.jvds.cn/share/ui-design/progressive-disclosure-complex-product-ux)并保留当前题目。限时或模拟模式还需说明可用帮助范围，进度咨询、概念解释与直接给出答案应有区别。助手的视觉亲切感要与本次学习规则一致。 ![Miyagi助手预设问题及文本、语音和附件输入](https://www.jvds.cn/upload/2026/1008/d187-tp/u078-i4.webp) 助手面板｜帮助需要关联当前练习并说明使用边界 ## 常见问题 ### 学习首页必须展示很多统计吗？ 统计应服务下一步安排。可先展示今日主题和推荐依据，再给相关近期记录，避免用户只看到分数却不知道怎样开始。 ### 练习筛选为什么要解释不可用项？ 领域与技能有依赖时，原因说明能帮助用户修正条件。还应提供当前题量与无结果反馈。 ## 设计检查清单 - 模式名称、入口和结果类别一致。 - 筛选变化更新题量。 - 助手不遮挡题目，帮助范围符合模式。 ## 整理学习任务和练习条件 学习产品可先校对今日任务、练习模式和设置摘要，再设计成绩反馈与助手入口。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)