diff --git a/index.html b/index.html index 29b5d49..af7cab0 100644 --- a/index.html +++ b/index.html @@ -3,810 +3,1015 @@ - 海南荣刻科技有限公司 - 数据驱动 · AI赋能 + + + 海南荣刻科技有限公司 - 数据筑基 · AI 落地 + - - + + +
+
+
+
+
+ AI + DATA INFRASTRUCTURE +

让企业数据
成为 AI 生产力

+

从数据治理、模型优化到私有化部署，荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。

+
+ 预约 AI 场景诊断 + 查看解决方案 +
+
+ 7 年数据技术积累 + 支持私有化部署 + 成都 / 海口双城交付 +
+
+ +
+
+
+
RONCARVE / AI CONTROL ROOM
+ SYSTEM ONLINE +
+
+ +
+
+
+

INTELLIGENCE ORCHESTRATOR

+

企业 AI 能力编排中枢

+
+ LIVE +
+
+
企业数据底座DATA FOUNDATION
+
行业知识库KNOWLEDGE BASE
+
垂类模型VERTICAL MODEL
+
私有部署环境PRIVATE CLOUD
+
+
+
DATA EXP.7 YRS
+
DELIVERED30 +
+
CLIENTS10 +
+
+
SECURE PIPELINE · FULL-CHAIN DELIVERY
+
+
+
+
+
+ +
+
01 / DATA数据治理
+
02 / MODEL模型优化
+
03 / DEPLOY私有部署
+
04 / OPERATE持续运营
-
-
-

核心技术能力

-

数据 + AI 全链路覆盖

-
-
🗄️
数据治理
-
🧠
AI大模型
-
⚙️
模型优化
-
🚀
私有部署
+
+ +
+
+
+
01 / CAPABILITY CHAIN

从数据底座到 AI 业务价值

+

我们不是只交付一个模型，而是围绕企业数据、场景与安全边界，搭建完整的 AI 落地链路。

+
+
+
+

荣刻科技早年深耕数据治理与数据加工处理，形成了扎实的数据工程能力。伴随人工智能技术发展，公司进一步拓展 AI 业务，构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。

+

核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者，在成都、海口设有办公场地，具备从技术研发到项目交付的完整服务能力。

+
+
7 YEARS数据治理与加工经验
+
2 CITIES研发与运营协同网络
+
+
+
+
01

数据治理

清洗、标注、加工与知识资产沉淀

READY
+
02

模型与应用

智能对话、客服、音频与行业模型优化

READY
+
03

安全部署

私有环境交付，核心数据保持域内流转

SECURE
+
04

持续运营

效果评估、流程优化与业务能力迭代

ACTIVE
- - -
+ - -
-
- 业务范围 -

全方位AI解决方案

-

从标准化AI产品到定制化开发，我们提供覆盖智能对话、音频生成、模型优化与私有部署的一站式服务。

-
-
💬

智能对话助手

基于大语言模型构建智能对话系统，支持多轮交互、知识库问答、情感识别，可广泛应用于客服、办公、教育等场景。

-
🎧

企业智能客服

为企业量身打造AI客服解决方案，覆盖售前咨询、售后支持、工单处理全流程，显著降低人力成本，提升客户满意度。

-
🎵

AI音频生成

利用先进的语音合成与音频生成技术，支持多语种、多风格的语音内容产出，适用配音、播报、数字人等多元场景。

-
🔧

垂类模型优化

针对金融、医疗、法律、制造等行业场景进行模型微调与优化，让通用大模型真正适配垂直业务需求。

-
📊

企业业务智能升级

将AI能力深度融入企业现有业务流程，实现数据驱动的智能决策、自动化运营与业务创新，加速数字化转型。

-
🔒

模型私有化部署

提供安全可靠的模型私有化部署方案，确保企业核心数据不出域，满足金融、政务等高标准合规要求。

-
-
-
- - -
-
- 核心优势 -

为什么选择我们

-

多年的技术积累与项目经验，铸就了我们的核心竞争力。

-
-
🎓

顶尖团队背景

核心成员来自清北复交等名校及一线互联网大厂，研发实力与项目经验兼备。

-
📦

数据技术功底

丰富的数据治理与加工处理经验，为AI应用奠定坚实的数据底座。

-
🤝

灵活合作模式

不限行业方向，积极把握各类合作契机，保质保量完成项目落地。

-
🏢

完善服务体系

