超详细!总监出品的B端设计规范指南(六):导航栏

释放双眼,带上耳机,听听看~!
本文对 B 端一些常见的导航组件进行解析,协助我们更好掌握导航细节规划。

从这篇开端,咱们就要对 B 端一些常见的复杂组件进行解析了。首先要说的是导航栏,尽管前面控件规划部分讲了一些,但明显它包括的细节远不止那么一点。

B端导航栏的知道

B 端导航栏,是 B 端项目最重要的模块(没有之一)。一个优秀的 B 端导航栏,能够清晰地衔接项目的一切功用、模块,让访问者高效的在模块间络绎。

通常,在进行详细页面规划的时候,咱们第一个规划的模块也是导航。在干流的页面结构中,导航分为两种,顶部导航和侧边导航。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

有许多 B 端产品官网运用的顶部导航,并不能作为办理系统导航,只是是一般网站导航。比方阿里云或腾讯云官网上方的导航。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

这类导航首要运用在企业官网中,经过比较密布的信息密度,将提供的产品或服务全部罗列出来。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

而侧边栏尽管能够做不少花哨的款式,但信息密度明显无法和顶部导航栏相提并论。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

顶部导航的特征需求鼠标悬浮打开分类面板,经过收纳大量下级菜单,来提高用户的 “检索” 功率。而用户在这些菜单间跳转切换的频率不会太高。

侧边栏导航的特征则是更直接,包括的菜单数量不会太多,用来提高用户的 “跳转” 功率。满意用户高频的模块跳转切换需求。

侧边栏的规划也包括两种形式,细栏和宽栏。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

细栏首要杰出图标,运用在模块数量不多的情况,也为内容区域腾更多控件出来。比方 Teambition、百度云等产品。

宽栏则是比较安全的规划形式,兼容性较好,不管是模块数量多还少都能用。但相应的,它会一定程度上占用控件削减内容区域面积。

在一般项目中,只要用好侧边栏的规划即可。顶部导航在办理界面中的运用多为混合场景,用来切换比侧边栏更高档的分类页面。比方腾讯云内部页面中,切换业务模块运用顶部导航的打开面板,业务下级模块则在侧边栏。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

B端导航的规划

导航栏规划,必定要满意 “导航” 这个中心目标。组件的款式、交互有必要为功用服务,但许多新手只考虑款式。

通常情况下,导航是反映项目功用模块的进口,产品中包括多少模块、子模块,就会有序的布置到导航里边。那么问题来了,项目究竟包括了多少模块和子模块?哪些是要放进导航里的?

在之前思想导图运用的分享中,有一个非常重要的产品输出类型,叫 —— 功用结构地图。解说了不同功用层级的结构和从属关系,以及项目中总共包括了哪些页面。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

它是拟定导航内容的首要依据,但并不代表里边出现的每一个节点页面都要放进导航中。

规划师打开导航规划前,也需求运用思想导图工具,再把需求展现出来的内容和结构收拾一遍。否则,面对模块数量较多,层级超越两级的导航就必定手忙脚乱。

比方腾讯云直播和短书的侧边栏层级结构:

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

这么看起来很清晰对吧?但留给规划的坑是,并不是每个层级,它们都能够点击,都具有跳转功用。咱们来看看实践的完成的作用。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

也便是说,在导航栏的导航选项中,并不是一切的选项都是用来跳转的,它们是用来辅佐区别内容和用来打开的。

所以,咱们要在思想导图阶段,根据实践场景的需求,对每一个导航信息点进行标示,清晰它们在后续规划中包括的作用。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

一起,还有一个需求注意的工作,便是是否为导航栏添加呼应式适配。即窄屏的情况下,通常是将导航栏缩短,只保存图标的计划。

把这些内容定好,就能够进入咱们详细的规划环节了。

导航栏的规划落地

收拾好上方的内容层级,到详细规划步骤里,首先要做的,便是拟定出一个能满意层级显现和操作的交互结构出来。

再收拾一遍,侧边栏的内容包括:

  • 不可点击的分类标题
  • 能够打开的一级分类
  • 能够完成跳转的一级分类
  • 能够点击的二级分类

而可交互的元素,明显是有对应交互状况的,那么对应的交互状况就包括:

  • 鼠标悬浮一级菜单款式
  • 鼠标悬浮二级菜单款式
  • 选中一级分类,一级分类高亮
  • 打开一级并选中二级分类,二级分类高亮

那么,先用原型做个暗示,它的状况包括了默认、选中一级、选中二级三种情况:

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

在实践规划环节里,最难受的工作便是一级菜单有的用来打开,有的能够选中,怎样区别?而一二级菜单悬浮、选中是否要一致款式?怎样确保一致性?

假如要一致一二级菜单的选中款式,那么规划过程中,就要确保一二级菜单实践占用空间区域是一致的,间距也进行一致,才干合理添加悬浮和选中作用。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

假如不对一二级菜单一致悬浮和显现款式,区别展现,能够不一致菜单的实践区域和高度。可是,这样的导航要规划好更困难一点。假如不一致交互作用,那么就尽量确保其中一级悬浮和选中采取布景填充,另一级只是是文字款式变更。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

把要运用哪种计划确认下来,然后再去优化细节,添加对应的图标内容和优化字体、分割线等等。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

咱们在上面用的事例,逻辑层级是 3 级,可是有的项目中,包括的或许有 4 级、5 级,那么必定会呈现出更复杂的交互系统。

常见的做法,便是将侧边栏做成两列,一列是顶级菜单,一列是其它次级菜单,类似有赞的这种做法。层级越多带来的应战也就越大。

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

导航的规划,对细节调理并不只是是为了好看,而是提供更直观的交互和一致性。只是完成款式依旧是不够的,详细运用上还或许会碰到什么问题咱们要尽或许多进行思考。

比方:

  • 原规划中打开 1 级分类只能打开一个,敞开第二个就会封闭第一个,假如咱们改成打开不封闭会又什么区别呢?
  • 点击页面跳转以后,除了选中的二级菜单前面打开的还打开吗?
  • 高度超出一屏高以后怎样显现,假如滚动的话跳转后显现在哪里?

这样的问题,就留给我们自己思考了。

结束

导航的规划细节是很非必须的因素(尽管对整体款式很重要),重点是给出合理的信息展现和交互方法。假如导航不能协助用户快速、简练的进行页面的挑选和跳转,即使做的再好看也是一个失败的导航。

本次分享到这儿结束,咱们下篇再贱~

欢迎重视作者的微信公众号:「超人的电话亭」

超详细!总监出品的B端规划规范攻略(六):导航栏

超详细!总监出品的B端规划规范攻略(六):导航栏

给TA打赏
共{{data.count}}人
人已打赏
教程分享

Windows 11全新设计语言如何引领设计新趋势 ?(附源文件下载)

2021-9-13 17:26:47

教程分享

iPhone 13 即将发布,设计师最值得期待的是AR!

2021-9-13 17:29:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索