网站结构图

打开任何一个网站,网站你看到的结构只是冰山一角。水面下那套骨架——网站结构图——才决定了你能否找到想要的网站东西。我见过太多人把精力砸在首页视觉上,结构结果用户点进第三层就迷路了。网站结构图不是结构画给老板看的装饰品,它是网站导航的底层逻辑。

拿我常逛的结构一个独立书店网站举例。首页顶部横着一条导航:新书、网站分类、结构作者、网站活动、结构关于。网站点“分类”,结构出来文学、网站历史、科技、艺术四个入口。再点“文学”,下面按小说、诗歌、散文、评论排开。每个页面左上角都挂着面包屑——首页 > 分类 > 文学 > 小说。你随时知道自己在哪,也能一步跳回任意层级。这就是典型的层级结构,像一棵倒长的树,根在首页,枝叶是具体内容页。

但层级不是唯一解。有些网站用线性结构,比如注册流程:填邮箱→验证→设密码→选偏好。每一步只有一个出口,逼着你往前走。电商的结账页也这样,购物车→地址→支付→确认,中间想跳回去改数量?得,给你个“返回”按钮,但主路径永远是单线。这种结构适合任务明确的场景,用户不需要思考“我还能去哪”,只管完成当前动作。

更野的是网状结构。维基百科就是典型。你从“咖啡”词条能跳到“咖啡因”,再跳到“腺苷受体”,再跳到“神经递质”。没有固定层级,全靠超链接织成一张网。好处是探索性强,坏处是容易迷路——我经常开着二十个标签页,忘了最初想查什么。所以维基加了侧边栏目录和“随机条目”,算是给网状结构打了个补丁。

说个我自己的观察。很多企业官网喜欢把结构图做得又深又宽。首页放八个一级栏目,每个栏目下再塞十来个二级页。用户点三次才能找到联系电话。后来他们把“联系我们”直接提到顶部导航右侧,用醒目的橙色按钮。跳出率立刻降了一截。结构图不是越对称越好,关键路径要短。重要页面别超过三次点击,这是铁律。

画结构图的时候,我习惯先拿张纸,把用户最常做的三件事写下来。比如“查订单状态”“找退货政策”“看新品”。然后倒推:这些页面应该出现在哪一层?哪些入口能直达?再拿不同颜色的笔标出导航路径。你会发现,有些页面根本不需要出现在主导航里,它们藏在页脚或者搜索框后面更合适。结构图不是把所有页面都摆出来,而是决定谁站在聚光灯下,谁退到幕后。

移动端又不一样。手机屏幕窄,横向导航塞不下五个以上的选项。汉堡菜单把层级压扁,但用户点击成本变高。我测试过几个购物App,把“分类”从底部标签栏移到首页中部,用图标加文字的方式平铺。结果点击率涨了百分之三十。结构图在移动端更像一张地图,你得让用户一眼看到几个主要地标,而不是逼他们一层层钻抽屉。

最后说个反例。有个内容网站把文章页和栏目页做成同一个模板,结构图上看起来整整齐齐。但用户点进一篇文章,侧边栏推荐的是同栏目的其他文章,而不是相关话题。结果读完一篇就跳走了。后来他们把推荐逻辑改成基于标签的网状关联,停留时间翻倍。结构图不只是页面之间的链接关系,它还藏着内容之间的语义关系。

下次你打开一个网站,别急着看设计。先找找它的结构图——可能在页脚,可能在“网站地图”链接里。看看从首页到最深的内容页要几步。如果超过四步,大概率这个网站没想清楚用户到底要什么。