370 lines
15 KiB
Markdown
370 lines
15 KiB
Markdown
# 用户界面设计
|
||
|
||
<cite>
|
||
**本文引用的文件**
|
||
- [index.html](file://index.html)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [简介](#简介)
|
||
2. [项目结构](#项目结构)
|
||
3. [核心组件](#核心组件)
|
||
4. [架构总览](#架构总览)
|
||
5. [详细组件分析](#详细组件分析)
|
||
6. [依赖关系分析](#依赖关系分析)
|
||
7. [性能考量](#性能考量)
|
||
8. [故障排查指南](#故障排查指南)
|
||
9. [结论](#结论)
|
||
10. [附录](#附录)
|
||
|
||
## 简介
|
||
本设计文档面向“有维商学”平台的用户界面，聚焦登录页与仪表盘两大核心页面，系统梳理设计理念、视觉元素、交互流程与响应式策略，并对CSS自定义属性系统、渐变与阴影、卡片组件、动画过渡与移动端适配进行深入解析。文档同时提供组件使用指南与定制化建议，帮助设计师与前端开发者快速理解并扩展界面。
|
||
|
||
## 项目结构
|
||
本项目采用单页应用结构，所有页面与样式内嵌于单一HTML文件中，便于部署与维护。页面通过类名控制显示隐藏，配合脚本实现页面切换与交互逻辑。
|
||
|
||
```mermaid
|
||
graph TB
|
||
A["index.html"] --> B["登录页面(login-page)"]
|
||
A --> C["仪表盘页面(dashboard-page)"]
|
||
A --> D["AI智能体页面(ai-page)"]
|
||
A --> E["聊天对话弹窗(chat-modal)"]
|
||
B --> F["登录表单(login-form-container)"]
|
||
B --> G["功能特性卡片(feature-cards)"]
|
||
C --> H["导航栏(navbar)"]
|
||
C --> I["标签页(tab-nav)"]
|
||
C --> J["统计卡片(stats-grid)"]
|
||
C --> K["内容卡片(content-card)"]
|
||
C --> L["课程卡片(course-grid)"]
|
||
C --> M["学习路径(learning-path)"]
|
||
C --> N["会员卡片(membership-grid)"]
|
||
D --> O["AI卡片(ai-grid)"]
|
||
E --> P["消息列表(chat-messages)"]
|
||
E --> Q["快捷问题(quick-questions)"]
|
||
E --> R["输入区(chat-input-area)"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:1345-1412](file://index.html#L1345-L1412)
|
||
- [index.html:1415-2002](file://index.html#L1415-L2002)
|
||
- [index.html:2005-2142](file://index.html#L2005-L2142)
|
||
- [index.html:2145-2179](file://index.html#L2145-L2179)
|
||
|
||
章节来源
|
||
- [index.html:1345-2307](file://index.html#L1345-L2307)
|
||
|
||
## 核心组件
|
||
- 页面容器与切换：通过统一的页面容器类与激活状态类实现页面切换，配合脚本函数完成显示/隐藏控制。
|
||
- 登录页：强调品牌视觉与功能特性展示，结合登录表单与社交登录入口，营造信任与便捷感。
|
||
- 仪表盘：以导航与标签页为核心，分模块呈现平台概览、教育、AI工具、校友与会员体系。
|
||
- AI智能体页：集中展示各类AI助手卡片，支持快速对话与筛选。
|
||
- 聊天弹窗：内嵌在任一页面，用于与AI助手进行对话交互。
|
||
|
||
章节来源
|
||
- [index.html:41-49](file://index.html#L41-L49)
|
||
- [index.html:1345-1412](file://index.html#L1345-L1412)
|
||
- [index.html:1415-2002](file://index.html#L1415-L2002)
|
||
- [index.html:2005-2142](file://index.html#L2005-L2142)
|
||
- [index.html:2145-2179](file://index.html#L2145-L2179)
|
||
|
||
## 架构总览
|
||
下图展示页面间的关系与交互流向，突出登录页到仪表盘的跳转、仪表盘内部的标签页切换以及AI页面与聊天弹窗的联动。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant LP as "登录页面(login-page)"
|
||
participant DB as "仪表盘页面(dashboard-page)"
|
||
participant AP as "AI智能体页面(ai-page)"
|
||
participant CM as "聊天弹窗(chat-modal)"
|
||
U->>LP : 访问登录页
|
||
U->>LP : 输入账号/密码并提交
|
||
LP-->>U : 显示错误提示或跳转
|
||
LP-->>DB : 登录成功后切换至仪表盘
|
||
U->>DB : 点击导航项/标签页
|
||
DB-->>DB : 切换标签内容
|
||
U->>AP : 点击导航进入AI页面
|
||
U->>AP : 点击AI卡片
|
||
AP-->>CM : 打开聊天弹窗
|
||
U->>CM : 输入问题/点击快捷问题
|
||
CM-->>U : 返回AI助手回复
|
||
U->>CM : 关闭弹窗
|
||
CM-->>AP : 隐藏弹窗
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:2181-2304](file://index.html#L2181-L2304)
|
||
|
||
章节来源
|
||
- [index.html:2181-2304](file://index.html#L2181-L2304)
|
||
|
||
## 详细组件分析
|
||
|
||
### 登录页面设计
|
||
- 设计理念
|
||
- 品牌主色与渐变背景营造科技与专业的氛围；右侧登录表单采用卡片化设计，确保信息密度与可读性。
|
||
- 左侧区域通过功能特性网格展示“有维教育+AI工具+有维校友”的三位一体价值主张，增强用户信任与期待。
|
||
- 视觉元素
|
||
- 主色调：品牌蓝紫与绿色，辅以暖色点缀，形成活力与稳重并存的视觉基调。
|
||
- 渐变背景：采用线性渐变覆盖整个登录页，提升层次感与现代感。
|
||
- 卡片与阴影：登录表单与特性卡片均采用圆角与阴影，强化立体感与可触达性。
|
||
- 交互流程
|
||
- 表单校验：用户名与密码非空即视为有效，直接跳转至仪表盘。
|
||
- 社交登录：提供微信与手机验证码两种入口，降低首次使用门槛。
|
||
- 注册引导：底部提供注册链接，便于转化。
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start(["进入登录页"]) --> Form["填写账号/密码"]
|
||
Form --> Submit{"提交按钮"}
|
||
Submit --> |有效| Dashboard["跳转至仪表盘"]
|
||
Submit --> |无效| Alert["提示输入完整"]
|
||
Dashboard --> End(["完成"])
|
||
Alert --> End
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:1381-1398](file://index.html#L1381-L1398)
|
||
- [index.html:2191-2202](file://index.html#L2191-L2202)
|
||
|
||
章节来源
|
||
- [index.html:57-310](file://index.html#L57-L310)
|
||
- [index.html:1345-1412](file://index.html#L1345-L1412)
|
||
- [index.html:2191-2202](file://index.html#L2191-L2202)
|
||
|
||
### 仪表盘页面布局与导航
|
||
- 整体布局
|
||
- 顶部导航栏固定，包含Logo、主导航菜单与用户操作区，保证全局一致性与易访问性。
|
||
- 内容区采用最大宽度与居中布局，确保在大屏下的良好留白与信息密度。
|
||
- 导航系统
|
||
- 主导航项支持悬停与选中态，选中项使用品牌色高亮，明确当前所在模块。
|
||
- 通知图标带红点提醒，提升消息可见性。
|
||
- 响应式设计
|
||
- 在小屏设备上，导航菜单隐藏，移动端更关注顶部操作与内容展示。
|
||
- 标签页在窄屏下允许横向滚动，避免布局破坏。
|
||
|
||
```mermaid
|
||
graph TB
|
||
NB["导航栏(navbar)"] --> NL["Logo与图标"]
|
||
NB --> NM["主导航菜单(nav-menu)"]
|
||
NB --> NU["用户操作(nav-user)"]
|
||
DC["内容区(dashboard-content)"] --> DH["头部(dashboard-header)"]
|
||
DC --> TN["标签页(nav)"]
|
||
TN --> TC["标签内容(tab-content)"]
|
||
TC --> SG["统计卡片(stats-grid)"]
|
||
TC --> CC["内容卡片(content-card)"]
|
||
CC --> CG["内容网格(content-grid)"]
|
||
CC --> LG["学习路径(learning-path)"]
|
||
TC --> MG["会员网格(membership-grid)"]
|
||
TC --> CG2["课程网格(course-grid)"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:316-418](file://index.html#L316-L418)
|
||
- [index.html:435-474](file://index.html#L435-L474)
|
||
- [index.html:477-531](file://index.html#L477-L531)
|
||
- [index.html:525-600](file://index.html#L525-L600)
|
||
- [index.html:602-712](file://index.html#L602-L712)
|
||
- [index.html:714-767](file://index.html#L714-L767)
|
||
|
||
章节来源
|
||
- [index.html:316-767](file://index.html#L316-L767)
|
||
|
||
### CSS自定义属性系统与设计语言
|
||
- 自定义属性体系
|
||
- 色彩：主色、浅/深主色、辅助色、强调色；文本与边框色；背景与卡片背景。
|
||
- 渐变：提供两个品牌渐变变量，用于背景与按钮等关键元素。
|
||
- 阴影：提供多级阴影变量，统一卡片与浮层的投影风格。
|
||
- 渐变与阴影应用
|
||
- 登录页背景使用主渐变，登录表单与卡片使用阴影提升层级感。
|
||
- 按钮与卡片悬停时叠加阴影，增强交互反馈。
|
||
- 字体与排版
|
||
- 使用系统字体栈，确保跨平台一致的阅读体验。
|
||
- 标题字号逐级递减，段落与标签使用适中的字号与行高，保证可读性。
|
||
|
||
章节来源
|
||
- [index.html:14-31](file://index.html#L14-L31)
|
||
- [index.html:34-38](file://index.html#L34-L38)
|
||
- [index.html:58](file://index.html#L58)
|
||
- [index.html:170](file://index.html#L170)
|
||
- [index.html:489](file://index.html#L489)
|
||
- [index.html:614](file://index.html#L614)
|
||
|
||
### 卡片式组件设计模式
|
||
- 统计卡片：四列栅格布局，悬停轻微上移与阴影加深，突出可交互性。
|
||
- 内容卡片：标题+描述+网格子项，子项采用悬停上移，增强探索感。
|
||
- 课程卡片：图标+标题+描述+元信息，hover时阴影变化，引导点击。
|
||
- 会员卡片：推荐卡片带“推荐”徽标与渐变背景，hover时整体上浮并加大阴影。
|
||
- AI卡片：头像+标签+特性+按钮，hover时边框与阴影变化，突出差异化能力。
|
||
|
||
```mermaid
|
||
classDiagram
|
||
class StatCard {
|
||
+图标
|
||
+数值
|
||
+标签
|
||
+悬停上移
|
||
+阴影加深
|
||
}
|
||
class ContentItem {
|
||
+图标
|
||
+标题
|
||
+描述
|
||
+列表
|
||
+悬停上移
|
||
}
|
||
class CourseCard {
|
||
+图标
|
||
+标题
|
||
+描述
|
||
+元信息
|
||
+悬停阴影
|
||
}
|
||
class MembershipCard {
|
||
+标题
|
||
+价格
|
||
+描述
|
||
+权益列表
|
||
+推荐徽标
|
||
+悬停上浮
|
||
}
|
||
class AiCard {
|
||
+头像
|
||
+标签
|
||
+特性
|
||
+按钮
|
||
+悬停边框与阴影
|
||
}
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:484-495](file://index.html#L484-L495)
|
||
- [index.html:549-559](file://index.html#L549-L559)
|
||
- [index.html:720-730](file://index.html#L720-L730)
|
||
- [index.html:608-621](file://index.html#L608-L621)
|
||
- [index.html:884-898](file://index.html#L884-L898)
|
||
|
||
章节来源
|
||
- [index.html:484-767](file://index.html#L484-L767)
|
||
|
||
### 动画过渡与用户体验优化
|
||
- 页面切换：统一的淡入动画，减少页面闪烁，提升流畅度。
|
||
- 表单与按钮：输入框聚焦时边框与阴影变化，按钮悬停时阴影与位移，提供即时反馈。
|
||
- 卡片交互：悬停上移与阴影变化，增强可点击感知。
|
||
- 聊天弹窗：打开时滑入动画，关闭时淡出，避免突兀。
|
||
- 快捷问题：点击即发送，降低输入成本，提升对话效率。
|
||
|
||
章节来源
|
||
- [index.html:51-54](file://index.html#L51-L54)
|
||
- [index.html:204-208](file://index.html#L204-L208)
|
||
- [index.html:249-252](file://index.html#L249-L252)
|
||
- [index.html:999](file://index.html#L999)
|
||
- [index.html:1114](file://index.html#L1114)
|
||
|
||
### 移动端适配策略与断点
|
||
- 断点策略
|
||
- 大屏(≥1200px)：登录页左右布局，特性卡片三列；统计、内容、AI网格两列；课程网格四列。
|
||
- 中屏(≤1200px)：登录页改为上下布局，特性卡片仍为三列；统计两列；内容网格两列；AI网格两列。
|
||
- 小屏(≤768px)：登录页表单占满宽度；导航菜单隐藏；仪表盘与AI页内容区缩进；统计、内容、会员、AI网格均为一列；课程网格两列；标签页支持横向滚动；聊天弹窗尺寸自适应。
|
||
- 适配细节
|
||
- 登录页标题字号与卡片间距按断点调整，确保可读性。
|
||
- 导航栏在小屏下减少内边距，保证操作空间。
|
||
- 表单控件与按钮在小屏下增大触摸面积，提升可用性。
|
||
|
||
章节来源
|
||
- [index.html:1265-1340](file://index.html#L1265-L1340)
|
||
|
||
### UI组件使用指南与定制化建议
|
||
- 登录表单
|
||
- 可替换品牌渐变背景与主色系，保持与品牌VI一致。
|
||
- 输入框可增加实时校验提示与错误状态样式。
|
||
- 卡片组件
|
||
- 统一使用阴影变量与圆角半径，确保视觉一致性。
|
||
- 图标与颜色建议与业务语义绑定，如“教育”使用蓝色、“AI”使用绿色、“校友”使用橙色。
|
||
- 导航与标签
|
||
- 导航项数量与文案可根据业务演进调整；标签页支持动态增删。
|
||
- 聊天弹窗
|
||
- 支持消息气泡方向与头像位置的灵活配置；可扩展表情与文件上传等能力。
|
||
- 响应式
|
||
- 栅格列数与间距可按业务内容密度微调；小屏下优先保证核心信息可见。
|
||
|
||
章节来源
|
||
- [index.html:14-31](file://index.html#L14-L31)
|
||
- [index.html:484-767](file://index.html#L484-L767)
|
||
- [index.html:1265-1340](file://index.html#L1265-L1340)
|
||
|
||
## 依赖关系分析
|
||
- 结构耦合
|
||
- 页面容器与切换逻辑解耦于样式，便于独立维护。
|
||
- 导航与标签页通过脚本控制，样式与行为分离清晰。
|
||
- 组件依赖
|
||
- 登录页依赖全局样式与动画；仪表盘依赖导航与标签页样式；AI页依赖卡片与聊天弹窗样式；聊天弹窗依赖消息列表与输入区样式。
|
||
- 外部依赖
|
||
- 无外部库依赖，纯原生HTML/CSS/JS实现，部署简单。
|
||
|
||
```mermaid
|
||
graph LR
|
||
Styles["全局样式与变量"] --> LoginPage["登录页"]
|
||
Styles --> Dashboard["仪表盘"]
|
||
Styles --> AiPage["AI智能体页"]
|
||
Styles --> ChatModal["聊天弹窗"]
|
||
Scripts["脚本逻辑"] --> LoginPage
|
||
Scripts --> Dashboard
|
||
Scripts --> AiPage
|
||
Scripts --> ChatModal
|
||
```
|
||
|
||
图表来源
|
||
- [index.html:7-1341](file://index.html#L7-L1341)
|
||
- [index.html:2181-2304](file://index.html#L2181-L2304)
|
||
|
||
章节来源
|
||
- [index.html:7-1341](file://index.html#L7-L1341)
|
||
- [index.html:2181-2304](file://index.html#L2181-L2304)
|
||
|
||
## 性能考量
|
||
- 样式体积：单文件内嵌样式，减少HTTP请求，利于首屏渲染。
|
||
- 动画与阴影：合理使用阴影与过渡，避免过度复杂导致低端设备卡顿。
|
||
- 响应式：断点数量适中，网格布局简洁，保证在移动设备上的流畅体验。
|
||
- 交互反馈：按钮与卡片的悬停反馈轻量且即时，避免长耗时操作阻塞。
|
||
|
||
## 故障排查指南
|
||
- 登录失败
|
||
- 现象：输入账号/密码后无反应或提示错误。
|
||
- 排查：确认表单字段值非空；检查脚本函数是否正确绑定；查看浏览器控制台是否有报错。
|
||
- 页面切换异常
|
||
- 现象：点击导航后页面未切换。
|
||
- 排查：确认页面ID与脚本调用一致；检查样式类名拼写；验证脚本加载顺序。
|
||
- 聊天弹窗无法关闭
|
||
- 现象：点击遮罩或关闭按钮无响应。
|
||
- 排查：检查弹窗类名与点击事件绑定；确认事件冒泡与阻止默认行为是否正确。
|
||
- 响应式布局错乱
|
||
- 现象：在特定屏幕尺寸下布局异常。
|
||
- 排查：核对断点范围与媒体查询条件；检查栅格列数与间距是否与断点匹配。
|
||
|
||
章节来源
|
||
- [index.html:2191-2202](file://index.html#L2191-L2202)
|
||
- [index.html:2181-2304](file://index.html#L2181-L2304)
|
||
- [index.html:1265-1340](file://index.html#L1265-L1340)
|
||
|
||
## 结论
|
||
本设计以“有维商学”平台为目标，围绕登录与仪表盘两大核心页面，构建了统一的品牌视觉、清晰的导航与标签体系、丰富的卡片组件与流畅的交互体验。通过CSS自定义属性系统、渐变与阴影的规范应用，以及完善的响应式策略，实现了在多终端上的一致体验。建议后续在登录校验、消息系统与内容生态方面进一步完善，以支撑平台长期发展。
|
||
|
||
## 附录
|
||
- 设计规范
|
||
- 色彩：主色、辅助色、强调色、文本与边框色、背景与卡片背景。
|
||
- 渐变：主渐变与辅助渐变，用于背景与关键按钮。
|
||
- 阴影：多级阴影变量，统一卡片与浮层投影。
|
||
- 字体：系统字体栈，标题与正文字号分级明确。
|
||
- 字体排版
|
||
- 标题：层级分明，强调品牌调性。
|
||
- 正文：行高与字间距适中，保证可读性。
|
||
- 响应式断点
|
||
- ≥1200px：宽屏布局，信息密度高。
|
||
- ≤1200px：中屏布局，适度压缩。
|
||
- ≤768px：移动优先，简化导航与网格。
|
||
|
||
章节来源
|
||
- [index.html:14-31](file://index.html#L14-L31)
|
||
- [index.html:34-38](file://index.html#L34-L38)
|
||
- [index.html:1265-1340](file://index.html#L1265-L1340) |