导航与布局——从信息架构到页面呈现

为什么讨论导航?

B端产品的信息架构,一般就是树状图,比较类似,都是一级有哪些,对应二级有哪些。最底层的内容,则基本是表格和图表,样式上也比较相似。

那么同样的信息架构,相似的表单,为何在不同设计师手里,最终的呈现样式不同?很关键的一点就是导航的样式,导航影响着整个页面的布局。

导航——就像逛超市时的指示牌一样,告诉用户身处何处,可以去哪里。而B端中后台产品的特点是功能复杂,内容繁多,因此,B端设计有两个主要关注点:

1.沉浸式体验,保证用户能在心流中完成复杂任务而不被打断。

2.在复杂的内容中突出层级和重点

Q1:一级导航,选择顶部还是侧栏?

Ant design里对两者有较好的说明,如下图:

写的比较明确,这里补充一下个人的想法。

1.为什么顶部导航适合门户网站和前台应用?只是因为信息层级简单明了么?

实际上,采用顶部导航,意味着下方的内容区域可以随意形式,非常灵活,视觉设计发挥空间大。不同tab下的页面可以两端撑满,也可以不撑满。例如teambition:

可以看到。如果主导航采用侧栏,则整个页面必须左右撑满,在文件库这个内容比较少的页面,两侧撑满会显得很空,数据水平间隔过大也不利于用户快速阅读。

2.顶部导航和侧边导航在层级上不是平等的

由于全局功能(一般在顶部右侧)的原因,顶部栏必定全局存在,且给用户的感受就是最高一层的。

因此顶部导航可以直接衔接侧边导航,但是侧边导航的次级不能采用顶部导航。

另外,侧边导航在视觉上更有关联性,且适合分类,因此有关联性的内容应采用侧边导航。

3.大型中台系统的导航

大型中台系统就相当于数个小型中后台系统的合集,因此相当于在小型后台的页面设计上再增加一级全局导航,(可以称为0级导航)

而由于小型中后台页面以侧边导航为主,因此大型中后台的导航如下:

阿里云 0级导航隐藏为icon,鼠标hover会悬浮显示侧边导航,内容自定义

百度云: 0级导航常驻侧边导航,但一般收起变窄,内容自定义

腾讯云: 0级导航隐藏在顶部,点击展开。同时顶部导航支持自定义外显

华为云: 0级导航隐藏在顶部导航,点击展开可看到最近使用,无自定义。

个人认为腾讯云和阿里云的形式比较好,百度的仅靠icon识别困难,虽然有tooltip提示但很慢。

Q2:详情页(一般会新开一个内容页),是否显示一级导航

下方图1为思必驰截图,进入到产品详情页不显示外层的一级导航,图2为个人魔改版,仍显示外层一级导航。

区别并不是很大,图1的沉浸体验更好一些,图2的切换更灵活。

个人倾向于图1,即跳转详情页后不显示一级导航,因为用户使用中后台系统时,完成复杂任务为基本型需求,灵活跳转属于期望型需求,因此保证专注任务的沉浸感高于切换任务的灵活性。另外,让用户依靠返回按钮逐层回上级的过程,也便于让用户在总览页二次感知到详情页的改动。

Q3:内容区域的设计

去除了主导航,剩下的就是内容区域,一般包括以下几项:页头、Tabs(作为次级导航)、具体内容。

1.页头

下图中红框处即为页头,可以看出和侧边导航在信息上是重复的,我之前也考虑过页头存在的意义是什么?

个人认为页头的作用有这两个:一方面是加强沉浸感,用户可以聚焦在右侧内容区,不用再关注左侧导航,另一方面是便于拓展,可以附加说明文字,全局按钮等等。

2.Tabs

tabs作为次级导航,有以下4种类型。页面为多层架构时,往往需要混用,标准线条型和卡片型一般作为主导航,文字型和胶囊型一般为次级导航,不单独使用。

另外,多层tab堆叠时,不推荐将线条型与文字型混用,如下图。视觉上差异性不大,难以将信息层级拉开。

3.具体内容

具体内容一般就是筛选条件和表单了,不多阐述。

4.实际运用

此次对导航进行思考也是因为正在考虑工作中的B端界面优化,下面分别是旧版和尝试的新版布局。

感谢阅读,希望能抛砖引玉,收到不同意见哈~

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章