新知一下
海量新知
6 0 7 6 6 9 0

方法 | B端侧边导航

不加班小组 | 愿设计师们都能不加班 2021/11/28 13:39

 

 

做一些自己还欠缺的体系化的设计方法和模型学习。

在了解侧边导航之前,我们先看下B端的框架。框架上基本从上下布局、“T”型布局、“口”型布局这三个布局的基础上进行变形:

新知达人, 方法 | B端侧边导航

到内容层上后,就有以下几种布局方式:

新知达人, 方法 | B端侧边导航

B端的导航常见分为 顶部 侧边 两种,顶部在B端产品的企业网站导航比较多,在管理后台界面中常与侧边导航混合使用,来应对复杂场景。侧边导航相对而言就更直接,尤其是菜单数量少的,提高了用户高频的切换效率。

分类

B端-侧边导航

新知达人, 方法 | B端侧边导航

如图,侧边栏分为细栏和宽栏。

细栏: 模块数量不多,可突出图标,能够为内容区腾出更多空间。

宽栏: 不受模块数量限制,兼容性好,会占用一部分内容区的空间。

设计各注意点

表单-下拉菜单

#01

规划

在规划导航栏之前,我们都会先做思维导图来明确各功能模块及对应的二三级功能,分清楚各功能点是直接跳转还是仅仅展开,同时如果响应式还需考虑适配。

#02

侧边栏状态

新知达人, 方法 | B端侧边导航

如果要统一悬浮和显示的样式,设计时需保证一二级菜单占用空间一致,间距进行统一。但如果不统一,则保证一级和二级各自统一样式,背景填充仅做一个层级,另一层级配合做文字高亮处理。

当层级过多时,我们常用的方式是将侧边栏做成两列,同时交互上需要思考的也会更多,比如当菜单数量过多超出一屏时,我们需要对用户做隐藏内容的引导,或者在用户打开第二个模块时默认将之前展开的模块收起,即只能展开一个。

#03

样式

新知达人, 方法 | B端侧边导航

侧边栏比起界面里的其他组件,对整体的视觉影响更大,常见为了和右侧内容区做明显区分,会使用品牌色或其他耐看的色彩作为背景填充。

包含内容里除了功能模块,还会有logo、提醒、头像、企业信息等内容。

 

做一些细节积累和提醒,帮助设计更规范。

学习来源

《超详细!总监出品的B端设计规范指南(五):控件》

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

更多“侧边导航”相关内容

更多“侧边导航”相关内容

新知精选

更多新知精选