成都、海口双城布局，运营与项目服务体系成熟，响应及时高效。

-
-
-
- - -
-
- 办公场地 -

双城协同 · 服务全国

-

成都与海口两地办公，运营体系成熟完善，高效响应全国客户需求。

-
-
-

成都 · 研发中心

-

技术研发与项目交付核心基地，汇聚主力研发团队，承担AI产品研发、模型训练及项目实施工作。

-
- 研发总部 - 项目交付 - 技术支撑 +
+
+
+
02 / SOLUTIONS

让 AI 真正进入业务流程

+

从标准化产品到定制开发，以企业真实场景为起点，交付可验证、可迭代的 AI 能力。

+
+
+
+
SYSTEM / COREPRIMARY CAPABILITY
+

企业 AI 中台与智能升级

+

将知识、模型与业务流程统一编排，让 AI 能力稳定进入决策、运营、客服与内容生产环节。

+
WORKFLOWKNOWLEDGEAGENTINSIGHT
+
+
S01DIALOGUE

智能对话助手

支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。

+
S02SERVICE

企业智能客服

覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。

+
S03AUDIO

AI 音频生成

支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。

+
S04MODEL

垂类模型优化

围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。

+
S05PRIVATE

模型私有化部署

构建安全可靠的企业专属模型环境，满足核心数据不出域与高标准合规需求。

-
-

海口 · 运营中心

-

商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务对接。

-
- 商务运营 - 客户服务 - 华南区域 +
+ +
+
+
+
03 / PROOF

技术之外，更重视可靠交付

+

成熟的数据能力、跨领域团队和双城服务网络，让方案从概念验证走向长期运行。

+
+
+
P01 / TEAM

复合型核心团队

核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。

+
P02 / DATA

扎实的数据底座

长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。

+
P03 / DELIVERY

场景化项目交付

根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。

+
P04 / SERVICE

持续服务体系

成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。

-
-
-
+ - -
-
- 合作咨询 -

携手共建智能未来

-
-
-
📞
-

电话沟通

-

欢迎来电详谈合作细节

-
+86 18482223118
+
+
+
+
04 / DELIVERY NETWORK

双城协同，服务全国

+

研发、交付、运营与客户服务相互协同，让项目推进保持清晰节奏与稳定响应。

+
+
+
+
30.5728° N · 104.0668° EONLINE
+

成都 · 研发中心

+

技术研发与项目交付核心基地，承担 AI 产品研发、模型训练、系统集成与项目实施。

+
研发总部项目交付技术支持
+
+
+
20.0440° N · 110.1999° EONLINE
+

海口 · 运营中心

+

商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。

+
商务运营客户服务华南区域
+
+
-
-
-
- +
+ +
+
+
+
+
05 / START A PROJECT

从真实业务场景开始

+

告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。

+
+
+
CHANNEL / PHONE

电话沟通

+86 184 8222 3118
+
CHANNEL / EMAIL

邮件咨询

chermack@163.com
+
CHANNEL / WECHAT

微信联系

来电或邮件后获取微信，添加时请备注“商务合作”
-

微信联系

-

欢迎添加微信沟通

-
- 微信二维码 -
二维码图片
将 qrcode.png 放入项目文件夹
-
-
-
-
📧
-

邮件咨询

-

发送您的需求至对接人邮箱，我们将在24小时内与您取得联系。

