从这篇开始,我们就要对 B 端一些常见的复杂组件进行解析了。首先要说的是导航栏,虽然前面控件设计部分讲了一些,但显然它包含的细节远不止那么一点。

B端导航栏的认识

B 端导航栏,是 B 端项目最重要的模块(没有之一)。一个优秀的 B 端导航栏,可以清晰地连接项目的所有功能、模块,让访问者高效的在模块间穿梭。

通常,在进行具体页面设计的时候,我们第一个设计的模块也是导航。在主流的页面框架中,导航分为两种,顶部导航和侧边导航。

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

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

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

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

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

而侧边栏虽然可以做不少花哨的样式,但信息密度显然无法和顶部导航栏相提并论。

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

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

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

侧边栏的设计也包含两种形式,细栏和宽栏。

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

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

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

在一般项目中,只要用好侧边栏的设计即可。顶部导航在管理界面中的应用多为混合场景,用来切换比侧边栏更高级的分类页面。比如腾讯云内部页面中,切换业务模块使用顶部导航的展开面板,业务下级模块则在侧边栏。

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

B端导航的规划

导航栏设计,必然要满足 “导航” 这个核心目标。组件的样式、交互必须为功能服务,但很多新手只考虑样式。

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

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

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

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

设计师展开导航设计前,也需要使用思维导图工具,再把需要展示出来的内容和结构梳理一遍。否则,面对模块数量较多,层级超过两级的导航就必然手忙脚乱。

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

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

这么看起来很清晰对吧?但留给设计的坑是,并不是每个层级,它们都可以点击,都具备跳转功能。我们来看看实际的实现的效果。

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

也就是说,在导航栏的导航选项中,并不是所有的选项都是用来跳转的,它们是用来辅助区分内容和用来展开的。

所以,我们要在思维导图阶段,根据实际场景的需要,对每一个导航信息点进行标注,明确它们在后续设计中包含的作用。

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

同时,还有一个需要注意的事情,就是是否为导航栏增加响应式适配。即窄屏的情况下,通常是将导航栏缩短,只保留图标的方案。

把这些内容定好,就可以进入我们具体的设计环节了。

导航栏的设计落地

整理好上方的内容层级,到具体设计步骤里,首先要做的,就是制定出一个能满足层级显示和操作的交互结构出来。

再整理一遍,侧边栏的内容包含:

  • 不可点击的分类标题
  • 可以展开的一级分类
  • 可以实现跳转的一级分类
  • 可以点击的二级分类

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

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

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

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

在实际设计环节里,最难受的事情就是一级菜单有的用来展开,有的可以选中,怎么区分?而一二级菜单悬浮、选中是否要统一样式?怎么保证一致性?

如果要统一一二级菜单的选中样式,那么设计过程中,就要保证一二级菜单实际占用空间区域是一致的,间距也进行统一,才能合理添加悬浮和选中效果。

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

如果不对一二级菜单统一悬浮和显示样式,区分展示,可以不统一菜单的实际区域和高度。但是,这样的导航要设计好更困难一点。如果不统一交互效果,那么就尽量保证其中一级悬浮和选中采取背景填充,另一级仅仅是文字样式变更。

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

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

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

我们在上面用的案例,逻辑层级是 3 级,但是有的项目中,包含的可能有 4 级、5 级,那么必然会呈现出更复杂的交互体系。

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

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

导航的设计,对细节调节并不仅仅是为了好看,而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的,具体使用上还可能会碰到什么问题我们要尽可能多进行思考。

比如:

  • 原设计中展开 1 级分类只能展开一个,开启第二个就会关闭第一个,如果我们改成展开不关闭会又什么区别呢?
  • 点击页面跳转以后,除了选中的二级菜单前面展开的还展开吗?
  • 高度超出一屏高以后怎么显示,如果滚动的话跳转后显示在哪里?

这样的问题,就留给大家自己思考了。

结尾

导航的设计细节是很次要的因素(虽然对整体样式很重要),重点是给出合理的信息展示和交互方法。如果导航不能帮助用户快速、简洁的进行页面的选择和跳转,即使做的再好看也是一个失败的导航。

本次分享到这里结束,我们下篇再贱~

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

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

点赞 17
收藏 121
继续阅读相关文章

发表评论 已发布 3

还可以输入 800 个字
 
 
载入中....
3 收藏