移动端目录页怎么排：单列、双列、宫格与折叠粒度的取舍

目录站的流量大头在移动端，这早就不是秘密。但很多站长的目录页还是按 PC 思路排的：一张长列表塞几十个条目，手机上滑半天也到不了底。这篇讲讲移动端目录页的几种排法，以及折叠到什么粒度比较合适。

图片来源：网络，版权归原作者所有，侵权请联系删除

三种布局，各有各的活法

手机上排目录条目，常见的就三种：单列、双列、宫格。

单列适合条目带说明文字的站。每行一个条目，图标加标题加一句描述，信息完整，但一屏只能放四五个，翻页翻得人心累。收录类目录、带审核评语的站多用这种。

双列是折中方案。标题和图标保留，描述砍掉或者缩成一行。一屏能放八九个，阅读压力也不大。综合类导航站用得最多。

宫格只放图标和短标题，一屏十几个起步。适合条目名字本身就够短、用户靠认图标找站的场景，比如工具导航。缺点是标题一长就截断，用户根本不知道这条链去哪。

我的建议是看条目的"辨识成本"。用户看到标题就知道是什么站的，用宫格没问题；需要一句描述才能判断的，老老实实单列或双列。为了塞更多条目把说明全砍了，点进来的用户发现货不对板，跳出率会教做人。

折叠粒度：按分类折，不按屏幕折

折叠是移动端目录页的必修课，但折到多细很有讲究。

比较靠谱的做法是按一级分类折叠，每个分类默认显示前几条，剩下的收进"展开更多"。这样用户扫一遍页面就能建立整站的心智地图，也知道该去哪找。

两种反例都见过：

• 完全不折叠，首页从 A 排到 Z，几千条目一泻千里。抓取没问题，但用户停留短、跳出快，百度落地页体验评分也难看。
• 折叠太狠，每个分类只露两三条，用户要点的次数太多。每多一次点击就流失一批人，移动端尤其明显。

折叠本身不影响 SEO，但折叠之后的条目链接如果是 JS 动态插入的，蜘蛛可能抓不到。做折叠时确认两件事：条目链接写在初始 HTML 里，而不是等点击才加载；"展开更多"用真实的锚点链接，别用纯点击事件。

点击热区别抠门

手指点击的容错比鼠标低得多。苹果的人机界面指南建议可点击区域不小于 44×44pt，安卓的材料设计也是 48dp 上下。条目行整行可点，别只让标题文字可点——手机上精准戳中一行 14px 的链接，对很多人来说挺折磨的。

相邻链接之间留出间距，避免误触。导航站页面里密密麻麻全是链接，误触的代价是用户进了一个不想去的站，再返回，这个来回在百度和谷歌看来都是负面信号。

适配别只做一半

最后提醒一个常见翻车点：PC 页面缩放糊弄。有的站移动端就是 PC 页面等比缩小，字号 10px 以下，按钮挤成一团。百度移动搜索明确要求落地页必须是移动页或自适应页，PC 页缩放这种属于会被点名整改的类型。要么做自适应，要么单独出移动版并提交适配关系，二选一，别赌搜索引擎看不出来。

移动端目录页没有多玄的技术，布局选对、折叠按分类走、热区放大、链接留在 HTML 里，这四件做完，移动端体验分基本就稳了。