Reload —— 极简的单页体验,用 scrollTo 配合 Slide Menu 与 Tab Bar 实现顺滑导航

客户的问题

Reload 是一个单页网站:整个产品故事 —— hero、 可更换拍面的机制、control 版与 power 版、替换拍面、FAQ —— 全都在一条 长长的滚动页面上。这是一个漂亮的设计选择,也契合这个品牌的极简精神。

但对于单页结构而言,传统菜单反而是错的工具:每个菜单项都指向一个新的 URL,每一次点击都是一次页面重新加载,打断了连贯的滚动节奏。顾客也很容易 在一页很长的内容里迷失,没有办法快速跳到想看的那一部分。在移动端,读到页面底部之后 再用手往上滚回"Buy"部分,是一个很累人的操作。

Navi+ 解决了什么

提议的方向契合极简精神:只用两种菜单,而且两种都用 scrollTo 在同一页内移动,而不是加载新页面。菜单成了这个 landing 的目录 —— 轻轻一点就滑到对应部分。

不用 Desktop Mega Menu 是一个有意为之的选择:一页内容、一条滚动主线 —— 再加上 mega menu 只会破坏这份极简。对的结构,就该用对的工具。

期望达到的结果

有了 scrollTo,Reload 的导航成了单页体验的一部分,而不再打断它。 菜单是活的目录,移动顺滑,购买按钮始终距离顾客只有一点之遥 —— 而这一切都保住了品牌的极简。

• 用 scrollTo 在同一页内移动 —— 不 reload,也不丢失上下文。
• 菜单成了活的目录,帮顾客快速跳到对应部分。
• 无论顾客在页面的哪个位置,购买按钮在移动端始终一点即达。
• 完整保住极简 —— 不加多余的 mega menu 或中间页面。