15 KiB
15 KiB
用户界面设计
**本文引用的文件** - [index.html](file://index.html)目录
简介
本设计文档面向“有维商学”平台的用户界面，聚焦登录页与仪表盘两大核心页面，系统梳理设计理念、视觉元素、交互流程与响应式策略，并对CSS自定义属性系统、渐变与阴影、卡片组件、动画过渡与移动端适配进行深入解析。文档同时提供组件使用指南与定制化建议，帮助设计师与前端开发者快速理解并扩展界面。
项目结构
本项目采用单页应用结构，所有页面与样式内嵌于单一HTML文件中，便于部署与维护。页面通过类名控制显示隐藏，配合脚本实现页面切换与交互逻辑。
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)"]
图表来源
章节来源
核心组件
- 页面容器与切换：通过统一的页面容器类与激活状态类实现页面切换，配合脚本函数完成显示/隐藏控制。
- 登录页：强调品牌视觉与功能特性展示，结合登录表单与社交登录入口，营造信任与便捷感。
- 仪表盘：以导航与标签页为核心，分模块呈现平台概览、教育、AI工具、校友与会员体系。
- AI智能体页：集中展示各类AI助手卡片，支持快速对话与筛选。
- 聊天弹窗：内嵌在任一页面，用于与AI助手进行对话交互。
章节来源
- index.html:41-49
- index.html:1345-1412
- index.html:1415-2002
- index.html:2005-2142
- index.html:2145-2179
架构总览
下图展示页面间的关系与交互流向，突出登录页到仪表盘的跳转、仪表盘内部的标签页切换以及AI页面与聊天弹窗的联动。
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 : 隐藏弹窗
图表来源
章节来源
详细组件分析
登录页面设计
- 设计理念
- 品牌主色与渐变背景营造科技与专业的氛围；右侧登录表单采用卡片化设计，确保信息密度与可读性。
- 左侧区域通过功能特性网格展示“有维教育+AI工具+有维校友”的三位一体价值主张，增强用户信任与期待。
- 视觉元素
- 主色调：品牌蓝紫与绿色，辅以暖色点缀，形成活力与稳重并存的视觉基调。
- 渐变背景：采用线性渐变覆盖整个登录页，提升层次感与现代感。
- 卡片与阴影：登录表单与特性卡片均采用圆角与阴影，强化立体感与可触达性。
- 交互流程
- 表单校验：用户名与密码非空即视为有效，直接跳转至仪表盘。
- 社交登录：提供微信与手机验证码两种入口，降低首次使用门槛。
- 注册引导：底部提供注册链接，便于转化。
flowchart TD
Start(["进入登录页"]) --> Form["填写账号/密码"]
Form --> Submit{"提交按钮"}
Submit --> |有效| Dashboard["跳转至仪表盘"]
Submit --> |无效| Alert["提示输入完整"]
Dashboard --> End(["完成"])
Alert --> End
图表来源
章节来源
仪表盘页面布局与导航
- 整体布局
- 顶部导航栏固定，包含Logo、主导航菜单与用户操作区，保证全局一致性与易访问性。
- 内容区采用最大宽度与居中布局，确保在大屏下的良好留白与信息密度。
- 导航系统
- 主导航项支持悬停与选中态，选中项使用品牌色高亮，明确当前所在模块。
- 通知图标带红点提醒，提升消息可见性。
- 响应式设计
- 在小屏设备上，导航菜单隐藏，移动端更关注顶部操作与内容展示。
- 标签页在窄屏下允许横向滚动，避免布局破坏。
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
- index.html:435-474
- index.html:477-531
- index.html:525-600
- index.html:602-712
- index.html:714-767
章节来源
CSS自定义属性系统与设计语言
- 自定义属性体系
- 色彩：主色、浅/深主色、辅助色、强调色；文本与边框色；背景与卡片背景。
- 渐变：提供两个品牌渐变变量，用于背景与按钮等关键元素。
- 阴影：提供多级阴影变量，统一卡片与浮层的投影风格。
- 渐变与阴影应用
- 登录页背景使用主渐变，登录表单与卡片使用阴影提升层级感。
- 按钮与卡片悬停时叠加阴影，增强交互反馈。
- 字体与排版
- 使用系统字体栈，确保跨平台一致的阅读体验。
- 标题字号逐级递减，段落与标签使用适中的字号与行高，保证可读性。
章节来源
卡片式组件设计模式
- 统计卡片：四列栅格布局，悬停轻微上移与阴影加深，突出可交互性。
- 内容卡片：标题+描述+网格子项，子项采用悬停上移，增强探索感。
- 课程卡片：图标+标题+描述+元信息，hover时阴影变化，引导点击。
- 会员卡片：推荐卡片带“推荐”徽标与渐变背景，hover时整体上浮并加大阴影。
- AI卡片：头像+标签+特性+按钮，hover时边框与阴影变化，突出差异化能力。
classDiagram
class StatCard {
+图标
+数值
+标签
+悬停上移
+阴影加深
}
class ContentItem {
+图标
+标题
+描述
+列表
+悬停上移
}
class CourseCard {
+图标
+标题
+描述
+元信息
+悬停阴影
}
class MembershipCard {
+标题
+价格
+描述
+权益列表
+推荐徽标
+悬停上浮
}
class AiCard {
+头像
+标签
+特性
+按钮
+悬停边框与阴影
}
图表来源
章节来源
动画过渡与用户体验优化
- 页面切换：统一的淡入动画，减少页面闪烁，提升流畅度。
- 表单与按钮：输入框聚焦时边框与阴影变化，按钮悬停时阴影与位移，提供即时反馈。
- 卡片交互：悬停上移与阴影变化，增强可点击感知。
- 聊天弹窗：打开时滑入动画，关闭时淡出，避免突兀。
- 快捷问题：点击即发送，降低输入成本，提升对话效率。
章节来源
移动端适配策略与断点
- 断点策略
- 大屏(≥1200px)：登录页左右布局，特性卡片三列；统计、内容、AI网格两列；课程网格四列。
- 中屏(≤1200px)：登录页改为上下布局，特性卡片仍为三列；统计两列；内容网格两列；AI网格两列。
- 小屏(≤768px)：登录页表单占满宽度；导航菜单隐藏；仪表盘与AI页内容区缩进；统计、内容、会员、AI网格均为一列；课程网格两列；标签页支持横向滚动；聊天弹窗尺寸自适应。
- 适配细节
- 登录页标题字号与卡片间距按断点调整，确保可读性。
- 导航栏在小屏下减少内边距，保证操作空间。
- 表单控件与按钮在小屏下增大触摸面积，提升可用性。
章节来源
UI组件使用指南与定制化建议
- 登录表单
- 可替换品牌渐变背景与主色系，保持与品牌VI一致。
- 输入框可增加实时校验提示与错误状态样式。
- 卡片组件
- 统一使用阴影变量与圆角半径，确保视觉一致性。
- 图标与颜色建议与业务语义绑定，如“教育”使用蓝色、“AI”使用绿色、“校友”使用橙色。
- 导航与标签
- 导航项数量与文案可根据业务演进调整；标签页支持动态增删。
- 聊天弹窗
- 支持消息气泡方向与头像位置的灵活配置；可扩展表情与文件上传等能力。
- 响应式
- 栅格列数与间距可按业务内容密度微调；小屏下优先保证核心信息可见。
章节来源
依赖关系分析
- 结构耦合
- 页面容器与切换逻辑解耦于样式，便于独立维护。
- 导航与标签页通过脚本控制，样式与行为分离清晰。
- 组件依赖
- 登录页依赖全局样式与动画；仪表盘依赖导航与标签页样式；AI页依赖卡片与聊天弹窗样式；聊天弹窗依赖消息列表与输入区样式。
- 外部依赖
- 无外部库依赖，纯原生HTML/CSS/JS实现，部署简单。
graph LR
Styles["全局样式与变量"] --> LoginPage["登录页"]
Styles --> Dashboard["仪表盘"]
Styles --> AiPage["AI智能体页"]
Styles --> ChatModal["聊天弹窗"]
Scripts["脚本逻辑"] --> LoginPage
Scripts --> Dashboard
Scripts --> AiPage
Scripts --> ChatModal
图表来源
章节来源
性能考量
- 样式体积：单文件内嵌样式，减少HTTP请求，利于首屏渲染。
- 动画与阴影：合理使用阴影与过渡，避免过度复杂导致低端设备卡顿。
- 响应式：断点数量适中，网格布局简洁，保证在移动设备上的流畅体验。
- 交互反馈：按钮与卡片的悬停反馈轻量且即时，避免长耗时操作阻塞。
故障排查指南
- 登录失败
- 现象：输入账号/密码后无反应或提示错误。
- 排查：确认表单字段值非空；检查脚本函数是否正确绑定；查看浏览器控制台是否有报错。
- 页面切换异常
- 现象：点击导航后页面未切换。
- 排查：确认页面ID与脚本调用一致；检查样式类名拼写；验证脚本加载顺序。
- 聊天弹窗无法关闭
- 现象：点击遮罩或关闭按钮无响应。
- 排查：检查弹窗类名与点击事件绑定；确认事件冒泡与阻止默认行为是否正确。
- 响应式布局错乱
- 现象：在特定屏幕尺寸下布局异常。
- 排查：核对断点范围与媒体查询条件；检查栅格列数与间距是否与断点匹配。
章节来源
结论
本设计以“有维商学”平台为目标，围绕登录与仪表盘两大核心页面，构建了统一的品牌视觉、清晰的导航与标签体系、丰富的卡片组件与流畅的交互体验。通过CSS自定义属性系统、渐变与阴影的规范应用，以及完善的响应式策略，实现了在多终端上的一致体验。建议后续在登录校验、消息系统与内容生态方面进一步完善，以支撑平台长期发展。
附录
- 设计规范
- 色彩：主色、辅助色、强调色、文本与边框色、背景与卡片背景。
- 渐变：主渐变与辅助渐变，用于背景与关键按钮。
- 阴影：多级阴影变量，统一卡片与浮层投影。
- 字体：系统字体栈，标题与正文字号分级明确。
- 字体排版
- 标题：层级分明，强调品牌调性。
- 正文：行高与字间距适中，保证可读性。
- 响应式断点
- ≥1200px：宽屏布局，信息密度高。
- ≤1200px：中屏布局，适度压缩。
- ≤768px：移动优先，简化导航与网格。
章节来源