-
chermack@163.com
+
+
+ + - - + + }, { threshold: .12, rootMargin: '0px 0px -40px' }); + document.querySelectorAll('.reveal:not(.is-visible)').forEach(function (element) { revealObserver.observe(element); }); + } else { + document.querySelectorAll('.reveal').forEach(function (element) { element.classList.add('is-visible'); }); + } + if (!reduceMotion && window.matchMedia('(pointer: fine)').matches) { + const hero = document.querySelector('.hero'); + let frame; + hero.addEventListener('pointermove', function (event) { + if (frame) cancelAnimationFrame(frame); + frame = requestAnimationFrame(function () { + const rect = hero.getBoundingClientRect(); + hero.style.setProperty('--pointer-x', ((event.clientX - rect.left) / rect.width * 100).toFixed(1) + '%'); + hero.style.setProperty('--pointer-y', ((event.clientY - rect.top) / rect.height * 100).toFixed(1) + '%'); + }); + }); + } + + let savedLang = 'zh'; + try { savedLang = localStorage.getItem('site_lang') || 'zh'; } catch (error) { /* Storage may be disabled. */ } + applyLanguage(savedLang); + document.getElementById('year').textContent = String(new Date().getFullYear()); + navbar.classList.toggle('scrolled', window.scrollY > 24); + })(); + diff --git a/科技感官网改造研究.md b/科技感官网改造研究.md new file mode 100644 index 0000000..0acad0a --- /dev/null +++ b/科技感官网改造研究.md @@ -0,0 +1,181 @@ +# Roncarve 官网科技感改造研究 + +> 研究对象：`index.html` 当前单文件静态官网 +> 目标：在保持企业可信度和信息可读性的前提下，提升科技感、现代感与品牌辨识度。 +> 研究日期：2026-08-13 + +## 一、结论先行 + +当前页面已经具备深色 Hero、蓝青渐变、点阵/网格背景、玻璃拟态导航和基础滚动交互，因此下一步不应继续堆叠发光、渐变和动画，而应建立一套更统一的“数据与 AI 基础设施”视觉叙事：让每个视觉效果都服务于内容、产品能力或用户行动。 + +最值得优先改造的方向是： + +1. 将首屏从“宣传口号 + 装饰背景”升级为可理解的 AI / Data 系统可视化场景。 +2. 用更有辨识度的字体、数字、状态标签、坐标/节点/数据流等设计 token，形成品牌语言。 +3. 用滚动触发的分层揭示、卡片 hover 状态和轻量粒子/流光表达“系统在运行”，但限制动画在 `transform` 和 `opacity` 上。 +4. 强化移动端、键盘焦点、对比度和 `prefers-reduced-motion`，否则科技感会以可用性为代价。 + +## 二、对当前 `index.html` 的快速诊断 + +### 已有优势 + +- 深色 Hero 和蓝 / 青 / 紫渐变已经建立了 AI 产品常见的技术语义。 +- `backdrop-filter`、网格背景、渐变文字和 pulse 动效可作为视觉基础。 +- 页面结构清晰，包含 Hero、关于、服务、优势、办公室、联系 CTA，适合做叙事化改造。 +- 单文件结构便于快速试错，不需要先引入复杂框架。 + +### 主要问题与风险 + +- 当前风格容易落入“通用 SaaS / AI 模板”：深色背景、网格、玻璃卡片和蓝色按钮缺少品牌专属符号。 +- Hero 右侧视觉如果主要是静态装饰，用户无法快速理解“公司具体解决什么问题”。 +- 页面中的视觉语言还没有形成完整 token：圆角、边框亮度、光晕强度、字体层级和动效节奏可能各自为政。 +- `backdrop-filter` 兼容性虽已明显改善，但仍应提供不依赖模糊的降级样式；MDN 将其标记为 Baseline 2024，并提示旧设备可能不支持。[MDN：backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter) +- 如果继续增加粒子、视差和常驻动画，可能造成性能和眩晕问题。web.dev 建议优先动画 `transform` / `opacity`，避免频繁改变布局和绘制属性。[web.dev：Animations and performance](https://web.dev/articles/animations-and-performance) + +## 三、让官网更具科技感的设计方法 + +### 1. 建立“技术叙事”，而不是只做装饰 + +科技感的核心是让用户感受到系统、连接、数据和实时状态。建议把抽象能力改成可视化表达： + +- 数据治理：数据节点、校验状态、流向、分层标签。 +- LLM / AI：输入、检索、推理、输出的链路。 +- 私有化部署：本地节点、权限边界、加密状态、部署区域。 +- 企业服务：从业务问题到自动化结果的流程轨迹。 + +推荐 Hero 结构：左侧一句明确的价值主张，右侧一个“AI 数据运行台”视觉组件，包含节点连线、实时状态、指标卡和一条可控的流光路径。这样比单纯的发光球体更能证明技术能力。 + +### 2. 从“蓝色渐变”升级为可识别的视觉系统 + +建议定义一组 CSS variables： + +- 基底：`--ink-950`、`--ink-900`、`--surface-800`，避免所有区域都是同一块黑。 +- 强调色：保留青蓝作为主色，再加入一个克制的紫色或酸性绿色作为“状态色”，不要平均使用。 +- 边框：使用低透明度白色边框，重要组件使用单侧高亮或渐变边框。 +- 光效：将 glow 分成 `ambient`、`interactive`、`status` 三档，避免全页面发光。 +- 圆角：Hero 主组件、内容卡片、标签、按钮使用不同半径，形成层级。 + +视觉原则是“暗底 + 高亮信息 + 大面积留白 + 少量精确光效”，而不是“每个元素都发光”。 + +### 3. 增加“工程界面”细节 + +可在不影响阅读的前提下加入： + +- `SYSTEM ONLINE`、`MODEL READY`、`PRIVATE DEPLOYMENT` 等状态标签。 +- 章节编号、坐标标记、细分隔线、数据单位和微型指标。 +- 卡片顶部的状态灯、右上角的版本号、底部的连接线或进度条。 +- 以等宽字体展示少量技术元信息；正文继续使用易读的中文无衬线字体。 + +这些细节应承担“可信度”和“结构感”，不应伪造真实监控数据。若指标没有数据来源，使用能力标签或示意状态，不要使用容易被理解为真实业务数据的数字。 + +### 4. 使用更现代的版式节奏 + +- Hero 采用不对称布局：文字约 42%，可视化约 58%，制造“控制台 / 系统入口”的感觉。 +- 服务区从六张同质卡片改成“1 个主能力 + 5 个辅助能力”，突出核心业务。 +- 关于区加入一条横向能力链：Data → Model → Deploy → Operate。 +- 办公室区可采用地图 / 节点式布局，但地图只作为辅助，重点放在服务覆盖和交付能力。 +- CTA 避免再次重复泛化口号，改成明确动作，例如“预约一次 AI 场景诊断”。 + +## 四、推荐的交互与动效方案 + +### 优先级 A：低成本、高收益 + +- 首屏进入：文字、可视化面板、背景光分别以 80–160ms 的错峰淡入和轻微位移出现。 +- 服务卡片 hover：边框亮度、顶部状态线、图标或节点路径发生变化。 +- 滚动进入：章节标题和卡片使用 `IntersectionObserver` 添加一次性 reveal class。 +- 导航滚动：保留毛玻璃，但增加当前章节的高亮轨迹或底部指示线。 +- CTA hover：按钮出现短距离光扫或边框流动，不要无限循环。 + +### 优先级 B：现代感增强 + +- 使用 CSS `scroll-timeline` / `view-timeline` 做轻量滚动进度、节点连线或卡片揭示，并为不支持的浏览器保留普通静态布局。web.dev 明确提示 View Transitions 尚未在所有浏览器中 Baseline，必须准备无动画回退。[web.dev：View transitions for SPAs](https://web.dev/learn/css/view-transitions-spas?hl=en) +- 使用鼠标位置驱动 Hero 光晕或网格偏移，但限制在 Hero 内，移动端关闭。 +- 用 SVG 或 CSS 绘制节点、连线和波形，优先于加载大型视频或 3D 库。 + +### 不建议一开始使用 + +- 全屏 WebGL / Three.js 粒子场：视觉吸引力强，但开发、移动端性能和可访问性成本高。 +- 自动播放背景视频：加载成本高，容易掩盖内容，也需要处理静音、暂停和低带宽。 +- 大量视差、快速闪烁、持续旋转：会分散注意力，且可能触发眩晕。 + +## 五、推荐技能与工具 + +### 适合本项目的 Codex skills + +1. `product-design:index`：作为产品设计任务路由，帮助明确视觉目标和改造范围。 +2. `product-design:ideate`：在正式改代码前生成 3 个视觉方向，例如“AI 控制台”“数据流网络”“极简企业科技”。适合比较整体风格，而不是直接凭文字猜方案。 +3. `product-design:image-to-code`：如果选定了截图或生成的视觉参考，可将其转成响应式 HTML/CSS/JS。 +4. `product-design:audit`：改造后通过截图检查层级、可读性、交互反馈和无障碍问题。 +5. `imagegen`：仅用于生成 Hero 的抽象背景、技术纹理或产品概念图；UI 中的节点和状态面板应优先使用 HTML/SVG，确保可读、可控和可访问。 +6. `browser:control-in-app-browser`：启动本地页面后检查桌面与移动端的真实渲染、滚动行为和交互状态。 +7. `visualize`：如果要向团队展示数据流、AI 推理链路或部署架构，可制作可交互的说明图，而不是把所有信息塞入官网装饰。 + +### 推荐的前端实现工具 + +- 原生 CSS variables、CSS Grid、SVG：最适合当前单文件架构，依赖少、性能可控。 +- `IntersectionObserver`：做滚动入场，不必引入完整动画库。 +- CSS `@property`、mask、conic-gradient：制作进度环、扫描线和渐变边框。 +- 需要复杂动画时再考虑 GSAP；需要真实 3D 场景时再考虑 Three.js，二者都应先做移动端性能验证。 +- Lighthouse / Chrome DevTools Performance：验证动画帧率、LCP、布局抖动和移动端 CPU 压力。 + +## 六、性能与无障碍底线 + +- 动画优先使用 `transform` 和 `opacity`；避免持续动画 `width`、`height`、`top`、`left`、大面积 `filter`。 +- 不要滥用 `will-change`，只在确实需要提升的交互元素上使用。 +- 增加 `@media (prefers-reduced-motion: reduce)`，关闭粒子、视差、扫描线和大幅位移动画。MDN 和 W3C 都将该媒体查询作为减少动画影响的推荐做法。[MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)、[W3C Technique C39](https://www.w3.org/WAI/WCAG22/Techniques/css/C39) +- 文本、按钮和状态标签要保持足够对比度。WCAG 2.2 对普通文本通常要求至少 4.5:1，并新增了更明确的 Focus Appearance 指引。[WCAG 2.2](https://www.w3.org/TR/WCAG22/) +- 所有发光按钮都要有清晰的 `:focus-visible` 状态，不能只依赖颜色变化。 +- 移动端关闭鼠标跟随、降低背景复杂度、减少 `backdrop-filter` 层数，并保证内容在低端设备上仍然可读。 +- 为 `backdrop-filter` 提供纯色半透明背景回退，例如 `background: rgba(8, 15, 30, .92)`。 + +## 七、建议的分阶段实施路线 + +### 第一阶段：视觉基础（半天至 1 天） + +- 修正页面中文编码和标题文案。 +- 重构颜色、间距、圆角、边框和阴影 token。 +- 统一按钮、标签、卡片和章节标题的组件样式。 +- 优化 Hero 信息层级和 CTA 文案。 + +### 第二阶段：科技叙事（1–2 天） + +- 将 Hero 右侧改为 HTML/SVG 的 AI 数据运行台。 +- 把服务卡片重组为“核心能力 + 能力链”。 +- 增加状态标签、章节编号、能力流程和可信的业务信息。 + +### 第三阶段：轻量动效（半天至 1 天） + +- 增加 IntersectionObserver reveal。 +- 增加卡片 hover 状态、节点流光和 CTA 微交互。 +- 增加 reduced-motion、移动端降级和浏览器兼容回退。 + +### 第四阶段：验证与打磨（半天） + +- 以 375px、768px、1440px 三个宽度检查布局。 +- 用键盘完成导航、按钮和语言切换操作。 +- 检查 Lighthouse、控制台错误、动画帧率和首屏加载。 +- 截图进行一次视觉审查，确认效果服务于内容，而不是遮挡内容。 + +## 八、推荐的改造方向 + +我建议当前官网优先采用“AI Data Control Room / AI 数据控制台”方向： + +- 主色：深靛黑 + 电光青 + 少量紫色状态色。 +- Hero：左侧价值主张，右侧数据节点 / 模型状态 / 私有部署边界。 +- 内容：以 Data → Intelligence → Deployment → Operations 作为主叙事。 +- 动效：节点连接、状态更新、滚动揭示和局部光扫。 +- 质感：少量玻璃、细边框、等宽技术标签、大留白、明确层级。 +- 约束：不依赖大型图片或 WebGL；全部视觉核心使用 HTML/CSS/SVG 实现。 + +这个方向与当前页面已有的深色、蓝青渐变和 AI 业务内容衔接成本最低，同时比通用网格背景更容易建立品牌记忆点。 + +## 参考资料 + +- [MDN：backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter) +- [web.dev：Animations and performance](https://web.dev/articles/animations-and-performance) +- [web.dev：prefers-reduced-motion](https://web.dev/articles/prefers-reduced-motion?hl=en) +- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion) +- [W3C：Using the CSS prefers-reduced-motion query](https://www.w3.org/WAI/WCAG22/Techniques/css/C39) +- [W3C：WCAG 2.2](https://www.w3.org/TR/WCAG22/) +- [web.dev：View transitions for single-page applications](https://web.dev/learn/css/view-transitions-spas?hl=en) +