恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
导航与布局——从信息架构到页面呈现
0.0°
2019-12-24 原创文章 经验/观点 举报 4058 29 7 1

为什么讨论导航?

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端界面优化,下面分别是旧版和尝试的新版布局。旧版界面尝试性的新布局


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

Powered by Froala Editor

更新:2019-12-24

收藏

29人已收藏

  • 8

    作品

  • 18

    粉丝

  • 11

    关注

  • 用户体验可视化——用户体验地图
  • 如何选择评论的展现方式——上
  • 什么时候选择卡片式布局设计
  • 《颜色:从十六进制编码到人眼所见》
相关标签
B端设计中后台

    猜你喜欢

      2019-12-24 原创文章 经验/观点 举报 4058 29 7 1

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

      0.0°

      你确定要举报导航与布局——从信息架构到页面呈现

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年07月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      29
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录