产品需求文档 · 达学通

1

产品概述

平台定位、目标用户与商业模式

1.1 产品简介

达学通（DaXueTong）是一款以职业发展为核心的学习平台，通过微信小程序形式交付。产品面向正在备战技术岗位面试的在校学生及应届毕业生，尤其是目标为字节跳动、阿里巴巴、腾讯、美团等国内头部互联网公司的求职者。

平台围绕四大核心支柱构建：

📖

题库

按学科分类与企业真题划分的练习题库，涵盖3200+道高质量题目。

🎓

在线学习

结构化视频课程，支持进度追踪与课程证书颁发，课程数量120+。

💼

求职中心

个性化职业测评与技能分析、雷达图可视化、智能职位匹配推荐。

💬

社群讨论

用户间技术交流与求职经验分享的社区论坛，支持互动与内容传播。

完整内容库访问权限通过 👑 VIP会员模式进行管控。

1.2 目标用户

用户群体	描述
在校学生	大三、大四备战秋招/春招的学生，需系统准备面试知识。
应届毕业生	目标为后端开发、数据分析、产品经理等岗位的求职者。
自学提升人群	希望系统复习计算机基础知识的职场人士。

1.3 商业模式

免费增值（Freemium）：基础浏览免费；3200+题库全量、120+视频课程、职业测评报告及内推渠道需开通VIP会员。
一次性买断制：¥199永久有效（原价¥399，限时5折），无订阅费。
支持支付方式：微信支付、支付宝。

2

设计系统与全局规范

色彩体系、字体规范与通用组件标准

2.1 色彩体系

品牌蓝

#4f8ef7 · --blue1

品牌绿

#43c98a · --green1

紫色

#8b7cf8 · --purple

橙色

#f7894f · --orange

金色

#f5c842 · --gold

深蓝黑

#1a2340 · --navy

中灰蓝

#4a5880 · --text-mid

浅灰蓝

#8fa0bc · --text-light

Token变量	值	用途说明
`--bg`	`#f0f4f8`	页面背景色
`--card`	`rgba(255,255,255,0.85)`	卡片表面
`--blue1`	`#4f8ef7`	主品牌蓝色，CTA、激活态
`--green1`	`#43c98a`	强调绿，进度条、成功状态
`--text-dark`	`#1a2340`	主要文字
`--text-mid`	`#4a5880`	次要文字
`--text-light`	`#8fa0bc`	辅助文字、标签、时间戳
`--radius`	`18px`	大卡片圆角
`--radius-sm`	`12px`	小卡片圆角
`--shadow`	`0 8px 32px rgba(79,142,247,0.10)`	主阴影
`--shadow-sm`	`0 2px 12px rgba(79,142,247,0.08)`	小阴影

页面背景：从 #e8f0fb（左上）到 #eaf7f0（右下）的135°线性渐变。

2.2 字体规范

字体族：Noto Sans SC（Google Fonts），权重 300 / 400 / 500 / 700
降级字体：sans-serif
主要标题：16–17px，weight 700–800
正文：12–13px，weight 400–500
辅助说明/元信息：10–11px，weight 400

2.3 手机帧规格（原型背景）

规格项	数值
手机模型宽度	320px（对应真实设备约375px视口）
刘海（Notch）	110 × 28px，深色 `#1a2340`，居中顶部
状态栏	显示"9:41"，三格信号（40%/60%/100%透明度）
底部Home指示条	130 × 4px，`#1a2340` at 15% opacity

3

全局导航规范

底部Tab栏、状态栏与内页顶部导航

3.1 底部Tab栏

底部Tab栏在所有六个主页面上持续显示，采用毛玻璃样式背景（rgba(255,255,255,0.85) + backdrop-filter: blur(20px)），顶部有细线边框（rgba(79,142,247,0.07)）。

序号	图标	标签	路由页面	激活状态
1	🏠	首页	Home	蓝色 `#4f8ef7`
2	📖	题库	Question Bank	蓝色
3	🎓	学习	Online Learning	蓝色
4	💬	社群	Community	蓝色
5	👤	我的	My Profile / VIP	蓝色

