学生仪表盘使用场景
- 考试进度复盘同时查看等级、偏差值分数、截止时间和练习进度。
- 学生门户概念在确定生产环境行为之前,探索仪表盘结构。
- 桌面端学习工作区在一个视图中组织导航、趋势、科目、通知和操作。
草图式学习工作区亮点
- KPI 优先布局顶部四张卡片立即呈现学习者当前所处的位置。
- 趋势与科目视图彼此分离的图表面板区分分数变化与科目对比。
- 以操作为导向的后续跟进下一步项目将仪表盘状态与具体学习操作连接起来。
学生仪表盘线框图
1 / 1KPI 优先的学生仪表盘
Zentou AI · Portal WIREFRAME v0.1 将桌面端学生门户呈现为一次低保真探索。选定的概念是“B · ダッシュボード”,标记为 DATA-FORWARD,其所述结构将 KPI 置于首位,让学习者在向下查看详细信息之前了解自己当前所处的位置。
仪表盘向 motoki.daisuke 致意,并显示三个静态时间段标签:今週、今月和通算,其中今月处于高亮状态。四张卡片分别显示 認定ランク A2 与 基礎認定、偏差値 39 与 +3.2 前回比、次回まで 1日 与 04/19 10:00,以及 練習進捗 62%。它们分别呈现等级、对比、紧迫性和活动情况;HTML 并未将这些时间段标签连接到数据变化。
这种有意为之的信息密度体现了取舍。四张卡片支持快速对比,但这些数值没有解释其计算方式或彼此关系。在这个作品示例中,它们是视觉设计里的示例内容,并非实时评估数据或已连接学生记录的证据。
该构图支持的学习决策
对于打开门户后决定下一步做什么的学生而言,这种布局很有用。左侧导航栏列出 ダッシュボード、試験日程、成績一覧、練習問題 和 学習計画,主区域则从摘要转向依据,再转向操作。这种顺序减少了在查看当前状态之前先选择目的地的需要。
CHART · 偏差値推移 使用红色折线和绘制的点,而 SUBJECTS · 科目別 则在源标签 開発 / 国 / 数 / 英 / 理 下方使用五个斜线填充的条形。面板绘制了坐标轴线,但没有数值刻度、日期或每个条形的数值。它们区分了拟议的分数趋势与科目对比,却没有提供已测量的表现数据。
下方的“NEXT STEP / 次にやること”面板列出两项具体操作:完成考试申请,以及针对薄弱项 論理 解答十道题。这是从诊断转向行动的一次有效过渡。取舍在于,该设计提出了操作标签,却没有展示完成状态、负责人或推荐生成方式。
查看趋势
使用折线面板查看 偏差値推移 的方向;这些点暗示存在重复观测,但没有定义日期或刻度。
比较科目
使用条形面板比较五个命名科目;不同的高度显示相对侧重点,而非经过验证的表现数值。
选择操作
使用 NEXT STEP 将概览与申请及针对性练习任务连接起来。
从进入门户到执行下一步
可见的阅读流程从门户标签“zentou-ai.jp / portal / dashboard”开始,经过学习者问候语和时间段控件,然后到达四张 KPI 卡片。这形成了从身份和时间范围到当前状态的工作区顺序。时间段切换器明显高亮 今月,但该截图并不能证明此控件会在运行时改变数据。
在 KPI 下方,图表和科目面板提供了两种不同形式的上下文。图表比科目面板更宽,这与 1.4fr 对 1fr 的 CSS 面板网格关系一致。该比例为趋势提供了更多空间,同时保留紧凑的对比面板。这一选择支持仪表盘对变化的强调,但也赋予图表更大的视觉权威,尽管其刻度并未明确。
通知区域随后出现,位于标记为 お知らせ(直近 3 件)的虚线容器中,下一步区域则位于其下方,并带有红色描边。这一顺序将被动信息置于明确操作之前。生产环境适配可以测试是否应将紧急任务移到通知上方,但这会是拟议的变更,而不是该示例所展示的行为。
进入概览
门户路径和问候语将仪表盘确立为学习者的起始工作区,左侧显示导航项。
检查当前状态
时间段控件和四张 KPI 卡片共同框定选定的时间视图、分数背景、截止时间和练习进度。
查看辅助视图
趋势和科目面板提供不同类型的上下文:跨观测结果的变化,以及科目的相对分布。
执行建议操作
NEXT STEP 区块将概览转化为两项拟议任务:完成考试申请,或练习薄弱项 論理。
可见结构与能力边界
这份官方 OpenDesign 随附示例是一个静态的 B 仪表盘画布。A、C 和 D 概念标签页以及第 1 / 5 页便签并不能证明存在其他由作者制作的屏幕;标签页、时间段、侧边栏项目或下一步项目均没有点击处理程序。学生身份、日期、等级和进度数值都是示例。该线框图展示的是视觉层级,而不是实时门户、已存储记录、考试提交或经过验证的教育成果。
该设计最具可复用性的经验在于结构:在呈现趋势、科目、通知和操作区域之前,先将类别状态、数值对比、截止时间和练习完成度分开。任何改编都应定义每个指标的含义和来源,加入图表单位和时间范围,并在将线框图视为运营仪表盘之前决定哪些控件和推荐是真实有效的。
如何在 OpenDesign 中创建学生考试仪表盘线框图设计
设定仪表盘框架
创建一个桌面端学生门户,包含左侧导航栏和主工作区。保留 B 仪表盘概念作为选中视图,并在工作区顶部预留四张彼此独立的 KPI 卡片。
建议提示词为 Zentou AI 风格的门户创建一个低保真桌面端学生考试仪表盘线框图。使用包含 Dashboard、Exam Schedule、Results、Practice Questions 和 Study Plan 的左侧导航;顶部放置四张 KPI 卡片,分别用于认证等级、带对比信息的偏差值分数、下一场考试截止时间和练习进度;随后放置一个更宽的分数趋势图、一个更窄的科目对比图、通知区域以及一个红色描边的下一步区域。使用带示例值的日文源标签、手绘边框和浅网格背景,不包含实时服务、存储、提交功能或任何暗示已测量结果的内容。
定义数据关系
在视觉上保持等级、分数变化、截止时间和练习完成度彼此分离。调整这一概念时,加入明确的定义、单位、对比时间窗口、图表坐标轴和时间范围,以便读者区分类别状态与测量值。
优化操作顺序
保留从问候语和时间范围,到 KPI、辅助图表、通知和下一步安排的流程。在将申请和薄弱项练习任务呈现为可操作的工作流项目之前,检查是否需要显示状态、负责人或优先级。
导出并获取分享链接
导出完成的设计稿,然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接,确认目标版本及其资源均可正常访问后,再将链接发送给他人。


