639 lines
9.0 KiB
Markdown
639 lines
9.0 KiB
Markdown
项目需求：深圳朔原科技有限公司品牌官网
|
||
|
||
1. 项目概述
|
||
|
||
|
||
|
||
|
||
|
||
项目名称：深圳朔原科技有限公司品牌官网
|
||
|
||
|
||
|
||
网站类型：品牌展示型
|
||
|
||
|
||
|
||
核心定位：面向中小企业决策者，展示软件开发与AI解决方案能力，建立专业可信赖的科技品牌形象
|
||
|
||
|
||
|
||
目标用户：
|
||
|
||
|
||
|
||
|
||
|
||
中小企业老板/CEO：关注数字化转型成本与落地效果
|
||
|
||
|
||
|
||
企业IT负责人/技术总监：关注技术方案可行性与团队实力
|
||
|
||
|
||
|
||
有软件开发需求的B端客户：关注交付质量、周期与售后
|
||
|
||
|
||
|
||
有源码/工具采购需求的C端开发者：关注产品质量与实用性
|
||
|
||
|
||
|
||
核心商业目标：
|
||
|
||
|
||
|
||
|
||
|
||
建立品牌专业形象，提升客户信任度
|
||
|
||
|
||
|
||
通过官网获取有效咨询线索（目标：月均30+条有效咨询）
|
||
|
||
|
||
|
||
清晰展示6大业务线，引导客户快速找到对应服务
|
||
|
||
|
||
|
||
网站主语言：中文
|
||
|
||
|
||
|
||
平台：网页
|
||
|
||
2. 战略分析
|
||
|
||
|
||
|
||
|
||
|
||
用户核心痛点：
|
||
|
||
|
||
|
||
|
||
|
||
中小企业缺乏技术团队，数字化转型无从下手，需要靠谱的技术合作伙伴
|
||
|
||
|
||
|
||
市面上软件公司鱼龙混杂，难以判断技术实力和服务质量
|
||
|
||
|
||
|
||
AI概念火热但落地困难，企业需要能真正交付结果的方案商
|
||
|
||
|
||
|
||
UVP（独特价值主张）：从软件开发到AI落地的一站式数字化伙伴，专注为中小企业提供可落地的技术解决方案
|
||
|
||
|
||
|
||
信任锚点：
|
||
|
||
|
||
|
||
|
||
|
||
客户Logo墙与合作案例
|
||
|
||
|
||
|
||
具体业务数据成果（项目数量、服务客户数等）
|
||
|
||
|
||
|
||
6大业务线的专业能力展示
|
||
|
||
|
||
|
||
公司团队与资质介绍
|
||
|
||
|
||
|
||
首屏第一感觉：专业、科技感、值得信赖——通过深色科技风视觉+动态效果传递技术实力
|
||
|
||
|
||
|
||
转化路径：联系表单提交咨询 → 电话/微信直接联系 → 各业务页"立即咨询"按钮引导
|
||
|
||
3. 页面结构
|
||
|
||
页面清单
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
页面
|
||
|
||
|
||
|
||
作用
|
||
|
||
|
||
|
||
优先级
|
||
|
||
|
||
|
||
|
||
|
||
首页
|
||
|
||
|
||
|
||
品牌第一印象 + 核心业务概览 + 信任背书 + 引导咨询
|
||
|
||
|
||
|
||
高
|
||
|
||
|
||
|
||
|
||
|
||
关于我们
|
||
|
||
|
||
|
||
公司深度介绍、团队实力、发展历程、企业文化
|
||
|
||
|
||
|
||
高
|
||
|
||
|
||
|
||
|
||
|
||
核心服务
|
||
|
||
|
||
|
||
详细介绍6大业务线，展示专业能力
|
||
|
||
|
||
|
||
高
|
||
|
||
|
||
|
||
|
||
|
||
客户案例
|
||
|
||
|
||
|
||
展示合作案例与成果，建立信任
|
||
|
||
|
||
|
||
高
|
||
|
||
|
||
|
||
|
||
|
||
联系我们
|
||
|
||
|
||
|
||
咨询表单 + 联系方式 + 公司地址
|
||
|
||
|
||
|
||
高
|
||
|
||
3.1 首页
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
#
|
||
|
||
|
||
|
||
区块
|
||
|
||
|
||
|
||
目的
|
||
|
||
|
||
|
||
内容元素
|
||
|
||
|
||
|
||
交互效果
|
||
|
||
|
||
|
||
|
||
|
||
1
|
||
|
||
|
||
|
||
Header 导航
|
||
|
||
|
||
|
||
全局导航，快速跳转各页面
|
||
|
||
|
||
|
||
Logo + 导航菜单（首页/关于我们/核心服务/客户案例/联系我们）+ "立即咨询"CTA按钮，移动端汉堡菜单
|
||
|
||
|
||
|
||
导航hover下划线动效，滚动后导航栏固定+背景模糊
|
||
|
||
|
||
|
||
|
||
|
||
2
|
||
|
||
|
||
|
||
全屏Hero区
|
||
|
||
|
||
|
||
3秒传递核心价值主张，建立科技品牌印象
|
||
|
||
|
||
|
||
全屏背景（科技感粒子/渐变动效）+ 主标题"用技术驱动商业增长" + 副标题"软件开发 · AI应用 · 数字化升级 · 流程自动化" + 双CTA按钮（"了解服务"/"免费咨询"）
|
||
|
||
|
||
|
||
背景粒子/渐变动画，文字逐字淡入，CTA按钮hover发光效果
|
||
|
||
|
||
|
||
|
||
|
||
3
|
||
|
||
|
||
|
||
核心数据展示
|
||
|
||
|
||
|
||
用数据证明实力，快速建立信任
|
||
|
||
|
||
|
||
4组关键数据：服务客户数（100+）、交付项目数（200+）、技术团队人数、行业覆盖数
|
||
|
||
|
||
|
||
数字滚动计数动画，滚动到视口时触发
|
||
|
||
|
||
|
||
|
||
|
||
4
|
||
|
||
|
||
|
||
核心业务入口
|
||
|
||
|
||
|
||
清晰展示6大业务，引导深入了解
|
||
|
||
|
||
|
||
6个业务卡片：软件开发、源码售卖、实用工具开发、AI应用开发、数字化升级方案、业务流程自动化。每张含图标+业务名+一句话描述
|
||
|
||
|
||
|
||
卡片hover上浮+阴影加深，点击跳转对应服务详情锚点或内页
|
||
|
||
|
||
|
||
|
||
|
||
5
|
||
|
||
|
||
|
||
信任背书墙
|
||
|
||
|
||
|
||
减少决策阻力，展示合作实力
|
||
|
||
|
||
|
||
合作客户Logo墙（8-12个）+ 1-2句客户评价摘要
|
||
|
||
|
||
|
||
Logo灰度展示，hover变彩色；评价区域轮播切换
|
||
|
||
|
||
|
||
|
||
|
||
6
|
||
|
||
|
||
|
||
精选案例入口
|
||
|
||
|
||
|
||
展示实际成果，引导进入案例页
|
||
|
||
|
||
|
||
3个精选案例卡片（含项目名/客户行业/成果亮点）+ "查看全部案例"按钮
|
||
|
||
|
||
|
||
卡片hover图片放大+遮罩，点击进入案例详情页
|
||
|
||
|
||
|
||
|
||
|
||
7
|
||
|
||
|
||
|
||
关于我们简介
|
||
|
||
|
||
|
||
建立品牌认知，引导进入关于我们页
|
||
|
||
|
||
|
||
公司简介摘要（2-3句话）+ 核心优势标签（如"技术驱动"/"一站式服务"/"中小企业专注"）+ "了解更多"按钮
|
||
|
||
|
||
|
||
左图右文布局，滚动淡入动效
|
||
|
||
|
||
|
||
|
||
|
||
8
|
||
|
||
|
||
|
||
联系转化区
|
||
|
||
|
||
|
||
收集咨询线索
|
||
|
||
|
||
|
||
轻量表单（姓名/电话/咨询内容）+ 联系方式（电话/邮箱/微信）
|
||
|
||
|
||
|
||
表单实时校验，提交成功提示
|
||
|
||
|
||
|
||
|
||
|
||
9
|
||
|
||
|
||
|
||
Footer
|
||
|
||
|
||
|
||
完整信息出口
|
||
|
||
|
||
|
||
公司全称 + 快速导航 + 联系方式 + 版权信息 + 备案号
|
||
|
||
|
||
|
||
链接hover下划线
|
||
|
||
3.2 关于我们页
|
||
|
||
|
||
|
||
|
||
|
||
页面作用：深度介绍公司背景、团队实力与企业文化，建立长期信任
|
||
|
||
|
||
|
||
主要内容区域：
|
||
|
||
|
||
|
||
|
||
|
||
品牌故事区：公司创立背景、使命愿景、核心价值观
|
||
|
||
|
||
|
||
发展历程：时间线展示公司重要里程碑（成立年份、关键业务拓展、重要合作等）
|
||
|
||
|
||
|
||
团队实力：核心团队介绍或团队规模展示，技术栈能力概览
|
||
|
||
|
||
|
||
核心优势：为什么选择朔原科技（如：一站式服务、中小企业专注、AI落地经验、快速交付）
|
||
|
||
|
||
|
||
资质荣誉：相关资质证书、合作伙伴、行业认可
|
||
|
||
|
||
|
||
转化设计：页面底部放置"联系我们"/"预约咨询"CTA按钮
|
||
|
||
3.3 核心服务页
|
||
|
||
|
||
|
||
|
||
|
||
页面作用：详细介绍6大业务线，让客户快速理解服务能力并找到所需
|
||
|
||
|
||
|
||
主要内容区域：
|
||
|
||
|
||
|
||
|
||
|
||
服务概览：6大业务线总览卡片，每张含图标+名称+简述，点击展开或跳转详情
|
||
|
||
|
||
|
||
软件开发：定制化软件开发服务介绍，涵盖Web应用、移动端、企业管理系统等
|
||
|
||
|
||
|
||
源码售卖：高质量源码产品介绍，适用场景、技术栈说明
|
||
|
||
|
||
|
||
实用工具开发：面向开发者或企业的效率工具产品
|
||
|
||
|
||
|
||
AI应用开发：AI能力落地应用，如智能客服、数据分析、内容生成等
|
||
|
||
|
||
|
||
数字化升级方案：面向中小企业的整体数字化转型方案，从诊断到落地
|
||
|
||
|
||
|
||
业务流程自动化：RPA/工作流自动化，提升运营效率
|
||
|
||
|
||
|
||
转化设计：每个服务模块底部放置"立即咨询"/"获取方案"按钮
|
||
|
||
3.4 客户案例页
|
||
|
||
|
||
|
||
|
||
|
||
页面作用：通过真实案例展示交付能力与成果，消除客户疑虑
|
||
|
||
|
||
|
||
主要内容区域：
|
||
|
||
|
||
|
||
|
||
|
||
案例筛选：按行业/服务类型筛选案例
|
||
|
||
|
||
|
||
案例列表：网格/卡片布局展示案例，每张含项目封面图+客户名+行业标签+成果亮点
|
||
|
||
|
||
|
||
案例详情：点击卡片进入详情，展示项目背景、解决方案、实施成果、客户评价
|
||
|
||
|
||
|
||
转化设计：页面底部CTA"您的项目也可以如此出色，立即咨询"
|
||
|
||
3.5 联系我们页
|
||
|
||
|
||
|
||
|
||
|
||
页面作用：提供便捷的咨询渠道，促成转化
|
||
|
||
|
||
|
||
主要内容区域：
|
||
|
||
|
||
|
||
|
||
|
||
咨询表单：姓名、联系电话、公司名称、咨询内容、期望服务类型（下拉选择）
|
||
|
||
|
||
|
||
联系方式：电话、邮箱、微信号、工作时间
|
||
|
||
|
||
|
||
公司地址：公司详细地址 + 地图展示
|
||
|
||
|
||
|
||
转化设计：表单提交后显示成功提示并告知回复时效；电话/微信入口突出显示
|
||
|
||
4. 本期实现功能
|
||
|
||
|
||
|
||
|
||
|
||
全屏品牌视觉Hero区 — 首屏全屏展示品牌核心主张，配合科技感背景动效（粒子/渐变），主副标题+双CTA按钮，3秒内传递品牌价值与技术实力感。
|
||
|
||
|
||
|
||
6大核心业务展示 — 以卡片形式展示软件开发、源码售卖、实用工具开发、AI应用开发、数字化升级方案、业务流程自动化6条业务线，每张卡片含图标、业务名称、一句话价值描述，hover交互引导用户点击了解。
|
||
|
||
|
||
|
||
客户案例与信任背书墙 — 首页展示合作客户Logo墙（灰度→彩色hover效果）+关键数据滚动计数，案例页展示完整项目案例（含背景、方案、成果），通过真实成果建立信任。
|
||
|
||
|
||
|
||
联系咨询表单 — 轻量表单收集客户咨询信息（姓名/电话/咨询内容），支持实时校验与提交成功反馈，后台可查看所有提交的咨询记录。
|
||
|
||
|
||
|
||
关于我们页面 — 展示公司品牌故事、发展历程时间线、团队实力、核心优势，建立品牌深度认知与长期信任。
|
||
|
||
5. 本期不实现功能
|
||
|
||
|
||
|
||
|
||
|
||
新闻动态/博客系统 — 品牌官网初期以核心展示为主，资讯内容可后续迭代增加，不影响核心转化路径。
|
||
|
||
|
||
|
||
多语言切换（中英双语） — 当前目标用户为国内中小企业，中文单语即可满足需求，国际化可后续按需扩展。
|
||
|
||
6. 数据/集成
|
||
|
||
|
||
|
||
|
||
|
||
需要数据库 — 用于存储联系表单提交的咨询记录（字段：姓名、电话、公司名称、咨询内容、服务类型、提交时间、处理状态）。开启数据库后，用户可在「管理 → 内容管理」中查看和管理所有咨询记录，无需在前端开发管理功能。
|
||
|
||
7. 特殊要求
|
||
|
||
|
||
|
||
|
||
|
||
视觉风格参考：参考 https://www.gzlinker.cn 的整体布局与视觉风格，采用科技感、专业稳重的设计调性
|
||
|
||
|
||
|
||
配色倾向：深蓝/科技蓝为主色调，搭配白色/浅灰背景，体现科技企业的专业与可靠
|
||
|
||
|
||
|
||
广告法合规：所有文案避免使用极限用语（如"最好""第一""唯一"等），改用"专业""专注""致力于"等合规表述 |