面包屑导航的阅读动线设计

同样一段文字换一类排列，理解成本会差出很多，这一点在面包屑导航上很直观。

放图片时，阅读顺序要固定下来。

面包屑导航：版面结构

放图片时，图片比例要拉开层次，整站像一套。长文建议每两到三段插一个小标题，读者可以先扫标题再确定读哪段，信息层级建议不超过三层：主标题、小标题、正文，扫读更快。接着，按钮文案建议写动作，例如获取方案、查看案例，比了解更多更容易让人点下去，风格不走样。

看数据时，一级标题要固定下来。空状态页面给出下一步引导，别只留一句没有数据，读起来顺。

复盘改版时，链接样式这一块要固定下来。与此同时，字号与行距一起调，字小的时候行距要放开，整段才不会挤。同时，检查对比度时，图标风格这一块要统一口径。

面包屑导航：样式规范

段落长度没收敛，手机上挤成一团。配色上，主色一到两个、辅助色两到三个已经够用，颜色越多，页面的要点越模糊，做面包屑导航的页面时，先想读者带着什么问题进来，再确定版面怎么组织，停留更久。常见的问题是字号层级过多，四五种大小混在一起，读者分不清主次，专业感强。

图片加替代文字，兼顾无障碍与抓取，版面更透气。还有就是，字号与行距要一起调，这几秒里起作用的是标题是否说清、首页一屏是否有序，而不是配色多时髦，改起来也快。

收集几条真实反馈，比凭感觉调整更有效，扫读更快。改版时留存旧链接的跳转，读者不会因为找不到页面而离开，风格不走样。拿到文案时，滚动长度这一块要独立标出来。

面包屑导航：小屏怎么看

处理图文时，正文与背景的对比要够，浅灰配白在小屏上很难读，层级更清楚。多数人从同一屏离开，就回到那屏看文案，要点更突出。另外，做列表页时，按钮文字要前后对一次，不显拥挤。

调视觉时，看停留时间与滚动深度两个数据，小屏也清楚。顺带一提，加新页面时，滚动长度这一块要统一成一套，读起来顺。

错误提示写清怎么改，而不是只说输入有误，停留更久。同一页面内的链接样式统一，未访问与已访问状态建议做区分，要点更突出。此外，新增页面时对照已有的字号与配色。

至于面包屑导航的图片，建议统一按同一比例裁切，列表页看起来才整齐；比例混用会让版面显得杂乱，小屏也清楚。接着，处理长内容时，阅读顺序这一块要拉开层次。与此同时，常见的问题是信息平均用力：每块内容都想要位置，结果首页变成信息堆，用户反倒记不住要点，不显拥挤。

回过头看，图片比例还是得统一成一套。

顺带一提，想看更全的细节，可到设计知识栏目翻一翻。

无锡爱恩特信息科技有限公司的设计与前端团队，承接页面改版、样式规范整理与移动端适配。关于面包屑导航的排版问题，欢迎致电135-8507-6606沟通。