< 繁星智算官网体验重塑 >

让抽象的边缘算力
成为可感知的品牌门户

基于真实业务内容,对繁星智算官网进行作品集阶段的体验重塑。通过品牌视觉、信息路径与交互动效的重新组织,让边缘算力平台从技术概念转化为更直观、可信、可探索的官网体验。

Web端官网项目品牌门户AI协作开发
繁星智算官网首屏样机

繁星官网介绍

繁星智算门户官网用于展示算力主机、算力服务、应用开发支持与硬件合作机会。作为品牌对外展示的核心入口,页面需要整合产品介绍、平台能力、开发接入和下载文档等内容,让用户能快速理解繁星智算的业务范围与服务价值。

目标用户群体:

项目职责

  • 负责官网整体视觉风格、页面排版与交互状态设计,确保页面在不同设备下保持统一体验。
  • 参与首页、算力平台、下载中心、文档中心等模块设计,并配合开发完成设计走查。

项目背景

  • 官网面向设备购买者、算力购买者、软件开发者和硬件合作伙伴,信息类型较多,需要重新梳理层级。
  • 页面承载品牌介绍、算力服务、开发接入、下载入口和文档入口,是繁星智算对外展示的核心入口。

我们要解决什么

边缘算力太抽象

用户很难直接理解分布式节点、闲置算力共享、并网计算这些技术概念。

业务关系需要被串联

家庭终端、App 管理、算力平台、开发者生态之间,需要形成连续的阅读路径。

官网需要建立信任感

B 端科技官网不仅要展示功能,也要通过规模感、秩序感和品牌调性建立可信度。

先让用户看见品牌
再理解场景
最后相信平台

我将官网的阅读路径重新组织为五个连续阶段:从首屏建立平台级品牌认知,到家庭终端场景落地,再到产品矩阵、平台数据与开发生态,逐步完成从「看见科技感」到「理解业务价值」的转化。

01
看见品牌
02
理解场景
03
产品选择
04
平台规模
05
开发生态

【 用沉浸式首屏建立边缘算力门户的第一印象 】

看见品牌

这次重塑
「展示功能」转向「建立认知」

看见品牌

看见品牌

用更强的视觉记忆点,让用户第一眼感知这是一个边缘算力平台,而不是普通科技官网。

理解业务

理解业务

把家庭终端、App 管理、算力平台、开发生态串成连续路径,降低抽象技术的理解门槛。

建立信任

建立信任

通过规模数据、秩序化布局和统一视觉系统,让官网具备 B 端科技品牌的可信感。

重新梳理
官网展示架构

基于原有业务框架,将官网阅读路径重新整理为六个连续阶段,从品牌认知到产业转化,形成完整的用户引导链路。

旧版官网
旧版官网截图
新版架构
新版官网架构图

品牌首屏

用沉浸式视觉建立边缘算力平台的第一认知层,让用户第一眼感知到科技品牌气质。

01

家庭终端场景

将抽象算力具象为家庭设备的使用场景,降低技术门槛,建立可感知的落地锚点。

02

产品矩阵

按终端类型划分产品卡,帮助用户清晰理解不同设备的使用价值与适用场景。

03

平台算力数据

通过节点规模、城市覆盖、成本数据等维度,建立平台级的规模感与可信度。

04

开发者生态

从品牌展示延伸到开发者接入,将官网从形象窗口拓展为商业转化入口。

05

产业合作与转化

以合作伙伴与案例收尾,完成从认知到信任再到行动的完整用户引导链路。

06

用视觉语言
翻译边缘算力

新官网的视觉系统不是装饰,而是转译工具——将边缘算力这个抽象概念,翻译成用户可感知的空间语言。

深色空间

深色空间

为不可见的算力网络建立空间感和平台感。

蓝色能量

蓝色能量

用渐变光效表现连接、流动与能力激活。

节点网络

节点网络

将分布式终端转译为星点、轨迹与连接关系。

玻璃卡片

玻璃卡片

在科技氛围中承载复杂信息,保持阅读层级。

第一眼
先建立平台感

边缘算力官网首屏

地球弧线

用宏观地平线建立平台尺度,暗示边缘节点汇聚成网。

业务标签

