ONEW × 眺月科技｜为跳跃机器人设计官网

SELECTED WORK / 品牌网站案例

CLIENT / 项目品牌

眺月科技 HOPTO　/　中英双语品牌官网

眺月科技官网首页 / HOP-1 产品近景

PROJECT SCOPE / 项目工作

ONEW 负责网站策划、视觉设计、交互与开发。项目按中英双语规划，以英文为主要表达。

HOP-1 的外形很特别，但一张静态产品图，还不足以介绍它。旋翼、支撑结构，以及它们如何配合运动，需要放在一起理解。

我们为眺月科技设计官网时，首先考虑的就是这些信息应该怎样出现。对于第一次接触产品的人，运动演示能帮助他们建立认识；对于科研人员、技术团队和潜在合作方，演示之后还需要技术说明、产品资料与研发背景，支持进一步判断。

因此，首页的滚动交互承担了具体的介绍任务：产品进入画面，技术特点逐步展开，再连接到 HOP-1 的型号和详情。每一段内容出现的位置，都与前面的画面有关系。

黑白灰的视觉方向，也让结构、材质和运动本身有了更多表现空间。后面的设计细节，就从这里展开。

/ WATCH THE EXPERIENCE

HOPTO × ONEW

首页滚动交互、产品介绍与预订路径的完整演示。

首页从产品近景展开。旋翼、连接结构、碳纤维纹理和机身表面占据主要画面，简短的介绍点明产品的运动特点。我们保留了观察细节的时间，也为后面完整形态的出现留下对比。

向下滚动时，机器人由画面一侧进入中心，技术说明逐步出现，再接到 HOP-1 的型号与详情入口。产品位置、画面距离和信息量随介绍进度一起变化。访客在这段过程中认识产品，滚动交互也因此有了具体的内容任务。

HOP-1 的完整形态、型号与详情入口。

自由落体、被动回弹、单点落地等名称，对专业人员是明确的技术线索；第一次接触这类产品的人，则需要画面作为参照。我们把机器人留在中心，将四组图标、名称和简短说明安排在两侧，让图文保持在同一个视野里。

这个板块控制了说明的长度，便于访客先建立对技术特点的整体认识。需要进一步评估时，尺寸、重量、运动表现和续航等资料，再由 HOP-1 详情页中的 Technical Specifications 逐项展开。

不同深度的信息有了各自的位置：首页提供概览，详情页保留查阅的空间。这样既照顾了初次认识产品的人，也让带着具体技术问题来的人能够找到资料。

四组技术说明围绕产品展开，名称、图标与产品保持在同一视野。

HOP-1 详情页中的规格信息，供进一步了解与评估时查阅。

简约、有未来感、以黑白灰为主，是客户最初给出的视觉方向。在这个基础上，我们主要通过光线、背景和镜头距离建立画面的层次，把注意力留给产品本身。

深色近景里，光线勾出金属边缘和碳纤维纹理；切到浅灰背景，完整轮廓与各部分的比例变得清楚。两种画面交替，让局部细节和整体形态各有展示的时间。导航与按钮采用轻巧的圆角容器，文字层级保持简洁，与产品较为硬朗的结构形成对照。

页面后段进一步呈现救援、地形测绘、星球探索等未来应用方向。我们把这些方向放在产品周围，让访客能够将前面看到的结构和运动特点，联系到更具体的使用环境。

未来应用方向围绕产品展开，为技术介绍补充具体的环境线索。

首页之后，HOP-1 页面提供产品资料，Innovation 展开技术方向，About 介绍团队与研发背景。我们把这几类信息分开，并在导航中保持清楚的入口，方便不同目的的访客按需要深入了解。

Preorder 同时出现在导航和首页后段，承接产品展示后的意向收集。表单延续整站的产品画面与视觉语言，通过姓名、联系方式和留言了解来访者的具体需求。访客可以留下应用环境、技术问题或合作想法，让后续交流有更明确的起点。

预订意向表单延续整站视觉，承接具体需求与合作咨询。

EXPLORE THE PROJECT / 访问项目

www.hoptotech.com

/ ABOUT ONEW

创意驱动数字体验，
把难讲的技术，
变成看得懂的价值。

我们从业务梳理出发，通过原创视觉、交互与技术开发，帮助企业把产品、技术和服务讲清楚，让官网拥有属于品牌自己的表达。

品牌网站策划 / 视觉设计 / 交互开发 / 多语言网站

唯一 / 新起点 / 灵感 / 一体化

/ PROJECT CREDITS

客户 / 眺月科技 HOPTO
网站策划、视觉设计、交互与开发 / ONEW