意町设计官网 v2
案例项目   /   品牌与空间   /   意町设计官网 v2

意町设计官网 v2

动效驱动的工业设计品牌官网:片头字标、滚动驱动的 3D 产品拆解、ASCII 序列帧与共享元素转场。

案例基础信息

Industry

品牌与空间

Project Type

品牌官网与动效设计

项目内容

MOTION-LED STUDIO WEBSITE

意町设计官网 v2 想回答一个问题:工业设计公司的价值,怎样在网页里被"感受到",而不只是被"读到"。我们把动效当作解释产品的方式,而不是装饰。

首页以 6 秒 Canvas 片头开场,真实案例图由慢到快硬切,收束为 IDING 字标;随后是一段 580vh 的滚动场景,实时 WebGL 渲染的 AMR 航空物流机器人依次呈现完整体量、正面特征、结构层次与侧面体量,每个阶段对应一个设计判断。

案例与观点页首屏用 ASCII 字符重建序列帧图像;案例卡片点击后原地展开为详情页;关于页以计数器式的数字滚动讲述 19 年。

整站只用深灰、米白、面板灰与信号绿四种颜色,搭配 Plus Jakarta Sans 与思源黑体;中英双语与移动端共享同一套版式与动效。

官网动效展示(有声)
片头定格为荧光绿 IDING 字标与首屏文案
片头阶段真实案例图满屏硬切
IDING 字标以案例图为遮罩逐渐显现
AMR 机器人结构层次沿受控路径展开
AMR 机器人以四分之三视角呈现完整体量
AMR 机器人侧视图呈现整机体量关系
案例页首屏以 ASCII 字符重建的维特鲁威人
观点页首屏以 ASCII 字符重建的老式相机
关于页首屏的巨型滚动数字 19
由案例卡片展开的负山兽外骨骼详情页首屏
案例列表页的卡片网格
首页精选案例区
官网视觉系统的四种颜色与两套字体
首页服务区的编辑式版面
首页观点区文章列表
观点文章详情页首屏
合作咨询页首屏与园区航拍
移动端首页、3D 场景、案例、观点与关于页
负山兽外骨骼

下一个案例 / 点击进入

案例项目   /   工业装备与机器人   /   负山兽外骨骼

负山兽外骨骼

负山兽外骨骼:高效助力下肢,减轻负荷,提升搬运物流消防效率。

CONTACT