把平台能力前置,帮助用户快速理解业务范围。

双入口按钮

区分能力探索与开发者入口,让首屏转化路径更清晰。

动态流星

用划过的光点轨迹模拟连接与流动,让背景像正在运行的算力网络。

关键词高亮

突出"无界算力"这一核心价值,让用户第一眼抓住重点。

繁星智算 App
承接算力主机的核心能力

通过繁星智算 App,设备管理、智能存储、轻应用和算力收益等能力被集中整合,让用户更直观地理解算力主机能做什么、又该如何使用。

繁星智算 App

官网中采用定屏滚动展示四类 App 能力。
用户向下滚动时,页面保持在同一视口内,左侧文案与右侧手机界面同步切换,避免一次性堆叠过多功能信息,也让主机能力的理解过程更连贯。

滚动定屏状态切换
设备智控
智能存储
轻应用
算力收益

中国移动 -- 终端产品展示

< 让不同主机的定位更清晰 >

在产品展示部分,没有把设备简单平铺,而是通过产品组图、主次卡片和场景标签,区分不同算力主机的定位,帮助用户快速理解每类设备适合的使用需求。

产品组图

建立终端家族感,先让用户感知这是多种主机形态。

主次卡片

用一张主卡和两张辅助卡区分产品重点。

场景标签

用短标签提示存储、影音、轻部署等使用方向。

中国移动终端产品展示

平台算力网络
连接供给与需求

前面是面向 C 端用户的终端与 App。这一段转向平台层——向企业客户和开发者说明,繁星智算不只是硬件终端,背后还有一套边缘算力网络和平台服务能力。

平台算力网络规模

从终端走向平台

前面几屏介绍主机和 App,这一屏开始说明繁星智算背后还有平台级算力服务。

用规模数据建立信任

比起长篇介绍,在线节点、覆盖城市和成本降低这三个数据,更容易让用户快速判断平台是否可靠。

给开发者和企业继续入口

按钮引导到算力服务和开发文档,让官网从展示产品继续走向服务接入。

开发接入模块
把平台服务拆成可接入的功能

上一屏用数据说明平台具备规模,这一屏则把平台能力拆成更具体的接入方式。通过右侧信息卡展示分布式并网计算、轻应用开发和硬件接入等内容,让开发者知道平台能力不只是展示,而是可以被部署和调用。

左右分屏

左侧负责表达连接关系,右侧负责解释能力内容,让画面既有科技感,也能承载具体信息。

白色内容卡

用浅色卡片承载文字说明,降低阅读压力,也和前面连续的深色页面形成节奏变化。

能力条目化

在展示上将复杂的平台能力拆解成几条,让用户快速理解平台能提供什么。

蓝色背景转折

用蓝色背景区分前面的深色模块展示,点阵和箭头纹理补充节点连接与能力流动的感觉。

产业合作展示
补充平台的行业信任感

这一屏用合作伙伴和产业链资源为前面的产品能力、平台服务和开放接入做补充背书。相比继续堆叠功能介绍,Logo 矩阵能更直接地传达平台已经具备合作基础,也让页面从技术能力过渡到品牌信任。

合作伙伴背书

用合作伙伴和产业链资源,补充平台的行业信任感和稳定的背书,为更多合作转化做铺垫。

浅色区域过渡

从前面的深色科技页面切换到浅色区域,让 Logo 更清晰,也让长页面节奏放松下来。

页尾联系入口

在合作展示后承接联系和咨询入口,让用户看完官网后有明确的下一步。

设计元素落地

交互与视觉细节

这一部分补充展示按钮反馈、流星动效和局部蓝色光效,让页面在静态展示之外,也保留更完整的操作反馈和科技氛围。

视觉细节 02

蓝色光效作为网站中的主要视觉线索,出现在首屏、按钮、产品展示和页尾等关键位置。它既用于引导视线,也帮助页面在深色背景中建立统一的科技感,强化繁星智算关于边缘算力与数据流动的整体印象。

繁星智算门户官网

页面最终展示

基于前面的信息梳理和视觉重构,最终将官网首页整理成一条从平台认知、产品理解到服务接入的完整浏览路径。

https://www.starrycfn.com/
繁星智算门户官网页面最终展示