激活态：文字与图标变为品牌蓝 #4f8ef7；未激活为 #8fa0bc。
内边距：10px 0 12px，每个Tab等宽flex布局。
交互：点击任意Tab立即高亮并跳转对应页面。

3.2 内页顶部导航栏

非首页的所有页面均包含内页顶部导航栏，规格如下：

📐 顶部导航栏结构

返回按钮（‹）：圆形 32 × 32px，白色20%透明度叠加在页头渐变上，点击返回上一页或首页。
页面标题：17px，weight 700，白色文字。
右侧操作图标（可选）：如社群页的✏️发布按钮，同款圆形样式。

4

页面详细规范

六个核心页面的布局、组件、交互与数据逻辑

PAGE 01

🏠 首页（Home）

平台核心入口与内容发现枢纽，聚合最重要的功能模块、系统公告及个人学习进度。

底部Tab：🏠 首页无子Tab 内容导航

布局结构（从上到下）

状态栏
顶部导航栏（Logo + 搜索 + 铃铛）
横幅轮播（Banner Carousel）
系统公告条
高频面试题库（2列网格）
精品视频课列表（纵向列表）
底部Tab栏
底部Home指示条

A. 顶部导航栏

元素	视觉规格	交互行为
Logo「达学通」	15px，weight 800；渐变文字（左蓝→右绿）	点击回到顶部/刷新页面
搜索框	圆角药片形（radius 20px），背景 `#f3f6fb`，占位文字"搜索题目、课程、职位..."	点击打开全屏搜索页
通知铃铛🔔	20px图标，右对齐，未读数红点角标	点击进入消息通知页

B. 横幅轮播（Hero Banner）

🖼 Banner组件规格

尺寸：全宽 × 136px
背景：135° 渐变，#4f8ef7 → #43c98a
内容区（左侧）：标签胶囊"🔥 秋招专题"；主标题"2025秋招备战 / 全套资料免费领"（16px，weight 800，白色）；副标题"大厂真题 · 简历模板 · 内推渠道"
右侧装饰：🎯 emoji，52px，右下对齐
分页指示点：底部居中，共3个。激活点：白色，宽20px × 高4px；非激活：白色50%透明，宽16px
自动轮播：每4秒自动切换，滑动时暂停，松开后2秒恢复；末页→首页循环
交互：左右滑动切换Banner；点击跳转对应活动落地页

C. 系统公告条

📢 公告条规格

背景：#fffbea（淡黄），圆角10px，内边距 8px 12px
内容：📢 + "系统公告：2025秋招名企招聘计划已更新，立即查看 ›"
文字颜色：#b08300（琥珀色）
"立即查看 ›" 为CTA，加粗，点击跳转公告详情页

D. 高频面试题库（2列网格）

卡片	科目	题目数	色调	标签	进度
1	💻 数据结构	1,240道	蓝色渐变	热门	72%
2	🧮 操作系统	860道	绿色渐变	新增	45%
3	🌐 计算机网络	720道	紫色渐变	—	28%
4	📊 数据库原理	540道	橙色渐变	—	18%

进度条高3px，显示用户已完成题目的百分比（需登录）。点击卡片跳转对应科目题目列表。

E. 精品视频课（纵向列表）

序号	课程名	讲师	节数	学习人数	进度	按钮
1	Java核心技术精讲	王老师	48节	12,400	55%	继续
2	数据分析与可视化	陈老师	32节	8,600	20%	继续
3	产品经理实战课	刘老师	56节	5,300	33%	开始

课程行包含缩略图（72×52px渐变色）、课程名、讲师与人数元信息、进度条及进度百分比、操作按钮（"继续"或"开始"）。点击任意行进入课程详情/播放页。

PAGE 02

📖 题库（Question Bank）

按学科类别与企业面试历史分类浏览和练习题目，并追踪用户各科目完成进度。

底部Tab：📖 题库子Tab：各类学科 / 企业面试

布局结构

