一位做工业阀门的客户愁得不行：他们有十一个大类、六十多个子类，电脑上下拉菜单轻轻松松，手机上缩成三条横线，点开是一长串小字列表，访客找不到「球阀」在哪，直接退出。他把问题甩给我：响应式网站设计是不是处理不了这么多分类？能处理，但得换个思路。导航这东西，电脑端和手机端从来就不该是一回事。
别把电脑导航原样搬进手机
手机屏幕就这么大，塞十一个分类就是自找麻烦。移动端导航的第一原则是做减法：高频的三五个入口留下，其余收进分类页。汉堡菜单可以用，但要配一个做得像样的展开面板——分类间距拉开、带小图标、热门类目置顶。很多网站的汉堡菜单点开就是一坨纯文字列表，等于没做。展开速度也得快，转圈超过一秒客户就开始烦躁，别用花哨的动画拖慢它。
三个实用的处理方案
- 首页即目录：手机端首页直接做成分类宫格，每个大类配一张缩略图加一句话说明，点进去再展开子类。工业品类网站用这招效果最好，客户一步就摸到自己的目标。
- 搜索前置：搜索框提到导航栏显眼位置。工业品的客户很多是带着型号来的，直接搜比翻分类快得多。搜索结果页也要做移动端适配，别搜到了点进去又是一团乱。
- 两段式导航：顶部固定「产品」一个主入口，点开是独立的产品分类页，层级清清楚楚，比在一屏里硬塞强十倍。
顺带一句，分类命名在手机上要短。电脑上写「不锈钢精密铸造阀门系列」，手机上请改成「精密铸造」，全称放进分类页。
改完之后验证两件事
一是找几个完全不懂产品的朋友，让他们在手机上找到指定产品，看几步能到、卡在哪；二是看后台的搜索词和分类点击数据，客户真实想找什么，数据会告诉你。这两件事做完，导航该留什么、该砍什么，一目了然。导航不是你公司的组织架构图，是客户找货的路线图，路线图画对了，客户才愿意沿着走下去。
品类多的工厂做手机端，最值钱的一步是先做分类梳理，再动手设计。比格网络做响应式网站设计项目时会先帮客户把产品树理顺，这一步做扎实了，后面不管电脑还是手机，导航都不用返工。
