项目开发手册 Prov2.0
系统开发文档
1. 品牌视觉体系
1.1 网站整体风格
网站设计采用沉稳、专业、重信息的视觉基调,整体设计围绕「技术服务型品牌」的核心定位展开,强调内容的清晰传达与视觉秩序感。
- 页面布局:采用宽幅通栏与双栏结构相结合,信息层级分明,符合技术服务型网站一贯的理性、克制、重内容的排版习惯。
- 色彩倾向:以深色与中性色为基调,搭配紫蓝色作为品牌识别色,整体观感冷静、克制,传递出技术企业的稳重与专业感。
- 字体选用:中文字体以宋体系列为主(SimSun / Songti SC),兼顾阅读舒适度与古典印刷质感;英文字体搭配无衬线系,形成「中宋西黑」的混排节奏,契合品牌「技术驱动」与「内容沉淀」的双重属性。
1.2 站点核心体验特征
- 信息优先:页面以内容为核心,弱化装饰性元素,确保访客在浏览时专注于品牌介绍、业务体系与案例信息。
- 浏览连贯性:强制锁定滚动条,避免页面切换时布局抖动,保证跨页面浏览体验的平滑与稳定。
- 响应式适配:站点自动适配电脑、平板、手机等不同设备,确保在各类屏幕尺寸下均能获得良好的阅读体验。
- 品牌标识规范:Logo 在网站 Favicon、顶栏、页脚等位置统一呈现,保持固定比例与标准色值,不随页面风格变化而调整,确保品牌识别的一致性。
1.3 品牌色彩规范
- 主色系:深灰(#222222)与纯黑(#000000)构成底色基调,营造沉稳、专业的品牌氛围。
- 辅助色:紫蓝色(#6C2BD9)作为品牌识别色,应用于重点标题、强调文字及关键交互元素,形成视觉焦点但不喧宾夺主。
- 背景与边框:大面积留白搭配浅灰(#f5f5f5、#fafafa)背景区块与细边框(#e0e0e0),构建清晰的信息分区,提升页面层次感与可读性。
2. 项目总体建设目标
为企业打造一个“品牌形象 + 产品展示 + 客户转化”三位一体的数字化门户。重点突出科技感、信任感与互动体验,帮助客户在 3 秒内理解我们的核心能力并产生在线询盘。
3. 前台功能模块(用户端)
| 模块 | 功能描述 | 交互亮点 |
|---|---|---|
| 首页大屏 Banner | 全屏自动轮播,支持视频背景与动态文字叠加。 | 鼠标滑动渐变,切换平滑。 |
| 产品中心 | 展示软件产品、SaaS 服务列表,支持筛选与详情弹窗。 | 卡片悬停 3D 翻转,内嵌视频。 |
| 案例展示 | 按行业分类(金融/医疗/零售),展示客户 Logo + 成果数据。 | 滚动触发动画,点击预览 PDF。 |
| 视频中心 | 整合产品教程、客户证言、品牌宣传片。 | 支持倍速播放、画中画字幕。 |
| 资讯 / 博客 | 发布行业白皮书、技术文章,支持 SEO 元数据自定义。 | 阅读进度条,目录导航一键分享。 |
| 联系我们 | 在线表单、智能客服入口、400 电话、办公地址地图。 | 表单智能验证,提交发送邮件。 |
4. 后台管理系统(CMS)
| 功能模块 | 具体能力 | 权限设计 |
|---|---|---|
| 仪表盘 | 访客数据概览(UV/PV)、表单提交量、视频播放完成率。 | 管理员与运营 |
| Banner 管理 | 上传/排序/定时发布 Banner 图或视频,设置链接跳转。 | 运营编辑/管理员审核 |
| 产品/案例管理 | 增删改查产品及案例,支持批量导入图片、PDF 附件。 | 运营维护/管理员删除 |
| 视频管理 | 上传本地视频或嵌入 B站/YouTube 链接,自动获取封面。 | 运营可编辑元数据 |
| 用户反馈 | 查看并回复表单留言,标记处理状态(待处理/已解决)。 | 客服人员专用 |
| SEO 设置 | 自定义每页 Title、Keywords、Description,生成 Sitemap。 | 管理员专用 |
5. 技术架构(简要说明)
| 层面 | 技术选型 | 选型理由 |
|---|---|---|
| 前端框架 | HTML5 + CSS3 + JavaScript(原生) | 轻量、高效,组件化开发,便于维护。 |
| UI 外观设计 | 品牌自定义主题(色彩/字体/间距/阴影) | UI组件库:根据需求合理设计,保持界面现代化风格 |
| 后端 API | Node.js (NestJS) + TypeScript | 类型安全,适合中大型项目扩展。 |
| 数据库 | PostgreSQL + Redis 缓存 | 保障数据一致性,提升高频查询速度。 |
| 媒体处理 | 阿里云 OSS + 视频点播 | 全球加速,支持视频转码与防盗链。 |
| 部署环境 | Docker + Nginx + GitHub Actions | 持续集成,一键回滚,高可用。 |
6. 核心页面设计示意(文字描述)
6.1 首页布局
• 顶部导航:透明背景 + 白色文字,滚动后变为品牌色背景 + 白色 Logo。
• Banner 区:满屏视频背景,中央大标题“让数据驱动未来”,下方 CTA 按钮“预约演示”。
• 客户案例墙:滚动展示知名企业 Logo,点击可跳转案例详情。
• 产品核心优势:3 个图标卡片(核心算力引擎、实时监控、安全合规),带悬停动效。
• 最新视频:横向滚动卡片,每个卡片带播放时长和观看次数。
• 底部:包含友情链接、社交媒体图标、备案号。
6.2 产品详情页布局
• 左侧:产品主图 / 演示视频。
• 右侧:功能列表(折叠面板) + 技术参数表格。
• 底部:推荐相关产品 + 直接咨询按钮。
7. 案例展示(示例)
| 客户 | 行业 | 项目内容 | 效果数据 |
|---|---|---|---|
| 云盛金融 | 银行 | 智能风控系统,实时交易。 | 误报率降低 42%,响应时间 120ms |
| 仁爱医院 | 医疗 | 患者档案区块链存证平台。 | 数据调取效率提升 70%,通过等保三级 |
| 快零售 | 新零售 | 门店客流热力分析 + 智能补货。 | 库存周转率提升 25%,人力成本节省 30% |
8. 开发周期与交付物
| 阶段 | 时间 | 交付内容 |
|---|---|---|
| 需求确认 & UI 设计 | 第 1 周 | 高保真 Figma 设计稿、交互原型 |
| 前端开发 & 后台搭建 | 第 2 周 | 可访问的测试环境(Staging) |
| 数据迁移 & 测试 | 第 3 周 | 功能测试报告、性能压测报告 |
| 培训 & 上线 | 第 4 周 | 后台操作视频教程、正式环境部署 |
8.1 交付物清单
- 完整源代码(私有 Git 仓库移交)
- 后台管理账号 x5
- 运维手册(含域名、SSL 证书、OSS 配置说明)
- 1 年免费技术维护(针对 Bug 修复)
9. 项目组干系人联系
• 项目经理:张工(负责整体进度、需求沟通)
• 技术负责人:李工(架构设计、代码 Review)
• 设计负责人:王工(UI/UX、Logo 延展设计)
• 技术支持:7×12 小时在线支持(企业微信群 + 钉钉保障群)