优化 Web3 教育平台的学习体验
设计任务
我的职责
项目时间
引导与协作并行的学习体验，助力 Web3 开发者成长
因缺乏参与度与学习动机导致课程完成率低
数据显示，只有 20% 的用户完成了第一章。用户在使用工具时遇到困难，并且缺乏继续学习的激励。
“我不知道自己完成了多少进度；这对我来说就像是一项永无止境的任务。”
—— John，Web3 开发者（可用性研究反馈）
寻求实践成长的初学者
分析用户流程中的用户反馈
缺乏进度反馈
学习形式受限
课程匹配困难
打造清晰且富有激励性的学习旅程
许多 HackQuest 学习者在使用过程中面临课程结构不清晰、进度反馈有限、缺少成就感等问题。
为解决这一点，我引入了一系列功能，提供可视化进度、激励机制和自我评估工具，贯穿整个学习路径。
HackQuest 支持不同水平的学习者通过分阶段的学习生态系统来实现目标，但原有的界面缺乏直观的学习进度展示。
❌ 缺少多阶段课程进度的清晰指标
❌ 缺乏结构来引导用户完成学习路径
❌ 用户反馈难以直观了解已完成的内容
我探索了多种布局方向来勾勒完整的学习旅程：
侧边导航
Option 1
始终可见的课程列表，支持任务驱动型学习
便捷访问所有模块
小屏幕下空间有限
部分用户可能被过多的分区分散注意力
标签结构
Option 2
清晰区分学习阶段（如学习、构建、社区）
简洁专注的界面
适配多种设备
难以直观显示完整旅程
滚动卡片式
Option 3
吸引人，适合移动端优化
鼓励逐步探索
难以查看整体进度
分步概览
Option 4
清晰展示线性学习进度
步骤过多时易显杂乱
对非线性学习不够灵活
我选择了标签布局，因为它兼顾了清晰的结构与灵活性，让用户可以在学习、项目和社区之间无缝切换，并在不同设备上保持一致的体验。
It guides users through their learning journey with dedicated sections for Learn, Build, and Community, clearly outlining each task within the ecosystem.
✅ 新增进度条：显示多阶段课程完成情况
✅ 引入标签布局：直观展示逐步学习路径
✅ 可视化独立课程进度：帮助用户清楚了解已完成与待完成的部分
为了确保用户能够检验自己的理解并巩固关键知识点，我设计了一个课程测试模块，出现在每节课程结束后。
TestOut
测验主要以填空题和选择题为主
用户可以展开并回顾所有已答过的问题及答案
TestOut – 编程题
TestOut – 选择题
TestOut – 回顾
启用评论功能以促进讨论并高亮关键概念
之前的学习界面过于静态和以文字为主，几乎没有提供互动或同伴支持的空间。
Before
❌ 学习材料行文冗长且充斥专业术语，阅读理解困难
❌ 缺少提问或参与同伴讨论的渠道
❌ 缺乏进度追踪，导致动力不足和参与不连贯
为提升阅读体验，我设计了一个高亮模式，以增强协作与专注度。该模式让用户在阅读过程中不仅能够与关键知识点互动，还可以阅读并保存评论、查看详细解释，并通过点赞、分享与回复等方式积极参与讨论。
布局探索
侧边栏评论 + 灰度化阅读
Option 1
评论在视觉上突出，便于识别
中断阅读流畅性
用户需要暂停并切换焦点
集成式评论 + 自适应导航
Option 2
阅读内容保持可见，同时展开评论
进度/导航栏可适配评论区域
提供流畅、不间断的阅读与批注体验
通过可用性测试发现，频繁隐藏阅读内容来查看评论会打断学习流程，因此我选择了选项2：保持阅读内容可见的同时展开评论。
After - Learning Interface Comment
✅ 高亮文本：帮助用户整理并记忆关键信息
✅ 评论功能：支持用户提问并参与讨论
✅ 学习进度条：追踪任务状态，并在悬停时显示预计用时与阅读进度
扩展学习工具以支持多样化的学习风格
为满足用户对多样化学习材料的需求，我设计了视频课程格式。大师课为学习者提供了超越文本的额外资源，支持更丰富的学习体验。
Masterclass Syllabus
Master Class Video
原有的词汇表仅提供按字母检索，用户难以快速找到目标术语。
为解决这一问题，我增加了标签筛选功能和术语提交功能。
After - Glossary
标签筛选：提升搜索精准度，让用户能够快速定位词汇表中的术语。
词条提交功能：赋能用户贡献缺失的术语，使词汇表更完整、更具用户驱动性。
Before
❌ 仅能按字母筛选，范围有限
❌ 用户在按主题检索时效率低下
❌ 随着内容增加，容易造成信息过载
After
✅ 新增标签筛选：通过“DeFi”“Staking”“Slang”等标签筛选，更快更精准地定位内容
✅ 保留搜索栏：提供快速定位特定术语的方式
通过优化过滤器实现更精准的课程匹配
Before
❌ 仅有基础搜索栏，无筛选选项
❌ 用户难以找到与其技能水平或目标匹配的课程
❌ 对有特定需求的用户来说效率低下
After
✅ 新增多层级筛选：按生态系统、编程语言、学习路径和难度筛选
✅ 提高检索效率：让用户能更快缩小范围，找到相关课程
✅ 提升课程的可发现性和匹配度：让用户更容易找到真正适合自己的课程
打造统一且用户友好的学习界面
为了确保一致性与可读性，我们遵循了 HackQuest 教育平台的设计系统。采用了黄色配色方案，传递能量、乐观与参与感，呼应 HackQuest 激发学习与创造力的使命。
Design System
清晰高效的课程总览：卡片式设计
Card Design
卡片组件用于清晰高效地呈现课程与学习路径。
关键信息（如课程分类、难度与学习状态）通过标签与标识展示，帮助用户快速浏览并理解内容。
通过视觉层级与布局优化学习界面
为了改善文字密集的学习界面，我们建立了清晰的视觉层级，利用字号、字重与色彩对比引导用户关注关键信息。
采用模块化布局，有效区分课程、示例与测验部分，确保各个区域清晰易读。
同时引入左右分栏结构，创造平衡直观的阅读流，显著提升了可用性与可读性。
Learning Interface