状态栏
页头（蓝紫渐变，含返回+子Tab）
热门学科 2列网格
企业面试真题列表
底部Tab栏

页头子Tab

Tab	标签	默认状态
Tab 1	各类学科题库	激活 — 白底蓝字
Tab 2	企业面试笔试	未激活 — 半透明白色

切换Tab时，内容区在300ms内切换，过渡效果为交叉淡出（cross-fade）或横向滑动。

企业面试真题列表（q-item）

序号	题目内容	企业标签	技能标签
1	请描述TCP三次握手的过程及原因	字节跳动	网络、高频
2	HashMap与HashTable的区别是什么？	阿里巴巴	Java
3	实现LRU缓存算法，时间复杂度O(1)	腾讯	算法、难题

VIP锁定题目显示锁图标，点击跳转VIP开通页。企业标签蓝色胶囊，技能标签绿色胶囊。

PAGE 03

🎓 在线学习（Online Learning）

浏览和续学视频课程；查看并追求专业认证路径。

底部Tab：🎓 学习分类筛选：5个含证书体系

分类筛选胶囊（Category Chips）

序号	标签	默认
1	全部	激活
2	编程开发	未激活
3	产品设计	未激活
4	数据分析	未激活
5	职场技能	未激活

横向可滚动，隐藏滚动条。点击切换筛选，课程列表实时更新（无需整页刷新）。

课程卡片（course-card）

📚 课程卡片解剖

缩略图：88px宽，全高，居中emoji（32px），渐变背景（蓝/绿/紫）
课程名：13px，weight 700，深色，超出省略号
元信息：11px — "共N节 · 讲师 · X人学习"
证书徽章："🏆 含证书"，浅橙色药片，仅有证书课显示
进度条：70px宽，4px高，绿→蓝渐变填充；右侧百分比数字
交互：点击卡片进入课程详情/播放页

证书体系（Certificate Tracks）

证书名	级别	渐变色
🏅 Java工程师	初级认证	蓝→紫
🎖️ 产品经理	专业认证	绿→蓝
🌟 数据分析师	高级认证	橙→黄

证书卡横向可滚动，最小宽度130px。点击跳转证书路径详情页，显示所需课程及当前进度。完成全部课程后颁发数字证书。

PAGE 04

💼 求职中心（Job Assessment Center）

个性化职业测评、技能差距分析（五维雷达图）与智能职位匹配推荐。

子Tab：职业测评 / 技能测评 / 企业招聘雷达图可视化

A. 职业匹配综合评分卡（score-card）

🎯 评分卡解剖

