大多数店主尚未应对的移动流量现实
Shopify发布了平台级的流量来源数据,过去四年来一致的发现是:超过70%的Shopify店铺前端流量来自移动设备。对于社交媒体营销活跃的店铺,这一数字经常超过80%。看到您Instagram短视频、点击进入产品页面并浏览您店铺的访客,几乎总是在使用手机,而不是桌面电脑。
然而,大多数Shopify店铺的导航仍然是以桌面端交互模式为核心设计的:水平顶部导航栏配合鼠标悬停触发的下拉菜单、打开侧滑菜单的汉堡图标,以及优先考虑全面性而非拇指可及性的分类结构。这些都是桌面端的设计模式。它们在手机上勉强可用——但"勉强可用"并非最优秀的店铺所追求的标准。
桌面优先导航(在手机上勉强可用)与移动优先导航(在手机上真正出色)之间的差距,不是一个小小的设计细节。这是访客两次点击就能找到所需内容,与访客在与微型汉堡菜单和需要过多交互才能到达商品分类的折叠导航搏斗后放弃离开之间的差距。流失是无声且永久的——访客不会告诉您他们为什么离开。
"我们把整个店铺重新设计了两次——新主题、新图片、新文案——但移动端转化率几乎没有变化。当我们最终专注于移动导航,并使用Navi+添加了Tab Bar之后,第一个月移动端转化率就提升了23%。店铺其他部分没有任何改变。只有导航。"
— Navi+客户,服装品牌
真正移动优先的导航是什么
移动优先导航不仅仅是能在小屏幕上正确显示的导航。任何响应式主题都能做到这一点。移动优先导航是围绕人们实际如何使用手机来设计的:单手持握、主要用拇指导航,主力手拇指的触达范围无法延伸到屏幕的顶部角落。
在单手持握的标准智能手机上,屏幕左上角和右上角是无需改变握持方式最难够到的区域。而这恰恰是大多数Shopify主题放置导航的地方——左上角的汉堡图标、右上角的搜索图标和购物车。每一次导航操作都需要换手或者用第二只手。对于随意浏览的访客来说,这产生了不会被有意识注意到但在整个会话中不断积累的摩擦。
真正移动优先的导航将主要导航控件放置在拇指的自然弧线范围内。屏幕底部——特别是固定的Tab Bar——是手机上人体工学最易触达的区域。应用设计师十多年前就已理解这一点,这正是每一款主流移动应用(Instagram、TikTok、Gmail、Apple Maps)都将底部Tab Bar导航作为主要导航范式的原因。采用同样模式的电商店铺,是在借鉴购物者已经熟知且习惯的交互模式。
移动优先导航栈的组成要素
完整的移动优先导航方法需要解决购物体验的多个层面:
主要目的地的Tab Bar。 屏幕底部始终可见的五个槽位,涵盖最高频访问的目的地:首页、商店/分类、搜索、新品或促销、以及购物车。每位访客无需改变握持方式,就能从店铺任何页面用单次拇指点击到达这些目的地。
完整目录访问的侧滑菜单。 当访客需要导航到特定分类时,从左侧边缘滑出、通过拇指友好的触发点打开的滑动菜单可覆盖完整的目录深度。菜单应以大触控目标打开——按平台指南最小44px点击高度——并避免在触摸屏上不可用的悬停触发下拉菜单。
高优先级单一操作的FAB。 位于右下角(拇指最自然的触达点)的悬浮操作按钮,为一个高优先级目的地创建持久且随时可访问的快捷入口:当前促销活动、畅销品合集或转化率最高的分类。FAB无需任何导航步骤——从任何地方一次点击即可。
| 导航模式 | 桌面优先默认 | Navi+移动优先 |
|---|---|---|
| 主导航位置 | 顶部栏,手机上难以触达 | 底部Tab Bar,拇指可及 |
| 菜单打开触发方式 | 顶角汉堡图标 | 符合人体工学的位置,大触控区域 |
| 持久快捷访问 | 无——必须从顶部导航 | 右下角FAB,始终可见 |
| 购物车访问 | 仅右上角 | Tab Bar槽位,任何地方一次点击 |
移动导航作为竞争优势
在移动端胜出的店铺,不仅仅是拥有更好产品或更低价格的店铺——而是那些在手机上购物体验真正愉快的店铺。在同一商品分类可从数十家店铺购买的市场中,用户体验是差异化因素。认为您的店铺在手机上导航流畅无阻的访客,更有可能完成购买、更有可能再次光临、也更有可能向他人推荐您的店铺。
Navi+只需几分钟即可安装,并为任何Shopify主题添加完全可配置的移动Tab Bar、侧滑菜单和FAB。配置通过Navi+管理界面完成——无需代码修改、无需主题编辑、无需开发人员。移动优先导航在您决定投入的当天下午就可以投入使用。