Skip to main content

Navigation 导航

导航用来让用户明确知晓当前所处产品中的位置,并方便快捷地带用户到 TA 想去的地方。


设计目标

  • 提供直观、清晰、易用的导航方式,帮助用户快速找到需要的入口;
  • 支持多级菜单和多种导航方式,如搜索等;
  • 支持快捷键操作。

设计策略

  • 根据用户场景和用户诉求,确定导航菜单的布局和功能分类;
  • 根据业务流程和用户操作习惯,设计菜单的交互方式和样式;
  • 根据用户对信息的分层需求,设置合适的菜单层级结构,保证信息的清晰度和可读性;
  • 根据用户对信息的分类需求,设置合适的菜单分类方式,使用户可以快速找到需要的操作入口。

设计方案

  • 通过常用功能和业务流程对菜单进行分类,设计简洁明了的导航菜单,避免用户在不同的菜单之间频繁切换;
  • 设计菜单的层级结构,设置合适的折叠和展开功能,以便于用户在需要时可以扩展或收缩菜单;
  • 通过合适的图标、文字和颜色的组合,让用户可以快速识别和理解菜单的内容;
  • 采用响应式设计,根据不同设备的分辨率和屏幕大小,调整导航菜单的布局和显示方式,以适应不同的用户需求;
  • 到达同一目的提供多个入口链接;提供访问内容的捷径,如相关链接;点击 logo 回到首页重新启动信息搜寻。

设计原则

易用性

导航菜单的设计应该符合用户的使用习惯和心理预期,以便用户能够快速、准确地找到所需要的功能。

一致性

导航菜单的设计应该保持一致性,避免不同的页面和模块出现不同的导航菜单设计,让用户感到混乱和困惑。

灵活性

为了满足不同用户的使用需求,导航菜单应该具有一定的灵活性和定制化能力,以便用户根据自己的需要进行调整。

明确性

导航菜单应该具有明确的层级结构和分类方式,以便于用户清晰理解和使用。

可循性

用户可定位到他们想要的信息。

技术考虑

  • 需要考虑不同的设备、屏幕大小和浏览器;
  • 需要使用可扩展的布局方式,支持不同的分辨率和设备。

组织架构

  • 按主题:例如产品提供的服务或内容分类,好处是能直接呈现站点的内容范围;
  • 按角色:例如管理员、运营、操作员;
  • 按任务:例如签约流程、业务运营、客户服务。

全局侧边导航

侧边导航体现网站的核心组织结构,也是页面中最主要的的导航。

何时使用
  • 建议菜单多于 6 项时使用;
  • 可以承载多个层级,但建议 1-3 个层级;
  • 企业级产品推荐使用侧栏导航,其可见性更好易于扫读,各菜单重要性受菜单排列顺序影响较小。

实用工具

通常放在网站的右上角,是一种习惯用法,用户习惯在这个位置找到这些内容。

内容通常包括:全局搜索、通知中心、网站帮助、客服信息、购物车、收藏夹、登录工具、语言切换。

个人设置

消息提醒

快捷操作

选择国家

页内导航

信息架构中较低层级的内容导航可以使用页内导航,如果页面需要分享给他人,需在在 url 添加定位标记。

页头

页头位于页面内容上方,主要作用是说明页面主题、页内信息导航、页面级内容操作。

树型菜单

页面内多层次、结构化的内容展示。

锚点

在页面卡片之间跳转,当瀑布流呈现的内容过长时使用。

回到顶部

点击可以快速回到页面顶部。

设计建议

  • 设计时应尽量保持浅、平、宽的信息架构层级;
  • 从用户的使用路径考虑导航,而非基于层级结构。

衡量指标

  • 用户操作时间和效率;
  • 用户满意度和反馈;
  • 错误率和重复率;
  • 界面流畅性和稳定性。

模式验证

验证导航系统的设计好坏可对其进行压力测试:像跳伞一样跳进网站里,验证导航系统的极限。

  • 忽略首页,随机直达网站某一页面;
  • 看用户是否能知道当前位置以及与网站其他部分的关系。在哪个网站的哪个部分?上一级网页是什么?
  • 是否知道这个网页会带你到哪里去?链接文字是否能说明去向?