得分环（score-ring）：78×78px圆形；背景使用conic-gradient(#4f8ef7 0% 72%, #e8edf5 72% 100%)展示弧形进度；内圆58×58px白色；中心显示"72"（20px，weight 800，蓝色）和"综合评分"（9px）
文字区：标题"职业匹配度分析"（14px，weight 700）；描述包含高亮岗位名称和改进建议
布局：水平横排，gap 16px

B. 技能标签（三级分类）

层级	前缀符号	样例技能	背景色	文字色
强项	✓	Java、Spring Boot	`#eafaf3`（浅绿）	`#43c98a`
中等	◎	MySQL、Redis	`#eaf1fd`（浅蓝）	`#4f8ef7`
薄弱	△	系统设计、分布式	`#fff0e8`（浅橙）	`#f0994a`

C. 能力雷达图（SVG 五维）

📡 雷达图规格

SVG尺寸：全宽，viewBox 240×120
五个维度：编程（顶）、算法（右）、数据库（右下）、系统（左下）、网络（左）
外参考多边形：无填充，#e8edf5 1.5px描边
内参考多边形：无填充，#e8edf5 1px描边
用户能力多边形：rgba(79,142,247,0.12) 填充，#4f8ef7 1.5px描边
顶点圆点：半径3px，#4f8ef7 实心
坐标轴标签：9px，#8fa0bc，外置于各顶点
当前为静态渲染；后续优化：页面加载时动画填充，点击顶点弹出详情

D. 推荐职位（job-card）

职位名称	公司	地点	薪资范围	匹配度
Java后端工程师	字节跳动	北京	20–35K	96%
后端开发工程师	美团	上海	18–30K	88%

PAGE 05

💬 社群讨论（Community）

用户间技术讨论与求职经验分享的社区论坛，支持点赞、评论与转发。

底部Tab：💬 社群子Tab：技术交流 / 求职分享含发帖功能

A. 页头与发帖按钮

背景渐变：#f7894f（橙）→ #ffc97a（黄橙）
右上角 ✏️ 发布按钮：32×32px圆形，白色20%透明背景，点击进入发帖创作页

B. 帖子信息流（post-card）

📝 帖子卡片解剖

头像：36×36px圆形，渐变色（蓝/绿/紫），显示用户名首字
用户名：13px，weight 600
发布时间：11px，浅灰（如"2小时前"、"昨天"）
类型徽章：自动靠右对齐；"技术"=蓝色；"求职"=绿色
正文：12px，行高1.65
标签（可选）：胶囊样式，蓝/绿分类
操作栏：❤️ 点赞 · 💬 N评论 · ↗️ 分享；已点赞态：橙色 #f7894f

C. 三条示例帖子

作者	时间	类型	内容摘要	互动
张伟 🔵	2小时前	技术	Spring Cloud Gateway vs Nginx 微服务选型	❤️34 · 💬12
王小红 🟢	5小时前	求职	字节跳动后端面经：3轮技术面+1轮HR	❤️128 · 💬47
刘明 🟣	昨天	技术	Redis缓存穿透/击穿/雪崩解决方案	❤️89 · 💬23

D. 交互行为

✏️ 发布按钮

点击

进入发帖创作页

Tab切换

点击

切换帖子分类列表

帖子卡片正文

点击

展开完整帖子+评论区

❤️ 点赞

点击

切换点赞态（乐观更新），数量±1

💬 评论

点击

打开评论线程

↗️ 分享

点击

唤起微信分享面板

用户头像

点击

跳转作者个人主页

PAGE 06

👤 我的 / VIP会员（My Profile）

展示用户基本信息，并呈现VIP会员套餐、权益详情、定价与支付入口。

底部Tab：👤 我的含支付流程金色VIP卡片

A. 用户信息行

👤 用户信息行结构

头像：50×50px圆形，渐变蓝绿色，显示用户名首字（22px，weight 800，蓝色）
用户名："李同学"，15px，weight 700
UID："UID: 20241023"，11px，浅灰
会员状态徽章："未开通会员"，浅灰药片；已开通则显示金色VIP徽章

B. VIP超级会员英雄卡

👑 VIP卡片完整解剖

背景：深色三段渐变 #1a2340 → #2d3f6e → #1a3a5c，圆角20px，阴影强
顶部金色光晕线：2px高，金色渐变 transparent → #f5c842 → #ffe08a → transparent
标题行：👑（22px）+ "达学通 · 超级会员"（15px，weight 800，金色 #f5c842）+ "VIP"标签（金色渐变药片）
权益标签（6个）：✓全部题库3200+题 / ✓120+视频课程 / ✓职业测评报告 / ✓企业内推渠道 / ✓证书认证系统 / ✓社群全功能
定价区：原价¥399（删除线）；"限时5折"（金色）；¥199/永久（大字）
「立即开通」CTA：金→橙渐变，圆角14px，14px weight 800深色文字，阴影；点击触发支付流程

C. 支付方式

支付方式	图标	边框颜色	文字颜色	默认选中
微信支付	💚	`#07c160`（高亮）	绿色	✅ 是
支付宝	💙	`#e8edf5`（未选中）	蓝色	❌ 否

同一时刻只允许选中一种支付方式，点击切换。

D. 购买保障FAQ（3行）

图标	说明内容
❓	购买后立即生效，永久有效
🔄	内容持续更新，会员自动同步
🛡️	7天无理由退款保障

点击任意行展开详细说明（手风琴或跳转FAQ页）。

E. 支付完整流程

💳 VIP开通支付流程

1

用户点击「立即开通」

系统校验登录态

2

确认支付方式

FR-H-01

系统应展示至少3张横幅轮播，每4秒自动切换，分页点实时更新。

FR-H-02

搜索框点击后应打开全屏搜索覆盖层，支持关键词搜索题目、课程、职位。

FR-H-03

通知图标应显示未读消息红点角标，数量超99时显示"99+"。

FR-H-04

公告条应展示CMS中最新一条系统公告，实时更新。

FR-H-05

科目卡片应展示该登录用户的个人完成进度百分比（需鉴权）。

FR-H-06

视频课列表应对进行中课程显示"继续"，未开始课程显示"开始"。

FR-H-07

首页内容应在4G网络下2秒内加载完成。

6.2 题库

FR-Q-01

系统应支持至少3,200道题目，按学科、企业、难度标签分类。

FR-Q-02

VIP锁定题目应展示锁图标，点击后跳转VIP开通页。

FR-Q-03

科目进度条应反映该用户已回答题目数/总题数的百分比。

FR-Q-04

Tab切换应在300ms内完成，内容过渡平滑。

FR-Q-05

系统应支持最近50道题目的离线缓存，断网时可读取。

6.3 在线学习

FR-L-01

系统应支持至少120门视频课程，按分类筛选。

FR-L-02

课程进度按集（Episode）追踪，并持久化存储至服务端。

FR-L-03

分类筛选胶囊切换应实时过滤课程列表，无需整页刷新。

FR-L-04

视频播放应支持1x、1.5x、2x倍速切换。

FR-L-05

系统应记忆用户上次播放位置，下次打开时从该点续播。

FR-L-06

完成课程全部章节后，系统应自动颁发数字证书并支持下载。

6.4 求职中心

FR-J-01

职业测评应综合用户答题记录与课程完成情况，计算0–100的综合匹配评分。

FR-J-02

雷达图应动态反映用户在编程、算法、数据库、系统、网络五个维度的评估得分。

FR-J-03

推荐职位应按匹配度从高到低排列，并显示公司、地点、薪资范围。

FR-J-04

系统应支持3个子Tab：职业测评、技能测评、企业招聘。

6.5 社群讨论

FR-C-01

系统应支持两类帖子：技术交流与求职分享，均可发布、浏览、互动。

FR-C-02

用户可对帖子点赞/取消点赞，计数立即更新（乐观UI）。

FR-C-03

用户可对帖子评论并查看评论线程。

FR-C-04

用户可通过微信分享面板分享帖子。

FR-C-05

发帖时需选择分类，正文内容不少于20字，否则提交按钮禁用。

FR-C-06

帖子列表默认按发布时间倒序排列。

6.6 我的 / VIP

FR-V-01

非VIP用户在「我的」页应看到VIP英雄卡（含定价、权益列表、支付入口）。

FR-V-02

VIP用户应看到已开通状态，隐藏购买CTA，显示金色会员标识。

FR-V-03

系统应支持微信支付和支付宝两种支付方式，默认选中微信支付。

FR-V-04

支付成功后VIP权限立即生效，无需手动刷新。

FR-V-05

系统应保障7天无理由退款，退款后VIP权限立即撤销。

FR-V-06

设置页（⚙️）应支持修改昵称、头像和通知偏好。

7

非功能需求（NFR）

性能、安全、兼容性与可访问性标准

7.1 性能

NFR-P-01

首页在标准4G网络下初始加载时间不超过2秒。

NFR-P-02

Tab切换、胶囊筛选等交互操作响应时间不超过300ms。

NFR-P-03

课程缩略图与题目内容应实现懒加载，减少首屏流量消耗。

NFR-P-04

支持离线缓存最近浏览的题目与课程大纲，断网可读。

7.2 可扩展性

NFR-S-01

后端应支持秋招旺季（9–11月）至少10万并发用户。

NFR-S-02

题库系统应可扩展至10,000+道题目，不影响前端渲染性能。

7.3 安全性

NFR-SEC-01

所有用户数据传输须使用HTTPS / TLS 1.2+加密。

NFR-SEC-02

支付处理须符合微信支付与支付宝安全认证规范。

NFR-SEC-03

用户Session令牌应在无操作30天后自动过期。

NFR-SEC-04

VIP内容须在服务端鉴权，不可仅依赖客户端控制。

7.4 可访问性

NFR-A-01

所有可交互元素的点击热区不小于44×44px。

NFR-A-02

正文文字对比度须满足WCAG 2.1 AA标准（最低4.5:1）。

NFR-A-03

所有用作功能图标的Emoji须附带文字标签。

7.5 兼容性

NFR-C-01

小程序应兼容微信 8.0+ / iOS 13+ / Android 8+。

NFR-C-02

界面应在320px至428px屏幕宽度范围内正确渲染。

NFR-C-03

应支持微信系统深色模式（Dark Mode）自动适配。

7.6 国际化

NFR-I-01

主语言为简体中文（zh-CN），所有UI文案与内容均为中文。

NFR-I-02

日期格式：YYYY年MM月DD日；货币符号：¥（人民币）。

8

边界条件与异常处理

网络异常、空状态、鉴权、输入校验等边界场景

8.1 网络异常

🌐 网络相关异常

触发场景处理策略

页面加载失败（无网络）

显示"加载失败，点击重试"Toast或内嵌错误态，含重试按钮

支付API超时

弹窗提示"支付超时，请重试"，提供重试/取消选项；确认未扣款才报失败

视频流中断

显示缓冲转圈；超5秒后展示"网络不稳定"横幅提示

8.2 登录与Session

🔐 鉴权异常

触发场景处理策略

未登录用户点击需鉴权内容

跳转微信授权登录流程；登录后自动返回原内容页

Session中途过期

静默刷新Token（微信通道）；刷新失败则提示重新登录

8.3 空态处理

场景	空态文案与UI
社群Tab无帖子	插图 + "暂无内容，快来发布第一篇帖子！"
无推荐职位	"暂无匹配职位，继续完善测评" + 跳转测评CTA
筛选分类无课程	"该分类暂无课程"
新用户无进度数据	科目卡显示0%进度条 + "开始学习"提示

8.4 VIP状态边界

场景	处理策略
已开通VIP用户访问「我的」	展示VIP已激活态（金色卡片 + "会员已开通"），隐藏购买CTA
7天内申请退款	展示退款申请表单；确认后立即撤销VIP权限
支付方式不可用	禁用对应支付按钮，显示简短错误提示

8.5 发帖输入校验

校验规则	用户反馈
正文不足20字	提交按钮置灰 + 内联提示"内容至少需要20字"
未选择分类	提交按钮禁用，直至选择分类
服务端检测到违规内容	返回"内容违规，请修改后重试"

8.6 轮播自动播放规则

自动切换间隔：4秒
用户主动滑动时暂停，松手后2秒恢复
末页 → 首页无缝循环

9

附录

页面汇总、数据模型、色彩参考与术语表

9.1 页面汇总表

页面	底部Tab	主色调	子Tab	核心特色组件
首页	🏠	蓝绿渐变	无	英雄轮播、公告条、2列题库网格、视频课列表
题库	📖	蓝紫渐变	各类学科 / 企业面试	进度条科目网格、含公司标签的题目列表
在线学习	🎓	绿蓝渐变	5个分类胶囊	含证书徽章与进度的课程卡、证书轨道横向滚动
求职中心	（链接）	紫橙渐变	职业测评 / 技能测评 / 企业招聘	圆弧评分环、技能分级标签、SVG五维雷达图
社群讨论	💬	橙黄渐变	技术交流 / 求职分享	帖子信息流、点赞/评论/分享、✏️发布按钮
我的/VIP	👤	白色/深海军蓝	无	金色VIP英雄卡、支付选择器、FAQ折叠行

9.2 内容数据模型（高阶）

👤User（用户）

uidstring

namestring

avatarurl

vip_statusboolean

vip_activated_attimestamp

📖Question（题目）

idstring

subject_idstring

company_tagsstring[]

difficultyenum

is_vip_gatedboolean

🎓Course（课程）

idstring

titlestring

instructorstring

episode_countint

has_certificateboolean

user_progressfloat%

💬Post（帖子）

idstring

author_idstring

categorytech|job

bodystring

like_countint

comment_countint

💼Job（职位）

idstring

titlestring

companystring

salary_rangestring

match_pctint

🏅Certificate（证书）

idstring

course_idstring

namestring

levelenum

issued_attimestamp

9.3 色彩快速参考

颜色名称	色值	主要用途
品牌蓝	`#4f8ef7`	主要CTA、激活态、链接
品牌绿	`#43c98a`	进度条填充、成功态、强项技能
紫色	`#8b7cf8`	学习页头、证书卡、算法类题目
橙色	`#f7894f`	社群页头、点赞激活态、薄弱技能
金色	`#f5c842`	VIP卡、会员权益强调
深蓝黑	`#1a2340`	所有主要文字
中灰蓝	`#4a5880`	次要正文
浅灰蓝	`#8fa0bc`	辅助说明、时间戳、元信息

9.4 术语表

术语	释义
秋招	秋季校园招聘季（通常为9–11月），国内大厂集中招募应届生的主要时期。
春招	春季校园招聘季（通常为3–5月），为秋招的补充招募阶段。
面经	面试经历记录，用户分享自身真实面试过程与考题的文章。
内推	由公司内部员工为求职者提供内部推荐，通常可加快简历筛选流程。
VIP	付费高级会员层级，解锁平台全部内容与功能。
题库	字面义为"题目仓库"，指平台收录的结构化练习题集合。
雷达图	五边形蜘蛛图，直观呈现用户在多维度能力上的分布情况。
高频	标注题目在真实面试中出现频率极高，需重点准备。

文档历史

版本	日期	作者	备注
V1.0	2025年	产品团队	基于UI原型稿V3初稿

产品概述

1.1 产品简介

1.2 目标用户

1.3 商业模式

设计系统与全局规范

2.1 色彩体系

2.2 字体规范

2.3 手机帧规格（原型背景）

全局导航规范

3.1 底部Tab栏

3.2 内页顶部导航栏

页面详细规范

🏠 首页（Home）

布局结构（从上到下）

A. 顶部导航栏

B. 横幅轮播（Hero Banner）

C. 系统公告条

D. 高频面试题库（2列网格）

E. 精品视频课（纵向列表）

📖 题库（Question Bank）

布局结构

页头子Tab

热门学科卡片（subj-card）

企业面试真题列表（q-item）

🎓 在线学习（Online Learning）

分类筛选胶囊（Category Chips）

课程卡片（course-card）

证书体系（Certificate Tracks）

💼 求职中心（Job Assessment Center）

A. 职业匹配综合评分卡（score-card）

B. 技能标签（三级分类）

C. 能力雷达图（SVG 五维）

D. 推荐职位（job-card）

💬 社群讨论（Community）

A. 页头与发帖按钮

B. 帖子信息流（post-card）

C. 三条示例帖子

D. 交互行为

👤 我的 / VIP会员（My Profile）

A. 用户信息行

B. VIP超级会员英雄卡

C. 支付方式

D. 购买保障FAQ（3行）

E. 支付完整流程

用户流程

5.1 新用户学习备考流程

5.2 职业测评流程

5.3 VIP开通流程

5.4 社群互动流程

功能需求（FR）

6.1 首页

6.2 题库

6.3 在线学习

6.4 求职中心

6.5 社群讨论

6.6 我的 / VIP

非功能需求（NFR）

7.1 性能

7.2 可扩展性

7.3 安全性

7.4 可访问性

7.5 兼容性

7.6 国际化

边界条件与异常处理

8.1 网络异常

8.2 登录与Session

8.3 空态处理

8.4 VIP状态边界

8.5 发帖输入校验

8.6 轮播自动播放规则

附录

9.1 页面汇总表

9.2 内容数据模型（高阶）

9.3 色彩快速参考

9.4 术语表

文档历史