JULI.M 设计一个面向俄罗斯市场的电动车租赁解决方案网站。整体采用浅色商务风 + 科技蓝强调色,通过动态流程图、实时数据可视化和精心设计的微交互来体现专业感与科技感。
我根据 JULI.M 俄语网站开发思路文档,构建了一个完整的高端商务风网站,主要亮点:
设计风格
- 浅银灰底色 + 科技蓝(#0046FF)强调色,避开默认蓝紫色调
- 使用 Unbounded 作为俄文展示字体 + Onest 作为正文,完整支持西里尔字母
- 全站采用网格背景 + 噪点叠加,营造科技感
核心模块
- 导航栏:滚动时变玻璃态背景,包含「Для курьеров / Для бизнеса」双入口按钮
- Hero 区:大标题 + 三个浮动的 APP 卡片(Курьер X / Fleet X / Charge X),每张卡片展示真实界面数据,并带计数器动画
- 信任背书:Яндекс Еда、ВкусВилл、Самокат、Дептранс 等合作伙伴 Logo 跑马灯
- 系统流程图:5 节点动态流程图(Транспорт → IoT → Приложение → Сервер xDevice → ЕРНИС),点击节点查看详情,5 秒自动轮播,SVG 流线动画
- 核心优势:4 张卡片,安全 / 合规 / 效率 / 本地化
- 产品中心:6 款硬件产品(电动自行车、电动摩托车、电池、换电柜、IoT 控制器、充电柜),用 SVG 自绘的产品图,悬停微交互 + 电池进度条,支持分类筛选
- 三大 APP 展示:Tab 切换 + iPhone Mockup,每个 APP 有专属的手机界面内容
- 双入口:「Для курьеров」浅色卡 + 「Для бизнеса」深色卡形成强对比
- 资费 + 实时计算器:滑块选择数量、切换日 / 周 / 月,实时计算总价
- 合规专区:深色背景,4 项合规要点 + 莫斯科实时地图(脉冲点动画)
- FAQ:6 个高频问题折叠面板
- 联系表单:成功提交后显示绿色确认消息
- 页脚:完整链接 + 社交按钮 + 法律信息
交互动效
- 滚动触发淡入动画(IntersectionObserver)
- 数字计数器动画
- 流程图节点点击 + 自动轮播
- 产品分类筛选过渡
- APP Tab 切换的渐变过渡
- 资费计算器实时更新
- 莫斯科地图脉冲点
- 浮动 APP 卡片循环动画
- 返回顶部按钮
- 移动端汉堡菜单