拒绝乏味留白！B端顶栏组件设计思路拆解

一、全文速览图

前面分享了 B端界面的起手式 —— 全局框架搭建 和 B端侧边导航栏设计思路拆解

那么顶部栏相对侧边导航来说比较“不起眼”，通常是因为顶部导航中包含的内容较少，所以也不太被重视。而因为内容太少，又容易导致留白太多，拖累页面的整体视觉效果。

所以今天的主题就是围绕顶部栏，来分享如何优化它的设计。

二、B端顶部栏的内容分析

顶部栏的主要作用通常包含两个，呈现全局基础信息和罗列全局交互操作。

全局基础信息主要是展示一些关键信息内容，比如品牌信息、当前时间、面包屑、页面标题、系统信息、欢迎语句等等，通常放在顶栏的左侧，符合用户的浏览顺序（从左往右）。

全局交互操作则是一些级别较高在任何页面都可以操作的选项，比如用户设置、系统通知、当日签到、全局搜索、客服咨询等等，通常放在顶栏的右侧，符合用户的操作习惯（右侧操作）。

顶栏左侧除了包含信息外，还有一种特殊的情况，就是置入一级导航。一般应用于导航层级多，且一级导航选项较少的场景。

如果内容、信息、可交互要素太多，顶栏也可以使用多行布局。比如最常见的就是新增页面标签栏，或者将导航、面包屑、页面标题独立成新一行设计。

虽然了解了顶栏可以置入的内容有哪些，但具体怎么设计还是要结合项目实际情况考量，尤其是要结合导航栏实现内容密度的统一，不能为了复杂而复杂，导致左右失衡。

三、B端顶部栏的设计方法

顶部栏作为全局框架组件的一部分，它的设计就不是孤立的，而是和整体布局有很大的关系。所以下面结合全局框架，来具体分享顶部栏设计的思路。

首先需要确定交叉区域的归属，即左上角 LOGO 区域是归属于顶部栏还是左侧导航栏，它决定了两个组件的视觉权重高低。

如果要填充深色背景区分两个组件，那么也只能填充在 LOGO 归属这栏，因为它会被用户默认识别成层级更高的组件，如果另一个组件使用深色被突出，就会显得突兀不够和谐。

同时，如果在全局框架设计中希望重点突出的是内容区域，那么也可以不分割顶部栏和侧边导航，直接将它们连通。

接着就是顶栏内部元素的具体排版设计逻辑了，前面说过顶栏内部采用左右分布的布局形式，而左右对齐线要和下方的内容区域保持一致。

然后根据对齐线置入元素，元素间可以设置统一的间距，如果元素较多也可以使用分割线做隔断，确保左右内容分布的均衡。

在顶栏内部，不要添加居中对齐的元素，尤其是搜索框，这会让这个元素处于顶部中心的位置过于“醒目”，且会让整个顶栏的布局过于分散。

布局层面能做的也就这些，如果还要添加视觉细节，可以使用的方法就非常有限了。因为页面左上角是 LOGO 元素，限制了左侧元素的发挥空间，只能将突出的视觉细节放在右侧。而顶栏右侧除了用户头像外，还能丰富样式的对象主要就是图标和按钮。

能突出的图标肯定不是消息、设置之类的基础图标，而是类似会员、AI智能体、签到等具有特殊定位的对象。按钮同理，如果有比较特殊的定位就可以添加更复杂的样式。

顶部栏设计要掌握的设计知识也就这些了，最后再提醒一下，顶栏的设计一定要考虑周围的环境，结合侧边导航和内容区域的信息密度和样式复杂度做调整，即不能太“空”也不能太“满”。

结尾

B 端界面全局框架的知识分享先做到这里，只要熟练掌握这些知识点，就可以在不同项目中做出完全不同的框架和布局，让作品集看起来更完整和丰富。

后面我们会结合一个简单的改版案例，来对前面分享的知识进行实操和总结，帮助大家更好的理解。

我们下篇再贱~

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