Navigation 导航
可以先理解为:帮助用户理解位置和去向
导航像建筑里的路标和楼层图。用户不只需要按钮能点,还需要知道自己在哪、下一步能去哪里、迷路了怎么回来。导航做不好,内容再好也会变成迷宫。
关键结构图
当前相关远处弱强
顶部主导航、左侧局部导航、页面上方面包屑和列表分页被连成一张路径图。
What
Navigation 是帮助用户理解当前位置、可去哪里、如何返回的界面路径系统。
Navigation 导航是产品中组织页面、功能、分类和流程路径的系统。它包括主导航、侧边栏、面包屑、分页、tabs、返回入口和局部路径。它的边界是帮助用户移动和定位,不是把所有链接都堆到页面上。
StructureNavigation = 当前位置 + 可选路径 + 返回线索 + 信息架构
When
当产品有多个页面、多个分类、深层内容、列表结果或复杂任务流程时,需要明确导航结构。
How
先画出信息架构,确认用户最常走的路径。再决定哪些路径属于全局导航,哪些属于局部导航,哪些只在特定流程里出现。当前位置和返回路径要稳定。
Examples
知识库用主导航区分指南、API、案例和更新,再用侧边栏展示章节。用户能知道自己正在读哪一层。
后台系统里如果每个页面都有不同入口和返回方式,用户很难建立地图感,操作也容易出错。
来源
类型:信息架构 / 设计系统实践
事实线:网站和应用通常通过主导航、局部导航和层级路径帮助用户理解信息结构和当前位置。
依据:信息架构实践、WAI-ARIA navigation landmark、USWDS 和 Atlassian 等设计系统导航模式。
边界:适合组织页面和任务路径;不能替代清楚内容标题和页面结构。
常见误读:不要把导航理解成顶部菜单。搜索、分页、面包屑和 tabs 也都是导航的一部分。